@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/art/services.css') }}">
@endpush

@section('content')
<div class="card art-card">
    <div class="art-header">
        <div class="art-header__title">
            <h1>MAM+NAP · ART Follow-Up</h1>
        </div>
    </div>

    <div class="card-body p-3 p-md-4">
        @php
            $hasPtConfig = $hasPtConfig ?? false;
            $isExisting   = $hasPtConfig;
            $patientInfo  = $data ?? [];
            $formatDisplayDate = function ($value) {
                if (blank($value)) {
                    return '';
                }
                try {
                    if ($value instanceof \Carbon\CarbonInterface) {
                        return $value->format('d-m-Y');
                    }
                    return \Illuminate\Support\Carbon::parse($value)->format('d-m-Y');
                } catch (\Throwable $e) {
                    return is_string($value) ? $value : '';
                }
            };
            $patientDob   = $formatDisplayDate($patientInfo['Date Of Birth'] ?? ($patientInfo['Date of Birth'] ?? ($patientInfo['Dob'] ?? null)));
            $autoAddressParts = array_filter([
                $patientInfo['Quarter'] ?? null,
                $patientInfo['Township'] ?? null,
                $patientInfo['Region'] ?? null,
            ]);
            $autoAddress = implode(', ', $autoAddressParts);
            $regDate = $formatDisplayDate($patientInfo['Reg Date'] ?? null);
            $visits      = $visits ?? collect();
            $v = $lastVisit;
            $patientAge = old('age', $patientInfo['Agey'] ?? $patientInfo['Age'] ?? $patientInfo['age'] ?? optional($lastVisit)->age);
            $patientAgeMonths = old('age_months', $patientInfo['Agem'] ?? null);
            if (!$patientAge && $patientDob) {
                try {
                    $dobCarbon = \Illuminate\Support\Carbon::parse($patientDob);
                    $patientAge = $dobCarbon->age;
                    $patientAgeMonths = $dobCarbon->diffInMonths(now()) % 12;
                } catch (\Throwable $e) {
                    $patientAge = null;
                }
            } elseif ($patientAge && !$patientAgeMonths && $patientDob) {
                try {
                    $patientAgeMonths = \Illuminate\Support\Carbon::parse($patientDob)->diffInMonths(now()) % 12;
                } catch (\Throwable $e) {
                    $patientAgeMonths = null;
                }
            }
        @endphp
        <div class="nav-toolbar d-flex flex-wrap mb-3">
            <div class="nav-toolbar-row d-flex flex-wrap align-items-center gap-2">
                <ul class="nav nav-pills art-tab-nav mb-0 flex-wrap" id="artTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="visit-tab" data-bs-toggle="tab" data-bs-target="#visit-pane" type="button" role="tab">
                            Visit & Patient
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="services-tab" data-bs-toggle="tab" data-bs-target="#services-pane" type="button" role="tab">
                            Services & OIs
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="vl-tab" data-bs-toggle="tab" data-bs-target="#vl-pane" type="button" role="tab">
                            Viral Load & Remarks
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="visits-tab" data-bs-toggle="tab" data-bs-target="#visits-pane" type="button" role="tab" @disabled(!($pid || $napId))>
                            Follow-up Visits
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="export-tab" data-bs-toggle="tab" data-bs-target="#export-pane" type="button" role="tab">
                            Export
                        </button>
                    </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="import-tab" data-bs-toggle="tab" data-bs-target="#import-pane" type="button" role="tab">
                        Import
                    </button>
                </li>
            </ul>

            <div class="nav-sync-wrap d-flex align-items-center justify-content-between gap-2 flex-grow-1">
                <div class="offline-toggle d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="pwaOfflineToggle">Offline-only: Off</button>
                </div>
                <div id="pwaSyncPanel" class="nav-sync collapse-sync" data-download-url="{{ route('api.art.sync.download') }}" data-upload-url="{{ route('api.art.sync.upload') }}">
                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <div class="nav-offline d-none" id="artOfflineNotice">
                            <strong>Offline mode:</strong>
                            <span data-offline-message>Entries are stored locally until you reconnect.</span>
                            Pending queue: <span class="fw-semibold" data-queued-count>0</span>
                        </div>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-primary" id="pwaSyncDownload">
                                Download
                            </button>
                            <button type="button" class="btn btn-outline-success" id="pwaSyncUpload">
                                Sync (<span id="pwaPendingCount">0</span>)
                            </button>
                            <button type="button" class="btn btn-outline-danger" id="pwaClearOffline">
                                Clear Offline Cache
                            </button>
                        </div>
                        <div class="progress flex-grow-1" style="height: 6px; display:none;" id="pwaSyncProgress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>
                        </div>
                        <div class="small text-muted" id="pwaSyncStatus"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="nav-search-inline mb-3">
        <form method="POST" action="{{ route('services.search') }}" class="art-search-row d-flex flex-wrap align-items-center gap-2">
                @csrf
                @php $identifierType = old('identifier_type', 'pid'); @endphp
                <div class="search-col search-col-2">
                    <select name="identifier_type" class="form-select form-select-sm" aria-label="Identifier type">
                        <option value="" disabled {{ $identifierType ? '' : 'selected' }}>Choose ID type</option>
                        <option value="nap_id" @selected($identifierType === 'nap_id')>NAP_ID</option>
                        <option value="pid" @selected($identifierType === 'pid')>General_ID</option>
                        <option value="fuchia_id" @selected($identifierType === 'fuchia_id')>Fuchia_ID</option>
                        <option value="id" @selected($identifierType === 'id')>Internal_ID</option>
                    </select>
                </div>
                <div class="search-col search-col-2">
                    <input type="text" name="identifier" class="form-control form-control-sm"
                           value="{{ old('identifier') }}" placeholder="Identifier">
                </div>
                <div class="search-col search-col-1">
                    <button class="btn btn-primary btn-sm w-100">
                        Search
                    </button>
                </div>
                <div class="search-col search-col-1">
                    <a href="{{ route('services.index') }}" class="btn btn-outline-secondary btn-sm w-100">
                        Clear
                    </a>
                </div>
            </form>
    </div>

        <div class="queue-manager alert alert-secondary">
            <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                <div class="fw-semibold mb-0">Pending Queue</div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary toggle-btn" id="pwaQueueToggle">Hide</button>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="pwaQueueRefresh">Refresh</button>
                    <button type="button" class="btn btn-sm btn-outline-danger" id="pwaQueueClear">Clear All</button>
                </div>
            </div>
            <div class="mt-2 small" id="pwaQueueList">Loading pending queue…</div>
        </div>

        <div class="mb-3">
            @if(session('success'))
                <div class="alert alert-success art-alert d-inline-flex align-items-center mb-0 py-1 px-3">
                    {{ session('success') }}
                </div>
            @endif
            @if(session('info_new_patient'))
                <div class="alert alert-warning art-alert mb-0 py-1 px-3 mt-2">
                    {{ session('info_new_patient') }}
                </div>
            @endif
            @if(session('info'))
                <div class="alert alert-info art-alert mb-0 py-1 px-3 mt-2">
                    {{ session('info') }}
                </div>
            @endif
            @if($errors->any() && !session('suppress_errors'))
                <div class="alert alert-danger art-alert mb-0 py-2 px-3 mt-2">
                    <div class="fw-semibold">Invalid data, please check fields:</div>
                    <ul class="mb-0 mt-1 ps-3">
                        @foreach($errors->all() as $message)
                            <li>{{ $message }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        @if(session('highlight_pid'))
            <div class="alert alert-info mt-2" role="alert">
                <strong>Saved!</strong> PID {{ session('highlight_pid') }}
                @if(session('highlight_name'))
                    - {{ session('highlight_name') }}
                @endif
            </div>
        @endif
        @if(session('highlight_inner_id'))
            <div class="alert alert-primary mt-2" role="alert">
                <strong>Inner ID:</strong> {{ session('highlight_inner_id') }} — share this with data clerks for follow-up searches.
            </div>
        @endif

        <form method="POST" action="{{ route('services.save') }}" id="artFollowupForm" data-has-pid="{{ $hasPtConfig ? '1' : '0' }}">
            @csrf

            {{-- hidden base ids --}}
            <input type="hidden" name="config_id" value="{{ $configId }}">
            <input type="hidden" name="visit_id" value="{{ old('visit_id') }}">
            <input type="hidden" name="clinic_id" value="{{ Auth::user()->clinic ?? '' }}">
            <input type="hidden" name="action_scope" value="{{ old('action_scope', $isExisting ? 'visit' : 'patient') }}">
            <input type="hidden" name="patient_action" value="{{ old('patient_action', 'skip') }}">
            <input type="hidden" name="visit_action" value="{{ old('visit_action', $isExisting ? 'update' : 'create') }}">
            <input type="hidden" name="services_action" value="{{ old('services_action', $isExisting ? 'update' : 'create') }}">
            <input type="hidden" name="vl_action" value="{{ old('vl_action', $isExisting ? 'update' : 'create') }}">

            <div class="tab-content">

                {{-- TAB 1 --}}
                <div class="tab-pane fade show active tab-panel" id="visit-pane" role="tabpanel">
                    <div class="border rounded-3 p-3 p-md-4 mb-3 patient-info-panel">
                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                            <div>
                                <div class="fw-semibold text-uppercase small text-muted">Patient Demographics</div>
                            </div>
                        </div>
                        @if($pid && !$hasPtConfig)
                            <div class="alert alert-warning mb-3">
                                This patient was loaded from another database. Click <strong>Save Patient</strong> to store the demographics in MAM_NAP · PtConfigs before recording visits.
                            </div>
                        @endif
                        <div class="row g-3">
                            <div class="col-md-2">
                                <label class="form-label label-required">Patient Name</label>
                                <input type="text" name="patient_name" class="form-control @error('patient_name') is-invalid @enderror"
                                       value="{{ old('patient_name', $patientInfo['Name'] ?? '') }}">
                                @error('patient_name')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-4 col-md-2">
                                <label class="form-label">General ID (PID)</label>
                                <input type="number" name="pid" class="form-control @error('pid') is-invalid @enderror"
                                       value="{{ old('pid', $pid) }}" placeholder="Enter PID if known">
                                @error('pid')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-4 col-md-2">
                                <label class="form-label label-required">NAP ID</label>
                                <input type="text" name="nap_id" class="form-control @error('nap_id') is-invalid @enderror"
                                       value="{{ old('nap_id', $patientInfo['NAP_ID'] ?? '') }}">
                                @error('nap_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-4 col-md-2">
                                <label class="form-label">Fuchia ID</label>
                                <input type="text" name="fuchia_id" class="form-control @error('fuchia_id') is-invalid @enderror"
                                       value="{{ old('fuchia_id', $patientInfo['FuchiaID'] ?? '') }}">
                                @error('fuchia_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-2 col-md-2">
                                <label class="form-label">Phone</label>
                                <input type="text" name="patient_phone" class="form-control"
                                       value="{{ old('patient_phone', $patientInfo['Phone'] ?? '') }}">
                            </div>
                            <div class="col-sm-2 col-md-2">
                                <label class="form-label">Register Date</label>
                                <div class="date-holder">
                                    <input type="text" id="reg_date" name="reg_date" class="form-control date-input Gdate @error('reg_date') is-invalid @enderror" placeholder="dd-mm-yyyy"
                                           value="{{ old('reg_date', $regDate) }}">
                                    <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date" onclick="dateCalender()">
                                </div>
                                @error('reg_date')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-1 col-md-1">
                                <label class="form-label">Age (Years)</label>
                                <input type="number" name="age" class="form-control @error('age') is-invalid @enderror"
                                       value="{{ $patientAge ?? '' }}">
                                @error('age')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-1 col-md-1">
                                <label class="form-label">Age (Months)</label>
                                <input type="number" name="age_months" class="form-control @error('age_months') is-invalid @enderror"
                                       value="{{ $patientAgeMonths ?? '' }}">
                                @error('age_months')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-2 col-md-2">
                                <label class="form-label label-required">Date of Birth</label>
                                <div class="date-holder">
                                    <input type="text" id="patient_dob" name="patient_dob" class="form-control date-input Gdate @error('patient_dob') is-invalid @enderror" placeholder="dd-mm-yyyy"
                                           value="{{ old('patient_dob', $patientDob) }}">
                                    <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date" onclick="dateCalender()">
                                </div>
                                @error('patient_dob')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-2 col-md-2">
                                <label class="form-label label-required">Sex</label>
                                @php
                                    $oldGender = old('patient_gender');
                                    $selectedGender = ($oldGender !== null && $oldGender !== '')
                                        ? trim($oldGender)
                                        : trim($patientInfo['Gender'] ?? '');
                                    $selectedCompare = strtolower($selectedGender);
                                    $selectedReason = old('reason_of_ref', optional($v)->reason_of_ref);
                                @endphp
                                <select name="patient_gender" id="patient_gender" class="form-select @error('patient_gender') is-invalid @enderror">
                                    <option value="">--</option>
                                    @foreach(['Male','Female','Other'] as $genderLabel)
                                        @php
                                            $value = trim($genderLabel);
                                            $firstLetter = strtolower(substr($value, 0, 1));
                                            $valueCompare = strtolower($value);
                                            $isSelected = $selectedCompare === $valueCompare || $selectedCompare === $firstLetter;
                                        @endphp
                                        <option value="{{ $value }}" {{ $isSelected ? 'selected' : '' }}>
                                            {{ $value }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('patient_gender')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Address</label>
                                <input type="text" name="patient_address" class="form-control" autocomplete="off" spellcheck="false"
                                       value="{{ old('patient_address', $patientInfo['Address'] ?? ($autoAddress ?? '')) }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Township</label>
                                @php
                                    $receptionTownships = [
                                        'Insein','MingalarDon','Hmawbi','Hlegu','Taikkyi','Htantabin','Shwepyithar','Hlaingtharya',
                                        'Thingangyun','Yankin','South Okkalapa','North Okkalapa','Thaketa','Dawbon','Tamwe','Pazundaung',
                                        'Botahtaung','Dagon Myothit (South)','Dagon Myothit (North)','Dagon Myothit (East)',
                                        'Dagon Myothit (Seikkan)','Mingalartaungnyunt','Thanlyin','Kyauktan','Thongwa','Kayan','Twantay',
                                        'Kawhmu','Kungyangon','Dala','Seikgyikanaungto','Cocokyun','Kyauktada','Pabedan','Lanmadaw',
                                        'Latha','Ahlone','Kyeemyindaing','Sanchaung','Hlaing','Kamaryut','Mayangone','Dagon','Bahan','Seikkan'
                                    ];
                                    $selectedTownship = trim(old('patient_township', $patientInfo['Township'] ?? ''));
                                @endphp
                                @php
                                    if ($selectedTownship && !in_array($selectedTownship, $receptionTownships, true)) {
                                        array_unshift($receptionTownships, $selectedTownship);
                                    }
                                @endphp
                                <select name="patient_township" class="form-select @error('patient_township') is-invalid @enderror" id="patient_township_select">
                                    <option value="">Choose...............</option>
                                    @foreach($receptionTownships as $township)
                                        <option value="{{ $township }}" {{ $selectedTownship === $township ? 'selected' : '' }}>
                                            {{ $township }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('patient_township')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                @error('patient_gender')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                @error('patient_township')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2">
                                <label class="form-label label-required">Main Risk</label>
                                @php
                                    $mainRiskOptions = ['HS','MSM','SW','IDU','Blood Transfusion','Mother to child','Unknown'];
                                    $selectedRisk = old('patient_main_risk');
                                    if ($selectedRisk === null || $selectedRisk === '') {
                                        $selectedRisk = trim($patientInfo['Main Risk'] ?? '');
                                    }
                                    $selectedRisk = trim((string)$selectedRisk);
                                @endphp
                                <select name="patient_main_risk" class="form-select @error('patient_main_risk') is-invalid @enderror">
                                    <option value="">-- Select --</option>
                                    @php
                                        $riskCompare = strtolower($selectedRisk);
                                        $normalizedOptions = array_map(fn($val) => strtolower(trim($val)), $mainRiskOptions);
                                    @endphp
                                    @foreach($mainRiskOptions as $risk)
                                        @php $optionValue = trim($risk); @endphp
                                        <option value="{{ $optionValue }}" {{ ($riskCompare !== '' && $riskCompare === strtolower($optionValue)) ? 'selected' : '' }}>
                                            {{ $optionValue }}
                                        </option>
                                    @endforeach
                                    @if($riskCompare !== '' && !in_array($riskCompare, $normalizedOptions, true))
                                        <option value="{{ $selectedRisk }}" selected>{{ $selectedRisk }}</option>
                                    @endif
                                </select>
                                @error('patient_main_risk')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label">Notes</label>
                                <textarea name="patient_notes" rows="2" class="form-control">{{ old('patient_notes', $patientInfo['Notes'] ?? '') }}</textarea>
                            </div>
                        </div>
                        <div class="art-footer d-flex flex-wrap justify-content-end align-items-center gap-2 mt-3">
                            @if(!$isExisting)
                                <button type="submit" class="btn btn-success js-action-button js-patient-submit"
                                        name="form_action" value="create"
                                        data-target="patient" data-action="create">
                                    Save Patient
                                </button>
                            @else
                                <button type="submit" class="btn btn-primary js-action-button js-patient-submit"
                                        name="form_action" value="update"
                                        data-target="patient" data-action="update">
                                    Update Patient
                                </button>
                                <button type="submit" class="btn btn-outline-danger js-action-button"
                                        name="form_action" value="delete"
                                        data-target="patient" data-action="delete">
                                    Delete Patient
                                </button>
                            @endif
                        </div>
                    </div>

                    <div class="tab-panel">

                        <div class="row g-3">
                            <div class="col-sm-2 col-md-2">
                                <label class="form-label label-required">Visit Date</label>
                                <div class="date-holder">
                                    <input type="text" id="visit_date" name="visit_date" class="form-control date-input Gdate" placeholder="dd-mm-yyyy"
                                           value="{{ old('visit_date', $formatDisplayDate(optional($v)->visit_date) ?: now()->format('d-m-Y')) }}">
                                    <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date" onclick="dateCalender()">
                                </div>
                            </div>

                            <div class="col-sm-2 col-md-2">
                                <label class="form-label">ART Started Date</label>
                                <div class="date-holder">
                                    <input type="text" id="art_started_date" name="art_started_date" class="form-control date-input Gdate" placeholder="dd-mm-yyyy"
                                           value="{{ old('art_started_date', $formatDisplayDate(optional($v)->art_started_date)) }}">
                                    <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date" onclick="dateCalender()">
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-4">
                                <label class="form-label">ART Regime</label>
                                <input type="text" name="art_regime" class="form-control"
                                       value="{{ old('art_regime', optional($v)->art_regime) }}">
                            </div>

                            <div class="col-sm-4 col-md-2">
                                <label class="form-label">Regime changed this visit</label>
                                <div class="form-check">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        value="1"
                                        id="art_regime_changed"
                                        name="art_regime_changed"
                                        {{ old('art_regime_changed', optional($v)->art_regime_changed) ? 'checked' : '' }}
                                    >
                                    <label class="form-check-label" for="art_regime_changed">
                                        Yes
                                    </label>
                                </div>
                            </div>

                            <div class="col-sm-2 col-md-2">
                                <label class="form-label label-required">Patient Status</label>
                                @php $selectedStatus = old('patient_status', optional($v)->patient_status); @endphp
                                <select name="patient_status" class="form-select">
                                    <option value="">-- Select --</option>
                                    @foreach(['Stable','Unstable'] as $status)
                                        <option value="{{ $status }}" {{ $selectedStatus === $status ? 'selected' : '' }}>
                                            {{ $status }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                        </div> {{-- row --}}
                    </div>
                </div>

                {{-- TAB 2 --}}
                <div class="tab-pane fade tab-panel" id="services-pane" role="tabpanel">
                    @php
                        $serviceOptions = [
                            ['name' => 'fp_service', 'label' => 'Family Planning Service Provided'],
                            ['name' => 'sti_service', 'label' => 'STI Treatment Provided'],
                            ['name' => 'counseling_service', 'label' => 'Counseling Service'],
                            ['name' => 'hepc_tx', 'label' => 'HepC Tx'],
                        ];
                        $oiOptions = [
                            ['name' => 'oi_tb', 'label' => 'TB'],
                            ['name' => 'oi_mac', 'label' => 'MAC'],
                            ['name' => 'oi_crypto', 'label' => 'Crypto'],
                            ['name' => 'oi_cmv', 'label' => 'CMV'],
                            ['name' => 'oi_pcp', 'label' => 'PCP'],
                            ['name' => 'oi_toxo', 'label' => 'Toxo'],
                            ['name' => 'oi_penic', 'label' => 'Penic'],
                            ['name' => 'oi_pml', 'label' => 'PML'],
                            ['name' => 'oi_other', 'label' => 'Other'],
                        ];
                    @endphp
                    <div class="tab-panel services-compact mb-3">
                        <div class="fw-semibold text-uppercase small text-muted mb-2">Services Provided</div>
                        <div class="pill-grid mb-2 services-single-row">
                            @foreach($serviceOptions as $option)
                                <label class="pill-check" for="{{ $option['name'] }}">
                                    <input type="checkbox"
                                           id="{{ $option['name'] }}"
                                           name="{{ $option['name'] }}"
                                           @checked(old($option['name']))>
                                    <span>{{ $option['label'] }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="tab-panel services-compact">
                        <div class="fw-semibold text-uppercase small text-muted mb-2">Current OIs</div>
                        <div class="pill-grid mb-3">
                            @foreach($oiOptions as $option)
                                <label class="pill-check" for="{{ $option['name'] }}">
                                    <input type="checkbox"
                                           id="{{ $option['name'] }}"
                                           name="{{ $option['name'] }}"
                                           @checked(old($option['name']))>
                                    <span>{{ $option['label'] }}</span>
                                </label>
                            @endforeach
                        </div>

                        <label class="form-label text-uppercase small">Other OI (specify)</label>
                        <input type="text" name="oi_other_specify" class="form-control"
                               value="{{ old('oi_other_specify') }}">
                    </div>

                    <hr class="my-3">

                    <div class="referral-deck mt-4 tab-panel">
                        <div class="section-title">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M8 0a5.53 5.53 0 0 0-4.468 2.297 5.528 5.528 0 0 0-1.122 4.726A8.683 8.683 0 0 0 0 13.5 2.5 2.5 0 0 0 2.5 16h11a2.5 2.5 0 0 0 2.5-2.5c0-2.355-1.667-4.683-4.41-6.291a5.528 5.528 0 0 0-1.122-4.726A5.53 5.53 0 0 0 8 0Z"/>
                            </svg>
                            Follow-up & Referral
                        </div>
                        <div class="row g-3 align-items-end">
                            <div class="col-sm-4">
                                <label class="form-label label-required">Next Appointment Date</label>
                                <div class="date-holder">
                                    <input type="text" id="next_appointment_date" name="next_appointment_date" class="form-control date-input Gdate" placeholder="dd-mm-yyyy"
                                           value="{{ old('next_appointment_date', $formatDisplayDate(optional($v)->next_appointment_date) ?: now()->format('d-m-Y')) }}">
                                    <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date" onclick="dateCalender()">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="pill-grid mt-4 pt-1">
                                    <label class="pill-check " for="refer_to_mam">
                                        <input type="checkbox"
                                            id="refer_to_mam"
                                            name="refer_to_mam"
                                            @checked(old('refer_to_mam'))>
                                        <span class="refer_mam" for="refer_to_mam">Refer to MAM</span>
                                    </label>
                                </div>

                            </div>
                            <div class="col-md-6 text-start">
                                <label class="form-label">Reason of Referral</label>
                                @php
                                    $referralReasons = [
                                        '1.1 : Suspect OI or diagnosed OI or taking OI, treatment or other infections',
                                        '1.2 : Suspect of drug side effect or close monitoring of drug side effect',
                                        '1.3 : Clinically unstable patient: Other',
                                        '2 : Abnormal investigation results like Cr Cl < 50/ ALT >, 3 times ULN/ Hb% < 10mg%',
                                        '3 : Patient with last viral load > 1000 (for OI screening and EAC)',
                                        '4 : Mental health problem and/or drug use issues',
                                        '5 : PMTCT patients',
                                        '6 : For Hep C management',
                                        '7 : Monthly STI screening (For active FSW)',
                                        '8 : Breast cancer screening',
                                        '9 : Cervical cancer screening',
                                        '10 : Family planning service',
                                        '11 : Other support needed',
                                    ];
                                    $selectedReason = old('reason_of_ref');
                                    $selectedReason = old('reason_of_ref', optional($v)->reason_of_ref);
                                @endphp
                                <select name="reason_of_ref" class="form-select">
                                    <option value="">-- Select reason --</option>
                                    @foreach($referralReasons as $reason)
                                        <option value="{{ $reason }}" {{ $selectedReason === $reason ? 'selected' : '' }}>
                                            {{ $reason }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Transfer Out – Name of Other NAP Center</label>
                                <input type="text" name="transfer_out_center" class="form-control"
                                       value="{{ old('transfer_out_center') }}">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- TAB 3 --}}
                <div class="tab-pane fade tab-panel" id="vl-pane" role="tabpanel">
                    <div class="vl-panel p-3 p-md-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="panel-title">Viral Load Snapshot</div>
                            <span class="badge badge-info">Lab Summary</span>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-4 col-md-3">
                                <label class="form-label">Viral Load Tested Date</label>
                                <div class="date-holder">
                                    <input type="text" id="vl_test_date" name="vl_test_date" class="form-control date-input Gdate" placeholder="dd-mm-yyyy"
                                           value="{{ old('vl_test_date') }}">
                                    <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date" onclick="dateCalender()">
                                </div>
                            </div>
                            <div class="col-sm-5 col-md-4">
                                <label class="form-label">Viral Load (copies/ml)</label>
                                <div class="input-group">
                                    <input type="number" name="vl_copies_ml" class="form-control"
                                           value="{{ old('vl_copies_ml') }}">
                                    <span class="input-group-text">ml</span>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Viral Load Result (text)</label>
                                <input type="text" name="vl_result" class="form-control"
                                       value="{{ old('vl_result') }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Remarks</label>
                                <textarea name="remarks" rows="3" class="form-control">{{ old('remarks') }}</textarea>
                            </div>
                        </div>

                        {{-- Example: read-only labs via AJAX card (optional) --}}
                        <div class="mt-3" id="labResultsPanel" @if(!$pid) style="display:none" @endif>
                            <div class="art-section-title mb-1 text-uppercase small text-muted">Recent Lab Results (read-only)</div>
                            <div class="small text-muted mb-2">Loaded from /art/labs/{{ $pid ?? '' }}</div>
                            <div class="border rounded-3 p-2" style="min-height: 60px;">
                                <div id="labResultsBody"
                                     class="small text-muted"
                                     data-summary="{{ $labSummary ? e($labSummary) : '' }}">
                                    @if($labSummary)
                                        <div class="lab-summary mb-2">{{ $labSummary }}</div>
                                        <div class="lab-status">Additional lab history will load soon.</div>
                                    @else
                                        <div class="lab-status">No labs loaded.</div>
                                    @endif
                                </div>
                            </div>
                        </div>

                            <div class="art-footer d-flex flex-wrap justify-content-between align-items-center gap-3 mt-4 visit-actions" data-editing="0">
                                <div class="small text-muted">Save, update, or delete this visit record.</div>
                                <div class="btn-group" role="group" aria-label="Visit actions">
                                    <button type="submit" class="btn btn-success js-action-button btn-save-visit js-visit-submit"
                                            name="form_action" value="create"
                                            data-target="visit" data-action="create"
                                            @disabled(!$hasPtConfig)>
                                        Save Visit
                                </button>
                                <button type="submit" class="btn btn-primary js-action-button js-visit-submit"
                                        name="form_action" value="update"
                                        data-target="visit" data-action="update"
                                        @disabled(!$hasPtConfig)>
                                    Update Visit
                                </button>
                                <button type="submit" class="btn btn-outline-danger js-action-button"
                                        name="form_action" value="delete"
                                        data-target="visit" data-action="delete"
                                        @disabled(!$hasPtConfig)>
                                    Delete Visit
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- TAB 4 --}}
                <div class="tab-pane fade tab-panel" id="visits-pane" role="tabpanel">
                    <div class="card border-0 shadow-sm visits-panel">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div>
                                    <div class="fw-semibold text-uppercase small text-muted">Follow-up history</div>
                                    <div class="small text-muted">Select a visit to edit or delete.</div>
                                </div>
                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle" id="visitCountBadge" data-base-count="{{ $visits->count() }}">
                                    {{ $visits->count() }} visits
                                </span>
                            </div>
                            @if($pid && $visits->count())
                                <div class="table-responsive">
                                    <table class="table table-sm align-middle mb-0" id="visitListTable">
                                        <thead>
                                            <tr>
                                                <th scope="col">Visit Date</th>
                                                <th scope="col">Visit ID</th>
                                                <th scope="col">ART Regime</th>
                                                <th scope="col">VL Result</th>
                                                <th scope="col" class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($visits as $visit)
                                            @php
                                                $visitPayload = [
                                                    'visit_id'              => $visit->visit_id,
                                                    'visit_date'            => $formatDisplayDate($visit->visit_date),
                                                    'age'                   => $visit->age,
                                                    'sex'                   => $visit->sex,
                                                    'main_risk'             => $visit->main_risk,
                                                    'art_started_date'      => $formatDisplayDate($visit->art_started_date),
                                                    'art_regime'            => $visit->art_regime,
                                                    'art_regime_changed'    => (bool) $visit->art_regime_changed,
                                                    'patient_status'        => $visit->patient_status,
                                                    'fp_service'            => (bool)$visit->fp_service,
                                                    'sti_service'           => (bool)$visit->sti_service,
                                                    'counseling_service'    => (bool)$visit->counseling_service,
                                                    'hepc_tx'               => (bool)$visit->hepc_tx,
                                                    'oi_tb'                 => (bool)$visit->oi_tb,
                                                    'oi_mac'                => (bool)$visit->oi_mac,
                                                    'oi_crypto'             => (bool)$visit->oi_crypto,
                                                    'oi_cmv'                => (bool)$visit->oi_cmv,
                                                    'oi_pcp'                => (bool)$visit->oi_pcp,
                                                    'oi_toxo'               => (bool)$visit->oi_toxo,
                                                    'oi_penic'              => (bool)$visit->oi_penic,
                                                    'oi_pml'                => (bool)$visit->oi_pml,
                                                    'oi_other'              => (bool)$visit->oi_other,
                                                    'oi_other_specify'      => $visit->oi_other_specify,
                                                    'next_appointment_date' => $formatDisplayDate($visit->next_appointment_date),
                                                    'refer_to_mam'          => (bool)$visit->refer_to_mam,
                                                    'reason_of_ref'         => $visit->reason_of_ref,
                                                    'transfer_out_center'   => $visit->transfer_out_center,
                                                    'vl_test_date'          => $formatDisplayDate($visit->vl_test_date),
                                                    'vl_copies_ml'          => $visit->vl_copies_ml,
                                                    'vl_result'             => $visit->vl_result,
                                                    'remarks'               => $visit->remarks,
                                                ];
                                            @endphp
                                            <tr>
                                                <td data-label="Visit Date">{{ $formatDisplayDate($visit->visit_date) }}</td>
                                                <td data-label="Visit ID">{{ $visit->visit_id }}</td>
                                                <td data-label="ART Regime">{{ $visit->art_regime ?? '—' }}</td>
                                                <td data-label="VL Result">{{ $visit->vl_result ?? '—' }}</td>
                                                <td class="text-end" data-label="Actions">
                                                    <button type="button"
                                                            class="btn btn-sm btn-outline-primary me-2 js-edit-visit"
                                                            data-visit='@json($visitPayload, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP)'>
                                                        Edit
                                                    </button>
                                                    <button type="submit"
                                                            class="btn btn-sm btn-outline-danger"
                                                            form="delete-visit-{{ $visit->visit_id }}"
                                                            onclick="return confirm('Delete visit {{ $visit->visit_id }}?')">
                                                        Delete
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="text-muted small">No visits recorded yet.</div>
                            @endif
                            <div id="visitListDynamicContainer" style="display: none;">
                                <div class="table-responsive">
                                    <table class="table table-sm align-middle mb-0" id="visitListDynamic">
                                        <thead>
                                            <tr>
                                                <th scope="col">Visit Date</th>
                                                <th scope="col">Visit ID</th>
                                                <th scope="col">ART Regime</th>
                                                <th scope="col">VL Result</th>
                                                <th scope="col" class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="visitListDynamicBody"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="visitListDynamicEmpty" class="text-muted small" style="display: none;">No visits recorded yet.</div>
                        </div>
                    </div>
                </div>

                {{-- TAB 5 --}}
                <div class="tab-pane fade tab-panel" id="export-pane" role="tabpanel">
                    <div class="border rounded-3 p-3 p-md-4 mb-3">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                            <div>
                                <div class="fw-semibold text-uppercase small text-muted">Export Follow-up data</div>
                               
                            </div>
                        </div>
                        <div class="row g-3 align-items-end">
                            <div class="col-md-4">
                                <label class="form-label">Export Type</label>
                                @php $exportType = old('export_type', 'followup'); @endphp
                                <select name="export_type" class="form-select" form="servicesExportForm">
                                    <option value="followup" @selected($exportType === 'followup')>Follow-up</option>
                                    <option value="appointment" @selected($exportType === 'appointment')>Appointment List</option>
                                    <option value="missed" @selected($exportType === 'missed')>Missed Appointment</option>
                                    <option value="ltfu" @selected($exportType === 'ltfu')>LTFU List</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Start Date</label>
                                <div class="date-holder">
                                    <input type="text" id="export_start_date" name="start_date" class="form-control date-input Gdate" placeholder="dd-mm-yyyy"
                                           value="{{ old('start_date') }}" form="servicesExportForm">
                                    <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date" onclick="dateCalender()">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">End Date</label>
                                <div class="date-holder">
                                    <input type="text" id="export_end_date" name="end_date" class="form-control date-input Gdate" placeholder="dd-mm-yyyy"
                                           value="{{ old('end_date') }}" form="servicesExportForm">
                                    <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date" onclick="dateCalender()">
                                </div>
                            </div>
                            <div class="col-md-2 d-grid">
                                <button type="submit" class="btn btn-outline-primary" form="servicesExportForm">
                                    Export
                                </button>
                            </div>
                        </div>

                        <div class="mt-4" id="appointmentPreviewPanel" data-preview-url="{{ route('services.appointment.preview') }}">
                            <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                                <button type="button" class="btn btn-sm btn-outline-primary" id="appointmentPreviewBtn">
                                    Preview appointments
                                </button>
                                <input type="text" class="form-control form-control-sm" id="appointmentPreviewFilter" placeholder="Filter NAP ID">
                                <span class="small text-muted" id="appointmentPreviewStatus"></span>
                            </div>
                            <div class="table-responsive border rounded" style="max-height: 320px; overflow:auto;">
                                <table class="table table-sm mb-0" id="appointmentPreviewTable">
                                    <thead></thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                        <div class="mt-4" id="missedPreviewPanel" data-preview-url="{{ route('services.missed.preview') }}">
                            <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                                <button type="button" class="btn btn-sm btn-outline-danger" id="missedPreviewBtn">
                                    Preview missed appointments
                                </button>
                                <input type="text" class="form-control form-control-sm" id="missedPreviewFilter" placeholder="Filter NAP ID">
                                <span class="small text-muted" id="missedPreviewStatus"></span>
                            </div>
                            <div class="table-responsive border rounded" style="max-height: 320px; overflow:auto;">
                                <table class="table table-sm mb-0" id="missedPreviewTable">
                                    <thead>
                                        <tr>
                                            <th>NAP ID</th>
                                            <th>Appointment Date</th>
                                            <th>Unplan Visited</th>
                                            <th>Unplan Visited Date</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            <div class="small text-muted mt-2">
                            Missed List:
                            Chosen dates အတွင်းရှိ appointments များထံမှ appointment day နေ့တွင် visit မလာသည့် လူနာများကို ပြသပါသည်။
                                                        လူနာသည် appointment day မဟုတ်ပဲ different day တစ်နေ့မှာ လာခဲ့ပါက Unplan column တွင် TRUE ဟုပြပြီး၊ visit date ကိုလည်း ပြပေးပါသည်။
                            </div>
                            <div class="small text-muted">
                                Appointment List:
                            Chosen dates အတွင်းရှိ appointments များအားလုံးကို grid format ဖြင့် ပြသထားပါသည်။
                            Appointment day မဟုတ်ဘဲ ±7 days အတွင်း closest visit တစ်ခုရှိပါက ထို visit date ကို Unplan columns တွင် ပြသပေးပါသည်။
                            </div>
                        </div>
                    </div>
                </div>

                {{-- TAB 6 --}}
                <div class="tab-pane fade tab-panel" id="import-pane" role="tabpanel">
                    <div class="border rounded-3 p-3 p-md-4 mb-3">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                            <div>
                                <div class="fw-semibold text-uppercase small text-muted">Import legacy Excel data</div>
                                <div class="small text-muted">Upload Microsoft Excel files exported from legacy tools.</div>
                            </div>
                        </div>
                        <div class="row g-4">
                            <div class="col-lg-6">
                                <div class="p-3 border rounded-3 h-100">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <div class="fw-semibold">Patient (PtConfig) Import</div>
                                        <a href="{{ route('services.template', 'patients') }}" class="btn btn-link btn-sm text-decoration-none">
                                            Download template
                                        </a>
                                    </div>
                                    <p class="small text-muted mb-3">
                                        Columns supported: PID, NAP ID, Fuchia ID, Name, Gender, Date of Birth, Phone, Township, Address, Main Risk.
                                    </p>
                                    <form method="POST" action="{{ route('services.import') }}" enctype="multipart/form-data" class="d-grid gap-3 js-import-form">
                                        @csrf
                                        <input type="hidden" name="import_type" value="patients">
                                        <div>
                                            <label class="form-label">Excel File</label>
                                            <input type="file" name="import_file" class="form-control" accept=".xls,.xlsx,.csv">
                                        </div>
                                        <button type="submit" class="btn btn-outline-success">
                                            Import Patients
                                        </button>
                                    </form>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="p-3 border rounded-3 h-100">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <div class="fw-semibold">Follow-up Visits Import</div>
                                        <a href="{{ route('services.template', 'followups') }}" class="btn btn-link btn-sm text-decoration-none">
                                            Download template
                                        </a>
                                    </div>
                                    <p class="small text-muted mb-3">
                                        Accepts exports generated from this page. Ensure PID and Visit Date columns are filled.
                                    </p>
                                    <form method="POST" action="{{ route('services.import') }}" enctype="multipart/form-data" class="d-grid gap-3 js-import-form">
                                        @csrf
                                        <input type="hidden" name="import_type" value="followups">
                                        <div>
                                            <label class="form-label">Excel File</label>
                                            <input type="file" name="import_file" class="form-control" accept=".xls,.xlsx,.csv">
                                        </div>
                                        <button type="submit" class="btn btn-outline-primary">
                                            Import Follow-ups
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>{{-- tab-content --}}
        </form>
    </div>
</div>

<form id="servicesExportForm" method="GET" action="{{ route('services.export') }}" class="d-none"></form>

<div class="position-fixed bottom-0 end-0 m-3 d-flex gap-2">
    <button type="button" class="btn btn-sm btn-outline-secondary" id="tabPrevBtn" title="Previous section">
        ← Prev
    </button>
    <button type="button" class="btn btn-sm btn-primary" id="tabNextBtn" title="Next section">
        Next →
    </button>
</div>

@foreach($visits as $visit)
    <form id="delete-visit-{{ $visit->visit_id }}" action="{{ route('services.save') }}" method="POST" class="d-none">
        @csrf
        <input type="hidden" name="pid" value="{{ $pid }}">
        <input type="hidden" name="visit_id" value="{{ $visit->visit_id }}">
        <input type="hidden" name="form_action" value="delete">
        <input type="hidden" name="visit_action" value="delete">
    </form>
@endforeach
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const visitButtons = document.querySelectorAll('.btn-save-visit, [data-target="visit"]');
    const visitSubmitButtons = document.querySelectorAll('.js-visit-submit');
    const patientSubmitButtons = document.querySelectorAll('.js-patient-submit');
    const toggleVisitButtons = (enabled) => {
        visitButtons.forEach(btn => {
            btn.disabled = !enabled;
            if (!enabled) {
                btn.classList.add('disabled');
            } else {
                btn.classList.remove('disabled');
            }
        });
    };
    const hasPtConfig = document.getElementById('artFollowupForm')?.dataset.hasPid === '1';
    if (!hasPtConfig) {
        toggleVisitButtons(false);
    }
    document.addEventListener('mam:pwa:patient-loaded', () => toggleVisitButtons(true));
    document.addEventListener('mam:pwa:patient-queued', () => {
        toggleVisitButtons(true);
        markButtonQueued(patientSubmitButtons, 'Queued');
    });

    const markButtonQueued = (buttons, label = 'Queued') => {
        buttons.forEach(btn => {
            btn.disabled = true;
            btn.classList.add('disabled');
            if (!btn.dataset.originalText) {
                btn.dataset.originalText = btn.textContent.trim();
            }
            btn.textContent = label;
        });
    };

    const collapseSync = (panel, toggleBtn) => {
        if (!panel) return;
        const body = panel.querySelector('.pwa-sync-body');
        const isCollapsed = panel.classList.toggle('collapsed');
        if (body) {
            body.style.display = isCollapsed ? 'none' : '';
        }
        if (toggleBtn) {
            toggleBtn.textContent = isCollapsed ? 'Show' : 'Hide';
            toggleBtn.setAttribute('aria-expanded', String(!isCollapsed));
            toggleBtn.setAttribute('aria-label', isCollapsed ? 'Show sync panel' : 'Hide sync panel');
        }
        localStorage.setItem('pwaSyncCollapsed', isCollapsed ? '1' : '0');
    };

    const expandSync = (panel, toggleBtn) => {
        if (!panel) return;
        panel.classList.remove('collapsed');
        const body = panel.querySelector('.pwa-sync-body');
        if (body) {
            body.style.display = '';
        }
        if (toggleBtn) {
            toggleBtn.textContent = 'Hide';
            toggleBtn.setAttribute('aria-expanded', 'true');
            toggleBtn.setAttribute('aria-label', 'Hide sync panel');
        }
        localStorage.setItem('pwaSyncCollapsed', '0');
    };

    const panel = document.getElementById('pwaSyncPanel');
    if (panel) {
        const toggle = document.getElementById('pwaSyncToggle') || document.getElementById('pwaSyncToggle2');
        if (toggle) {
            toggle.setAttribute('aria-expanded', 'true');
            toggle.setAttribute('aria-label', 'Hide sync panel');
            toggle.addEventListener('click', () => collapseSync(panel, toggle));
        }
        const wasCollapsed = localStorage.getItem('pwaSyncCollapsed') === '1';
        if (navigator.onLine) {
            expandSync(panel, toggle);
        } else if (wasCollapsed) {
            collapseSync(panel, toggle);
        }
    }

    const offlineNotice = document.getElementById('artOfflineNotice');
    if (offlineNotice) {
        const countEl = offlineNotice.querySelector('[data-queued-count]');
        const toggleBanner = () => {
            const shouldHide = navigator.onLine && offlineNotice.dataset.forceShow !== '1';
            offlineNotice.classList.toggle('d-none', shouldHide);
        };
        toggleBanner();
        window.addEventListener('online', () => {
            offlineNotice.dataset.forceShow = '';
            toggleBanner();
        });
        window.addEventListener('offline', () => toggleBanner());
        document.addEventListener('mam:pwa:queue', (event) => {
            const pendingCount = event.detail?.count ?? 0;
            if (countEl) {
                countEl.textContent = pendingCount;
            }
            offlineNotice.dataset.forceShow = '1';
            offlineNotice.classList.remove('d-none');
            const messageEl = offlineNotice.querySelector('[data-offline-message]');
            if (messageEl) {
                messageEl.textContent = ':';
            }
        });
        document.addEventListener('mam:pwa:patient-queued', () => markButtonQueued(patientSubmitButtons, 'Queued'));
        document.addEventListener('mam:pwa:form-queued', (event) => {
            const payload = event.detail?.payload || {};
            // Only disable visit buttons when the queued payload touches visits/services/vl
            const touchesVisit = ['visit_action','services_action','vl_action'].some(key => {
                const val = payload[key];
                return val && val !== 'skip';
            }) || payload.action_scope === 'visit';
            if (touchesVisit) {
                markButtonQueued(visitSubmitButtons, 'Queued');
            }
        });
    }

    // Next/Prev tab buttons
    const tabOrder = ['visit-tab','services-tab','vl-tab','visits-tab','export-tab','import-tab'];
    const prevBtn = document.getElementById('tabPrevBtn');
    const nextBtn = document.getElementById('tabNextBtn');
    const activateTabById = (id) => {
        const btn = document.getElementById(id);
        if (!btn) return;
        if (window.bootstrap?.Tab?.getOrCreateInstance) {
            window.bootstrap.Tab.getOrCreateInstance(btn).show();
        } else if (window.jQuery) {
            window.jQuery(btn).tab('show');
        } else {
            btn.click();
        }
    };
    const moveTab = (direction) => {
        const active = document.querySelector('.nav-link.active');
        const activeId = active?.id || '';
        const idx = tabOrder.indexOf(activeId);
        if (idx === -1) return;
        const nextIdx = (idx + direction + tabOrder.length) % tabOrder.length;
        activateTabById(tabOrder[nextIdx]);
    };
    prevBtn?.addEventListener('click', () => moveTab(-1));
    nextBtn?.addEventListener('click', () => moveTab(1));
});
    // --- Example: load labs when Viral Load tab is opened ---
        document.addEventListener('DOMContentLoaded', function () {
            const artForm = document.getElementById('artFollowupForm');
            console.log('Patient payload', @json($patientInfo));
        const flashMessages = {
            success: @json(session('success')),
            info_new_patient: @json(session('info_new_patient')),
            info: @json(session('info')),
            error: @json(session('error')),
            errors: @json($errors->all()),
        };
        const syncStatusEl = document.getElementById('pwaSyncStatus');
        const showFlashAlert = (message, type = 'info') => {
            if (!message) return;
            if (syncStatusEl) {
                syncStatusEl.textContent = message;
                syncStatusEl.classList.remove('text-muted','text-success','text-danger');
                syncStatusEl.classList.add('text-' + (type === 'error' ? 'danger' : type === 'success' ? 'success' : 'muted'));
                syncStatusEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                return;
            }
            setTimeout(() => window.alert(message), 150);
        };
        // Show only the highest-priority message to avoid duplication
        if (flashMessages.error) {
            showFlashAlert(flashMessages.error, 'error');
        } else if (Array.isArray(flashMessages.errors) && flashMessages.errors.length) {
            const errorMessage = ['Please check the following fields:']
                .concat(flashMessages.errors.map(msg => `• ${msg}`))
                .join('\n');
            showFlashAlert(errorMessage, 'error');
        } else if (flashMessages.success) {
            showFlashAlert(flashMessages.success, 'success');
        } else if (flashMessages.info_new_patient) {
            showFlashAlert(flashMessages.info_new_patient, 'info');
        } else if (flashMessages.info) {
            showFlashAlert(flashMessages.info, 'info');
        }
        const escapeHtml = (str = '') => str
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
        const setFieldValue = (name, value) => {
            if (!artForm) return;
            const fields = artForm.querySelectorAll(`[name="${name}"]`);
            if (!fields.length) return;
            const field = fields[0];
            if (field.type === 'radio') {
                fields.forEach(radio => {
                    radio.checked = radio.value == value;
                    if (radio.checked) {
                        radio.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                });
                return;
            }
            if (field.type === 'checkbox') {
                field.checked = Boolean(value);
                return;
            }
            field.value = value ?? '';
        };

        const visitListTable = document.getElementById('visitListTable');
        const visitsTabNav = document.getElementById('visits-tab');
        const visitCountBadge = document.getElementById('visitCountBadge');
        const baseVisitCount = Number(visitCountBadge?.dataset.baseCount || visitCountBadge?.textContent || 0) || 0;
        const hasExistingPid = artForm?.dataset.hasPid === '1';
        const regDateInput = artForm?.querySelector('input[name="reg_date"]');
        const ageInput = artForm?.querySelector('input[name="age"]');
        const ageMonthsInput = artForm?.querySelector('input[name="age_months"]');
        const dobInput = artForm?.querySelector('input[name="patient_dob"]');
        const visitActionsPanel = document.querySelector('.visit-actions');

        const parseReferenceDate = () => {
            const regVal = regDateInput?.value?.trim();
            if (regVal) {
                const match = regVal.match(/^(\d{1,2})[\/-](\d{1,2})[\/-](\d{4})$/);
                if (match) {
                    const day = parseInt(match[1], 10);
                    const month = parseInt(match[2], 10);
                    const year = parseInt(match[3], 10);
                    if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
                        return new Date(year, month - 1, day);
                    }
                }
            }

            const today = new Date();
            return new Date(today.getFullYear(), today.getMonth(), today.getDate());
        };

        const autoFillDobForNewPatient = () => {
            if (!artForm || !dobInput) return;

            const yearsRaw = parseInt(ageInput?.value ?? '', 10);
            const monthsRaw = parseInt(ageMonthsInput?.value ?? '', 10);

            const hasYears = !Number.isNaN(yearsRaw) && yearsRaw >= 0;
            const hasMonths = !Number.isNaN(monthsRaw) && monthsRaw >= 0;

            if (!hasYears && !hasMonths) {
                return;
            }

            const totalMonths = (hasYears ? yearsRaw : 0) * 12 + (hasMonths ? monthsRaw : 0);
            if (totalMonths <= 0) {
                return;
            }

            const normalizedYears = Math.floor(totalMonths / 12);
            const normalizedMonths = totalMonths % 12;

            if (ageInput) {
                ageInput.value = normalizedYears;
            }
            if (ageMonthsInput) {
                ageMonthsInput.value = normalizedMonths;
            }

            const referenceDate = parseReferenceDate();
            const birthDate = new Date(referenceDate);
            birthDate.setHours(0, 0, 0, 0);
            birthDate.setMonth(birthDate.getMonth() - totalMonths);

            const birthDay = String(birthDate.getDate()).padStart(2, '0');
            const birthMonth = String(birthDate.getMonth() + 1).padStart(2, '0');
            const birthYear = birthDate.getFullYear();

            dobInput.value = `${birthDay}-${birthMonth}-${birthYear}`;
            dobInput.dataset.autofill = '1';
        };

        const bindAgeAutofill = () => {
            [regDateInput, ageInput, ageMonthsInput].forEach((input) => {
                input?.addEventListener('input', autoFillDobForNewPatient);
                input?.addEventListener('change', autoFillDobForNewPatient);
            });

            dobInput?.addEventListener('input', () => {
                if (dobInput.dataset.autofill === '1') {
                    delete dobInput.dataset.autofill;
                }
            });
        };

        bindAgeAutofill();
        autoFillDobForNewPatient();

        const actionScopeField = document.querySelector('input[name="action_scope"]');
        const actionInputs = {
            patient: document.querySelector('input[name="patient_action"]'),
            visit: document.querySelector('input[name="visit_action"]'),
            services: document.querySelector('input[name="services_action"]'),
            vl: document.querySelector('input[name="vl_action"]'),
        };

        document.querySelectorAll('.js-action-button').forEach(button => {
            button.addEventListener('click', function () {
                window.lastActionButton = this;
                const target = this.dataset.target || 'visit';
                const action = this.dataset.action || this.value || 'update';

                if (actionScopeField) {
                    actionScopeField.value = target;
                }

                if (target === 'patient') {
                    if (actionInputs.patient) {
                        actionInputs.patient.value = action;
                    }
                    ['visit', 'services', 'vl'].forEach(section => {
                        if (actionInputs[section]) {
                            actionInputs[section].value = 'skip';
                        }
                    });
                } else {
                    ['visit', 'services', 'vl'].forEach(section => {
                        if (actionInputs[section]) {
                            actionInputs[section].value = action;
                        }
                    });
                }
            });
        });

        const setVisitEditingState = (isEditing) => {
            if (!visitActionsPanel) {
                return;
            }
            visitActionsPanel.dataset.editing = isEditing ? '1' : '0';
        };

        setVisitEditingState(false);

        const enableVisitTab = () => {
            if (visitsTabNav) {
                visitsTabNav.removeAttribute('disabled');
            }
        };

        document.addEventListener('mam:pwa:visits-loaded', (event) => {
            enableVisitTab();
            const count = event?.detail?.count;
            if (visitCountBadge && typeof count !== 'undefined' && count !== null) {
                const safeCount = Number.isFinite(Number(count)) ? Number(count) : baseVisitCount;
                const effectiveCount = safeCount || baseVisitCount;
                visitCountBadge.textContent = `${effectiveCount} visits`;
            }
        });

        const loadVisitPayload = (payload) => {
            Object.entries(payload || {}).forEach(([key, val]) => setFieldValue(key, val));
            if (payload?.visit_id) {
                setFieldValue('visit_id', payload.visit_id);
            }
            if (payload?.nap_id) {
                setFieldValue('nap_id', payload.nap_id);
            }
            if (payload?.pid) {
                setFieldValue('pid', payload.pid);
            }
            setFieldValue('action_scope', 'visit');
            setFieldValue('visit_action', 'update');
            setFieldValue('services_action', 'update');
            setFieldValue('vl_action', 'update');

            const visitTabTrigger = document.getElementById('visit-tab');
            if (visitTabTrigger) {
                if (window.bootstrap && window.bootstrap.Tab && typeof window.bootstrap.Tab.getOrCreateInstance === 'function') {
                    window.bootstrap.Tab.getOrCreateInstance(visitTabTrigger).show();
                } else if (window.jQuery && typeof window.jQuery === 'function') {
                    window.jQuery(visitTabTrigger).tab('show');
                }
            }
            window.scrollTo({ top: artForm.offsetTop - 20, behavior: 'smooth' });
            const visitDateInput = document.getElementById('visit_date');
            if (visitDateInput) {
                visitDateInput.focus({ preventScroll: true });
                visitDateInput.classList.add('focus-jump');
                visitDateInput.addEventListener('blur', () => {
                    visitDateInput.classList.remove('focus-jump');
                }, { once: true });
            }
            setVisitEditingState(true);
        };

        const prepareVisitDelete = (payload) => {
            if (!payload?.visit_id) return;
            setFieldValue('visit_id', payload.visit_id);
            if (payload?.nap_id) {
                setFieldValue('nap_id', payload.nap_id);
            }
            if (payload?.pid) {
                setFieldValue('pid', payload.pid);
            }
            setFieldValue('action_scope', 'visit');
            setFieldValue('patient_action', 'skip');
            setFieldValue('visit_action', 'delete');
            setFieldValue('services_action', 'delete');
            setFieldValue('vl_action', 'delete');
            setVisitEditingState(false);
            const confirmMessage = `Delete visit ${payload.visit_id}?`;
            if (!confirm(confirmMessage)) {
                return;
            }
            const deleteButton = artForm?.querySelector('button[name="form_action"][value="delete"]');
            if (artForm?.requestSubmit) {
                artForm.requestSubmit(deleteButton || undefined);
            } else {
                artForm?.submit?.();
            }
        };

        if (visitListTable) {
            const bindVisitActions = (table) => {
                table.addEventListener('click', function (event) {
                    const editButton = event.target.closest('.js-edit-visit');
                    const deleteButton = event.target.closest('.js-delete-visit');
                    if (!editButton && !deleteButton) return;
                    event.preventDefault();
                    const targetButton = editButton || deleteButton;
                    try {
                        const payload = JSON.parse(targetButton.dataset.visit || '{}');
                        if (editButton) {
                            loadVisitPayload(payload);
                        } else {
                            prepareVisitDelete(payload);
                        }
                    } catch (error) {
                        console.error('Unable to load visit details', error);
                    }
                });
            };
            bindVisitActions(visitListTable);
            const visitListDynamic = document.getElementById('visitListDynamic');
            if (visitListDynamic) {
                bindVisitActions(visitListDynamic);
            }
        }

        // Global fallback binding for dynamically injected visit buttons
        document.addEventListener('click', function (event) {
            const editButton = event.target.closest('.js-edit-visit');
            const deleteButton = event.target.closest('.js-delete-visit');
            if (!editButton && !deleteButton) return;
            event.preventDefault();
            const targetButton = editButton || deleteButton;
            try {
                const payload = JSON.parse(targetButton.dataset.visit || '{}');
                if (editButton) {
                    loadVisitPayload(payload);
                } else {
                    prepareVisitDelete(payload);
                }
            } catch (error) {
                console.error('Unable to load visit details', error);
            }
        }, { capture: true });

        // Appointment preview
        const previewPanel = document.getElementById('appointmentPreviewPanel');
        const previewBtn = document.getElementById('appointmentPreviewBtn');
        const previewFilter = document.getElementById('appointmentPreviewFilter');
        const previewStatus = document.getElementById('appointmentPreviewStatus');
        const previewTable = document.getElementById('appointmentPreviewTable');
        const previewUrl = previewPanel?.dataset.previewUrl || '';
        const missedPanel = document.getElementById('missedPreviewPanel');
        const missedBtn = document.getElementById('missedPreviewBtn');
        const missedFilter = document.getElementById('missedPreviewFilter');
        const missedStatus = document.getElementById('missedPreviewStatus');
        const missedTable = document.getElementById('missedPreviewTable');
        const missedUrl = missedPanel?.dataset.previewUrl || '';
        const renderPreview = (headings = [], rows = []) => {
            if (!previewTable) return;
            const thead = previewTable.querySelector('thead');
            const tbody = previewTable.querySelector('tbody');
            if (thead) {
                thead.innerHTML = '';
                const tr = document.createElement('tr');
                headings.forEach(h => {
                    const th = document.createElement('th');
                    th.textContent = h;
                    tr.appendChild(th);
                });
                thead.appendChild(tr);
            }
            if (tbody) {
                tbody.innerHTML = '';
                rows.forEach((row) => {
                    const tr = document.createElement('tr');
                    row.forEach(cell => {
                        const td = document.createElement('td');
                        td.textContent = cell || '';
                        tr.appendChild(td);
                    });
                    tbody.appendChild(tr);
                });
            }
        };

        const filterPreview = () => {
            const term = (previewFilter?.value || '').toLowerCase();
            if (!previewTable || !previewTable.tBodies.length) return;
            Array.from(previewTable.tBodies[0].rows).forEach((row) => {
                const match = Array.from(row.cells).some((cell) => cell.textContent.toLowerCase().includes(term));
                row.style.display = match ? '' : 'none';
            });
        };

        previewFilter?.addEventListener('input', filterPreview);

        previewBtn?.addEventListener('click', () => {
            if (!previewUrl || !previewStatus) return;
            const start = document.getElementById('export_start_date')?.value || '';
            const end = document.getElementById('export_end_date')?.value || '';
            previewStatus.textContent = 'Loading...';
            fetch(previewUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ start_date: start, end_date: end }),
                credentials: 'same-origin',
            })
                .then(resp => resp.json().then(data => ({ ok: resp.ok, data })))
                .then(result => {
                    if (!result.ok) {
                        previewStatus.textContent = result.data?.error || 'Unable to load preview.';
                        renderPreview([], []);
                        return;
                    }
                    if (result.data?.message) {
                        previewStatus.textContent = result.data.message;
                        renderPreview([], []);
                        return;
                    }
                    renderPreview(result.data?.headings || [], result.data?.rows || []);
                    previewStatus.textContent = `Loaded ${result.data?.count ?? 0} rows`;
                    filterPreview();
                })
                .catch(() => {
                    previewStatus.textContent = 'Unable to load preview.';
                    renderPreview([], []);
                });
        });

        const renderMissed = (rows = []) => {
            if (!missedTable) return;
            const tbody = missedTable.querySelector('tbody');
            if (tbody) {
                tbody.innerHTML = '';
                rows.forEach((row) => {
                    const tr = document.createElement('tr');
                    ['nap_id','appointment_date','unplan_flag','unplan_date'].forEach(key => {
                        const td = document.createElement('td');
                        td.textContent = row[key] || '';
                        tr.appendChild(td);
                    });
                    tbody.appendChild(tr);
                });
            }
        };

        const filterMissed = () => {
            const term = (missedFilter?.value || '').toLowerCase();
            if (!missedTable || !missedTable.tBodies.length) return;
            Array.from(missedTable.tBodies[0].rows).forEach((row) => {
                const match = Array.from(row.cells).some((cell) => cell.textContent.toLowerCase().includes(term));
                row.style.display = match ? '' : 'none';
            });
        };

        missedFilter?.addEventListener('input', filterMissed);

        missedBtn?.addEventListener('click', () => {
            if (!missedUrl || !missedStatus) return;
            const start = document.getElementById('export_start_date')?.value || '';
            const end = document.getElementById('export_end_date')?.value || '';
            missedStatus.textContent = 'Loading...';
            fetch(missedUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ start_date: start, end_date: end }),
                credentials: 'same-origin',
            })
                .then(resp => resp.json().then(data => ({ ok: resp.ok, data })))
                .then(result => {
                    if (!result.ok) {
                        missedStatus.textContent = result.data?.error || 'Unable to load preview.';
                        renderMissed([]);
                        return;
                    }
                    if (result.data?.message) {
                        missedStatus.textContent = result.data.message;
                        renderMissed([]);
                        return;
                    }
                    renderMissed(result.data?.rows || []);
                    missedStatus.textContent = `Loaded ${result.data?.count ?? 0} rows`;
                    filterMissed();
                })
                .catch(() => {
                    missedStatus.textContent = 'Unable to load preview.';
                    renderMissed([]);
                });
        });

        document.querySelectorAll('.js-import-form').forEach(form => {
            const fileInput = form.querySelector('input[type="file"]');
            if (!fileInput) return;
            form.addEventListener('submit', (event) => {
                if (fileInput.files.length === 0) {
                    event.preventDefault();
                    alert('Please select a file to import.');
                    fileInput.focus();
                }
            });
        });

        const labsPane = document.getElementById('vl-pane');
        const labBody  = document.getElementById('labResultsBody');
        const labPanel = document.getElementById('labResultsPanel');
        const vlTab    = document.getElementById('vl-tab');
        const pid      = "{{ $pid }}";
        const labSummary = labBody?.dataset.summary || '';

        if (!pid || !labBody || !labPanel || !vlTab) return;

        vlTab.addEventListener('shown.bs.tab', function () {
            if (!pid || labBody.dataset.loaded === '1') return;

            fetch("{{ route('services.labs', ':pid') }}".replace(':pid', pid))
                .then(r => r.json())
                .then(rows => {
                    labBody.dataset.loaded = '1';
                    const summaryHtml = labSummary
                        ? `<div class="lab-summary mb-2">${escapeHtml(labSummary)}</div>`
                        : '';
                    if (!rows.length) {
                        labBody.innerHTML = summaryHtml || '<div>No lab records.</div>';
                        return;
                    }
                    let html = summaryHtml + '<table class="table table-sm table-borderless mb-0"><tbody>';
                    rows.forEach(r => {
                        html += `<tr>
                            <td class="text-muted">${r.test_date ?? ''}</td>
                            <td>${r.test_name ?? ''}</td>
                            <td class="text-end fw-semibold">${r.result ?? ''}</td>
                        </tr>`;
                    });
                    html += '</tbody></table>';
                    labBody.innerHTML = html;
                })
                .catch(() => {
                    labBody.textContent = 'Unable to load labs (offline?).';
                });

            labPanel.style.display = 'block';
        });

    });
</script>
@endpush