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

{% block title %}{% if object %}Edit{% else %}Add{% endif %} Drug Interaction{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-3">
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'pharmacy:dashboard' %}">Pharmacy</a></li>
            <li class="breadcrumb-item"><a href="{% url 'pharmacy:drug_interaction_list' %}">Drug Interactions</a></li>
            <li class="breadcrumb-item active">{% if object %}Edit{% else %}Add{% endif %}</li>
        </ol>
        <h1 class="page-header mb-0">{% if object %}Edit{% else %}Add{% endif %} Drug Interaction</h1>
    </div>
    <div class="ms-auto">
        <a href="{% url 'pharmacy:drug_interaction_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to List
        </a>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-xl-10">
        <form method="post" id="drugInteractionForm">
            {% csrf_token %}
            
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Drug Interaction Information
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="drug1" class="form-label">
                                    <strong>Primary Drug *</strong>
                                </label>
                                <select class="form-select" id="drug1" name="drug1" required>
                                    <option value="">Select primary drug</option>
                                    {% for medication in medications %}
                                    <option value="{{ medication.pk }}" 
                                            {% if object and object.drug1.pk == medication.pk %}selected{% endif %}
                                            data-generic="{{ medication.generic_name }}"
                                            data-brand="{{ medication.brand_name }}"
                                            data-class="{{ medication.drug_class }}">
                                        {{ medication.name }} ({{ medication.generic_name }})
                                    </option>
                                    {% endfor %}
                                </select>
                                <div class="form-text">
                                    Select the primary drug in this interaction.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="drug2" class="form-label">
                                    <strong>Interacting Drug *</strong>
                                </label>
                                <select class="form-select" id="drug2" name="drug2" required>
                                    <option value="">Select interacting drug</option>
                                    {% for medication in medications %}
                                    <option value="{{ medication.pk }}" 
                                            {% if object and object.drug2.pk == medication.pk %}selected{% endif %}
                                            data-generic="{{ medication.generic_name }}"
                                            data-brand="{{ medication.brand_name }}"
                                            data-class="{{ medication.drug_class }}">
                                        {{ medication.name }} ({{ medication.generic_name }})
                                    </option>
                                    {% endfor %}
                                </select>
                                <div class="form-text">
                                    Select the drug that interacts with the primary drug.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="severity" class="form-label">
                                    <strong>Severity Level *</strong>
                                </label>
                                <select class="form-select" id="severity" name="severity" required>
                                    <option value="">Select severity</option>
                                    <option value="minor" {% if object and object.severity == 'minor' %}selected{% endif %}>Minor</option>
                                    <option value="moderate" {% if object and object.severity == 'moderate' %}selected{% endif %}>Moderate</option>
                                    <option value="major" {% if object and object.severity == 'major' %}selected{% endif %}>Major</option>
                                    <option value="contraindicated" {% if object and object.severity == 'contraindicated' %}selected{% endif %}>Contraindicated</option>
                                </select>
                                <div class="form-text">
                                    Severity of the drug interaction.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="interaction_type" class="form-label">
                                    <strong>Interaction Type *</strong>
                                </label>
                                <select class="form-select" id="interaction_type" name="interaction_type" required>
                                    <option value="">Select type</option>
                                    <option value="pharmacokinetic" {% if object and object.interaction_type == 'pharmacokinetic' %}selected{% endif %}>Pharmacokinetic</option>
                                    <option value="pharmacodynamic" {% if object and object.interaction_type == 'pharmacodynamic' %}selected{% endif %}>Pharmacodynamic</option>
                                    <option value="additive" {% if object and object.interaction_type == 'additive' %}selected{% endif %}>Additive</option>
                                    <option value="synergistic" {% if object and object.interaction_type == 'synergistic' %}selected{% endif %}>Synergistic</option>
                                    <option value="antagonistic" {% if object and object.interaction_type == 'antagonistic' %}selected{% endif %}>Antagonistic</option>
                                </select>
                                <div class="form-text">
                                    Type of drug interaction mechanism.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="onset" class="form-label">
                                    <strong>Onset *</strong>
                                </label>
                                <select class="form-select" id="onset" name="onset" required>
                                    <option value="">Select onset</option>
                                    <option value="rapid" {% if object and object.onset == 'rapid' %}selected{% endif %}>Rapid (within hours)</option>
                                    <option value="delayed" {% if object and object.onset == 'delayed' %}selected{% endif %}>Delayed (days to weeks)</option>
                                    <option value="unknown" {% if object and object.onset == 'unknown' %}selected{% endif %}>Unknown</option>
                                </select>
                                <div class="form-text">
                                    How quickly the interaction occurs.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">
                            <strong>Interaction Description *</strong>
                        </label>
                        <textarea class="form-control" 
                                  id="description" 
                                  name="description" 
                                  rows="4" 
                                  required 
                                  placeholder="Describe the drug interaction mechanism and effects...">{{ object.description|default:"" }}</textarea>
                        <div class="form-text">
                            Detailed description of how the drugs interact and what effects may occur.
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="clinical_effects" class="form-label">
                            <strong>Clinical Effects</strong>
                        </label>
                        <textarea class="form-control" 
                                  id="clinical_effects" 
                                  name="clinical_effects" 
                                  rows="3" 
                                  placeholder="Describe the clinical effects and symptoms...">{{ object.clinical_effects|default:"" }}</textarea>
                        <div class="form-text">
                            Observable clinical effects and symptoms that may result from this interaction.
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="management" class="form-label">
                            <strong>Management Recommendations *</strong>
                        </label>
                        <textarea class="form-control" 
                                  id="management" 
                                  name="management" 
                                  rows="4" 
                                  required 
                                  placeholder="Provide management recommendations...">{{ object.management|default:"" }}</textarea>
                        <div class="form-text">
                            Recommendations for managing this drug interaction, including monitoring, dose adjustments, or alternatives.
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-cogs me-2"></i>
                        Additional Information
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="evidence_level" class="form-label">
                                    <strong>Evidence Level</strong>
                                </label>
                                <select class="form-select" id="evidence_level" name="evidence_level">
                                    <option value="">Select evidence level</option>
                                    <option value="established" {% if object and object.evidence_level == 'established' %}selected{% endif %}>Established</option>
                                    <option value="probable" {% if object and object.evidence_level == 'probable' %}selected{% endif %}>Probable</option>
                                    <option value="suspected" {% if object and object.evidence_level == 'suspected' %}selected{% endif %}>Suspected</option>
                                    <option value="possible" {% if object and object.evidence_level == 'possible' %}selected{% endif %}>Possible</option>
                                    <option value="unlikely" {% if object and object.evidence_level == 'unlikely' %}selected{% endif %}>Unlikely</option>
                                </select>
                                <div class="form-text">
                                    Level of evidence supporting this interaction.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="frequency" class="form-label">
                                    <strong>Frequency</strong>
                                </label>
                                <select class="form-select" id="frequency" name="frequency">
                                    <option value="">Select frequency</option>
                                    <option value="very_common" {% if object and object.frequency == 'very_common' %}selected{% endif %}>Very Common (>10%)</option>
                                    <option value="common" {% if object and object.frequency == 'common' %}selected{% endif %}>Common (1-10%)</option>
                                    <option value="uncommon" {% if object and object.frequency == 'uncommon' %}selected{% endif %}>Uncommon (0.1-1%)</option>
                                    <option value="rare" {% if object and object.frequency == 'rare' %}selected{% endif %}>Rare (<0.1%)</option>
                                    <option value="unknown" {% if object and object.frequency == 'unknown' %}selected{% endif %}>Unknown</option>
                                </select>
                                <div class="form-text">
                                    How frequently this interaction occurs.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="references" class="form-label">
                            <strong>References</strong>
                        </label>
                        <textarea class="form-control" 
                                  id="references" 
                                  name="references" 
                                  rows="3" 
                                  placeholder="List relevant references, studies, or sources...">{{ object.references|default:"" }}</textarea>
                        <div class="form-text">
                            Scientific references, studies, or authoritative sources supporting this interaction.
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check mb-3">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="requires_monitoring" 
                                       name="requires_monitoring"
                                       {% if object and object.requires_monitoring %}checked{% endif %}>
                                <label class="form-check-label" for="requires_monitoring">
                                    Requires monitoring when drugs are used together
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check mb-3">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="contraindicated" 
                                       name="contraindicated"
                                       {% if object and object.contraindicated %}checked{% endif %}>
                                <label class="form-check-label" for="contraindicated">
                                    Contraindicated - drugs should not be used together
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check mb-3">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="dose_adjustment_required" 
                                       name="dose_adjustment_required"
                                       {% if object and object.dose_adjustment_required %}checked{% endif %}>
                                <label class="form-check-label" for="dose_adjustment_required">
                                    Dose adjustment may be required
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check mb-3">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="is_active" 
                                       name="is_active"
                                       {% if not object or object.is_active %}checked{% endif %}>
                                <label class="form-check-label" for="is_active">
                                    Active interaction (include in screening)
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Drug Information Preview -->
            <div class="card mb-4" id="drugPreview" style="display: none;">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-pills me-2"></i>
                        Selected Drugs Preview
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div id="drug1Preview">
                                <h6>Primary Drug</h6>
                                <div class="alert alert-info">
                                    <div id="drug1Info">Select a primary drug to see details</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div id="drug2Preview">
                                <h6>Interacting Drug</h6>
                                <div class="alert alert-info">
                                    <div id="drug2Info">Select an interacting drug to see details</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Severity Guidelines -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-info-circle me-2"></i>
                        Severity Level Guidelines
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="alert alert-success">
                                <h6 class="alert-heading">Minor</h6>
                                <p class="mb-0">Limited clinical significance. Usually does not require intervention.</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="alert alert-warning">
                                <h6 class="alert-heading">Moderate</h6>
                                <p class="mb-0">May result in exacerbation of condition or require therapy modification.</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="alert alert-danger">
                                <h6 class="alert-heading">Major</h6>
                                <p class="mb-0">May result in serious adverse effects. Requires immediate intervention.</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="alert alert-dark">
                                <h6 class="alert-heading">Contraindicated</h6>
                                <p class="mb-0">Drugs should not be used together under any circumstances.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between">
                <a href="{% url 'pharmacy:drug_interaction_list' %}" class="btn btn-secondary">
                    <i class="fas fa-times me-2"></i>Cancel
                </a>
                <div>
                    <button type="button" class="btn btn-outline-primary me-2" onclick="previewInteraction()">
                        <i class="fas fa-eye me-2"></i>Preview
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>{% if object %}Update{% else %}Create{% endif %} Interaction
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const drug1Select = document.getElementById('drug1');
    const drug2Select = document.getElementById('drug2');
    const severitySelect = document.getElementById('severity');
    const drugPreview = document.getElementById('drugPreview');
    
    // Update drug preview when selections change
    drug1Select.addEventListener('change', updateDrugPreview);
    drug2Select.addEventListener('change', updateDrugPreview);
    
    // Prevent selecting the same drug for both fields
    drug1Select.addEventListener('change', function() {
        updateDrugOptions(drug2Select, this.value);
    });
    
    drug2Select.addEventListener('change', function() {
        updateDrugOptions(drug1Select, this.value);
    });
    
    // Update severity-based styling
    severitySelect.addEventListener('change', function() {
        updateSeverityIndicators(this.value);
    });
    
    // Initialize if editing existing interaction
    if (drug1Select.value || drug2Select.value) {
        updateDrugPreview();
    }
    
    if (severitySelect.value) {
        updateSeverityIndicators(severitySelect.value);
    }
});

function updateDrugPreview() {
    const drug1Select = document.getElementById('drug1');
    const drug2Select = document.getElementById('drug2');
    const drugPreview = document.getElementById('drugPreview');
    const drug1Info = document.getElementById('drug1Info');
    const drug2Info = document.getElementById('drug2Info');
    
    if (drug1Select.value || drug2Select.value) {
        drugPreview.style.display = 'block';
    } else {
        drugPreview.style.display = 'none';
        return;
    }
    
    // Update drug 1 info
    if (drug1Select.value) {
        const option1 = drug1Select.options[drug1Select.selectedIndex];
        const generic1 = option1.dataset.generic;
        const brand1 = option1.dataset.brand;
        const class1 = option1.dataset.class;
        
        drug1Info.innerHTML = `
            <strong>${option1.text}</strong><br>
            <small>Generic: ${generic1}</small><br>
            <small>Brand: ${brand1}</small><br>
            <small>Class: ${class1}</small>
        `;
    } else {
        drug1Info.innerHTML = 'Select a primary drug to see details';
    }
    
    // Update drug 2 info
    if (drug2Select.value) {
        const option2 = drug2Select.options[drug2Select.selectedIndex];
        const generic2 = option2.dataset.generic;
        const brand2 = option2.dataset.brand;
        const class2 = option2.dataset.class;
        
        drug2Info.innerHTML = `
            <strong>${option2.text}</strong><br>
            <small>Generic: ${generic2}</small><br>
            <small>Brand: ${brand2}</small><br>
            <small>Class: ${class2}</small>
        `;
    } else {
        drug2Info.innerHTML = 'Select an interacting drug to see details';
    }
}

function updateDrugOptions(selectElement, excludeValue) {
    const options = selectElement.options;
    for (let i = 0; i < options.length; i++) {
        if (options[i].value === excludeValue && excludeValue !== '') {
            options[i].disabled = true;
            options[i].style.color = '#ccc';
        } else {
            options[i].disabled = false;
            options[i].style.color = '';
        }
    }
}

function updateSeverityIndicators(severity) {
    const form = document.getElementById('drugInteractionForm');
    
    // Remove existing severity classes
    form.classList.remove('severity-minor', 'severity-moderate', 'severity-major', 'severity-contraindicated');
    
    // Add new severity class
    if (severity) {
        form.classList.add(`severity-${severity}`);
    }
}

function previewInteraction() {
    const drug1 = document.getElementById('drug1');
    const drug2 = document.getElementById('drug2');
    const severity = document.getElementById('severity');
    const description = document.getElementById('description');
    
    if (!drug1.value || !drug2.value) {
        alert('Please select both drugs to preview the interaction.');
        return;
    }
    
    const drug1Text = drug1.options[drug1.selectedIndex].text;
    const drug2Text = drug2.options[drug2.selectedIndex].text;
    const severityText = severity.value ? severity.options[severity.selectedIndex].text : 'Not specified';
    
    const preview = `
Drug Interaction Preview:

Primary Drug: ${drug1Text}
Interacting Drug: ${drug2Text}
Severity: ${severityText}

Description: ${description.value || 'Not provided'}

This is a preview of how the interaction will appear in the system.
    `;
    
    alert(preview);
}

// Form validation
document.getElementById('drugInteractionForm').addEventListener('submit', function(e) {
    const drug1 = document.getElementById('drug1').value;
    const drug2 = document.getElementById('drug2').value;
    
    if (drug1 === drug2 && drug1 !== '') {
        e.preventDefault();
        alert('Primary drug and interacting drug cannot be the same.');
        return false;
    }
    
    // Additional validation can be added here
    return true;
});
</script>

<style>
.severity-minor {
    border-left: 4px solid #28a745;
}

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

.severity-major {
    border-left: 4px solid #dc3545;
}

.severity-contraindicated {
    border-left: 4px solid #343a40;
}

.form-select option:disabled {
    color: #ccc !important;
}
</style>
{% endblock %}