@extends('layouts.app')
@section('title', 'Register New Patient')
@section('content')
<div class="max-w-5xl mx-auto">
    <!-- MRN Preview -->
    <div class="bg-cr-50 border border-cr-200 rounded-lg px-4 py-3 mb-5 flex items-center justify-between">
        <div class="flex items-center gap-2">
            <svg class="w-5 h-5 text-cr-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"/></svg>
            <span class="text-sm text-cr-700">New patient will be assigned MRN:</span>
        </div>
        <span class="font-mono font-bold text-cr-800 text-lg">{{ $nextMRN }}</span>
    </div>

    <!-- Duplicate detection banners (shown via JS) -->
    <div id="duplicate-warning" class="bg-red-50 border border-red-300 rounded-xl p-4 mb-4 hidden">
        <p class="text-sm font-bold text-red-800 mb-2">⚠ Possible duplicate | same person may already be registered</p>
        <div id="duplicate-list" class="space-y-1.5"></div>
        <p class="text-xs text-red-600 mt-2">If this is the same patient, use the existing record. Do NOT register twice.</p>
    </div>

    <div id="shared-contact-warning" class="bg-amber-50 border border-amber-300 rounded-xl p-4 mb-4 hidden">
        <p class="text-sm font-bold text-amber-800 mb-2">ℹ Shared contact detail | different person, same phone/ID</p>
        <p class="text-xs text-amber-700 mb-2">
            This phone number or ID is already used by a patient with a <strong>different name</strong>.
            This is likely a guardian, caregiver, or household member | not the same person.
            You can safely proceed with registration. After saving, the contact relationship will be created automatically if you select a role below.
        </p>
        <div id="shared-contact-list" class="space-y-1.5"></div>

        {{-- Inline contact role assignment | appears when shared contacts are detected --}}
        <div id="shared-contact-role-section" class="hidden mt-3 pt-3 border-t border-amber-200">
            <p class="text-xs font-semibold text-amber-800 mb-2">Link this relationship (optional | recommended)</p>
            <p class="text-xs text-amber-600 mb-2">Select how the <strong>new patient</strong> relates to the existing record above. This will automatically add a contact entry on the existing patient's file after registration.</p>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                <div>
                    <label class="form-label text-xs text-amber-700">Contact Role</label>
                    <select name="shared_contact_role" id="shared_contact_role" class="form-input text-xs py-1.5">
                        <option value="">| Skip (do it later) |</option>
                        @foreach(\App\Models\PatientContact::ROLES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label text-xs text-amber-700">Relationship</label>
                    <select name="shared_contact_relationship" class="form-input text-xs py-1.5">
                        <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 class="md:col-span-2">
                    <label class="form-label text-xs text-amber-700">Notes (optional)</label>
                    <input type="text" name="shared_contact_notes" class="form-input text-xs py-1.5" placeholder="e.g. Mother uses same phone for both children">
                </div>
            </div>
            <input type="hidden" name="shared_contact_patient_id" id="shared_contact_patient_id" value="">
        </div>
    </div>

    <form method="POST" action="{{ route('patients.store') }}" enctype="multipart/form-data" id="patientForm">
        @csrf

        <!-- Section 1: Personal Information -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-5">
            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide mb-4 flex items-center gap-2">
                <span class="w-6 h-6 bg-cr-600 text-white rounded-full text-xs flex items-center justify-center">1</span>
                Personal Information
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div><label class="form-label">First Name <span class="text-red-500">*</span></label><input type="text" name="first_name" value="{{ old('first_name') }}" required class="form-input" id="first_name"></div>
                <div><label class="form-label">Middle Name</label><input type="text" name="middle_name" value="{{ old('middle_name') }}" class="form-input"></div>
                <div><label class="form-label">Last Name <span class="text-red-500">*</span></label><input type="text" name="last_name" value="{{ old('last_name') }}" required class="form-input" id="last_name"></div>
                <div><label class="form-label">Gender <span class="text-red-500">*</span></label>
                    <select name="gender" required class="form-input">
                        <option value="">Select</option>
                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                        <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>
                <div><label class="form-label">Date of Birth</label><input type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" class="form-input" max="{{ date('Y-m-d') }}" id="dobInput" onchange="dobToAge()"></div>
                <div><label class="form-label">Age <span class="text-red-500">*</span></label>
                    <div class="flex gap-1">
                        <input type="number" name="age_value" id="ageValue" value="{{ old('age_value') }}" required min="0" max="150" class="form-input flex-1" placeholder="Age" onchange="ageToDob()">
                        <select name="age_unit" id="ageUnit" class="form-input w-24" onchange="ageToDob()">
                            <option value="years" {{ old('age_unit', 'years') === 'years' ? 'selected' : '' }}>Years</option>
                            <option value="months" {{ old('age_unit') === 'months' ? 'selected' : '' }}>Months</option>
                        </select>
                    </div>
                </div>
                <div><label class="form-label">ID / Passport Number</label><input type="text" name="id_number" value="{{ old('id_number') }}" class="form-input" id="id_number" placeholder="e.g. 12345678"></div>
                <div><label class="form-label">Phone Number <span class="text-red-500">*</span></label>
                    <input type="tel" name="phone" value="{{ old('phone') }}" required class="form-input" id="phone" placeholder="0712 345 678" maxlength="12">
                </div>
                <div><label class="form-label">Alt. Phone</label>
                    <input type="tel" name="alt_phone" value="{{ old('alt_phone') }}" class="form-input" placeholder="Optional" maxlength="12">
                </div>
                <div><label class="form-label">Email</label><input type="email" name="email" value="{{ old('email') }}" class="form-input"></div>
                <div><label class="form-label">Blood Group</label>
                    <select name="blood_group" class="form-input">
                        <option value="">Unknown</option>
                        @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bg)
                            <option value="{{ $bg }}" {{ old('blood_group') == $bg ? 'selected' : '' }}>{{ $bg }}</option>
                        @endforeach
                    </select>
                </div>
                <div><label class="form-label">Marital Status</label>
                    <select name="marital_status" class="form-input">
                        <option value="">Select</option>
                        @foreach(['Single','Married','Divorced','Widowed','Separated'] as $ms)
                            <option {{ old('marital_status') == $ms ? 'selected' : '' }}>{{ $ms }}</option>
                        @endforeach
                    </select>
                </div>
                <div><label class="form-label">Occupation</label><input type="text" name="occupation" value="{{ old('occupation') }}" class="form-input"></div>
                <div><label class="form-label">Employer</label><input type="text" name="employer" value="{{ old('employer') }}" class="form-input"></div>
                <div><label class="form-label">Photo (Optional)</label><input type="file" name="photo" accept="image/*" class="form-input text-xs"></div>
            </div>
        </div>

        <!-- Section 2: Address -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-5">
            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide mb-4 flex items-center gap-2">
                <span class="w-6 h-6 bg-cr-600 text-white rounded-full text-xs flex items-center justify-center">2</span>
                Address
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="md:col-span-2"><label class="form-label">Physical Address</label><input type="text" name="address" value="{{ old('address') }}" class="form-input" placeholder="Street, Estate, Building"></div>
                <div><label class="form-label">County</label>
                    <select name="county" class="form-input">
                        <option value="">Select County</option>
                        @foreach(['Nairobi','Mombasa','Kisumu','Nakuru','Kiambu','Machakos','Kajiado','Muranga','Nyeri','Uasin Gishu','Kilifi','Kwale','Garissa','Mandera','Wajir','Marsabit','Isiolo','Meru','Tharaka-Nithi','Embu','Kitui','Makueni','Nyandarua','Laikipia','Samburu','Trans Nzoia','West Pokot','Baringo','Elgeyo-Marakwet','Nandi','Kericho','Bomet','Turkana','Kakamega','Bungoma','Busia','Vihiga','Siaya','Kisii','Nyamira','Homa Bay','Migori','Narok','Lamu','Tana River','Taita-Taveta'] as $c)
                            <option value="{{ $c }}" {{ old('county', 'Nairobi') == $c ? 'selected' : '' }}>{{ $c }}</option>
                        @endforeach
                    </select>
                </div>
                <div><label class="form-label">Sub-County</label><input type="text" name="sub_county" value="{{ old('sub_county') }}" class="form-input" placeholder="e.g. Embakasi East"></div>
            </div>
        </div>

        <!-- Section 3: Next of Kin -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-5">
            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide mb-4 flex items-center gap-2">
                <span class="w-6 h-6 bg-cr-600 text-white rounded-full text-xs flex items-center justify-center">3</span>
                Next of Kin
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="md:col-span-2"><label class="form-label">Full Name</label><input type="text" name="nok_name" value="{{ old('nok_name') }}" class="form-input"></div>
                <div><label class="form-label">Phone</label><input type="tel" name="nok_phone" value="{{ old('nok_phone') }}" class="form-input"></div>
                <div><label class="form-label">Relationship</label>
                    <select name="nok_relationship" class="form-input">
                        <option value="">Select</option>
                        @foreach(['Spouse','Parent','Child','Sibling','Guardian','Friend','Other'] as $r)
                            <option {{ old('nok_relationship') == $r ? 'selected' : '' }}>{{ $r }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="md:col-span-4"><label class="form-label">Address</label><input type="text" name="nok_address" value="{{ old('nok_address') }}" class="form-input" placeholder="Optional"></div>
            </div>
        </div>

        <!-- Section 4: Insurance -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-5">
            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide mb-4 flex items-center gap-2">
                <span class="w-6 h-6 bg-cr-600 text-white rounded-full text-xs flex items-center justify-center">4</span>
                Insurance Details
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div><label class="form-label">Insurance Company</label>
                    <select name="insurance_id" class="form-input" id="insurance_id">
                        <option value="">None (Cash Patient)</option>
                        @foreach($insurers as $ins)
                            <option value="{{ $ins->id }}" {{ old('insurance_id') == $ins->id ? 'selected' : '' }}>{{ $ins->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div><label class="form-label">Member / Card Number</label><input type="text" name="insurance_member_no" value="{{ old('insurance_member_no') }}" class="form-input" placeholder="e.g. 12345678"></div>
                <div><label class="form-label">Scheme</label><input type="text" name="insurance_scheme" value="{{ old('insurance_scheme') }}" class="form-input" placeholder="e.g. Corporate, Individual"></div>
            </div>
        </div>

        <!-- Section 5: Medical Alerts -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-5">
            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide mb-4 flex items-center gap-2">
                <span class="w-6 h-6 bg-red-500 text-white rounded-full text-xs flex items-center justify-center">5</span>
                Medical Alerts & Conditions
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">Known Allergies <span class="text-xs text-gray-400">(comma-separated)</span></label>
                    <input type="text" name="allergies_text" value="{{ old('allergies_text') }}" class="form-input" placeholder="e.g. Penicillin, Sulfa, Peanuts">
                </div>
                <div>
                    <label class="form-label">Chronic Conditions <span class="text-xs text-gray-400">(comma-separated)</span></label>
                    <input type="text" name="chronic_conditions_text" value="{{ old('chronic_conditions_text') }}" class="form-input" placeholder="e.g. Diabetes, Hypertension, Asthma">
                </div>
            </div>
            <div class="mt-4">
                <label class="form-label">Patient Alerts / Tags</label>
                <div class="flex flex-wrap gap-4 mt-1">
                    <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" name="alert_vip" value="1" class="rounded border-gray-300 text-cr-600"> VIP Patient</label>
                    <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" name="alert_staff" value="1" class="rounded border-gray-300 text-cr-600"> Staff Member</label>
                    <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" name="alert_police" value="1" class="rounded border-gray-300 text-cr-600"> Police / Military</label>
                    <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" name="alert_nhif" value="1" class="rounded border-gray-300 text-cr-600"> SHA</label>
                    <div class="flex items-center gap-2"><label class="text-sm text-gray-500">Other:</label><input type="text" name="alert_custom" class="form-input w-40 py-1" placeholder="Custom alert"></div>
                </div>
            </div>
        </div>

        <!-- Consent -->
        <div class="bg-gray-50 rounded-xl border border-gray-200 p-5 mb-5">
            <label class="flex items-start gap-3 cursor-pointer">
                <input type="checkbox" required class="mt-0.5 rounded border-gray-300 text-cr-600">
                <span class="text-sm text-gray-600">I confirm that the patient has been informed about data collection and consents to the storage of their personal and medical information as per the <strong>Data Protection Act, 2019 (Kenya)</strong> and the hospital's privacy policy.</span>
            </label>
        </div>

        <!-- Actions -->
        <div class="flex items-center gap-3">
            <button type="submit" class="btn-success flex items-center gap-2 px-6 py-2.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                Register Patient
            </button>
            <a href="{{ route('patients.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>

@endsection

@push('scripts')
<script>
// ── DOB ↔ Age synchronization ──
function dobToAge() {
    const dob = document.getElementById('dobInput').value;
    if (!dob) return;
    const birth = new Date(dob);
    const now = new Date();
    let years = now.getFullYear() - birth.getFullYear();
    const m = now.getMonth() - birth.getMonth();
    if (m < 0 || (m === 0 && now.getDate() < birth.getDate())) years--;

    if (years >= 1) {
        document.getElementById('ageValue').value = years;
        document.getElementById('ageUnit').value = 'years';
    } else {
        let months = (now.getFullYear() - birth.getFullYear()) * 12 + (now.getMonth() - birth.getMonth());
        if (now.getDate() < birth.getDate()) months--;
        if (months < 0) months = 0;
        document.getElementById('ageValue').value = months;
        document.getElementById('ageUnit').value = 'months';
    }
}

function ageToDob() {
    const val = parseInt(document.getElementById('ageValue').value);
    const unit = document.getElementById('ageUnit').value;
    if (isNaN(val) || val < 0) return;

    const now = new Date();
    let dob;
    if (unit === 'months') {
        dob = new Date(now.getFullYear(), now.getMonth() - val, now.getDate());
    } else {
        dob = new Date(now.getFullYear() - val, now.getMonth(), now.getDate());
    }
    // Only auto-fill DOB if it's currently empty (don't overwrite a precise date)
    const dobInput = document.getElementById('dobInput');
    if (!dobInput.value) {
        dobInput.value = dob.toISOString().split('T')[0];
    }
}

// ── Duplicate detection on blur ──
let debounceTimer;
['first_name','last_name','phone','id_number'].forEach(id => {
    const el = document.getElementById(id);
    if(el) el.addEventListener('blur', checkDuplicates);
});

function checkDuplicates() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        const fn  = document.getElementById('first_name')?.value?.trim();
        const ln  = document.getElementById('last_name')?.value?.trim();
        let ph = document.getElementById('phone')?.value?.trim();
        const idn = document.getElementById('id_number')?.value?.trim();

        if (!fn || !ln) return;

        fetch('{{ route("patients.check-duplicate") }}', {
            method: 'POST',
            headers: {'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
            body: JSON.stringify({first_name:fn, last_name:ln, phone:ph, id_number:idn})
        })
        .then(r => r.json())
        .then(result => {
            const trueWarn   = document.getElementById('duplicate-warning');
            const trueList   = document.getElementById('duplicate-list');
            const sharedWarn = document.getElementById('shared-contact-warning');
            const sharedList = document.getElementById('shared-contact-list');

            const dupes = result.true_duplicates || [];
            if (dupes.length > 0) {
                trueList.innerHTML = dupes.map(d =>
                    `<div class="flex items-center gap-3 text-xs bg-white rounded-lg px-3 py-2 border border-red-200">
                        <span class="font-mono font-bold text-red-700 min-w-[6rem]">${d.mrn}</span>
                        <span class="font-semibold text-gray-800">${d.name}</span>
                        <span class="text-gray-400">${d.phone || ''}</span>
                        <span class="text-gray-400">${d.dob || ''}</span>
                        <a href="${window.HMIS_BASE}/patients/${d.id}" target="_blank" class="ml-auto text-red-700 font-semibold hover:underline whitespace-nowrap">View record →</a>
                    </div>`
                ).join('');
                trueWarn.classList.remove('hidden');
            } else {
                trueWarn.classList.add('hidden');
            }

            const shared = result.shared_contacts || [];
            if (shared.length > 0) {
                sharedList.innerHTML = shared.map(d =>
                    `<div class="flex items-start gap-3 text-xs bg-white rounded-lg px-3 py-2.5 border border-amber-200">
                        <span class="font-mono font-bold text-amber-700 min-w-[6rem] mt-0.5">${d.mrn}</span>
                        <div class="flex-1">
                            <p class="font-semibold text-gray-800">${d.name}</p>
                            <p class="text-amber-700 mt-0.5">${d.warning}</p>
                        </div>
                        <a href="${window.HMIS_BASE}/patients/${d.id}" target="_blank" class="text-amber-700 font-semibold hover:underline whitespace-nowrap mt-0.5">View →</a>
                    </div>`
                ).join('');
                sharedWarn.classList.remove('hidden');
                const roleSection = document.getElementById('shared-contact-role-section');
                const hiddenPatientId = document.getElementById('shared_contact_patient_id');
                if (roleSection) {
                    roleSection.classList.remove('hidden');
                    if (hiddenPatientId && shared[0]) hiddenPatientId.value = shared[0].id;
                }
            } else {
                sharedWarn.classList.add('hidden');
                const roleSection = document.getElementById('shared-contact-role-section');
                if (roleSection) roleSection.classList.add('hidden');
            }
        }).catch(() => {});
    }, 500);
}
</script>
@endpush