@extends("layouts.app", ["title" => "Record Consultation"])

@section("content_body")
    @include("shared.partials.page-title", ["subtitle" => "Healthcare", "title" => "Record Clinical Consultation"])

    <div class="row">
        <div class="col-lg-10 offset-lg-1">
            <form action="{{ route('consultations.store') }}" method="POST">
                @csrf
                <input type="hidden" name="home_visit_id" value="{{ $visit->id }}">

                <!-- Basic Visit & Patient Selection -->
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="header-title mb-2 text-primary">Patient & Visit Details</h4>
                        <p class="text-muted mb-3">Recording details for visit at household <strong>{{ $visit->family->name }}</strong> on {{ $visit->scheduled_at->format('Y-m-d') }}</p>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="patient_id" class="form-label font-semibold">Select Patient (Family Member) *</label>
                                <select class="form-select @error('patient_id') is-invalid @enderror" id="patient_id" name="patient_id" required data-choices>
                                    <option value="">Select Member</option>
                                    @foreach ($patients as $pat)
                                        <option value="{{ $pat->id }}" {{ old('patient_id') == $pat->id ? 'selected' : '' }}>
                                            {{ $pat->name }} (Age: {{ $pat->date_of_birth->age }} years, Group: {{ $pat->dispensary_group ?? 'None' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('patient_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="satisfaction" class="form-label font-semibold">Patient Satisfaction Rating (1 to 5 Stars)</label>
                                <select class="form-select @error('patient_satisfaction') is-invalid @enderror" id="satisfaction" name="patient_satisfaction">
                                    <option value="">Select Rating</option>
                                    <option value="5">5 - Excellent Care</option>
                                    <option value="4">4 - Very Good</option>
                                    <option value="3">3 - Good</option>
                                    <option value="2">2 - Fair</option>
                                    <option value="1">1 - Poor Care</option>
                                </select>
                                @error('patient_satisfaction')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Reason for Admission & History of Current Illness -->
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="header-title mb-3 text-primary">Intake & Reason for Visit</h4>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="reason_for_admission" class="form-label font-semibold">Reason for Admission / Motivo de Ingreso</label>
                                <textarea class="form-control" id="reason_for_admission" name="reason_for_admission" rows="3" placeholder="Symptom or reason for consult..."></textarea>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="history_of_current_illness" class="form-label font-semibold">History of Current Illness / Historia de la Enfermedad Actual</label>
                                <textarea class="form-control" id="history_of_current_illness" name="history_of_current_illness" rows="3" placeholder="Evolution, duration, details of illness..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Vitals Card -->
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="header-title mb-3 text-primary">Vital Signs</h4>
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label for="bp" class="form-label">Blood Pressure</label>
                                <input type="text" class="form-control" id="bp" name="vitals[blood_pressure]" placeholder="e.g. 120/80">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="pulse" class="form-label">Pulse Rate (bpm)</label>
                                <input type="text" class="form-control" id="pulse" name="vitals[pulse]" placeholder="e.g. 72">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="temp" class="form-label">Temperature (°C)</label>
                                <input type="text" class="form-control" id="temp" name="vitals[temperature]" placeholder="e.g. 36.5">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="weight" class="form-label">Weight (kg)</label>
                                <input type="text" class="form-control" id="weight" name="vitals[weight]" placeholder="e.g. 70">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pathological & Surgical History -->
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="header-title mb-3 text-primary">Pathological & Surgical History</h4>
                        
                        <!-- Pathological Grid -->
                        <div class="mb-4">
                            <label class="form-label font-semibold d-block">Personal and Family Pathological History (Antecedentes Patológicos)</label>
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm align-middle text-center fs-12">
                                    <thead>
                                        <tr class="bg-light">
                                            <th class="text-start">Condition</th>
                                            <th>Personal</th>
                                            <th>Father (Padre)</th>
                                            <th>Mother (Madre)</th>
                                            <th>Child (Hijo)</th>
                                            <th>Other (Otros)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $conditions = [
                                                'hypertension' => 'Arterial Hypertension (HTA)',
                                                'diabetes' => 'Diabetes Mellitus (DM)',
                                                'ischemic_heart_disease' => 'Ischemic Heart Disease (CI)',
                                                'asthma' => 'Asthma (Asma)',
                                                'cancer' => 'Cancer',
                                                'psychiatric' => 'Psychiatric Disease (Psiquiatría)',
                                                'other' => 'Other / Otros'
                                            ];
                                        @endphp
                                        @foreach ($conditions as $key => $label)
                                            <tr>
                                                <td class="text-start font-semibold">{{ $label }}</td>
                                                <td><input class="form-check-input" type="checkbox" name="pathological_history[{{ $key }}][personal]" value="1"></td>
                                                <td><input class="form-check-input" type="checkbox" name="pathological_history[{{ $key }}][father]" value="1"></td>
                                                <td><input class="form-check-input" type="checkbox" name="pathological_history[{{ $key }}][mother]" value="1"></td>
                                                <td><input class="form-check-input" type="checkbox" name="pathological_history[{{ $key }}][child]" value="1"></td>
                                                <td><input class="form-check-input" type="checkbox" name="pathological_history[{{ $key }}][other]" value="1"></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Surgical History -->
                        <div class="mb-2">
                            <label class="form-label font-semibold">Surgical History / Antecedentes Quirúrgicos</label>
                            <div class="row g-2 mb-2 bg-light p-2 rounded">
                                <div class="col-md-5">
                                    <input type="text" class="form-control form-control-sm" name="surgical_history[0][operation]" placeholder="Operation Name">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control form-control-sm" name="surgical_history[0][date]" placeholder="Year/Date">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control form-control-sm" name="surgical_history[0][sequelae]" placeholder="Sequelae / Remarks">
                                </div>
                            </div>
                            <div class="row g-2 bg-light p-2 rounded">
                                <div class="col-md-5">
                                    <input type="text" class="form-control form-control-sm" name="surgical_history[1][operation]" placeholder="Operation Name">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control form-control-sm" name="surgical_history[1][date]" placeholder="Year/Date">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control form-control-sm" name="surgical_history[1][sequelae]" placeholder="Sequelae / Remarks">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Review of Systems (ROS) -->
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="header-title mb-3 text-primary">Review of Systems / Interrogatorio por Sistemas</h4>
                        
                        <div class="row">
                            <!-- Respiratory -->
                            <div class="col-md-6 mb-3">
                                <div class="p-2 border rounded">
                                    <h6 class="font-semibold text-info mb-2">Respiratory System</h6>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[respiratory][cough]" id="ros_resp_cough" value="1">
                                        <label class="form-check-label fs-12" for="ros_resp_cough">Cough</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[respiratory][dyspnea]" id="ros_resp_dysp" value="1">
                                        <label class="form-check-label fs-12" for="ros_resp_dysp">Dyspnea</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[respiratory][expectoration]" id="ros_resp_exp" value="1">
                                        <label class="form-check-label fs-12" for="ros_resp_exp">Expectoration</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[respiratory][hemoptysis]" id="ros_resp_hem" value="1">
                                        <label class="form-check-label fs-12" for="ros_resp_hem">Hemoptysis</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Cardiovascular -->
                            <div class="col-md-6 mb-3">
                                <div class="p-2 border rounded">
                                    <h6 class="font-semibold text-info mb-2">Cardiovascular System</h6>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[cardiovascular][chest_pain]" id="ros_cv_pain" value="1">
                                        <label class="form-check-label fs-12" for="ros_cv_pain">Chest Pain</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[cardiovascular][palpitations]" id="ros_cv_palp" value="1">
                                        <label class="form-check-label fs-12" for="ros_cv_palp">Palpitations</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[cardiovascular][edema]" id="ros_cv_edema" value="1">
                                        <label class="form-check-label fs-12" for="ros_cv_edema">Edema</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[cardiovascular][orthopnea]" id="ros_cv_orth" value="1">
                                        <label class="form-check-label fs-12" for="ros_cv_orth">Orthopnea</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Digestive -->
                            <div class="col-md-6 mb-3">
                                <div class="p-2 border rounded">
                                    <h6 class="font-semibold text-info mb-2">Digestive System</h6>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[digestive][nausea]" id="ros_dig_naus" value="1">
                                        <label class="form-check-label fs-12" for="ros_dig_naus">Nausea</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[digestive][vomiting]" id="ros_dig_vom" value="1">
                                        <label class="form-check-label fs-12" for="ros_dig_vom">Vomiting</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[digestive][diarrhea]" id="ros_dig_diar" value="1">
                                        <label class="form-check-label fs-12" for="ros_dig_diar">Diarrhea</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[digestive][abdominal_pain]" id="ros_dig_pain" value="1">
                                        <label class="form-check-label fs-12" for="ros_dig_pain">Abdominal Pain</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Genitourinary -->
                            <div class="col-md-6 mb-3">
                                <div class="p-2 border rounded">
                                    <h6 class="font-semibold text-info mb-2">Genitourinary System</h6>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[genitourinary][dysuria]" id="ros_gu_dys" value="1">
                                        <label class="form-check-label fs-12" for="ros_gu_dys">Dysuria</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[genitourinary][hematuria]" id="ros_gu_hem" value="1">
                                        <label class="form-check-label fs-12" for="ros_gu_hem">Hematuria</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[genitourinary][polyuria]" id="ros_gu_poly" value="1">
                                        <label class="form-check-label fs-12" for="ros_gu_poly">Polyuria</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[genitourinary][nocturia]" id="ros_gu_noct" value="1">
                                        <label class="form-check-label fs-12" for="ros_gu_noct">Nocturia</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Neurological -->
                            <div class="col-md-12 mb-3">
                                <div class="p-2 border rounded">
                                    <h6 class="font-semibold text-info mb-2">Neurological & Others</h6>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[neurological][headaches]" id="ros_neur_head" value="1">
                                        <label class="form-check-label fs-12" for="ros_neur_head">Headaches</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[neurological][vertigo]" id="ros_neur_vert" value="1">
                                        <label class="form-check-label fs-12" for="ros_neur_vert">Vertigo</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[neurological][seizures]" id="ros_neur_seiz" value="1">
                                        <label class="form-check-label fs-12" for="ros_neur_seiz">Seizures</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="system_interrogation[neurological][hearing_loss]" id="ros_neur_hear" value="1">
                                        <label class="form-check-label fs-12" for="ros_neur_hear">Hearing Loss</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Physical Examination Status -->
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="header-title mb-3 text-primary">Physical Examination / Examen Físico</h4>
                        
                        @php
                            $examSections = [
                                'general' => 'General (Skin, Mucosas, Subcutaneous Tissue, etc.)',
                                'regional' => 'Regional (Head, Neck, Thorax, Abdomen)',
                                'respiratory' => 'Respiratory System',
                                'cardiovascular' => 'Cardiovascular System',
                                'digestive' => 'Digestive System',
                                'nervous' => 'Nervous System'
                            ];
                        @endphp
                        @foreach ($examSections as $secKey => $secLabel)
                            <div class="row g-2 mb-3 align-items-center bg-light p-2 rounded">
                                <div class="col-md-3 font-semibold">{{ $secLabel }}</div>
                                <div class="col-md-3">
                                    <select class="form-select form-select-sm" name="physical_exam[{{ $secKey }}][status]">
                                        <option value="NE">Not Examined (NE)</option>
                                        <option value="N">Normal (N)</option>
                                        <option value="AN">Abnormal (AN)</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control form-control-sm" name="physical_exam[{{ $secKey }}][notes]" placeholder="Describe abnormal findings if status is AN">
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Clinical Evolution & Diagnostics -->
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="header-title mb-3 text-primary">Evolution, Diagnostics & Treatment</h4>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="evolution_treatment" class="form-label font-semibold">Evolution & Treatment / Evolución y Tratamiento</label>
                                <textarea class="form-control" id="evolution_treatment" name="evolution_treatment" rows="3" placeholder="Evolution since last consult, treatment regimen details..."></textarea>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="notes" class="form-label font-semibold">Clinical Consultation & Progress Notes</label>
                                <textarea class="form-control" id="notes" name="clinical_notes" rows="3" placeholder="Describe symptoms, assessment, and progress..."></textarea>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Chronic Flag Checkboxes -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label font-semibold d-block text-danger">Medical / Chronic Flags</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="chronic_diseases[]" value="hypertension" id="chronic_hyper">
                                    <label class="form-check-label" for="chronic_hyper">Hypertension</label>
                                </div>
                                <div class="form-check mt-1">
                                    <input class="form-check-input" type="checkbox" name="chronic_diseases[]" value="diabetes" id="chronic_diab">
                                    <label class="form-check-label" for="chronic_diab">Diabetes</label>
                                </div>
                                <div class="form-check mt-1">
                                    <input class="form-check-input" type="checkbox" name="chronic_diseases[]" value="pregnancy" id="chronic_preg">
                                    <label class="form-check-label" for="chronic_preg">Pregnancy Case</label>
                                </div>
                            </div>

                            <!-- Medications & Vaccinations -->
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label class="form-label font-semibold">Prescribe Medications (comma separated)</label>
                                    <input type="text" class="form-control" name="medications[]" placeholder="e.g. Metformin, Lisinopril">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label font-semibold">Log Vaccinations (comma separated)</label>
                                    <input type="text" class="form-control" name="vaccinations[]" placeholder="e.g. Polio booster, COVID-19 Vaccine">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Discharge & Follow Up Outcomes -->
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="header-title mb-3 text-primary">Discharge, Disability & Follow-up Plan</h4>
                        
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label for="discharge_status" class="form-label font-semibold">Discharge Status</label>
                                <select class="form-select" id="discharge_status" name="discharge_status">
                                    <option value="alive" selected>Alive (Vivo)</option>
                                    <option value="deceased">Deceased (Fallecido)</option>
                                </select>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="autopsy" class="form-label font-semibold">Autopsy Conducted?</label>
                                <select class="form-select" id="autopsy" name="autopsy">
                                    <option value="0" selected>No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="disability_impact" class="form-label font-semibold">Disability Impact</label>
                                <select class="form-select" id="disability_impact" name="disability_impact">
                                    <option value="none" selected>None (Sin Secuelas)</option>
                                    <option value="temporary">Temporary (Temporal)</option>
                                    <option value="definite_partial">Definite Partial (Definitiva Parcial)</option>
                                    <option value="definite_total">Definite Total (Definitiva Total)</option>
                                </select>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="follow_up_plan" class="form-label font-semibold">Follow-up Plan</label>
                                <select class="form-select" id="follow_up_plan" name="follow_up_plan">
                                    <option value="primary_care" selected>Primary Care Follow-up (EBS)</option>
                                    <option value="outpatient">Outpatient Consultation</option>
                                    <option value="referral">Specialist Referral</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-5 text-center">
                    <button type="submit" class="btn btn-primary btn-lg px-5">Save Consultation Details</button>
                    <a href="{{ route('visits.show', $visit->id) }}" class="btn btn-light btn-lg ms-2 px-4">Cancel</a>
                </div>
            </form>
        </div>
    </div>
@endsection