@extends('client.layout.master')

@section('page-title','Account Settings')
@section('title','Account Settings')

@section('content')
    <div class="container py-4 d-flex flex-column align-items-center gap-4">

        {{-- ========== PROFILE CARD ========== --}}
        <div class="card shadow-sm w-100" style="max-width: 980px;">
            <div class="card-header bg-white border-bottom-0">
                <h4 class="mb-0 fw-semibold">My Profile</h4>
            </div>

            <div class="p-4">
                <form method="POST" action="{{ route('assistant.profile.update') }}" enctype="multipart/form-data" class="mb-5">
                    @csrf
                    <h6 class="fw-semibold mb-3">Personal Info</h6>

                    <div class="d-flex align-items-center mb-4">
                        <img src="{{ asset('storage/' . ($user->image ?? 'client/v2/img/user.png')) }}"
                             class="rounded-circle me-3 border" width="72" height="72" alt="Avatar">

                        <div>
                            <label class="btn btn-sm btn-dark mb-1">
                                + Change Image <input type="file" name="image" hidden>
                            </label>
                            <button type="button" class="btn btn-sm btn-outline-secondary ms-2 mb-1">Remove</button>
                            <div><small class="text-muted">PNG/JPEG/GIF &lt; 2 MB</small></div>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small">First Name</label>
                            <input class="form-control form-control-sm" name="first_name"
                                   value="{{ explode(' ', $user->name)[0] }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">Last Name</label>
                            <input class="form-control form-control-sm" name="last_name"
                                   value="{{ explode(' ', $user->name)[1] ?? '' }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label small">Bio</label>
                            <textarea class="form-control form-control-sm" rows="3" name="notes">{{ $user->notes }}</textarea>
                        </div>
                    </div>

                    <button class="btn btn-primary btn-sm mt-4">Save Changes</button>
                </form>

                <h6 class="fw-semibold mb-3">Account Security</h6>
                <form method="POST" action="{{ route('assistant.profile.update') }}">
                    @csrf
                    <div class="row g-3 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label small">Email</label>
                            <input type="email" class="form-control form-control-sm" value="{{ $user->email }}">
                        </div>
                        <div class="col-md-6">
                            <button class="btn btn-outline-secondary btn-sm w-100">Change Email</button>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small">Password</label>
                            <input type="password" class="form-control form-control-sm" placeholder="New password">
                        </div>
                        <div class="col-md-6">
                            <button class="btn btn-outline-secondary btn-sm w-100">Change Password</button>
                        </div>
                    </div>

                    <div class="form-check form-switch mt-4">
                        <input class="form-check-input" type="checkbox" id="2step">
                        <label class="form-check-label small" for="2step">Enable 2-Step Verification</label>
                    </div>

                    <button class="btn btn-primary btn-sm mt-3">Save Security Settings</button>
                </form>
            </div>
        </div>
        @if(auth('client')->user()?->position == 'doctor')
        {{-- ========== SUBSCRIPTION CARD ========== --}}
        <div class="card shadow-sm w-100" style="max-width: 980px;">
            <div class="card-header bg-white border-bottom-0">
                <h4 class="mb-0 fw-semibold">Subscription</h4>
            </div>

            <div class="p-4">
                <h6 class="fw-semibold mb-3">Plan Overview</h6>

                <div class="border rounded p-3 mb-4">
                    <div class="d-flex justify-content-between flex-wrap">
                        <div>
                            <strong>Starter Plan</strong>
                            <span class="badge bg-success ms-2">Active</span><br>
                            <small class="text-muted">Next Billing: $1500&nbsp;/&nbsp;year</small>
                        </div>
                        <div class="mt-2 mt-md-0 d-flex gap-2">
                            <button class="btn btn-outline-secondary btn-sm">Cancel</button>
                            <button class="btn btn-info btn-sm text-white">Upgrade</button>
                        </div>
                    </div>

                    <div class="row text-muted small mt-3">
                        <div class="col-6 col-md-3">Start&nbsp;Date<br><strong>13 Oct 2023</strong></div>
                        <div class="col-6 col-md-3">Valid&nbsp;Until<br><strong>12 Nov 2024</strong></div>
                        <div class="col-6 col-md-3 mt-3 mt-md-0">Renew&nbsp;On<br><strong>12 Nov 2024</strong></div>
                        <div class="col-6 col-md-3 mt-3 mt-md-0">
                            <a href="#" class="text-decoration-none text-info">Billing Details ↗</a>
                        </div>
                    </div>
                </div>

                <h6 class="fw-semibold mb-2">Usage</h6>
                <p class="small text-muted mb-1">Remaining Credits – <strong>10 / 20</strong></p>
                <div class="progress mb-4" style="height:6px;">
                    <div class="progress-bar bg-warning" style="width:50%"></div>
                </div>

                <div class="border rounded p-3 mb-4 bg-light">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <strong>Buy More Credits</strong>
                            <span class="text-muted small">(1 credit = $100)</span>
                            <p class="mb-0 small text-muted">Add extra credits to your account anytime.</p>
                        </div>
                        <div class="d-flex align-items-center gap-2 mt-3 mt-md-0">
                            <div class="input-group input-group-sm" style="width:110px;">
                                <button class="btn btn-outline-secondary" type="button">-</button>
                                <input type="text" class="form-control text-center" value="1">
                                <button class="btn btn-outline-secondary" type="button">+</button>
                            </div>
                            <span class="small">Subtotal: <strong>$100</strong></span>
                            <button class="btn btn-primary btn-sm">Buy&nbsp;Now</button>
                        </div>
                    </div>
                </div>

                <h6 class="fw-semibold mb-2">Payment Method</h6>
                <div class="d-flex justify-content-between align-items-center border rounded p-3">
                <span class="text-muted small">
                    <i class="bi bi-credit-card me-1"></i> Visa **** **** **** 4036<br>
                    Expiry 10/2036
                </span>
                    <button class="btn btn-outline-secondary btn-sm">Update Card</button>
                </div>
            </div>
        </div>
        @endif

    </div>
@endsection