@extends('layouts.app')
@section('title', 'Issue Sick Leave | ' . ($patient->full_name ?? ''))
@section('content')

<div class="max-w-3xl mx-auto">

    {{-- Breadcrumb / back --}}
    <div class="mb-4 flex items-center gap-2">
        <a href="{{ route('patients.show', $patient) }}" class="text-xs text-cr-700 hover:underline">← Back to {{ $patient->full_name }}</a>
    </div>

    <div class="bg-white rounded-xl border shadow-sm p-6">
        <h1 class="text-lg font-bold text-gray-800 mb-1">Issue Sick Leave Certificate</h1>
        <p class="text-xs text-gray-500 mb-5">For {{ $patient->full_name }} · MRN {{ $patient->mrn }} · {{ ucfirst($patient->gender ?? '—') }} · {{ $patient->age ?? '—' }}</p>

        {{-- Inpatient pill (informs the days warning logic) --}}
        @if($isInpatient)
            <div class="bg-blue-50 border border-blue-200 rounded-lg px-3 py-2 mb-4 text-xs text-blue-800">
                Patient is currently admitted as inpatient — no upper-limit warning will appear regardless of days selected.
            </div>
        @endif

        {{-- Minor pill (informs the recipient toggle below) --}}
        @if($isMinor)
            <div class="bg-purple-50 border border-purple-200 rounded-lg px-3 py-2 mb-4 text-xs text-purple-800">
                Patient is a minor ({{ $patient->age }}). You can issue this certificate to a guardian instead — the medical justification stays the patient's; the time off is granted to the guardian for caregiving.
            </div>
        @endif

        @if($errors->any())
            <div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
                <ul class="text-xs text-red-700 list-disc pl-5">
                    @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('sick-leave.store', $patient) }}" class="space-y-4">@csrf

            {{-- ── Recipient toggle (only when patient is a minor) ── --}}
            @if($isMinor)
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
                <p class="text-xs font-bold text-gray-700 uppercase tracking-wide mb-2">Issue Certificate To</p>
                <div class="flex gap-4 text-sm">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="issued_to" value="patient"
                               {{ old('issued_to', 'patient') === 'patient' ? 'checked' : '' }}
                               onchange="slToggleRecipient()">
                        <span>The patient ({{ $patient->full_name }})</span>
                    </label>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="issued_to" value="guardian"
                               {{ old('issued_to') === 'guardian' ? 'checked' : '' }}
                               onchange="slToggleRecipient()">
                        <span>The patient's guardian</span>
                    </label>
                </div>

                {{-- Guardian sub-form: hidden until the radio flips --}}
                <div id="sl-guardian-block" class="mt-3 pt-3 border-t border-gray-200 hidden">
                    <p class="text-[11px] text-gray-500 mb-2">
                        Pick an existing contact on this patient's record, or choose "Other" to type a name fresh.
                    </p>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="form-label">Guardian</label>
                            <select id="sl-guardian-picker" class="form-input" onchange="slPickGuardian(this)">
                                <option value="">— Select —</option>
                                @foreach($contacts as $c)
                                    <option value="{{ $c->id }}"
                                            data-name="{{ $c->name }}"
                                            data-rel="{{ $c->relationship ?? $c->role }}">
                                        {{ $c->name }} @if($c->relationship) · {{ $c->relationship }} @elseif($c->role) · {{ ucfirst($c->role) }} @endif
                                    </option>
                                @endforeach
                                @if($legacyNok)
                                    <option value="legacy"
                                            data-name="{{ $legacyNok['name'] }}"
                                            data-rel="{{ $legacyNok['relationship'] }}">
                                        {{ $legacyNok['name'] }}{{ $legacyNok['relationship'] ? ' · ' . $legacyNok['relationship'] : '' }} (NOK)
                                    </option>
                                @endif
                                <option value="other">— Other / not listed —</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Relationship</label>
                            <select id="sl-rel-picker" class="form-input" onchange="slCopyRelToHidden(this)">
                                <option value="">— Select —</option>
                                <option value="Parent">Parent</option>
                                <option value="Father">Father</option>
                                <option value="Mother">Mother</option>
                                <option value="Guardian">Guardian</option>
                                <option value="Aunt">Aunt</option>
                                <option value="Uncle">Uncle</option>
                                <option value="Grandparent">Grandparent</option>
                                <option value="Sibling">Sibling</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3 mt-3">
                        <div>
                            <label class="form-label">Guardian Name (as it should appear on the certificate)</label>
                            <input type="text" name="guardian_name"
                                   id="sl-guardian-name"
                                   value="{{ old('guardian_name') }}"
                                   class="form-input"
                                   placeholder="e.g. Mary Wanjiku">
                        </div>
                        <div>
                            <label class="form-label">Relationship (typed)</label>
                            <input type="text" name="guardian_relationship"
                                   id="sl-guardian-rel"
                                   value="{{ old('guardian_relationship') }}"
                                   class="form-input"
                                   placeholder="e.g. Mother">
                            <p class="text-[11px] text-gray-500 mt-1">The dropdown above auto-fills this; edit if needed.</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            {{-- Treatment date --}}
            <div>
                <label class="form-label">Treatment Date</label>
                <input type="date" name="treatment_date"
                       value="{{ old('treatment_date', now()->toDateString()) }}"
                       max="{{ now()->toDateString() }}"
                       required class="form-input">
                <p class="text-[11px] text-gray-500 mt-1">The date the patient sought treatment at the facility. Defaults to today; you can backdate.</p>
            </div>

            {{-- Days off --}}
            <div>
                <label class="form-label">Days Off</label>
                <select name="days" id="sl-days" required class="form-input" onchange="slToggleWarning()">
                    @foreach([1,2,3,4,5,6,7] as $d)
                        <option value="{{ $d }}" {{ old('days', 1) == $d ? 'selected' : '' }}>{{ $d }} {{ $d == 1 ? 'day' : 'days' }}</option>
                    @endforeach
                </select>

                {{-- Soft warning, only shown when days > 3 AND patient is not inpatient --}}
                <div id="sl-days-warning"
                     class="mt-2 px-3 py-2 rounded-lg text-xs hidden"
                     style="background:#fef3c7;border:1px solid #fde68a;color:#92400e">
                    <strong>Note:</strong> Sick leave certificates should not exceed 3 days unless the patient is admitted as inpatient. The certificate will still be issued — please confirm this is appropriate.
                </div>
            </div>

            {{-- Attending clinician (sign-off name) --}}
            <div>
                <label class="form-label">Attending Clinician (sign-off)</label>
                <select name="attending_clinician_id" class="form-input">
                    <option value="">— Use issuing user's name —</option>
                    @include('partials._clinician-options', ['selected' => old('attending_clinician_id', $defaultClinicianId)])
                </select>
                <p class="text-[11px] text-gray-500 mt-1">
                    @if($defaultClinicianId)
                        Auto-selected: the clinician on this patient's most recent visit. Change if needed.
                    @else
                        No prior visit on record — select the clinician whose name should appear on the sign-off.
                    @endif
                </p>
            </div>

            {{-- Optional notes --}}
            <div>
                <label class="form-label">Internal Notes (optional)</label>
                <textarea name="notes" rows="2" class="form-input" placeholder="Internal-only — does NOT appear on the printed certificate.">{{ old('notes') }}</textarea>
                <p class="text-[11px] text-gray-500 mt-1">Use for documentation rationale (e.g., "approved by consultant for 5 days post-op"). Not printed on the certificate.</p>
            </div>

            <div class="flex items-center gap-3 pt-4 border-t border-gray-100">
                <button type="submit" class="btn-primary text-sm px-5">Issue Certificate</button>
                <a href="{{ route('patients.show', $patient) }}" class="btn-secondary text-sm">Cancel</a>
            </div>
        </form>
    </div>

    {{-- Past certificates for this patient (audit context) --}}
    @if($previous->count())
    <div class="bg-white rounded-xl border shadow-sm p-6 mt-4">
        <h3 class="text-sm font-bold text-gray-700 mb-3">Recent Certificates Issued to this Patient</h3>
        <table class="w-full text-xs">
            <thead>
                <tr class="text-left text-gray-500 border-b border-gray-100">
                    <th class="py-1 pr-2 font-semibold">Issued</th>
                    <th class="py-1 pr-2 font-semibold">Treatment Date</th>
                    <th class="py-1 pr-2 font-semibold">Days</th>
                    <th class="py-1 pr-2 font-semibold">Sign-off</th>
                    <th class="py-1 pr-2 font-semibold">Issued By</th>
                    <th class="py-1 pr-2 font-semibold"></th>
                </tr>
            </thead>
            <tbody>
                @foreach($previous as $sl)
                    <tr class="border-b border-gray-50 last:border-b-0">
                        <td class="py-1 pr-2">{{ $sl->issued_at?->format('d M Y H:i') }}</td>
                        <td class="py-1 pr-2">{{ $sl->treatment_date?->format('d M Y') }}</td>
                        <td class="py-1 pr-2">{{ $sl->days }}</td>
                        <td class="py-1 pr-2">{{ $sl->sign_off_name }}</td>
                        <td class="py-1 pr-2">{{ optional($sl->issuer)->name ?? '—' }}</td>
                        <td class="py-1 pr-2">
                            <a href="{{ route('sick-leave.show', $sl) }}" class="text-cr-700 hover:underline">View</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif

</div>

<script>
// ── Days warning toggle (existing) ──
const slPatientIsInpatient = @json($isInpatient);
function slToggleWarning() {
    const select = document.getElementById('sl-days');
    const warning = document.getElementById('sl-days-warning');
    const days = parseInt(select.value, 10);
    if (!slPatientIsInpatient && days > 3) {
        warning.classList.remove('hidden');
    } else {
        warning.classList.add('hidden');
    }
}

// ── Recipient toggle: show/hide the guardian sub-form ──
function slToggleRecipient() {
    const block = document.getElementById('sl-guardian-block');
    if (!block) return;
    const radios = document.getElementsByName('issued_to');
    let val = 'patient';
    radios.forEach(r => { if (r.checked) val = r.value; });
    if (val === 'guardian') block.classList.remove('hidden');
    else                    block.classList.add('hidden');
}

// When the admin picks an existing contact, auto-fill the name and
// relationship hidden text inputs. "Other" clears them so they can type fresh.
function slPickGuardian(sel) {
    const opt = sel.options[sel.selectedIndex];
    const nameField = document.getElementById('sl-guardian-name');
    const relField  = document.getElementById('sl-guardian-rel');
    if (!opt || !opt.value || opt.value === 'other') {
        if (opt && opt.value === 'other') {
            nameField.value = '';
            relField.value = '';
            nameField.focus();
        }
        return;
    }
    nameField.value = opt.dataset.name || '';
    relField.value  = opt.dataset.rel  || '';
    // Sync the relationship dropdown to match if there's an exact value match.
    const relSelect = document.getElementById('sl-rel-picker');
    if (relSelect) {
        const match = Array.from(relSelect.options).find(o => o.value === (opt.dataset.rel || ''));
        relSelect.value = match ? match.value : '';
    }
}

// When the admin picks a relationship from the dropdown, copy it to
// the typed input so the form submission carries the value.
function slCopyRelToHidden(sel) {
    const relField = document.getElementById('sl-guardian-rel');
    if (sel.value && sel.value !== 'Other') relField.value = sel.value;
    else if (sel.value === 'Other')         relField.value = ''; // clear so admin types
}

document.addEventListener('DOMContentLoaded', () => {
    slToggleWarning();
    slToggleRecipient();
});
</script>

@endsection