@php $firstGroup = array_key_first($nav); @endphp

<div class="row g-0"
     x-data="{
        openKey: @entangle('openKey'),
        activeChild: @entangle('activeChild'),
        go(childKey, groupKey){
            this.openKey = groupKey
            this.activeChild = childKey
            this.$nextTick(() => {
                const el = document.getElementById(childKey)
                if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
            })
        }
     }">

    {{-- LEFT: Sidebar --}}
    <aside class="col-12 col-lg-3 border-end min-vh-100" style="background-color:#fbfbfc">
        <div class="p-3">
            <div class="d-flex flex-column gap-2 small">
                @foreach($nav as $key => $grp)
                    @php $firstChild = $grp['children'][0] ?? null; @endphp
                    <div class="border rounded bg-white">
                        <button type="button"
                                class="btn w-100 text-start px-3 py-2 d-flex align-items-center justify-content-between"
                                :class="openKey === '{{ $key }}' ? 'fw-semibold' : ''"
                                @click="openKey === '{{ $key }}'
                                        ? (openKey = null)
                                        : (openKey = '{{ $key }}', activeChild = '{{ $firstChild }}')"
                                :aria-expanded="openKey === '{{ $key }}'">
                            <span class="d-flex align-items-center gap-2">
                                <span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-purple text-white shadow-sm" style="width:24px;height:24px;">
                                    {{ $loop->iteration }}
                                </span>
                                <span class="fw-semibold">{{ $grp['label'] }}</span>
                            </span>
                            <i class="fa-solid" :class="openKey === '{{ $key }}' ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                        </button>

                        <div class="px-2 pb-2" x-show="openKey === '{{ $key }}'" x-cloak>
                            @foreach($grp['children'] as $child)
                                <button type="button"
                                        class="btn w-100 text-start px-3 py-2 bg-transparent d-flex align-items-center"
                                        :class="activeChild === '{{ $child }}' ? 'active-purple fw-semibold' : ''"
                                        @click="go('{{ $child }}','{{ $key }}')">
                                    <i class="fa-regular fa-circle-right me-2"></i>
                                    <span class="text-muted">{{ ucwords(str_replace(['-','_'],' ', $child)) }}</span>
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </aside>

    {{-- RIGHT: Content --}}
    <main class="col-12 col-lg-9 bg-white">
        <div class="py-4 px-4">
            @if (session('success'))
                <div class="alert alert-success shadow-sm">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger shadow-sm">{{ session('error') }}</div>
            @endif

            {{-- ============ BASIC (Patient Only) ============ --}}
            <section id="basic-profile" class="mb-5" x-show="openKey==='basic'" x-cloak>
                <h4 class="fw-semibold mb-3">Basic Info</h4>

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Full Name *</label>
                        <input class="form-control" wire:model.defer="basic.name" placeholder="e.g., Ahmed Ali">
                        @error('basic.name') <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Mobile *</label>
                        <input class="form-control" wire:model.defer="basic.phone" placeholder="01xxxxxxxxx">
                        @error('basic.phone') <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Gender</label>
                        <select class="form-select" wire:model.defer="basic.gender">
                            <option value="">— Select —</option>
                            <option value="m">Male</option>
                            <option value="f">Female</option>
                        </select>
                        @error('basic.gender') <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Age</label>
                        <input type="number" min="0" max="120" class="form-control" wire:model.defer="basic.age" placeholder="e.g., 32">
                        @error('basic.age') <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Blood Group</label>
                        <select class="form-select" wire:model.defer="basic.blood_group">
                            <option value="">— Select —</option>
                            @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bg)
                                <option value="{{ $bg }}">{{ $bg }}</option>
                            @endforeach
                        </select>
                        @error('basic.blood_group') <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-12">
                        <label class="form-label">Notes</label>
                        <textarea class="form-control" rows="3" wire:model.defer="basic.notes" placeholder="Optional notes..."></textarea>
                        @error('basic.notes') <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="mt-3">
                    <button class="btn btn-primary" wire:click="saveProfile">
                        <i class="fa-regular fa-floppy-disk me-1"></i> Save
                    </button>
                </div>
            </section>

            {{-- ============ NOTIFICATIONS ============ --}}
            <section id="notify-preferences" class="my-5" x-show="openKey==='notifications'" x-cloak>
                <h4 class="fw-semibold mb-3">Notification Settings</h4>
                <div class="row g-3">
                    <div class="col-md-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="n1" wire:model.defer="notify.email">
                        <label class="form-check-label" for="n1">Email</label>
                    </div>
                    <div class="col-md-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="n2" wire:model.defer="notify.sms">
                        <label class="form-check-label" for="n2">SMS</label>
                    </div>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary" wire:click="saveNotifications">
                        <i class="fa-regular fa-floppy-disk me-1"></i> Save
                    </button>
                </div>
            </section>

            {{-- ============ PRIVACY (Sharing with Doctors) ============ --}}
            <section id="privacy-sharing" class="my-5" x-show="openKey==='privacy'" x-cloak>
                <h4 class="fw-semibold mb-3">Sharing with Doctors</h4>
                <div class="row g-3">
                    <div class="col-md-4 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="sh1" wire:model.defer="sharing.share_basic">
                        <label class="form-check-label" for="sh1">Share basic info</label>
                    </div>
                    <div class="col-md-4 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="sh2" wire:model.defer="sharing.share_analyses">
                        <label class="form-check-label" for="sh2">Share analyses</label>
                    </div>
                    <div class="col-md-4 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="sh3" wire:model.defer="sharing.share_prescriptions">
                        <label class="form-check-label" for="sh3">Share prescriptions</label>
                    </div>
                    <div class="col-md-4 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="sh4" wire:model.defer="sharing.share_history">
                        <label class="form-check-label" for="sh4">Share visit history</label>
                    </div>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary" wire:click="saveSharing">
                        <i class="fa-regular fa-floppy-disk me-1"></i> Save
                    </button>
                </div>
            </section>

        </div>
    </main>
</div>