{% extends 'base.html' %}
{% load static %}

{% block title %}Report Adverse Reaction - {{ transfusion.transfusion_id }}{% endblock %}

{% block css %}
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<style>
.form-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #007bff;
}

.form-section h5 {
    color: #007bff;
    margin-bottom: 15px;
}

.required-field {
    color: #dc3545;
}

.transfusion-info {
    background: #d1ecf1;
    border-left: 4px solid #17a2b8;
}

.reaction-details {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
}

.severity-critical {
    background: #f8d7da;
    border: 2px solid #dc3545;
    animation: pulse 2s infinite;
}

.severity-moderate {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.severity-mild {
    background: #d4edda;
    border-left: 4px solid #28a745;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

.symptom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.symptom-category {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
}

.symptom-category h6 {
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.vital-signs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.vital-sign {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.timeline-entry {
    background: #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 4px solid #6c757d;
}

.intervention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.intervention-category {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
}

.severity-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.mild { background-color: #28a745; }
.moderate { background-color: #ffc107; }
.severe { background-color: #fd7e14; }
.critical { background-color: #dc3545; }

.reaction-summary {
    background: #e2e3e5;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}
</style>
{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'blood_bank:dashboard' %}">Blood Bank</a></li>
    <li class="breadcrumb-item"><a href="{% url 'blood_bank:transfusion_list' %}">Transfusions</a></li>
    <li class="breadcrumb-item"><a href="{% url 'blood_bank:transfusion_detail' transfusion.id %}">{{ transfusion.transfusion_id }}</a></li>
    <li class="breadcrumb-item active">Adverse Reaction</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    Adverse Reaction Report 
    <small>{{ transfusion.transfusion_id }}</small>
    <span class="badge bg-danger ms-2">URGENT</span>
</h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">
            <i class="fa fa-exclamation-triangle"></i> Adverse Transfusion Reaction Report
        </h4>
        <div class="panel-heading-btn">
            <span class="badge bg-danger">PRIORITY REPORT</span>
        </div>
    </div>
    <div class="panel-body">
        <form method="post" id="adverseReactionForm">
            {% csrf_token %}
            
            <!-- BEGIN transfusion information -->
            <div class="form-section transfusion-info">
                <h5><i class="fa fa-heartbeat"></i> Transfusion Information</h5>
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <td class="fw-bold">Transfusion ID:</td>
                                <td>{{ transfusion.transfusion_id }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Patient:</td>
                                <td>{{ transfusion.patient.full_name }} ({{ transfusion.patient.patient_id }})</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Blood Group:</td>
                                <td><span class="badge bg-primary">{{ transfusion.patient.blood_group.display_name }}</span></td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Blood Unit:</td>
                                <td>{{ transfusion.blood_unit.unit_number }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <td class="fw-bold">Unit Blood Group:</td>
                                <td><span class="badge bg-info">{{ transfusion.blood_unit.blood_group.display_name }}</span></td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Component:</td>
                                <td>{{ transfusion.blood_unit.component.get_name_display }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Start Time:</td>
                                <td>{{ transfusion.start_time|date:"M d, Y H:i" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Volume Transfused:</td>
                                <td>{{ transfusion.volume_transfused|default:"Calculating..." }} ml</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <!-- END transfusion information -->

            <!-- BEGIN reaction details -->
            <div class="form-section reaction-details">
                <h5><i class="fa fa-exclamation-circle"></i> Reaction Details</h5>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="reactionTime" class="form-label">
                                Reaction Time <span class="required-field">*</span>
                            </label>
                            <input type="datetime-local" class="form-control" id="reactionTime" name="reaction_time" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="severity" class="form-label">
                                Severity <span class="required-field">*</span>
                            </label>
                            <select class="form-select" id="severity" name="severity" required>
                                <option value="">Select severity...</option>
                                <option value="mild">Mild</option>
                                <option value="moderate">Moderate</option>
                                <option value="severe">Severe</option>
                                <option value="critical">Critical/Life-threatening</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="reactionType" class="form-label">
                                Reaction Type <span class="required-field">*</span>
                            </label>
                            <select class="form-select" id="reactionType" name="reaction_type" required>
                                <option value="">Select type...</option>
                                <option value="febrile">Febrile Non-Hemolytic</option>
                                <option value="allergic">Allergic</option>
                                <option value="anaphylactic">Anaphylactic</option>
                                <option value="hemolytic_acute">Acute Hemolytic</option>
                                <option value="hemolytic_delayed">Delayed Hemolytic</option>
                                <option value="trali">TRALI</option>
                                <option value="taco">TACO</option>
                                <option value="septic">Septic</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="timeFromStart" class="form-label">
                                Time from Transfusion Start
                            </label>
                            <input type="text" class="form-control" id="timeFromStart" name="time_from_start" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="volumeAtReaction" class="form-label">
                                Volume Transfused at Reaction (ml)
                            </label>
                            <input type="number" class="form-control" id="volumeAtReaction" name="volume_at_reaction" 
                                   min="0" max="{{ transfusion.blood_unit.volume_ml }}">
                        </div>
                    </div>
                </div>
            </div>
            <!-- END reaction details -->

            <!-- BEGIN symptoms -->
            <div class="form-section">
                <h5><i class="fa fa-stethoscope"></i> Symptoms & Signs</h5>
                <div class="symptom-grid">
                    <!-- Cardiovascular Symptoms -->
                    <div class="symptom-category">
                        <h6><i class="fa fa-heart"></i> Cardiovascular</h6>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="hypotension" id="hypotension">
                            <label class="form-check-label" for="hypotension">Hypotension</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="hypertension" id="hypertension">
                            <label class="form-check-label" for="hypertension">Hypertension</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="tachycardia" id="tachycardia">
                            <label class="form-check-label" for="tachycardia">Tachycardia</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="bradycardia" id="bradycardia">
                            <label class="form-check-label" for="bradycardia">Bradycardia</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="chest_pain" id="chest_pain">
                            <label class="form-check-label" for="chest_pain">Chest Pain</label>
                        </div>
                    </div>

                    <!-- Respiratory Symptoms -->
                    <div class="symptom-category">
                        <h6><i class="fa fa-lungs"></i> Respiratory</h6>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="dyspnea" id="dyspnea">
                            <label class="form-check-label" for="dyspnea">Dyspnea</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="wheezing" id="wheezing">
                            <label class="form-check-label" for="wheezing">Wheezing</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="cough" id="cough">
                            <label class="form-check-label" for="cough">Cough</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="stridor" id="stridor">
                            <label class="form-check-label" for="stridor">Stridor</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="cyanosis" id="cyanosis">
                            <label class="form-check-label" for="cyanosis">Cyanosis</label>
                        </div>
                    </div>

                    <!-- Dermatologic Symptoms -->
                    <div class="symptom-category">
                        <h6><i class="fa fa-hand-paper"></i> Dermatologic</h6>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="urticaria" id="urticaria">
                            <label class="form-check-label" for="urticaria">Urticaria (Hives)</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="rash" id="rash">
                            <label class="form-check-label" for="rash">Rash</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="pruritus" id="pruritus">
                            <label class="form-check-label" for="pruritus">Pruritus (Itching)</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="flushing" id="flushing">
                            <label class="form-check-label" for="flushing">Flushing</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="angioedema" id="angioedema">
                            <label class="form-check-label" for="angioedema">Angioedema</label>
                        </div>
                    </div>

                    <!-- Systemic Symptoms -->
                    <div class="symptom-category">
                        <h6><i class="fa fa-thermometer-half"></i> Systemic</h6>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="fever" id="fever">
                            <label class="form-check-label" for="fever">Fever</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="chills" id="chills">
                            <label class="form-check-label" for="chills">Chills</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="rigors" id="rigors">
                            <label class="form-check-label" for="rigors">Rigors</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="nausea" id="nausea">
                            <label class="form-check-label" for="nausea">Nausea</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="vomiting" id="vomiting">
                            <label class="form-check-label" for="vomiting">Vomiting</label>
                        </div>
                    </div>

                    <!-- Neurologic Symptoms -->
                    <div class="symptom-category">
                        <h6><i class="fa fa-brain"></i> Neurologic</h6>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="anxiety" id="anxiety">
                            <label class="form-check-label" for="anxiety">Anxiety</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="confusion" id="confusion">
                            <label class="form-check-label" for="confusion">Confusion</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="headache" id="headache">
                            <label class="form-check-label" for="headache">Headache</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="dizziness" id="dizziness">
                            <label class="form-check-label" for="dizziness">Dizziness</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="loss_consciousness" id="loss_consciousness">
                            <label class="form-check-label" for="loss_consciousness">Loss of Consciousness</label>
                        </div>
                    </div>

                    <!-- Other Symptoms -->
                    <div class="symptom-category">
                        <h6><i class="fa fa-plus"></i> Other</h6>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="back_pain" id="back_pain">
                            <label class="form-check-label" for="back_pain">Back Pain</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="flank_pain" id="flank_pain">
                            <label class="form-check-label" for="flank_pain">Flank Pain</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="hemoglobinuria" id="hemoglobinuria">
                            <label class="form-check-label" for="hemoglobinuria">Hemoglobinuria</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="jaundice" id="jaundice">
                            <label class="form-check-label" for="jaundice">Jaundice</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="symptoms" value="bleeding" id="bleeding">
                            <label class="form-check-label" for="bleeding">Abnormal Bleeding</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END symptoms -->

            <!-- BEGIN vital signs at reaction -->
            <div class="form-section">
                <h5><i class="fa fa-heartbeat"></i> Vital Signs at Time of Reaction</h5>
                <div class="vital-signs-grid">
                    <div class="vital-sign">
                        <label class="form-label">Blood Pressure</label>
                        <input type="text" class="form-control" name="bp_at_reaction" placeholder="120/80">
                    </div>
                    <div class="vital-sign">
                        <label class="form-label">Heart Rate (bpm)</label>
                        <input type="number" class="form-control" name="hr_at_reaction" min="30" max="250">
                    </div>
                    <div class="vital-sign">
                        <label class="form-label">Temperature (°C)</label>
                        <input type="number" step="0.1" class="form-control" name="temp_at_reaction" min="35" max="45">
                    </div>
                    <div class="vital-sign">
                        <label class="form-label">Respiratory Rate</label>
                        <input type="number" class="form-control" name="rr_at_reaction" min="8" max="60">
                    </div>
                    <div class="vital-sign">
                        <label class="form-label">O2 Saturation (%)</label>
                        <input type="number" class="form-control" name="o2_sat_at_reaction" min="70" max="100">
                    </div>
                    <div class="vital-sign">
                        <label class="form-label">Pain Scale (0-10)</label>
                        <input type="number" class="form-control" name="pain_scale" min="0" max="10">
                    </div>
                </div>
            </div>
            <!-- END vital signs at reaction -->

            <!-- BEGIN immediate actions -->
            <div class="form-section">
                <h5><i class="fa fa-first-aid"></i> Immediate Actions Taken</h5>
                <div class="intervention-grid">
                    <!-- Basic Interventions -->
                    <div class="intervention-category">
                        <h6><i class="fa fa-stop"></i> Basic Interventions</h6>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="transfusion_stopped" id="transfusion_stopped">
                            <label class="form-check-label" for="transfusion_stopped">Transfusion stopped immediately</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="iv_line_maintained" id="iv_line_maintained">
                            <label class="form-check-label" for="iv_line_maintained">IV line maintained with saline</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="physician_notified" id="physician_notified">
                            <label class="form-check-label" for="physician_notified">Physician notified</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="blood_bank_notified" id="blood_bank_notified">
                            <label class="form-check-label" for="blood_bank_notified">Blood bank notified</label>
                        </div>
                    </div>

                    <!-- Medications -->
                    <div class="intervention-category">
                        <h6><i class="fa fa-pills"></i> Medications</h6>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="antihistamine" id="antihistamine">
                            <label class="form-check-label" for="antihistamine">Antihistamine given</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="corticosteroids" id="corticosteroids">
                            <label class="form-check-label" for="corticosteroids">Corticosteroids given</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="epinephrine" id="epinephrine">
                            <label class="form-check-label" for="epinephrine">Epinephrine given</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="bronchodilators" id="bronchodilators">
                            <label class="form-check-label" for="bronchodilators">Bronchodilators given</label>
                        </div>
                    </div>

                    <!-- Supportive Care -->
                    <div class="intervention-category">
                        <h6><i class="fa fa-hand-holding-medical"></i> Supportive Care</h6>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="oxygen_therapy" id="oxygen_therapy">
                            <label class="form-check-label" for="oxygen_therapy">Oxygen therapy</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="fluid_resuscitation" id="fluid_resuscitation">
                            <label class="form-check-label" for="fluid_resuscitation">Fluid resuscitation</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="vasopressors" id="vasopressors">
                            <label class="form-check-label" for="vasopressors">Vasopressors</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="interventions" value="icu_transfer" id="icu_transfer">
                            <label class="form-check-label" for="icu_transfer">ICU transfer</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END immediate actions -->

            <!-- BEGIN outcome and follow-up -->
            <div class="form-section">
                <h5><i class="fa fa-chart-line"></i> Outcome & Follow-up</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="outcome" class="form-label">
                                Patient Outcome <span class="required-field">*</span>
                            </label>
                            <select class="form-select" id="outcome" name="outcome" required>
                                <option value="">Select outcome...</option>
                                <option value="resolved">Resolved completely</option>
                                <option value="improved">Improved with treatment</option>
                                <option value="ongoing">Ongoing symptoms</option>
                                <option value="worsened">Worsened despite treatment</option>
                                <option value="death">Death</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="resolutionTime" class="form-label">
                                Time to Resolution
                            </label>
                            <input type="text" class="form-control" id="resolutionTime" name="resolution_time" 
                                   placeholder="e.g., 30 minutes, 2 hours">
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="followUpRequired" class="form-label">Follow-up Required</label>
                            <textarea class="form-control" id="followUpRequired" name="follow_up_required" rows="3" 
                                      placeholder="Describe any follow-up care, monitoring, or testing required..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END outcome and follow-up -->

            <!-- BEGIN reporting information -->
            <div class="form-section">
                <h5><i class="fa fa-user-md"></i> Reporting Information</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="reportedBy" class="form-label">
                                Reported By <span class="required-field">*</span>
                            </label>
                            <select class="form-select" id="reportedBy" name="reported_by" required>
                                <option value="">Select reporter...</option>
                                {% for staff in clinical_staff %}
                                <option value="{{ staff.id }}">{{ staff.get_full_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="reportDate" class="form-label">
                                Report Date <span class="required-field">*</span>
                            </label>
                            <input type="datetime-local" class="form-control" id="reportDate" name="report_date" required>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="additionalNotes" class="form-label">Additional Notes</label>
                            <textarea class="form-control" id="additionalNotes" name="additional_notes" rows="4" 
                                      placeholder="Any additional observations, circumstances, or relevant information..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END reporting information -->

            <!-- BEGIN reaction summary -->
            <div class="reaction-summary">
                <h6><i class="fa fa-clipboard-check"></i> Reaction Summary</h6>
                <div id="reactionSummary">
                    <p class="text-muted">Complete the form to view reaction summary</p>
                </div>
            </div>
            <!-- END reaction summary -->

            <!-- BEGIN form actions -->
            <div class="d-flex justify-content-between mt-4">
                <a href="{% url 'blood_bank:transfusion_detail' transfusion.id %}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Cancel
                </a>
                <div>
                    <button type="button" class="btn btn-info" onclick="validateReaction()">
                        <i class="fa fa-check"></i> Validate Report
                    </button>
                    <button type="submit" class="btn btn-danger" id="submitBtn" disabled>
                        <i class="fa fa-exclamation-triangle"></i> Submit Adverse Reaction Report
                    </button>
                </div>
            </div>
            <!-- END form actions -->
        </form>
    </div>
</div>
<!-- END panel -->
{% endblock %}

{% block js %}
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('#severity, #reactionType, #outcome, #reportedBy').select2({
        theme: 'bootstrap-5'
    });

    // Set default times
    var now = new Date();
    $('#reactionTime').val(now.toISOString().slice(0, 16));
    $('#reportDate').val(now.toISOString().slice(0, 16));

    // Update displays when form changes
    updateTimeFromStart();
    updateReactionSummary();
    
    // Event listeners
    $('#reactionTime').on('change', function() {
        updateTimeFromStart();
        updateReactionSummary();
    });

    $('#severity').on('change', function() {
        updateSeverityDisplay();
        updateReactionSummary();
    });

    $('#reactionType, #outcome').on('change', function() {
        updateReactionSummary();
        validateReaction();
    });

    $('input[name="symptoms"], input[name="interventions"]').on('change', function() {
        updateReactionSummary();
        validateReaction();
    });

    // Form validation
    $('#adverseReactionForm').on('submit', function(e) {
        if (!validateReaction()) {
            e.preventDefault();
        }
    });
});

function updateTimeFromStart() {
    var reactionTime = new Date($('#reactionTime').val());
    var startTime = new Date("{{ transfusion.start_time|date:'c' }}");
    
    if (reactionTime && startTime) {
        var diffMs = reactionTime - startTime;
        var diffMins = Math.round(diffMs / 60000);
        
        if (diffMins < 60) {
            $('#timeFromStart').val(diffMins + ' minutes');
        } else {
            var hours = Math.floor(diffMins / 60);
            var mins = diffMins % 60;
            $('#timeFromStart').val(hours + ' hours ' + mins + ' minutes');
        }
    }
}

function updateSeverityDisplay() {
    var severity = $('#severity').val();
    var reactionSection = $('.reaction-details');
    
    reactionSection.removeClass('severity-mild severity-moderate severity-critical');
    
    switch(severity) {
        case 'mild':
            reactionSection.addClass('severity-mild');
            break;
        case 'moderate':
            reactionSection.addClass('severity-moderate');
            break;
        case 'severe':
        case 'critical':
            reactionSection.addClass('severity-critical');
            break;
    }
}

function updateReactionSummary() {
    var severity = $('#severity').val();
    var reactionType = $('#reactionType').val();
    var outcome = $('#outcome').val();
    var symptoms = $('input[name="symptoms"]:checked').length;
    var interventions = $('input[name="interventions"]:checked').length;
    
    if (!severity || !reactionType) {
        $('#reactionSummary').html('<p class="text-muted">Complete the form to view reaction summary</p>');
        return;
    }
    
    var summaryHtml = '<div class="row">';
    
    // Severity indicator
    var severityClass = severity === 'critical' ? 'critical' : severity === 'severe' ? 'severe' : severity === 'moderate' ? 'moderate' : 'mild';
    summaryHtml += '<div class="col-md-3">';
    summaryHtml += '<strong>Severity:</strong><br>';
    summaryHtml += '<span class="severity-indicator ' + severityClass + '"></span>';
    summaryHtml += severity.charAt(0).toUpperCase() + severity.slice(1);
    summaryHtml += '</div>';
    
    // Reaction type
    summaryHtml += '<div class="col-md-3">';
    summaryHtml += '<strong>Type:</strong><br>' + $('#reactionType option:selected').text();
    summaryHtml += '</div>';
    
    // Symptoms count
    summaryHtml += '<div class="col-md-3">';
    summaryHtml += '<strong>Symptoms:</strong><br>' + symptoms + ' documented';
    summaryHtml += '</div>';
    
    // Interventions count
    summaryHtml += '<div class="col-md-3">';
    summaryHtml += '<strong>Interventions:</strong><br>' + interventions + ' performed';
    summaryHtml += '</div>';
    
    summaryHtml += '</div>';
    
    // Outcome
    if (outcome) {
        summaryHtml += '<div class="mt-2">';
        summaryHtml += '<strong>Outcome:</strong> ' + $('#outcome option:selected').text();
        summaryHtml += '</div>';
    }
    
    // Critical warnings
    if (severity === 'critical' || severity === 'severe') {
        summaryHtml += '<div class="alert alert-danger mt-2">';
        summaryHtml += '<strong>⚠️ SERIOUS ADVERSE REACTION:</strong> Immediate regulatory reporting required.';
        summaryHtml += '</div>';
    }
    
    $('#reactionSummary').html(summaryHtml);
}

function validateReaction() {
    var errors = [];
    
    // Check required fields
    if (!$('#reactionTime').val()) {
        errors.push('Please enter reaction time');
    }
    
    if (!$('#severity').val()) {
        errors.push('Please select reaction severity');
    }
    
    if (!$('#reactionType').val()) {
        errors.push('Please select reaction type');
    }
    
    if (!$('#outcome').val()) {
        errors.push('Please select patient outcome');
    }
    
    if (!$('#reportedBy').val()) {
        errors.push('Please select who is reporting this reaction');
    }
    
    if (!$('#reportDate').val()) {
        errors.push('Please enter report date');
    }
    
    // Check that at least one symptom is selected
    var symptoms = $('input[name="symptoms"]:checked').length;
    if (symptoms === 0) {
        errors.push('Please select at least one symptom');
    }
    
    // Check that basic interventions are documented
    var basicInterventions = ['transfusion_stopped', 'physician_notified', 'blood_bank_notified'];
    var missingBasic = basicInterventions.filter(function(intervention) {
        return !document.getElementById(intervention).checked;
    });
    
    if (missingBasic.length > 0) {
        errors.push('Please confirm basic interventions (stop transfusion, notify physician, notify blood bank)');
    }

    // Enable/disable submit button
    $('#submitBtn').prop('disabled', errors.length > 0);

    if (errors.length > 0) {
        if (errors.length < 8) { // Only show errors if validation was explicitly requested
            Swal.fire({
                icon: 'error',
                title: 'Validation Errors',
                html: '<ul class="text-start"><li>' + errors.join('</li><li>') + '</li></ul>',
                confirmButtonText: 'OK'
            });
        }
        return false;
    }

    // Check for critical reactions
    var severity = $('#severity').val();
    if (severity === 'critical' || severity === 'severe') {
        Swal.fire({
            icon: 'warning',
            title: 'Serious Adverse Reaction',
            html: '<strong>This is a serious adverse reaction that requires immediate regulatory reporting.</strong><br><br>Please ensure all appropriate notifications have been made.',
            confirmButtonText: 'I Understand'
        });
    } else {
        Swal.fire({
            icon: 'success',
            title: 'Validation Passed',
            text: 'Adverse reaction report is complete and ready for submission.',
            timer: 1500,
            showConfirmButton: false
        });
    }
    
    return true;
}
</script>
{% endblock %}