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

{% block title %}Prescription Verification - Pharmacy{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Prescription Verification</h4>
                        <h6>Clinical review and verification of prescription orders</h6>
                    </div>
                    <div class="page-btn">
                        <div class="btn-group">
                            <a href="{% url 'pharmacy:verification_queue' %}" class="btn btn-primary">
                                <i class="fa fa-list"></i> Verification Queue
                            </a>
                            <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#verificationGuideModal">
                                <i class="fa fa-question-circle"></i> Verification Guide
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Prescription Information -->
        {% if prescription %}
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Prescription Review - {{ prescription.prescription_number }}</h5>
                        <div class="card-tools">
                            <span class="badge bg-{{ prescription.priority_color }}">{{ prescription.priority|title }}</span>
                            <span class="badge bg-warning">Pending Verification</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary">Patient Information</h6>
                                <strong>Name:</strong> {{ prescription.patient.get_full_name }}<br>
                                <strong>MRN:</strong> {{ prescription.patient.medical_record_number }}<br>
                                <strong>DOB:</strong> {{ prescription.patient.date_of_birth|date:"M d, Y" }}<br>
                                <strong>Age:</strong> {{ prescription.patient.age }} years<br>
                                <strong>Weight:</strong> {{ prescription.patient.weight|default:"Not recorded" }} kg<br>
                                <strong>Allergies:</strong> 
                                {% if prescription.patient.allergies.exists %}
                                    {% for allergy in prescription.patient.allergies.all %}
                                        <span class="badge bg-danger">{{ allergy.allergen }}</span>
                                    {% endfor %}
                                {% else %}
                                    <span class="text-muted">NKDA</span>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary">Prescriber Information</h6>
                                <strong>Prescriber:</strong> {{ prescription.prescriber.get_full_name }}<br>
                                <strong>Specialty:</strong> {{ prescription.prescriber.specialty|default:"Physician" }}<br>
                                <strong>DEA:</strong> {{ prescription.prescriber.dea_number|default:"Not on file" }}<br>
                                <strong>NPI:</strong> {{ prescription.prescriber.npi_number|default:"Not on file" }}<br>
                                <strong>Date Prescribed:</strong> {{ prescription.date_prescribed|date:"M d, Y H:i" }}<br>
                                <strong>Diagnosis:</strong> {{ prescription.diagnosis|default:"Not specified" }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Verification Status</h5>
                    </div>
                    <div class="card-body">
                        <div class="verification-progress">
                            <div class="mb-3">
                                <strong>Received:</strong> {{ prescription.date_received|date:"M d, Y H:i" }}<br>
                                <strong>Time in Queue:</strong> {{ prescription.time_in_queue }}<br>
                                <strong>Priority Level:</strong> 
                                <span class="badge bg-{{ prescription.priority_color }}">{{ prescription.priority|title }}</span>
                            </div>
                            
                            <div class="verification-steps">
                                <div class="step completed">
                                    <i class="fa fa-check-circle text-success"></i> Prescription Received
                                </div>
                                <div class="step active">
                                    <i class="fa fa-clock text-warning"></i> Clinical Review
                                </div>
                                <div class="step">
                                    <i class="fa fa-circle text-muted"></i> Verification Complete
                                </div>
                                <div class="step">
                                    <i class="fa fa-circle text-muted"></i> Ready for Dispensing
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Medication Details -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Medication Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="medication-details">
                                    <h6 class="text-primary">{{ prescription.medication.name }}</h6>
                                    <p class="text-muted">{{ prescription.medication.generic_name }}</p>
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <strong>Strength:</strong> {{ prescription.strength }}<br>
                                            <strong>Dosage Form:</strong> {{ prescription.dosage_form|title }}<br>
                                            <strong>NDC:</strong> {{ prescription.medication.ndc_number }}<br>
                                            <strong>Manufacturer:</strong> {{ prescription.medication.manufacturer|default:"Not specified" }}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Quantity:</strong> {{ prescription.quantity }} {{ prescription.unit }}<br>
                                            <strong>Days Supply:</strong> {{ prescription.days_supply }} days<br>
                                            <strong>Refills:</strong> {{ prescription.refills_remaining }}/{{ prescription.total_refills }}<br>
                                            <strong>Route:</strong> {{ prescription.route|title }}
                                        </div>
                                    </div>
                                    
                                    <div class="mt-3">
                                        <strong>Sig Instructions:</strong><br>
                                        <div class="alert alert-info">
                                            {{ prescription.sig_instructions }}
                                        </div>
                                    </div>
                                    
                                    {% if prescription.special_instructions %}
                                    <div class="mt-2">
                                        <strong>Special Instructions:</strong><br>
                                        <em>{{ prescription.special_instructions }}</em>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="medication-alerts">
                                    {% if prescription.medication.controlled_substance %}
                                    <div class="alert alert-warning">
                                        <h6><i class="fa fa-exclamation-triangle"></i> Controlled Substance</h6>
                                        <strong>Schedule:</strong> {{ prescription.medication.controlled_schedule }}<br>
                                        <strong>DEA Required:</strong> Yes
                                    </div>
                                    {% endif %}
                                    
                                    {% if prescription.medication.black_box_warning %}
                                    <div class="alert alert-danger">
                                        <h6><i class="fa fa-exclamation-triangle"></i> Black Box Warning</h6>
                                        {{ prescription.medication.black_box_warning|truncatewords:20 }}
                                    </div>
                                    {% endif %}
                                    
                                    {% if prescription.medication.high_alert %}
                                    <div class="alert alert-warning">
                                        <h6><i class="fa fa-exclamation"></i> High Alert Medication</h6>
                                        Requires additional verification
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Clinical Verification Checklist -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Clinical Verification Checklist</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" id="verificationForm">
                            {% csrf_token %}
                            <input type="hidden" name="prescription_id" value="{{ prescription.id }}">
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-primary">Prescription Validity</h6>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="prescriber_valid" id="prescriberValid" required>
                                        <label class="form-check-label" for="prescriberValid">
                                            <strong>Prescriber Authorization</strong> - Valid DEA/license for this medication
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="prescription_complete" id="prescriptionComplete" required>
                                        <label class="form-check-label" for="prescriptionComplete">
                                            <strong>Prescription Complete</strong> - All required information present
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="date_valid" id="dateValid" required>
                                        <label class="form-check-label" for="dateValid">
                                            <strong>Date Validity</strong> - Prescription within valid timeframe
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="patient_identity" id="patientIdentity" required>
                                        <label class="form-check-label" for="patientIdentity">
                                            <strong>Patient Identity</strong> - Patient information verified
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-primary">Clinical Appropriateness</h6>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="indication_appropriate" id="indicationAppropriate" required>
                                        <label class="form-check-label" for="indicationAppropriate">
                                            <strong>Indication</strong> - Medication appropriate for diagnosis
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="dose_appropriate" id="doseAppropriate" required>
                                        <label class="form-check-label" for="doseAppropriate">
                                            <strong>Dosing</strong> - Dose appropriate for patient age/weight/condition
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="frequency_appropriate" id="frequencyAppropriate" required>
                                        <label class="form-check-label" for="frequencyAppropriate">
                                            <strong>Frequency</strong> - Dosing frequency clinically appropriate
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="duration_appropriate" id="durationAppropriate" required>
                                        <label class="form-check-label" for="durationAppropriate">
                                            <strong>Duration</strong> - Treatment duration appropriate
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-primary">Safety Checks</h6>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="allergy_check" id="allergyCheck" required>
                                        <label class="form-check-label" for="allergyCheck">
                                            <strong>Allergy Check</strong> - No contraindicated allergies
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="interaction_check" id="interactionCheck" required>
                                        <label class="form-check-label" for="interactionCheck">
                                            <strong>Drug Interactions</strong> - No significant interactions
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="contraindication_check" id="contraindicationCheck" required>
                                        <label class="form-check-label" for="contraindicationCheck">
                                            <strong>Contraindications</strong> - No medical contraindications
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="duplicate_therapy" id="duplicateTherapy" required>
                                        <label class="form-check-label" for="duplicateTherapy">
                                            <strong>Duplicate Therapy</strong> - No inappropriate duplications
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-primary">Regulatory Compliance</h6>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="dea_compliance" id="deaCompliance" required>
                                        <label class="form-check-label" for="deaCompliance">
                                            <strong>DEA Compliance</strong> - Controlled substance requirements met
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="state_compliance" id="stateCompliance" required>
                                        <label class="form-check-label" for="stateCompliance">
                                            <strong>State Regulations</strong> - State-specific requirements met
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="insurance_coverage" id="insuranceCoverage">
                                        <label class="form-check-label" for="insuranceCoverage">
                                            <strong>Insurance Coverage</strong> - Coverage verified (if applicable)
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="prior_authorization" id="priorAuthorization">
                                        <label class="form-check-label" for="priorAuthorization">
                                            <strong>Prior Authorization</strong> - PA obtained if required
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <!-- Clinical Decision -->
                            <div class="row">
                                <div class="col-12">
                                    <h6 class="text-primary">Verification Decision</h6>
                                    <div class="mb-3">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="verification_decision" 
                                                   id="approve" value="approve" required>
                                            <label class="form-check-label" for="approve">
                                                <span class="badge bg-success">Approve</span> - Prescription verified and ready for dispensing
                                            </label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="verification_decision" 
                                                   id="clarify" value="clarify" required>
                                            <label class="form-check-label" for="clarify">
                                                <span class="badge bg-warning">Clarify</span> - Requires prescriber clarification
                                            </label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="verification_decision" 
                                                   id="reject" value="reject" required>
                                            <label class="form-check-label" for="reject">
                                                <span class="badge bg-danger">Reject</span> - Prescription cannot be filled
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Conditional Fields -->
                            <div id="clarificationFields" style="display: none;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Clarification Needed</label>
                                            <select name="clarification_type" class="form-select">
                                                <option value="">Select type...</option>
                                                <option value="dosing">Dosing clarification</option>
                                                <option value="indication">Indication clarification</option>
                                                <option value="duration">Duration clarification</option>
                                                <option value="route">Route clarification</option>
                                                <option value="quantity">Quantity clarification</option>
                                                <option value="other">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Contact Method</label>
                                            <select name="contact_method" class="form-select">
                                                <option value="phone">Phone call</option>
                                                <option value="fax">Fax</option>
                                                <option value="electronic">Electronic message</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="rejectionFields" style="display: none;">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label class="form-label">Rejection Reason</label>
                                            <select name="rejection_reason" class="form-select">
                                                <option value="">Select reason...</option>
                                                <option value="invalid_prescriber">Invalid prescriber</option>
                                                <option value="drug_allergy">Drug allergy contraindication</option>
                                                <option value="drug_interaction">Significant drug interaction</option>
                                                <option value="inappropriate_dose">Inappropriate dosing</option>
                                                <option value="no_indication">No valid indication</option>
                                                <option value="duplicate_therapy">Duplicate therapy</option>
                                                <option value="regulatory_issue">Regulatory compliance issue</option>
                                                <option value="other">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Comments -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Verification Notes</label>
                                        <textarea name="verification_notes" class="form-control" rows="4" 
                                                  placeholder="Document any clinical considerations, recommendations, or additional notes..."></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Pharmacist Information -->
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Verifying Pharmacist</label>
                                        <input type="text" class="form-control" value="{{ request.user.get_full_name }}" readonly>
                                        <input type="hidden" name="verifying_pharmacist" value="{{ request.user.id }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Verification Date/Time</label>
                                        <input type="datetime-local" name="verification_datetime" class="form-control" required>
                                    </div>
                                </div>
                            </div>

                            <!-- Final Certification -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert alert-warning">
                                        <h6><i class="fa fa-certificate"></i> Pharmacist Certification</h6>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="pharmacist_certification" 
                                                   id="pharmacistCertification" required>
                                            <label class="form-check-label" for="pharmacistCertification">
                                                I certify that I have completed a comprehensive clinical review of this 
                                                prescription and that my verification decision is based on current 
                                                pharmaceutical standards and applicable regulations.
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <a href="{% url 'pharmacy:verification_queue' %}" class="btn btn-secondary">
                                                <i class="fa fa-arrow-left"></i> Back to Queue
                                            </a>
                                            <button type="button" class="btn btn-info" onclick="consultPharmacist()">
                                                <i class="fa fa-user-md"></i> Consult Pharmacist
                                            </button>
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-warning me-2" onclick="saveForLater()">
                                                <i class="fa fa-save"></i> Save for Later
                                            </button>
                                            <button type="submit" class="btn btn-success btn-lg">
                                                <i class="fa fa-check"></i> Complete Verification
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Clinical References -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Drug Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="drug-info">
                            <h6>{{ prescription.medication.name }}</h6>
                            <p><strong>Therapeutic Class:</strong> {{ prescription.medication.therapeutic_class|default:"Not specified" }}</p>
                            <p><strong>Mechanism of Action:</strong> {{ prescription.medication.mechanism_of_action|default:"Not available" }}</p>
                            <p><strong>Common Indications:</strong> {{ prescription.medication.common_indications|default:"Not specified" }}</p>
                            <p><strong>Typical Dosing:</strong> {{ prescription.medication.typical_dosing|default:"Refer to prescribing information" }}</p>
                        </div>
                        <div class="mt-3">
                            <a href="#" class="btn btn-outline-primary btn-sm">
                                <i class="fa fa-book"></i> Full Prescribing Information
                            </a>
                            <a href="#" class="btn btn-outline-info btn-sm">
                                <i class="fa fa-search"></i> Drug Database Lookup
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Patient Medication History</h5>
                    </div>
                    <div class="card-body">
                        <div class="medication-history">
                            {% for med in patient_medication_history %}
                            <div class="history-item mb-2">
                                <strong>{{ med.medication.name }}</strong> {{ med.strength }}<br>
                                <small class="text-muted">
                                    {{ med.start_date|date:"M d, Y" }} - 
                                    {% if med.end_date %}{{ med.end_date|date:"M d, Y" }}{% else %}Current{% endif %}
                                </small>
                            </div>
                            {% empty %}
                            <p class="text-muted">No previous medication history available</p>
                            {% endfor %}
                        </div>
                        <div class="mt-3">
                            <a href="#" class="btn btn-outline-primary btn-sm">
                                <i class="fa fa-history"></i> Full Medication History
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <!-- No Prescription Selected -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fa fa-clipboard-check fa-5x text-muted mb-4"></i>
                        <h4>No Prescription Selected for Verification</h4>
                        <p class="text-muted">Please select a prescription from the verification queue to begin clinical review.</p>
                        <div class="mt-4">
                            <a href="{% url 'pharmacy:verification_queue' %}" class="btn btn-primary">
                                <i class="fa fa-list"></i> View Verification Queue
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Verification Guide Modal -->
<div class="modal fade" id="verificationGuideModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Prescription Verification Guide</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="verification-guide">
                    <h6>Key Verification Steps:</h6>
                    <ol>
                        <li><strong>Prescription Validity</strong> - Verify prescriber authorization, completeness, and date validity</li>
                        <li><strong>Clinical Appropriateness</strong> - Assess indication, dosing, frequency, and duration</li>
                        <li><strong>Safety Checks</strong> - Review allergies, interactions, contraindications, and duplications</li>
                        <li><strong>Regulatory Compliance</strong> - Ensure DEA, state, and insurance requirements are met</li>
                        <li><strong>Documentation</strong> - Record verification decision and clinical rationale</li>
                    </ol>
                    
                    <h6 class="mt-4">Common Issues to Watch For:</h6>
                    <ul>
                        <li>Inappropriate dosing for age, weight, or renal/hepatic function</li>
                        <li>Drug-drug interactions with significant clinical impact</li>
                        <li>Contraindications based on patient allergies or medical conditions</li>
                        <li>Duplicate therapy with existing medications</li>
                        <li>Missing or invalid prescriber information</li>
                        <li>Controlled substance prescribing violations</li>
                    </ul>
                    
                    <h6 class="mt-4">When to Contact Prescriber:</h6>
                    <ul>
                        <li>Unclear or ambiguous instructions</li>
                        <li>Potentially inappropriate dosing</li>
                        <li>Significant drug interactions requiring intervention</li>
                        <li>Missing clinical information needed for safe dispensing</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set current time as default verification time
    const now = new Date();
    const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
    document.querySelector('input[name="verification_datetime"]').value = localDateTime;

    // Show/hide conditional fields based on verification decision
    const decisionRadios = document.querySelectorAll('input[name="verification_decision"]');
    const clarificationFields = document.getElementById('clarificationFields');
    const rejectionFields = document.getElementById('rejectionFields');

    decisionRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            clarificationFields.style.display = 'none';
            rejectionFields.style.display = 'none';
            
            if (this.value === 'clarify') {
                clarificationFields.style.display = 'block';
                clarificationFields.querySelectorAll('select').forEach(select => {
                    select.required = true;
                });
            } else if (this.value === 'reject') {
                rejectionFields.style.display = 'block';
                rejectionFields.querySelectorAll('select').forEach(select => {
                    select.required = true;
                });
            }
        });
    });

    // Form validation and submission
    const verificationForm = document.getElementById('verificationForm');
    if (verificationForm) {
        verificationForm.addEventListener('submit', function(e) {
            // Validate all required checks are completed
            const requiredChecks = document.querySelectorAll('input[type="checkbox"][required]');
            let allChecked = true;
            
            requiredChecks.forEach(checkbox => {
                if (!checkbox.checked) {
                    allChecked = false;
                }
            });

            if (!allChecked) {
                e.preventDefault();
                alert('Please complete all required verification checks before submitting.');
                return false;
            }

            // Validate decision is selected
            const decisionSelected = document.querySelector('input[name="verification_decision"]:checked');
            if (!decisionSelected) {
                e.preventDefault();
                alert('Please select a verification decision.');
                return false;
            }

            // Final confirmation
            const decision = decisionSelected.value;
            let confirmMessage = '';
            
            if (decision === 'approve') {
                confirmMessage = 'Approve this prescription for dispensing?';
            } else if (decision === 'clarify') {
                confirmMessage = 'Send this prescription back for clarification?';
            } else if (decision === 'reject') {
                confirmMessage = 'Reject this prescription? This action will notify the prescriber.';
            }

            if (!confirm(confirmMessage)) {
                e.preventDefault();
                return false;
            }

            // Show loading state
            const submitBtn = this.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing...';
        });
    }
});

function consultPharmacist() {
    // Handle pharmacist consultation
    const consultation = prompt('Enter consultation request:');
    if (consultation !== null && consultation.trim() !== '') {
        console.log('Consultation request:', consultation);
        alert('Consultation request sent to senior pharmacist.');
    }
}

function saveForLater() {
    // Handle saving verification for later
    if (confirm('Save this verification for later completion?')) {
        console.log('Saving verification for later...');
        alert('Verification saved. You can continue later from the verification queue.');
        window.location.href = '{% url "pharmacy:verification_queue" %}';
    }
}

// Auto-save functionality
let autoSaveTimer;
const formInputs = document.querySelectorAll('#verificationForm input, #verificationForm select, #verificationForm textarea');

formInputs.forEach(input => {
    input.addEventListener('change', function() {
        clearTimeout(autoSaveTimer);
        autoSaveTimer = setTimeout(autoSaveVerification, 30000); // Auto-save after 30 seconds of inactivity
    });
});

function autoSaveVerification() {
    console.log('Auto-saving verification progress...');
    // Implementation for auto-saving verification data
}
</script>

<style>
.verification-steps .step {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 0;
}

.verification-steps .step i {
    margin-right: 10px;
    width: 20px;
}

.verification-steps .step.completed {
    color: #28a745;
}

.verification-steps .step.active {
    color: #ffc107;
    font-weight: bold;
}

.drug-info h6 {
    color: #007bff;
    margin-bottom: 15px;
}

.history-item {
    border-left: 3px solid #dee2e6;
    padding-left: 10px;
}
</style>
{% endblock %}