@extends('layouts.app')

@section('title', 'ANC Consult')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-6">

    {{-- Pregnancy banner (always top) --}}
    @include('anc.partials.pregnancy-banner', [
        'patient'    => $patient,
        'pregnancy'  => $pregnancy,
        'consult'    => $consult,
        'riskResult' => $riskResult,
        'triageOk'   => $triageOk ?? $consult->triage_complete,
    ])

    {{-- Action bar --}}
    <div class="flex items-center justify-between mb-4">
        <div>
            <h1 class="text-xl font-bold text-gray-900">
                @if($readOnly ?? false)
                    ANC Consult · {{ $consult->consult_date?->format('d M Y') }}
                @elseif($isEdit)
                    Edit ANC Consult
                @else
                    New ANC Consult
                @endif
            </h1>
            <p class="text-sm text-gray-500">
                Mirrors MOH 405 booklet. All fields optional except those marked required.
            </p>
        </div>
        @if($readOnly ?? false)
            <a href="{{ route('anc.consults.edit', $consult) }}"
               class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
                Edit
            </a>
        @endif
    </div>

    @if(session('success'))
        <div class="mb-4 px-4 py-3 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-4 px-4 py-3 bg-rose-50 border border-rose-200 text-rose-800 rounded">
            <div class="font-semibold mb-1">Please correct the following:</div>
            <ul class="list-disc list-inside text-sm">
                @foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach
            </ul>
        </div>
    @endif

    <form method="POST"
          action="{{ $isEdit ? route('anc.consults.update', $consult) : route('anc.consults.store', $visit) }}"
          @if($readOnly ?? false) onsubmit="return false" @endif
          class="grid grid-cols-12 gap-4">

        @csrf
        @if($isEdit) @method('PUT') @endif

        {{-- ============================================================
             LEFT: MAIN FORM (9 cols)
             ============================================================ --}}
        <div class="col-span-12 lg:col-span-9 space-y-4">

            {{-- ========== SECTION 1: TRIAGE (mandatory soft) ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50 flex items-center justify-between">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">1.</span> Triage / Vital Signs
                    </h2>
                    <span class="text-xs text-amber-600 font-medium">Required (soft)</span>
                </header>
                <div class="p-5 grid grid-cols-2 md:grid-cols-4 gap-4">
                    @include('anc.partials._fields.input', ['name'=>'bp_systolic',      'label'=>'BP Systolic',  'unit'=>'mmHg',  'type'=>'number', 'step'=>'0.1'])
                    @include('anc.partials._fields.input', ['name'=>'bp_diastolic',     'label'=>'BP Diastolic', 'unit'=>'mmHg',  'type'=>'number', 'step'=>'0.1'])
                    @include('anc.partials._fields.input', ['name'=>'pulse',            'label'=>'Pulse',        'unit'=>'bpm',   'type'=>'number'])
                    @include('anc.partials._fields.input', ['name'=>'temperature',      'label'=>'Temperature',  'unit'=>'°C',    'type'=>'number', 'step'=>'0.1'])
                    @include('anc.partials._fields.input', ['name'=>'respiratory_rate', 'label'=>'Resp. Rate',   'unit'=>'/min',  'type'=>'number'])
                    @include('anc.partials._fields.input', ['name'=>'weight_kg',        'label'=>'Weight',       'unit'=>'kg',    'type'=>'number', 'step'=>'0.01'])
                    @include('anc.partials._fields.input', ['name'=>'height_cm',        'label'=>'Height',       'unit'=>'cm',    'type'=>'number', 'step'=>'0.1'])
                    @include('anc.partials._fields.input', ['name'=>'bmi',              'label'=>'BMI',          'unit'=>'kg/m²', 'type'=>'number', 'step'=>'0.01', 'help'=>'Auto-calculated'])
                    @include('anc.partials._fields.input', ['name'=>'muac_cm',          'label'=>'MUAC',         'unit'=>'cm',    'type'=>'number', 'step'=>'0.1'])
                </div>
            </section>

            {{-- ========== SECTION 2: PREGNANCY DATING ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">2.</span> Pregnancy Dating
                    </h2>
                </header>
                <div class="p-5 grid grid-cols-2 md:grid-cols-4 gap-4">
                    @include('anc.partials._fields.input', ['name'=>'lmp',             'label'=>'LMP',              'type'=>'date'])
                    @include('anc.partials._fields.input', ['name'=>'edd',             'label'=>'EDD (auto if blank)','type'=>'date'])
                    @include('anc.partials._fields.input', ['name'=>'gestation_weeks', 'label'=>'GA (weeks)',       'type'=>'number'])
                    @include('anc.partials._fields.input', ['name'=>'gestation_days',  'label'=>'GA (days)',        'type'=>'number'])
                    @include('anc.partials._fields.input', ['name'=>'visit_number',    'label'=>'Visit #',          'type'=>'number'])
                    @include('anc.partials._fields.input', ['name'=>'consult_date',    'label'=>'Consult Date',     'type'=>'date'])
                </div>
            </section>

            {{-- ========== SECTION 3: HISTORY (a) OBSTETRIC ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">3.</span> History (a) — Obstetric
                    </h2>
                </header>
                <div class="p-5 space-y-4">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        @include('anc.partials._fields.input', ['name'=>'gravida',         'label'=>'Gravida',         'type'=>'number'])
                        @include('anc.partials._fields.input', ['name'=>'para',            'label'=>'Para',            'type'=>'number'])
                        @include('anc.partials._fields.input', ['name'=>'abortions',       'label'=>'Abortions',       'type'=>'number'])
                        @include('anc.partials._fields.input', ['name'=>'living_children', 'label'=>'Living Children', 'type'=>'number'])
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                        @include('anc.partials._fields.checkbox', ['name'=>'previous_cs',                 'label'=>'Previous C-section'])
                        @include('anc.partials._fields.input',    ['name'=>'previous_cs_count',          'label'=>'CS count', 'type'=>'number'])
                        @include('anc.partials._fields.checkbox', ['name'=>'previous_pph',                'label'=>'Previous PPH'])
                        @include('anc.partials._fields.checkbox', ['name'=>'previous_stillbirth',         'label'=>'Previous stillbirth'])
                        @include('anc.partials._fields.checkbox', ['name'=>'previous_preeclampsia',       'label'=>'Previous pre-eclampsia'])
                        @include('anc.partials._fields.checkbox', ['name'=>'previous_eclampsia',          'label'=>'Previous eclampsia'])
                        @include('anc.partials._fields.checkbox', ['name'=>'previous_preterm',            'label'=>'Previous preterm'])
                        @include('anc.partials._fields.checkbox', ['name'=>'previous_low_birth_weight',   'label'=>'Previous LBW'])
                        @include('anc.partials._fields.checkbox', ['name'=>'previous_congenital_anomaly', 'label'=>'Previous congenital anomaly'])
                        @include('anc.partials._fields.checkbox', ['name'=>'previous_neonatal_death',     'label'=>'Previous neonatal death'])
                    </div>

                    @include('anc.partials._fields.textarea', ['name'=>'obstetric_history_notes', 'label'=>'Additional obstetric history'])
                </div>
            </section>

            {{-- ========== SECTION 4: HISTORY (b) MEDICAL & SURGICAL ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">4.</span> History (b) — Medical & Surgical
                    </h2>
                </header>
                <div class="p-5 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_hypertension',  'label'=>'Hypertension'])
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_diabetes',      'label'=>'Diabetes'])
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_cardiac',       'label'=>'Cardiac disease'])
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_asthma',        'label'=>'Asthma'])
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_tb',            'label'=>'TB'])
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_hiv',           'label'=>'HIV'])
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_epilepsy',      'label'=>'Epilepsy'])
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_sickle_cell',   'label'=>'Sickle cell'])
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_renal',         'label'=>'Renal disease'])
                        @include('anc.partials._fields.checkbox', ['name'=>'hx_mental_health', 'label'=>'Mental health'])
                    </div>

                    @include('anc.partials._fields.textarea', ['name'=>'other_medical_history', 'label'=>'Other medical history'])
                    @include('anc.partials._fields.textarea', ['name'=>'surgical_history',      'label'=>'Surgical history'])
                    @include('anc.partials._fields.textarea', ['name'=>'drug_allergies',        'label'=>'Drug allergies'])
                    @include('anc.partials._fields.textarea', ['name'=>'current_medications',   'label'=>'Current medications'])
                </div>
            </section>

            {{-- ========== SECTION 5: HISTORY (c) FAMILY & SOCIAL ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">5.</span> History (c) — Family & Social
                    </h2>
                </header>
                <div class="p-5 space-y-4">
                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Family history</div>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            @include('anc.partials._fields.checkbox', ['name'=>'family_hx_hypertension', 'label'=>'Hypertension'])
                            @include('anc.partials._fields.checkbox', ['name'=>'family_hx_diabetes',     'label'=>'Diabetes'])
                            @include('anc.partials._fields.checkbox', ['name'=>'family_hx_twins',        'label'=>'Twins'])
                            @include('anc.partials._fields.checkbox', ['name'=>'family_hx_congenital',   'label'=>'Congenital anomaly'])
                        </div>
                    </div>

                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Social</div>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                            @include('anc.partials._fields.checkbox', ['name'=>'social_smoking',       'label'=>'Smoking'])
                            @include('anc.partials._fields.checkbox', ['name'=>'social_alcohol',       'label'=>'Alcohol use'])
                            @include('anc.partials._fields.checkbox', ['name'=>'social_substance_use', 'label'=>'Substance use'])
                            @include('anc.partials._fields.checkbox', ['name'=>'social_ipv_screened',  'label'=>'IPV screened'])
                            @include('anc.partials._fields.checkbox', ['name'=>'social_ipv_positive',  'label'=>'IPV disclosed'])
                        </div>
                    </div>

                    @include('anc.partials._fields.textarea', ['name'=>'social_history_notes', 'label'=>'Social history notes'])
                </div>
            </section>

            {{-- ========== SECTION 6: HISTORY (d) PRESENT PREGNANCY ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">6.</span> History (d) — Present Pregnancy
                    </h2>
                </header>
                <div class="p-5 space-y-4">
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        @include('anc.partials._fields.checkbox', ['name'=>'fetal_movements_felt',   'label'=>'Fetal movements felt'])
                        @include('anc.partials._fields.checkbox', ['name'=>'reduced_fetal_movement', 'label'=>'Reduced fetal movement'])
                        @include('anc.partials._fields.checkbox', ['name'=>'vaginal_bleeding',       'label'=>'Vaginal bleeding'])
                        @include('anc.partials._fields.checkbox', ['name'=>'vaginal_discharge',      'label'=>'Vaginal discharge'])
                        @include('anc.partials._fields.checkbox', ['name'=>'headache',               'label'=>'Headache'])
                        @include('anc.partials._fields.checkbox', ['name'=>'blurred_vision',         'label'=>'Blurred vision'])
                        @include('anc.partials._fields.checkbox', ['name'=>'epigastric_pain',        'label'=>'Epigastric pain'])
                        @include('anc.partials._fields.checkbox', ['name'=>'dysuria',                'label'=>'Dysuria'])
                        @include('anc.partials._fields.checkbox', ['name'=>'fever',                  'label'=>'Fever'])
                        @include('anc.partials._fields.checkbox', ['name'=>'vomiting',               'label'=>'Vomiting'])
                        @include('anc.partials._fields.checkbox', ['name'=>'swelling_limbs_face',    'label'=>'Swelling of limbs/face'])
                    </div>
                    @include('anc.partials._fields.textarea', ['name'=>'present_pregnancy_notes', 'label'=>'Present pregnancy notes'])
                </div>
            </section>

            {{-- ========== SECTION 7: EXAMINATION ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">7.</span> Examination
                    </h2>
                </header>
                <div class="p-5 space-y-4">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        @include('anc.partials._fields.input', ['name'=>'fundal_height_cm',   'label'=>'Fundal height', 'unit'=>'cm',  'type'=>'number', 'step'=>'0.1'])
                        @include('anc.partials._fields.select', ['name'=>'fetal_lie',          'label'=>'Fetal lie',     'options'=>['longitudinal'=>'Longitudinal','transverse'=>'Transverse','oblique'=>'Oblique']])
                        @include('anc.partials._fields.select', ['name'=>'fetal_presentation', 'label'=>'Presentation',  'options'=>['cephalic'=>'Cephalic','breech'=>'Breech','shoulder'=>'Shoulder','other'=>'Other']])
                        @include('anc.partials._fields.input', ['name'=>'fetal_heart_rate',   'label'=>'FHR',           'unit'=>'bpm', 'type'=>'number'])
                        @include('anc.partials._fields.select', ['name'=>'fetal_heart_status', 'label'=>'Fetal heart',   'options'=>['present'=>'Present','absent'=>'Absent','not_checked'=>'Not checked']])
                    </div>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                        @include('anc.partials._fields.select', ['name'=>'pallor',   'label'=>'Pallor',   'options'=>['none'=>'None','mild'=>'Mild','moderate'=>'Moderate','severe'=>'Severe']])
                        @include('anc.partials._fields.select', ['name'=>'jaundice', 'label'=>'Jaundice', 'options'=>['none'=>'None','mild'=>'Mild','moderate'=>'Moderate','severe'=>'Severe']])
                        @include('anc.partials._fields.select', ['name'=>'oedema',   'label'=>'Oedema',   'options'=>['none'=>'None','mild'=>'Mild','moderate'=>'Moderate','severe'=>'Severe']])
                    </div>
                    @include('anc.partials._fields.textarea', ['name'=>'general_examination_notes',   'label'=>'General examination'])
                    @include('anc.partials._fields.textarea', ['name'=>'abdominal_examination_notes', 'label'=>'Abdominal examination'])
                </div>
            </section>

            {{-- ========== SECTION 8: LABS ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">8.</span> Laboratory Results
                    </h2>
                </header>
                <div class="p-5 grid grid-cols-2 md:grid-cols-4 gap-4">
                    @include('anc.partials._fields.input', ['name'=>'haemoglobin',        'label'=>'Haemoglobin', 'unit'=>'g/dL', 'type'=>'number', 'step'=>'0.1'])
                    @include('anc.partials._fields.input', ['name'=>'blood_group',        'label'=>'Blood group'])
                    @include('anc.partials._fields.input', ['name'=>'rhesus',             'label'=>'Rhesus'])
                    @include('anc.partials._fields.input', ['name'=>'urinalysis_protein', 'label'=>'Urine protein'])
                    @include('anc.partials._fields.input', ['name'=>'urinalysis_sugar',   'label'=>'Urine sugar'])
                    @include('anc.partials._fields.input', ['name'=>'vdrl_result',        'label'=>'VDRL'])
                    @include('anc.partials._fields.input', ['name'=>'hiv_result',         'label'=>'HIV'])
                    @include('anc.partials._fields.input', ['name'=>'hep_b_result',       'label'=>'Hep B'])
                    @include('anc.partials._fields.input', ['name'=>'rbs',                'label'=>'RBS', 'unit'=>'mmol/L', 'type'=>'number', 'step'=>'0.1'])
                </div>
                <div class="px-5 pb-5">
                    @include('anc.partials._fields.textarea', ['name'=>'other_lab_findings', 'label'=>'Other lab findings'])
                </div>
            </section>

            {{-- ========== SECTION 9: ASSESSMENT / DIAGNOSIS ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">9.</span> Assessment & Diagnosis
                    </h2>
                </header>
                <div class="p-5 space-y-4">
                    @include('anc.partials._fields.textarea', ['name'=>'assessment', 'label'=>'Assessment', 'rows'=>4])
                </div>
            </section>

            {{-- ========== SECTION 10: MOH 405 INTERVENTIONS ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">10.</span> MOH 405 Interventions
                    </h2>
                </header>
                <div class="p-5 grid grid-cols-1 md:grid-cols-3 gap-3">
                    @include('anc.partials._fields.checkbox', ['name'=>'ifas_issued',     'label'=>'IFAS issued'])
                    @include('anc.partials._fields.checkbox', ['name'=>'tt_given',        'label'=>'TT given'])
                    @include('anc.partials._fields.input',    ['name'=>'tt_dose',         'label'=>'TT dose'])
                    @include('anc.partials._fields.checkbox', ['name'=>'iptp_given',      'label'=>'IPTp-SP given'])
                    @include('anc.partials._fields.input',    ['name'=>'iptp_dose',       'label'=>'IPTp-SP dose'])
                    @include('anc.partials._fields.checkbox', ['name'=>'deworming_given', 'label'=>'Deworming'])
                    @include('anc.partials._fields.checkbox', ['name'=>'itn_issued',      'label'=>'ITN issued'])
                </div>
            </section>

            {{-- ========== SECTION 11: PLAN ========== --}}
            <section class="bg-white rounded-lg shadow-sm border border-gray-200">
                <header class="px-5 py-3 border-b bg-gray-50">
                    <h2 class="font-semibold text-gray-800">
                        <span class="text-gray-400 mr-1">11.</span> Plan
                    </h2>
                </header>
                <div class="p-5 space-y-4">
                    @include('anc.partials._fields.textarea', ['name'=>'plan_notes',             'label'=>'Plan',                    'rows'=>3])
                    @include('anc.partials._fields.textarea', ['name'=>'health_education_given', 'label'=>'Health education given',  'rows'=>2])
                    @include('anc.partials._fields.input',    ['name'=>'next_appointment_date',  'label'=>'Next appointment', 'type'=>'date'])
                </div>
            </section>

            {{-- Submit bar (hidden in read-only) --}}
            @unless($readOnly ?? false)
                <div class="flex items-center justify-end gap-3 pt-2">
                    <a href="{{ url()->previous() }}" class="px-4 py-2 text-gray-700 hover:text-gray-900 text-sm">
                        Cancel
                    </a>
                    <button type="submit" class="px-5 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm font-medium">
                        {{ $isEdit ? 'Update Consult' : 'Save Consult' }}
                    </button>
                </div>
            @endunless
        </div>

        {{-- ============================================================
             RIGHT: ORDERS PANEL (always visible, sticky, 3 cols)
             ============================================================ --}}
        <aside class="col-span-12 lg:col-span-3">
            <div class="sticky top-4 space-y-3">
                @include('anc.partials._orders-panel', ['consult' => $consult, 'readOnly' => $readOnly ?? false])
            </div>
        </aside>

    </form>
</div>

{{-- BMI auto-calc + triage hint --}}
<script>
(function() {
    const weight = document.querySelector('[name="weight_kg"]');
    const height = document.querySelector('[name="height_cm"]');
    const bmi    = document.querySelector('[name="bmi"]');
    function recalc() {
        if (!weight || !height || !bmi) return;
        const w = parseFloat(weight.value);
        const h = parseFloat(height.value);
        if (w > 0 && h > 0) {
            const m = h / 100;
            bmi.value = (w / (m * m)).toFixed(2);
        }
    }
    weight?.addEventListener('input', recalc);
    height?.addEventListener('input', recalc);
})();
</script>
@endsection