@extends('layouts.app')

@section('content')
    <div class="min-vh-100 bg-light py-5">
        <div class="container" style="max-width: 56rem;">

            <!-- Step Indicator -->
            <div class="mb-5">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="rounded-circle text-white d-flex align-items-center justify-content-center fw-bold shadow" style="width: 3rem; height: 3rem; font-size: 1.25rem; background-color: #6f42c1;">
                            3
                        </div>
                        <div>
                            <p class="small text-secondary fw-medium mb-0">STEP 3 OF 4</p>
                            <h1 class="fs-4 fw-bold text-dark mb-0">Medical Information</h1>
                        </div>
                    </div>
                </div>

                <!-- Progress Bar -->
                <div class="progress" style="height: 0.5rem;">
                    <div class="progress-bar" role="progressbar" style="width: 75%; background-color: #6f42c1;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>

            <!-- Main Content -->
            <div class="card border rounded-4 shadow-sm">
                <div class="card-body p-5">

                    <div class="mb-5">
                        <h2 class="fs-1 fw-bold text-dark mb-2">Your Medical Information</h2>
                        <p class="fs-5 text-secondary">Please provide your medical details for the prescription</p>
                    </div>

                    <form action="{{ route('intake.step3.store') }}" method="POST" class="vstack gap-4" id="medicalForm">
                        @csrf

                        <!-- Hidden field to store gender from session -->
                        <input type="hidden" id="patient_gender" value="{{ session('gender', '') }}">

                        <!-- Medication Selection -->
                        <div>
                            <label for="medication" class="form-label fw-semibold text-dark">Select Medication</label>
                            <select class="form-select form-select-lg py-3 border-2 rounded-3" id="medication" name="medication">
                                <option value="">Choose a medication...</option>
                                <option value="Amoxicillin 500mg">Amoxicillin 500mg - Antibiotic</option>
                                <option value="Lisinopril 10mg">Lisinopril 10mg - Blood Pressure</option>
                                <option value="Atorvastatin 20mg">Atorvastatin 20mg - Cholesterol</option>
                                <option value="Metformin 500mg">Metformin 500mg - Diabetes</option>
                                <option value="Levothyroxine 50mcg">Levothyroxine 50mcg - Thyroid</option>
                                <option value="Omeprazole 20mg">Omeprazole 20mg - Acid Reflux</option>
                                <option value="Amlodipine 5mg">Amlodipine 5mg - Blood Pressure</option>
                                <option value="Simvastatin 40mg">Simvastatin 40mg - Cholesterol</option>
                            </select>
                        </div>

                        <!-- Chief Complaint -->
                        <div>
                            <label for="chief_complaint" class="form-label fw-semibold text-dark">Chief Complaint / Reason for Visit</label>
                            <textarea id="chief_complaint" name="chief_complaint" rows="4" class="form-control form-control-lg border-2 rounded-3" placeholder="Describe your symptoms or reason for this prescription..."></textarea>
                        </div>

                        <!-- Pregnancy/Lactation Status (Females 12-55 only) -->
                        <div id="pregnancy_section" style="display: none;">
                            <div class="card bg-light border-0 p-4">
                                <h4 class="fw-semibold text-dark mb-3">Pregnancy/Lactation Status</h4>
                                
                                <div class="mb-4">
                                    <label class="form-label fw-semibold text-dark mb-3">Are you pregnant or attempting to become pregnant?</label>
                                    <div class="btn-group w-100" role="group">
                                        <input type="radio" class="btn-check" name="is_pregnant" id="pregnant_yes" value="yes" autocomplete="off">
                                        <label class="btn btn-outline-secondary py-3" for="pregnant_yes">Yes</label>
                                        
                                        <input type="radio" class="btn-check" name="is_pregnant" id="pregnant_no" value="no" autocomplete="off">
                                        <label class="btn btn-outline-secondary py-3" for="pregnant_no">No</label>
                                    </div>
                                </div>

                                <div>
                                    <label class="form-label fw-semibold text-dark mb-3">Are you currently breastfeeding?</label>
                                    <div class="btn-group w-100" role="group">
                                        <input type="radio" class="btn-check" name="is_breastfeeding" id="breastfeeding_yes" value="yes" autocomplete="off">
                                        <label class="btn btn-outline-secondary py-3" for="breastfeeding_yes">Yes</label>
                                        
                                        <input type="radio" class="btn-check" name="is_breastfeeding" id="breastfeeding_no" value="no" autocomplete="off">
                                        <label class="btn btn-outline-secondary py-3" for="breastfeeding_no">No</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Medical Conditions (All Patients) -->
                        <div class="card bg-light border-0 p-4">
                            <h4 class="fw-semibold text-dark mb-3">Medical History</h4>
                            
                            <div class="mb-4">
                                <label class="form-label fw-semibold text-dark mb-3">Does the patient have medical conditions?</label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="has_medical_conditions" id="conditions_yes" value="yes" autocomplete="off">
                                    <label class="btn btn-outline-secondary py-3" for="conditions_yes">Yes</label>
                                    
                                    <input type="radio" class="btn-check" name="has_medical_conditions" id="conditions_no" value="no" autocomplete="off">
                                    <label class="btn btn-outline-secondary py-3" for="conditions_no">No</label>
                                </div>
                                <div id="medical_conditions_details" class="mt-3" style="display: none;">
                                    <textarea name="medical_conditions_list" rows="3" class="form-control form-control-lg border-2 rounded-3" placeholder="Please list medical conditions..."></textarea>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-semibold text-dark mb-3">Does the patient currently take any other medications?</label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="has_other_medications" id="medications_yes" value="yes" autocomplete="off">
                                    <label class="btn btn-outline-secondary py-3" for="medications_yes">Yes</label>
                                    
                                    <input type="radio" class="btn-check" name="has_other_medications" id="medications_no" value="no" autocomplete="off">
                                    <label class="btn btn-outline-secondary py-3" for="medications_no">No</label>
                                </div>
                                <div id="other_medications_details" class="mt-3" style="display: none;">
                                    <textarea name="other_medications_list" rows="3" class="form-control form-control-lg border-2 rounded-3" placeholder="Please list all medications you're currently taking..."></textarea>
                                </div>
                            </div>

                            <div>
                                <label class="form-label fw-semibold text-dark mb-3">Does this patient have drug allergies?</label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="has_drug_allergies" id="allergies_yes" value="yes" autocomplete="off">
                                    <label class="btn btn-outline-secondary py-3" for="allergies_yes">Yes</label>
                                    
                                    <input type="radio" class="btn-check" name="has_drug_allergies" id="allergies_no" value="no" autocomplete="off">
                                    <label class="btn btn-outline-secondary py-3" for="allergies_no">No</label>
                                </div>
                                <div id="drug_allergies_details" class="mt-3" style="display: none;">
                                    <textarea name="drug_allergies_list" rows="3" class="form-control form-control-lg border-2 rounded-3" placeholder="Please list any drug allergies..."></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="pt-4">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <a href="{{ route('intake.step2') }}" class="btn btn-outline-secondary btn-lg w-100 py-3 fs-5 fw-semibold rounded-3">
                                        ← Back
                                    </a>
                                </div>
                                <div class="col-md-8">
                                    <button type="submit" class="btn btn-lg w-100 py-3 fs-5 fw-semibold rounded-3 shadow text-white" style="background-color: #6f42c1;">
                                        Continue to Pharmacy & Logistics →
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Help Link -->
            <div class="mt-4 text-center">
                <p class="text-secondary mb-0">
                    Need help? <a href="#" class="fw-medium text-decoration-underline" style="color: #6f42c1;">Contact Support</a>
                </p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Check if patient is female and show pregnancy section
            const gender = document.getElementById('patient_gender').value;
            const pregnancySection = document.getElementById('pregnancy_section');
            
            if (gender === 'female') {
                pregnancySection.style.display = 'block';
            }

            // Toggle medical conditions details
            document.querySelectorAll('input[name="has_medical_conditions"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    const detailsDiv = document.getElementById('medical_conditions_details');
                    if (this.value === 'yes') {
                        detailsDiv.style.display = 'block';
                    } else {
                        detailsDiv.style.display = 'none';
                    }
                });
            });

            // Toggle other medications details
            document.querySelectorAll('input[name="has_other_medications"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    const detailsDiv = document.getElementById('other_medications_details');
                    if (this.value === 'yes') {
                        detailsDiv.style.display = 'block';
                    } else {
                        detailsDiv.style.display = 'none';
                    }
                });
            });

            // Toggle drug allergies details
            document.querySelectorAll('input[name="has_drug_allergies"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    const detailsDiv = document.getElementById('drug_allergies_details');
                    if (this.value === 'yes') {
                        detailsDiv.style.display = 'block';
                    } else {
                        detailsDiv.style.display = 'none';
                    }
                });
            });
        });
    </script>
@endsection