@extends('layouts.app')
@section('title', $patient->full_name)
@section('content')

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

    {{-- ═══ LEFT COLUMN ════════════════════════════════════════════════════════ --}}
    <div class="space-y-5">

        {{-- Profile card --}}
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <div class="flex items-start gap-4 mb-5">
                <div class="w-16 h-16 bg-cr-100 text-cr-700 rounded-full flex items-center justify-center text-xl font-bold flex-shrink-0">
                    {{ strtoupper(substr($patient->first_name,0,1).substr($patient->last_name,0,1)) }}
                </div>
                <div class="flex-1 min-w-0">
                    <h2 class="text-lg font-bold text-gray-900">{{ $patient->full_name }}</h2>
                    <p class="font-mono text-sm text-cr-600 font-semibold">{{ $patient->mrn }}</p>
                    <div class="flex flex-wrap gap-1 mt-2">
                        <span class="badge {{ $patient->status === 'active' ? 'badge-success' : 'badge-gray' }}">{{ ucfirst($patient->status) }}</span>
                        @foreach($patient->alerts ?? [] as $alert)
                            <span class="badge badge-warning">{{ $alert }}</span>
                        @endforeach
                    </div>
                </div>
            </div>

            @if($patient->has_allergy_alerts)
            <div class="bg-red-50 border border-red-200 rounded-lg px-3 py-2 mb-3">
                <p class="text-xs font-semibold text-red-700 mb-1">⚠ ALLERGIES</p>
                <p class="text-sm text-red-800">{{ implode(', ', $patient->allergies) }}</p>
            </div>
            @endif

            @if($patient->has_chronic_conditions)
            <div class="bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 mb-3">
                <p class="text-xs font-semibold text-amber-700 mb-1">Chronic Conditions</p>
                <p class="text-sm text-amber-800">{{ implode(', ', $patient->chronic_conditions) }}</p>
            </div>
            @endif

            {{-- Note: Outstanding balance is shown in the expanded widget on
                 the right-hand column of this page. Kept out of the sidebar
                 to avoid duplicating the same data in two places. --}}

            <div class="space-y-2 text-sm divide-y divide-gray-50">
                <div class="flex justify-between pt-2"><span class="text-gray-500">Gender</span><span class="font-medium capitalize">{{ $patient->gender }}</span></div>
                <div class="flex justify-between pt-2"><span class="text-gray-500">Age</span><span class="font-medium">{{ $patient->age ?? '-' }}</span></div>
                <div class="flex justify-between pt-2"><span class="text-gray-500">DOB</span><span>{{ $patient->date_of_birth?->format('d M Y') ?? '-' }}</span></div>
                <div class="flex justify-between pt-2"><span class="text-gray-500">Phone</span><span>{{ $patient->phone ?? '-' }}</span></div>
                @if($patient->alt_phone)<div class="flex justify-between pt-2"><span class="text-gray-500">Alt. Phone</span><span>{{ $patient->alt_phone }}</span></div>@endif
                <div class="flex justify-between pt-2"><span class="text-gray-500">ID Number</span><span class="font-mono">{{ $patient->id_number ?? '-' }}</span></div>
                <div class="flex justify-between pt-2"><span class="text-gray-500">Blood Group</span><span class="font-bold text-red-600">{{ $patient->blood_group ?? '-' }}</span></div>
                @if($patient->email)<div class="flex justify-between pt-2"><span class="text-gray-500">Email</span><span>{{ $patient->email }}</span></div>@endif
                <div class="flex justify-between pt-2"><span class="text-gray-500">County</span><span>{{ $patient->county ?? '-' }}</span></div>
                @if($patient->occupation)<div class="flex justify-between pt-2"><span class="text-gray-500">Occupation</span><span>{{ $patient->occupation }}</span></div>@endif
            </div>
        </div>

        {{-- Insurance --}}
        @if($patient->insurance_id)
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <h3 class="text-sm font-bold text-gray-700 mb-3">Insurance</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-gray-500">Company</span><span class="font-medium">{{ $patient->insuranceCompany->name ?? '-' }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Member No.</span><span class="font-mono">{{ $patient->insurance_member_no ?? '-' }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Scheme</span><span>{{ $patient->insurance_scheme ?? '-' }}</span></div>
            </div>
        </div>
        @endif

        {{-- ═══ CONTACTS (Guardian / Caregiver / NOK / Guarantor) ═══ --}}
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-bold text-gray-700">Contacts & Representatives</h3>
                @if(auth()->user()->hasAnyRole('Receptionist','Triage Nurse','Clinician','Nurse','Hospital Admin','Super Admin'))
                <button onclick="document.getElementById('addContactModal').classList.remove('hidden')"
                        class="text-xs text-cr-600 hover:underline font-semibold">+ Add</button>
                @endif
            </div>

            @forelse($patient->contacts->sortBy('role') as $contact)
            <div class="border border-gray-100 rounded-lg p-3 mb-2 last:mb-0">
                <div class="flex items-start justify-between gap-2">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-xs font-bold uppercase px-2 py-0.5 rounded-full
                                {{ $contact->role === 'guardian' ? 'bg-purple-100 text-purple-700' :
                                   ($contact->role === 'guarantor' ? 'bg-green-100 text-green-700' :
                                   ($contact->role === 'caregiver' ? 'bg-blue-100 text-blue-700' :
                                   'bg-gray-100 text-gray-600')) }}">
                                {{ $contact->role_label }}
                            </span>
                            @if($contact->is_primary)<span class="text-xs text-amber-600 font-bold">PRIMARY</span>@endif
                            @if($contact->has_legal_authority)<span class="text-xs text-purple-600 font-bold">LEGAL AUTHORITY</span>@endif
                        </div>
                        <p class="text-sm font-semibold text-gray-900">{{ $contact->name }}</p>
                        @if($contact->relationship)<p class="text-xs text-gray-500">{{ ucfirst($contact->relationship) }}</p>@endif
                        @if($contact->phone)<p class="text-xs text-gray-600">📞 {{ $contact->phone }}</p>@endif
                        @if($contact->id_number)<p class="text-xs text-gray-400 font-mono">ID: {{ $contact->id_number }}</p>@endif
                        @if($contact->is_billing_guarantor)
                        <p class="text-xs text-green-700 font-semibold mt-0.5">
                            Billing Guarantor
                            @if($contact->credit_limit) · Limit: KES {{ number_format($contact->credit_limit) }}@endif
                        </p>
                        @endif
                    </div>
                    @if(auth()->user()->hasAnyRole('Receptionist','Triage Nurse','Hospital Admin','Super Admin'))
                    <form method="POST" action="{{ route('patients.contacts.destroy', [$patient, $contact]) }}"
                          onsubmit="return confirm('Remove this contact?')">
                        @csrf @method('DELETE')
                        <button class="text-gray-300 hover:text-red-500 text-lg leading-none">×</button>
                    </form>
                    @endif
                </div>
            </div>
            @empty
            <p class="text-xs text-gray-400">No contacts recorded. Add guardian, caregiver, next of kin, or guarantor details.</p>
            @endforelse

            {{-- Legacy NOK fallback (shown when no structured contacts exist) --}}
            @if($patient->contacts->isEmpty() && ($patient->nok_name || $patient->nok_phone))
            <div class="border border-dashed border-gray-200 rounded-lg p-3 mt-2 text-xs text-gray-500">
                <p class="font-semibold text-gray-700 mb-1">Legacy Next of Kin (not yet structured)</p>
                <p>{{ $patient->nok_name }}</p>
                <p>{{ $patient->nok_phone }} · {{ $patient->nok_relationship }}</p>
                <p class="text-xs text-amber-600 mt-1">Consider migrating to a structured contact using the Add button above.</p>
            </div>
            @endif
        </div>

        {{-- Actions --}}
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('patients.edit', $patient) }}" class="btn-primary flex items-center gap-1 text-xs">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                Edit
            </a>
            <a href="{{ route('patients.history', $patient) }}" class="btn-secondary flex items-center gap-1 text-xs">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Full History
            </a>
            @if(auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin'))
                {{-- Sick leave issuance is restricted to Super Admin / Hospital Admin.
                     Other roles can VIEW past certificates via the list below, but
                     only these admin tiers can issue a new one. --}}
                <a href="{{ route('sick-leave.create', $patient) }}" class="btn-secondary flex items-center gap-1 text-xs" style="background:#fef3c7;color:#92400e;border-color:#fde68a">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
                    Issue Sick Leave
                </a>
            @endif
        </div>
    </div>

    {{-- ═══ RIGHT COLUMN | visits & activity ══════════════════════════════════ --}}
    <div class="lg:col-span-2 space-y-5">

        {{-- Patient Balance Summary (expanded — full right column is available) --}}
        @include('partials._patient-balance-summary', ['patient' => $patient, 'compact' => false])

        @if($patient->appointments->count())
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <h3 class="text-sm font-bold text-gray-700 mb-3">Upcoming Appointments</h3>
            @foreach($patient->appointments->take(3) as $apt)
            <div class="flex items-center justify-between py-2 border-b border-gray-50 last:border-0">
                <div>
                    <p class="text-sm font-medium">{{ $apt->appointment_date->format('D, d M Y') }} {{ $apt->appointment_time ? '@ '.$apt->appointment_time : '' }}</p>
                    <p class="text-xs text-gray-500 capitalize">{{ $apt->type }} · {{ $apt->department->name ?? '' }}</p>
                </div>
                <span class="badge badge-info">{{ ucfirst($apt->status) }}</span>
            </div>
            @endforeach
        </div>
        @endif

        {{-- Recent Visits --}}
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-sm font-bold text-gray-700">Recent Visits</h3>
                <a href="{{ route('patients.history', $patient) }}" class="text-xs text-cr-600 font-medium">View All →</a>
            </div>
            <table class="w-full">
                <thead class="bg-gray-50"><tr>
                    <th class="table-header">Date</th>
                    <th class="table-header">Visit #</th>
                    <th class="table-header">Type</th>
                    <th class="table-header">Doctor</th>
                    <th class="table-header">Invoice</th>
                    <th class="table-header">Status</th>
                </tr></thead>
                <tbody class="divide-y divide-gray-50">
                @forelse($patient->visits as $visit)
                <tr class="hover:bg-gray-50">
                    <td class="table-cell">{{ $visit->created_at->format('d M Y') }}</td>
                    <td class="table-cell font-mono text-xs">{{ $visit->visit_number }}</td>
                    <td class="table-cell capitalize">{{ str_replace('_', ' ', $visit->visit_type) }}</td>
                    <td class="table-cell">{{ $visit->clinician->name ?? '-' }}</td>
                    <td class="table-cell">
                        @if($visit->invoice)
                        <span class="{{ $visit->invoice?->status === 'paid' ? 'text-green-600' : 'text-orange-600' }} font-medium">
                            KES {{ number_format($visit->invoice?->total_amount) }}
                        </span>
                        @else - @endif
                    </td>
                    <td class="table-cell"><span class="badge {{ $visit->status === 'completed' ? 'badge-success' : ($visit->status === 'waiting' ? 'badge-warning' : 'badge-info') }}">{{ ucfirst(str_replace('_',' ',$visit->status)) }}</span></td>
                </tr>
                @empty
                <tr><td colspan="6" class="table-cell text-center text-gray-400 py-8">No visits recorded yet.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>

        {{-- Sick Leave Certificates issued to this patient.
             Shown to ALL roles that can reach this profile, so non-admin
             clinical staff and Reception can find and reprint past certs.
             Only Admin sees the "Issue Sick Leave" button up top. --}}
        @php
            $sickLeaves = \App\Models\SickLeave::with(['attendingClinician', 'issuer'])
                ->where('patient_id', $patient->id)
                ->latest('issued_at')
                ->limit(10)
                ->get();
        @endphp
        @if($sickLeaves->count())
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-sm font-bold text-gray-700">Sick Leave Certificates</h3>
                @if(auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin'))
                    <a href="{{ route('sick-leave.create', $patient) }}" class="text-xs text-cr-600 font-medium">+ Issue New</a>
                @endif
            </div>
            <table class="w-full">
                <thead class="bg-gray-50"><tr>
                    <th class="table-header">Issued</th>
                    <th class="table-header">Treatment</th>
                    <th class="table-header">Days</th>
                    <th class="table-header">Issued To</th>
                    <th class="table-header">Sign-off</th>
                    <th class="table-header"></th>
                </tr></thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($sickLeaves as $sl)
                    <tr class="hover:bg-gray-50">
                        <td class="table-cell">{{ $sl->issued_at?->format('d M Y H:i') }}</td>
                        <td class="table-cell">{{ $sl->treatment_date?->format('d M Y') }}</td>
                        <td class="table-cell">{{ $sl->days }}</td>
                        <td class="table-cell">
                            @if($sl->isForGuardian())
                                <span class="bg-purple-100 text-purple-800 text-[10px] font-semibold px-1.5 py-0.5 rounded">Guardian</span>
                                <span class="text-xs">{{ $sl->guardian_name }}</span>
                            @else
                                <span class="text-xs text-gray-500">Patient</span>
                            @endif
                        </td>
                        <td class="table-cell">{{ $sl->sign_off_name }}</td>
                        <td class="table-cell">
                            <a href="{{ route('sick-leave.show', $sl) }}" class="text-cr-600 font-medium text-xs">View</a>
                            <span class="text-gray-300 mx-1">·</span>
                            <a href="{{ route('sick-leave.print', $sl) }}" target="_blank" class="text-cr-600 font-medium text-xs">Print</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        @if($patient->admissions->where('status', 'admitted')->count())
        <div class="bg-red-50 rounded-xl border border-red-200 p-5">
            <h3 class="text-sm font-bold text-red-800 mb-3">Currently Admitted</h3>
            @foreach($patient->admissions->where('status', 'admitted') as $adm)
            <div class="text-sm">
                <p><strong>Ward:</strong> {{ $adm->ward->name ?? '' }} · Bed: {{ $adm->bed->bed_number ?? '' }}</p>
                <p><strong>Since:</strong> {{ $adm->admission_date->format('d M Y') }} ({{ $adm->length_of_stay }} day{{ $adm->length_of_stay == 1 ? '' : 's' }})</p>
                <p><strong>Reason:</strong> {{ $adm->reason }}</p>
            </div>
            @endforeach
        </div>
        @endif

    </div>
</div>

{{-- ═══ ADD CONTACT MODAL ═══════════════════════════════════════════════════ --}}
<div id="addContactModal" class="hidden fixed inset-0 bg-black/30 z-50 flex items-center justify-center">
    <div class="bg-white rounded-xl p-6 w-full max-w-lg shadow-xl max-h-[90vh] overflow-y-auto">
        <h4 class="text-sm font-bold mb-4 text-gray-900">Add Contact / Representative</h4>
        <form method="POST" action="{{ route('patients.contacts.store', $patient) }}">
            @csrf
            <div class="space-y-3">
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">Role <span class="text-red-500">*</span></label>
                        <select name="role" required class="form-input text-sm">
                            @foreach(\App\Models\PatientContact::ROLES as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Relationship</label>
                        <select name="relationship" class="form-input text-sm">
                            <option value="">Select…</option>
                            @foreach(['Mother','Father','Spouse','Child','Sibling','Grandparent','Aunt/Uncle','Friend','Employer','Other'] as $r)
                            <option>{{ $r }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div>
                    <label class="form-label">Full Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" required class="form-input text-sm" placeholder="Contact's full name">
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div><label class="form-label">Phone</label><input type="tel" name="phone" class="form-input text-sm" placeholder="07XX XXX XXX"></div>
                    <div><label class="form-label">Alt. Phone</label><input type="tel" name="alt_phone" class="form-input text-sm"></div>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div><label class="form-label">ID / Passport</label><input type="text" name="id_number" class="form-input text-sm"></div>
                    <div><label class="form-label">Email</label><input type="email" name="email" class="form-input text-sm"></div>
                </div>
                <div><label class="form-label">Address</label><input type="text" name="address" class="form-input text-sm"></div>
                <div class="grid grid-cols-2 gap-3">
                    <div><label class="form-label">Occupation</label><input type="text" name="occupation" class="form-input text-sm"></div>
                    <div><label class="form-label">Employer</label><input type="text" name="employer" class="form-input text-sm"></div>
                </div>
                <div class="flex flex-wrap gap-4 pt-1">
                    <label class="flex items-center gap-1.5 text-xs cursor-pointer">
                        <input type="checkbox" name="is_primary" value="1" class="rounded"> Primary contact for this role
                    </label>
                    <label class="flex items-center gap-1.5 text-xs cursor-pointer">
                        <input type="checkbox" name="is_billing_guarantor" value="1" class="rounded"> Billing guarantor
                    </label>
                    <label class="flex items-center gap-1.5 text-xs cursor-pointer">
                        <input type="checkbox" name="has_legal_authority" value="1" class="rounded"> Has legal authority
                    </label>
                </div>
                <div id="legalAuthDoc" class="hidden">
                    <label class="form-label">Authority Document Reference</label>
                    <input type="text" name="authority_document" class="form-input text-sm" placeholder="e.g. Birth Certificate No. 12345">
                </div>
                <div id="creditLimitField" class="hidden">
                    <label class="form-label">Credit Limit (KES)</label>
                    <input type="number" name="credit_limit" step="0.01" class="form-input text-sm">
                </div>
                <div><label class="form-label">Notes</label><textarea name="notes" rows="2" class="form-input text-sm"></textarea></div>
            </div>
            <div class="flex gap-2 mt-5">
                <button type="submit" class="btn-primary text-sm px-5">Save Contact</button>
                <button type="button" onclick="document.getElementById('addContactModal').classList.add('hidden')" class="btn-secondary text-sm">Cancel</button>
            </div>
        </form>
    </div>
</div>


@endsection

@section('scripts')
<script>
// Toggle legal authority doc field
document.querySelector('[name="has_legal_authority"]')?.addEventListener('change', function() {
    document.getElementById('legalAuthDoc').classList.toggle('hidden', !this.checked);
});
// Toggle credit limit field
document.querySelector('[name="is_billing_guarantor"]')?.addEventListener('change', function() {
    document.getElementById('creditLimitField').classList.toggle('hidden', !this.checked);
});

</script>
@endsection