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

<div class="row g-0"
     x-data="{
        openKey: '{{ $firstGroup }}',      // جروب واحد مفتوح
        activeChild: null,                  // لتعليم الساب-لينك الحالي
        go(id){
            const el = document.getElementById(id);
            if(el){ el.scrollIntoView({behavior:'smooth', block:'start'}); this.activeChild = id; }
        }
     }">


    <aside
        style="background-color:#fbfbfc"
        class="col-12 col-lg-3 border-end min-vh-100"
        x-data="{
        openKey: @entangle('openKey'),
        activeChild: @entangle('activeChild'),
        showMore: false,
        go(childKey, groupKey){
            this.openKey = groupKey
            this.activeChild = childKey
            this.$nextTick(() => {
                const el = document.getElementById(childKey)
                if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
            })
        }
    }"
    >
        <div class="p-3">
            <div class="d-flex flex-column gap-2 small">

                @foreach($nav as $key => $grp)
                    @php
                        $firstChild = $grp['children'][0] ?? null;
                        $idx = $loop->index;   // صفرية: 0,1,2,...
                    @endphp

                    {{-- اعرض أول 3 عناصر دايمًا، والباقي يظهر لو showMore = true --}}
                    <div class="border rounded bg-white"
                         x-show="{{ $idx }} < 3 || showMore" x-cloak>
                        <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;">
                                <i class="fa-solid"
                                   :class="openKey === '{{ $key }}' ? 'fa-arrow-down' : 'fa-arrow-right'"></i>
                            </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>

            {{-- زرار Show more / less يظهر فقط لو عدد الجروبات > 3 --}}
            @if(count($nav) > 3)
                <div class="mt-3">
                    <button type="button"
                            class="btn btn-outline-secondary w-100"
                            @click="showMore = !showMore">
                        <span x-show="!showMore"><i class="fa-solid fa-angles-down me-1"></i> Show more</span>
                        <span x-show="showMore"><i class="fa-solid fa-angles-up me-1"></i> Show less</span>
                    </button>
                </div>
            @endif
        </div>
    </aside>



    {{-- RIGHT: Content (All sections stacked) --}}
    <main class="col-12 col-lg-9 bg-white"
          x-data="{ openKey: @entangle('openKey'), activeChild: @entangle('activeChild') }">
        <div class="py-4 px-4">

            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            {{-- ================= BASIC INFO ================= --}}
            <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">
                    {{-- Row 1 --}}
                    <div class="col-md-6">
                        <label class="form-label">Full Name *</label>
                        <input class="form-control" wire:model.defer="basic.full_name">
                        @error('basic.full_name')
                        <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Email *</label>
                        <input type="email" class="form-control" wire:model.defer="basic.email">
                        @error('basic.email')
                        <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>

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

                    {{-- الحقول الخاصة فقط لغير المساعد --}}
                    @if(!$isAssistant)
                        <div class="col-md-6">
                            <label class="form-label">WhatsApp</label>
                            <input class="form-control" wire:model.defer="basic.whatsapp">
                            @error('basic.whatsapp')
                            <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Language *</label>
                            <select class="form-select" wire:model.defer="basic.language">
                                <option value="ar">Arabic</option>
                                <option value="en">English</option>
                            </select>
                            @error('basic.language')
                            <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Gender *</label>
                            <select class="form-select" wire:model.defer="basic.gender">
                                <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-12">
                            <label class="form-label">Address</label>
                            <input class="form-control" wire:model.defer="basic.address">
                        </div>
                    @endif
                </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>


            {{-- ================= MEDICAL (Doctor) ================= --}}
            @if($isDoctor)
                {{-- Specialities --}}
                <section id="medical-specialities" class="mb-5"
                         x-show="openKey==='medical' && (!activeChild || activeChild==='medical-specialities')" x-cloak>
                    <h4 class="fw-semibold mb-3">Medical Settings — Specialities</h4>
                    <div class="input-group mb-2">
                        <input class="form-control" placeholder="Type a speciality and press Enter"
                               list="specialityList"
                               wire:model.debounce.300ms="specialityInput"
                               wire:keydown.enter.prevent="addSpecialitySimple">
                        <datalist id="specialityList">
                            @foreach($specialityOptions as $opt)
                                <option value="{{ $opt }}"></option>
                            @endforeach
                        </datalist>
                        <button class="btn btn-primary" wire:click="addSpecialitySimple"><i
                                class="fa-solid fa-plus"></i></button>
                    </div>
                    @if(empty($medical['specialties']))
                        <div class="text-muted small">No specialities yet.</div>
                    @else
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($medical['specialties'] as $i => $spName)
                                <span
                                    class="badge bg-light text-dark d-flex align-items-center gap-1 px-2 py-1 border rounded-pill">
                                    <span>{{ $spName }}</span>
                                    <button class="btn btn-sm btn-link text-danger p-0 m-0"
                                            wire:click="removeSpeciality({{ $i }})">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </span>
                            @endforeach
                        </div>
                    @endif
                </section>

                {{-- Diagnoses --}}
                <section id="medical-diagnoses" class="mb-5"
                         x-show="openKey==='medical' && activeChild==='medical-diagnoses'" x-cloak>
                    <h4 class="fw-semibold mb-3">Predefined Diagnoses</h4>
                    <div class="input-group mb-2">
                        <input class="form-control" placeholder="Type a diagnosis and press Enter"
                               wire:model.debounce.300ms="diagnosisInput"
                               wire:keydown.enter.prevent="addDiagnosisSimple">
                        <button class="btn btn-primary" wire:click="addDiagnosisSimple"><i class="fa-solid fa-plus"></i>
                        </button>
                    </div>
                    @if(empty($medical['diagnoses']))
                        <div class="text-muted small">No diagnoses yet.</div>
                    @else
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($medical['diagnoses'] as $i => $diag)
                                <span
                                    class="badge bg-light text-dark d-flex align-items-center gap-1 px-2 py-1 border rounded-pill">
                                    <span>{{ $diag }}</span>
                                    <button class="btn btn-sm btn-link text-danger p-0 m-0"
                                            wire:click="removeDiagnosis({{ $i }})">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </span>
                            @endforeach
                        </div>
                    @endif
                </section>

                {{-- Analyses --}}
                <section id="medical-analyses" class="mb-5"
                         x-show="openKey==='medical' && activeChild==='medical-analyses'" x-cloak>
                    <h4 class="fw-semibold mb-3">Predefined Required Analyses</h4>
                    <div class="input-group mb-2">
                        <input class="form-control" placeholder="Type an analysis and press Enter"
                               wire:model.debounce.300ms="analysisInput"
                               wire:keydown.enter.prevent="addAnalysisSimple">
                        <button class="btn btn-primary" wire:click="addAnalysisSimple"><i class="fa-solid fa-plus"></i>
                        </button>
                    </div>
                    @if(empty($medical['analyses']))
                        <div class="text-muted small">No analyses yet.</div>
                    @else
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($medical['analyses'] as $i => $an)
                                <span
                                    class="badge bg-light text-dark d-flex align-items-center gap-1 px-2 py-1 border rounded-pill">
                                    <span>{{ $an }}</span>
                                    <button class="btn btn-sm btn-link text-danger p-0 m-0"
                                            wire:click="removeAnalysis({{ $i }})">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </span>
                            @endforeach
                        </div>
                    @endif
                </section>

                {{-- Prescriptions --}}
                <section id="medical-prescriptions" class="mb-5"
                         x-show="openKey==='medical' && activeChild==='medical-prescriptions'" x-cloak>
                    {{-- … --}}
                    <h4 class="fw-semibold mb-3">Predefined Prescription Items</h4>
                    <div class="mb-2">
                        <button class="btn btn-primary btn-sm" wire:click="addPrescription"><i
                                class="fa-solid fa-plus"></i></button>
                    </div>
                    <datalist id="medOptions">
                        @foreach($medOptions as $opt)
                            <option value="{{ $opt }}"></option>
                        @endforeach
                    </datalist>
                    @if(empty($medical['prescriptions']))
                        <div class="text-muted small">No items yet.</div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0">
                                <thead>
                                <tr>
                                    <th>Medicine</th>
                                    <th>Dosage</th>
                                    <th>Notes</th>
                                    <th>Conflicts</th>
                                    <th class="text-end"></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($medical['prescriptions'] as $pi => $row)
                                    <tr>
                                        <td style="min-width:220px;">
                                            <input class="form-control form-control-sm" list="medOptions"
                                                   wire:model.defer="medical.prescriptions.{{ $pi }}.name"
                                                   placeholder="e.g., Metformin">
                                        </td>
                                        <td style="min-width:120px;">
                                            <input class="form-control form-control-sm"
                                                   wire:model.defer="medical.prescriptions.{{ $pi }}.dosage"
                                                   placeholder="e.g., 500mg bid">
                                        </td>
                                        <td>
                                            <input autocomplete="new-conflict" class="form-control form-control-sm"
                                                   wire:model.defer="medical.prescriptions.{{ $pi }}.notes"
                                                   placeholder="Optional notes">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control form-control-sm"
                                                   wire:model.defer="medical.prescriptions.{{ $pi }}.conflicts"
                                                   placeholder="e.g., Avoid with X">
                                        </td>
                                        <td class="text-end">
                                            <button class="btn btn-outline-danger btn-sm"
                                                    wire:click="removePrescription({{ $pi }})">
                                                <i class="fa-regular fa-trash-can"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3 text-end">
                            <button class="btn btn-primary"
                                    wire:click="savePrescriptions"
                                    wire:loading.attr="disabled"
                                    wire:target="savePrescriptions">
    <span wire:loading.remove wire:target="savePrescriptions">
      <i class="fa-regular fa-floppy-disk me-1"></i> Save Prescriptions
    </span>
                                <span wire:loading wire:target="savePrescriptions">
      <i class="fa-solid fa-spinner fa-spin me-1"></i> Saving...
    </span>
                            </button>
                        </div>

                    @endif
                </section>

                {{-- General Services --}}
                <section id="medical-services" class="mb-5"
                         x-show="openKey==='medical' && activeChild==='medical-services'" x-cloak>
                    <h4 class="fw-semibold mb-3">General Services (Shared)</h4>
                    <div class="mb-2">
                        <button class="btn btn-primary btn-sm" wire:click="addGeneralServiceRow"><i
                                class="fa-solid fa-plus"></i></button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm align-middle mb-0">
                            <thead>
                            <tr>
                                <th style="width:40%">Service Name</th>
                                <th style="width:35%">Speciality</th>
                                <th style="width:15%">Price</th>
                                <th class="text-end"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($generalServices as $gi => $gs)
                                <tr>
                                    <td>
                                        <input class="form-control form-control-sm" placeholder="e.g., Consultation"
                                               wire:model.defer="generalServices.{{ $gi }}.name">
                                        @error("generalServices.$gi.name")
                                        <div class="text-danger small">{{ $message }}</div> @enderror
                                    </td>
                                    <td>
                                        <select class="form-select form-select-sm"
                                                wire:key="spec-sel-{{ $gi }}-{{ count($specialities) }}"
                                                wire:model="generalServices.{{ $gi }}.speciality_id">
                                            <option value="">— Select speciality —</option>
                                            @foreach($specialities as $sp)
                                                <option value="{{ $sp['id'] }}">{{ $sp['name'] }}</option>
                                            @endforeach
                                        </select>
                                        @error("generalServices.$gi.speciality_id")
                                        <div class="text-danger small">{{ $message }}</div> @enderror
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" class="form-control form-control-sm"
                                               wire:model.defer="generalServices.{{ $gi }}.price" placeholder="Price">
                                        @error("generalServices.$gi.price")
                                        <div class="text-danger small">{{ $message }}</div> @enderror
                                    </td>
                                    <td class="text-end">
                                        <button class="btn btn-outline-danger btn-sm"
                                                wire:click="removeGeneralServiceRow({{ $gi }})">
                                            <i class="fa-regular fa-trash-can"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-muted small p-3">No general services yet.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3 text-end">
                        <button class="btn btn-primary"
                                wire:click="saveServices"
                                wire:loading.attr="disabled"
                                wire:target="saveServices">
    <span wire:loading.remove wire:target="saveServices">
      <i class="fa-regular fa-floppy-disk me-1"></i> Save Services
    </span>
                            <span wire:loading wire:target="saveServices">
      <i class="fa-solid fa-spinner fa-spin me-1"></i> Saving...
    </span>
                        </button>
                    </div>

                </section>

                <section id="medical-rx-template" class="mb-5"
                         x-data="{ open:false, src:null,
                   preview(url){ this.src = url; this.open = true },
                   close(){ this.open = false; this.src = null } }"
                         x-show="openKey==='medical' && activeChild==='medical-rx-template'"
                         x-cloak>

                    <h4 class="fw-semibold mb-3">Medical Settings — Prescription Template</h4>

                    <div class="row g-3">
                        @foreach($rxTemplates as $tpl)
                            @php
                                // لو مفيش ملف blade، اعرض صفحة معاينة بديلة (اعملي route لها أو خليه أي static)
                                $src = $tpl['preview_url'] ?: url('/admin/prescription-templates/preview/_not_found');
                            @endphp
                            <div class="col-12 col-sm-6 col-lg-4">
                                <label
                                    class="d-block border rounded-3 h-100 p-2 template-card {{ $selectedRxTemplateId === $tpl['id'] ? 'template-card--active' : '' }}">

                                    {{-- ⬅️ استبدال هذا السطر فقط --}}
                                    <div class="preview-thumb mb-2"
                                         title="Click to enlarge"
                                         @click.stop.prevent="preview(@js($src))">   {{-- ← @js مهمة عشان أي رموز بالـURL --}}
                                        <iframe src="{{ $src }}" loading="lazy" aria-label="Template preview"
                                                sandbox></iframe>
                                    </div>


                                    <div class="d-flex align-items-start justify-content-between">
                                        <div>
                                            <div class="fw-semibold">{{ $tpl['title'] }}</div>
                                            @if(!empty($tpl['is_default']))
                                                <div class="badge bg-light text-dark mt-1">Default</div>
                                            @endif
                                        </div>
                                        <input type="radio" class="form-check-input mt-1"
                                               wire:model="selectedRxTemplateId" value="{{ $tpl['id'] }}">
                                    </div>
                                </label>
                            </div>
                        @endforeach
                    </div>

                    {{-- Lightbox --}}
                    <div class="rx-lightbox" wire:ignore
                         x-show="open" x-transition.opacity
                         @keydown.escape.window="close" @click.self="close">
                        <button type="button" class="btn btn-light btn-sm rx-close" @click="close">Close</button>
                        <iframe :src="src" sandbox></iframe>
                    </div>


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

                    <script>
                        document.addEventListener('alpine:init', () => {
                            Alpine.data('rxPicker', () => ({
                                open: false, src: null,
                                preview(url) {
                                    this.src = url;
                                    this.open = true
                                },
                                close() {
                                    this.open = false;
                                    this.src = null
                                },
                            }))
                        })
                    </script>

                </section>

            @endif

            {{-- ================= CLINICS (placeholder shortcut) ================= --}}
            <section id="clinic-overview" class="my-5" x-show="openKey==='clinics'" x-cloak>
                <h4 class="fw-semibold mb-2">Clinics</h4>
                <div class="alert alert-info">
                    Clinics, Assistants, and clinic-specific services are managed in the Clinics module.
                    <div class="mt-2">
                        <a href="{{route("assistant.clinic")}}" class="btn btn-outline-primary btn-sm">
                            <i class="fa-solid fa-arrow-up-right-from-square me-1"></i> Open Clinics Manager
                        </a>
                    </div>
                </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>

            {{-- ================= ADVERTISING ================= --}}
            <section id="adv-profile" class="my-5"
                     x-show="openKey==='advertising' && (!activeChild || activeChild==='adv-profile')" x-cloak>
                <h4 class="fw-semibold mb-2">Advertising — Profile</h4>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Title</label>
                        <input class="form-control" wire:model.defer="ads.title"
                               placeholder="e.g., Consultant Cardiologist">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Education</label>
                        <textarea class="form-control" rows="3" wire:model.defer="ads.education"></textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Certificates</label>
                        <textarea class="form-control" rows="3" wire:model.defer="ads.certificates"></textarea>
                    </div>
                </div>
            </section>

            <section id="adv-media" class="mb-5"
                     x-show="openKey==='advertising' && activeChild==='adv-media'" x-cloak>
                <h5 class="fw-semibold mb-2">Advertising — Media</h5>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Images (URLs, comma separated)</label>
                        <textarea class="form-control" rows="2" wire:model.defer="ads.images"></textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Articles (URLs)</label>
                        <textarea class="form-control" rows="2" wire:model.defer="ads.articles"></textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Videos (URLs)</label>
                        <textarea class="form-control" rows="2" wire:model.defer="ads.videos"></textarea>
                    </div>
                </div>
            </section>

            <section id="adv-templates" class="mb-5"
                     x-show="openKey==='advertising' && activeChild==='adv-templates'" x-cloak>
                <h5 class="fw-semibold mb-2">Advertising — Templates</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Website Template</label>
                        <select class="form-select" wire:model.defer="ads.website_template">
                            <option value="">— Choose —</option>
                            <option value="clean">Clean</option>
                            <option value="classic">Classic</option>
                            <option value="modern">Modern</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Prescription Template</label>
                        <select class="form-select" wire:model.defer="ads.rx_template">
                            <option value="">— Choose —</option>
                            <option value="rx-a">Template A</option>
                            <option value="rx-b">Template B</option>
                            <option value="rx-c">Template C</option>
                        </select>
                    </div>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary" wire:click="saveAdvertising">
                        <i class="fa-regular fa-floppy-disk me-1"></i> Save
                    </button>
                </div>
            </section>

            {{-- ================= TECHNICAL ================= --}}
            <section id="tech-dashboard" class="my-5" x-show="openKey==='technical'" x-cloak>
                <h4 class="fw-semibold mb-3">Technical Settings</h4>
                <div class="row g-3">
                    @foreach($technical['widgets'] as $k => $v)
                        <div class="col-md-4 form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="w-{{ $k }}"
                                   wire:model.defer="technical.widgets.{{ $k }}">
                            <label class="form-check-label"
                                   for="w-{{ $k }}">{{ ucwords(str_replace('_',' ', $k)) }}</label>
                        </div>
                    @endforeach
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary" wire:click="saveTechnical">
                        <i class="fa-regular fa-floppy-disk me-1"></i> Save
                    </button>
                </div>
            </section>

            {{-- ================= ADMINISTRATIVE ================= --}}
            <section id="admin-privileges" class="my-5" x-show="openKey==='administrative'" x-cloak>
                <h4 class="fw-semibold mb-3">Administrative Settings</h4>
                <div class="alert alert-info small">
                    Define assistants’ privileges here. (UI ready — persistence will be wired to DB later.)
                </div>
                @livewire('client.setting.admin.admin-roles', ['doctorId' => $doctorId], key('admin-roles-'.$doctorId))

            </section>

            {{-- ================= SECURITY ================= --}}
            <section id="security-password" class="my-5" x-show="openKey==='security'" x-cloak>
                <h4 class="fw-semibold mb-3">Security</h4>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">New password</label>
                        <input type="password" class="form-control" wire:model.defer="new_password">
                        @error('new_password')
                        <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Confirm password</label>
                        <input type="password" class="form-control" wire:model.defer="new_password_confirmation">
                    </div>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary" wire:click="savePassword">
                        <i class="fa-regular fa-floppy-disk me-1"></i> Save
                    </button>
                </div>
            </section>

            {{-- ================= PRIVACY (Patient) ================= --}}
            <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>


                {{-- ================= ADD-ONS (Dynamic) ================= --}}
                @if($isDoctor && !empty($addonSubscriptions) && $addonSubscriptions->count())
                    @foreach($addonSubscriptions as $sub)
                        @php
                            $slug     = trim((string)($sub->addon->slug ?? ('addon-'.$sub->addon_id)));
                            $groupKey = 'addon:' . Str::slug($slug, '-');   // ← مفتاح الجروب في الـ nav
                            $childKey = 'addon-' . Str::slug($slug, '-');   // ← ID للـ section + child الوحيد
                            $name     = $sub->addon->name ?? 'Addon';

                            $active   = method_exists($sub,'isActive') ? $sub->isActive() : (($sub->status ?? false) && optional($sub->expires_at)->isFuture());
                            $badgeClr = $sub->status_badge_color ?? ($active ? 'success' : 'warning');
                            $badgeLbl = $sub->status_label ?? ($active ? 'Active' : 'Expired');
                        @endphp

                        <section id="{{ $childKey }}" class="my-5"
                                 x-show="openKey==='{{ $groupKey }}' && (!activeChild || activeChild==='{{ $childKey }}')" x-cloak>
                            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-2">
                                <h4 class="fw-semibold mb-0">{{ $name }}</h4>
                                <span class="badge text-bg-{{ $badgeClr }}">{{ $badgeLbl }}</span>
                            </div>

                            <div class="text-muted small mb-3">
                                <i class="fa-regular fa-calendar me-1"></i>
                                {{ optional($sub->starts_at)->format('d M Y') }} → {{ optional($sub->expires_at)->format('d M Y') }}
                                @if(property_exists($sub, 'days_left') || isset($sub->days_left))
                                    @if($sub->days_left > 0)
                                        <span class="ms-2 text-success">({{ $sub->days_left }} days left)</span>
                                    @else
                                        <span class="ms-2 text-danger">(expired)</span>
                                    @endif
                                @endif
                            </div>

                            {{-- تحميل الكومبوننت الخاص بالـ Add-on ديناميكياً --}}
                            @php
                                $comp = $this->addonComponentFromSlug($sub->addon->slug ?? null);
                            @endphp
                            @if($comp)
                                @livewire($comp, ['subscription' => $sub, 'doctorId' => $doctorId], key('addon-'.$sub->id))
                            @else
                                <div class="alert alert-light border rounded-3">
                                    <div class="fw-semibold mb-1">No specific settings for this add-on yet.</div>
                                    <div class="text-muted small">You can add controls here later based on the add-on features.</div>
                                </div>
                            @endif

                            {{-- أزرار عامة --}}
                            <div class="mt-3 d-flex gap-2">
                                <button class="btn btn-outline-secondary btn-sm">Billing</button>
                                @if($active)
                                    <button class="btn btn-info btn-sm text-white">Upgrade</button>
                                @else
                                    <button class="btn btn-primary btn-sm">Renew</button>
                                @endif
                            </div>
                        </section>
                    @endforeach

                @endif
        </div>
    </main>
</div>