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

{% block title %}Prescription {{ prescription.prescription_number }} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-prescription-bottle-alt me-2"></i>Prescription {{ prescription.prescription_number }}
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'pharmacy:dashboard' %}">Pharmacy</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'pharmacy:prescription_list' %}">Prescriptions</a></li>
                    <li class="breadcrumb-item active">{{ prescription.prescription_number }}</li>
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                <i class="fas fa-print me-2"></i>Print
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="?print=label"><i class="fas fa-tag me-2"></i>Prescription Label</a></li>
                <li><a class="dropdown-item" href="?print=receipt"><i class="fas fa-receipt me-2"></i>Patient Receipt</a></li>
                <li><a class="dropdown-item" href="?print=full"><i class="fas fa-file-alt me-2"></i>Full Details</a></li>
            </ul>
            {% if prescription.status == 'PENDING' %}
                <button type="button" class="btn btn-success" onclick="verifyPrescription()">
                    <i class="fas fa-check me-2"></i>Verify
                </button>
            {% elif prescription.status == 'VERIFIED' %}
                <button type="button" class="btn btn-primary" onclick="dispenseMedication()">
                    <i class="fas fa-pills me-2"></i>Dispense
                </button>
            {% endif %}
            <a href="{% url 'pharmacy:prescription_edit' prescription.pk %}" class="btn btn-outline-primary">
                <i class="fas fa-edit me-2"></i>Edit
            </a>
        </div>
    </div>

    <!-- Status Alert -->
    {% if prescription.status == 'PENDING' %}
        <div class="alert alert-warning d-flex align-items-center mb-4">
            <i class="fas fa-exclamation-triangle me-3"></i>
            <div>
                <strong>Pending Verification</strong> - This prescription requires pharmacist verification before dispensing.
            </div>
        </div>
    {% elif prescription.status == 'EXPIRED' %}
        <div class="alert alert-danger d-flex align-items-center mb-4">
            <i class="fas fa-calendar-times me-3"></i>
            <div>
                <strong>Expired Prescription</strong> - This prescription expired on {{ prescription.expiration_date }}.
            </div>
        </div>
    {% elif prescription.is_expired %}
        <div class="alert alert-warning d-flex align-items-center mb-4">
            <i class="fas fa-clock me-3"></i>
            <div>
                <strong>Expiring Soon</strong> - This prescription will expire on {{ prescription.expiration_date }}.
            </div>
        </div>
    {% endif %}

    <div class="row">
        <!-- Main Prescription Information -->
        <div class="col-lg-8">
            <!-- Prescription Overview -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Prescription Overview
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Prescription Number</label>
                                <div class="fw-bold text-primary">{{ prescription.prescription_number }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Status</label>
                                <div>
                                    {% if prescription.status == 'PENDING' %}
                                        <span class="badge bg-warning text-dark fs-6">Pending Verification</span>
                                    {% elif prescription.status == 'VERIFIED' %}
                                        <span class="badge bg-info fs-6">Verified - Ready to Dispense</span>
                                    {% elif prescription.status == 'DISPENSED' %}
                                        <span class="badge bg-success fs-6">Dispensed</span>
                                    {% elif prescription.status == 'COMPLETED' %}
                                        <span class="badge bg-secondary fs-6">Completed</span>
                                    {% elif prescription.status == 'CANCELLED' %}
                                        <span class="badge bg-danger fs-6">Cancelled</span>
                                    {% elif prescription.status == 'EXPIRED' %}
                                        <span class="badge bg-dark fs-6">Expired</span>
                                    {% else %}
                                        <span class="badge bg-secondary fs-6">{{ prescription.get_status_display }}</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Date Prescribed</label>
                                <div>{{ prescription.date_prescribed|date:"M d, Y g:i A" }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Expiration Date</label>
                                <div>{{ prescription.expiration_date|date:"M d, Y" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Electronic Prescription</label>
                                <div>
                                    {% if prescription.electronic_prescription %}
                                        <span class="badge bg-success">Yes</span>
                                        {% if prescription.e_prescription_id %}
                                            <small class="text-muted d-block">ID: {{ prescription.e_prescription_id }}</small>
                                        {% endif %}
                                    {% else %}
                                        <span class="badge bg-secondary">No</span>
                                    {% endif %}
                                </div>
                            </div>
                            {% if prescription.prior_authorization_required %}
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Prior Authorization</label>
                                <div>
                                    <span class="badge bg-warning text-dark">Required</span>
                                    {% if prescription.prior_authorization_number %}
                                        <small class="text-muted d-block">Number: {{ prescription.prior_authorization_number }}</small>
                                    {% endif %}
                                    {% if prescription.prior_authorization_expiry %}
                                        <small class="text-muted d-block">Expires: {{ prescription.prior_authorization_expiry|date:"M d, Y" }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Generic Substitution</label>
                                <div>
                                    {% if prescription.dispense_as_written %}
                                        <span class="badge bg-danger">Dispense As Written (DAW)</span>
                                    {% elif prescription.generic_substitution_allowed %}
                                        <span class="badge bg-success">Allowed</span>
                                    {% else %}
                                        <span class="badge bg-warning text-dark">Not Allowed</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Medication Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-pills me-2"></i>Medication Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="d-flex align-items-start mb-3">
                                <div class="me-3 mt-1">
                                    {% if prescription.medication.is_controlled_substance %}
                                        <i class="fas fa-shield-alt text-warning fa-2x" title="Controlled Substance"></i>
                                    {% else %}
                                        <i class="fas fa-pills text-primary fa-2x"></i>
                                    {% endif %}
                                </div>
                                <div class="flex-grow-1">
                                    <h4 class="mb-1">{{ prescription.medication.generic_name }}</h4>
                                    {% if prescription.medication.brand_name %}
                                        <p class="text-muted mb-1">Brand: {{ prescription.medication.brand_name }}</p>
                                    {% endif %}
                                    <p class="mb-1"><strong>Strength:</strong> {{ prescription.medication.strength }} {{ prescription.medication.get_unit_of_measure_display }}</p>
                                    <p class="mb-1"><strong>Form:</strong> {{ prescription.medication.get_dosage_form_display }}</p>
                                    {% if prescription.medication.ndc_number %}
                                        <p class="mb-0"><strong>NDC:</strong> {{ prescription.medication.ndc_number }}</p>
                                    {% endif %}
                                </div>
                            </div>
                            
                            {% if prescription.medication.is_controlled_substance %}
                            <div class="alert alert-warning">
                                <i class="fas fa-shield-alt me-2"></i>
                                <strong>Controlled Substance:</strong> {{ prescription.medication.get_controlled_substance_schedule_display }}
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <div class="bg-light p-3 rounded">
                                <h6 class="fw-semibold mb-2">Drug Classification</h6>
                                <p class="mb-1"><strong>Class:</strong> {{ prescription.medication.drug_class }}</p>
                                <p class="mb-1"><strong>Formulary:</strong> 
                                    <span class="badge bg-{% if prescription.medication.formulary_status == 'PREFERRED' %}success{% elif prescription.medication.formulary_status == 'RESTRICTED' %}danger{% else %}warning{% endif %}">
                                        {{ prescription.medication.get_formulary_status_display }}
                                    </span>
                                </p>
                                {% if prescription.medication.manufacturer %}
                                    <p class="mb-0"><strong>Manufacturer:</strong> {{ prescription.medication.manufacturer }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dosing Instructions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-clipboard-list me-2"></i>Dosing Instructions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Quantity Prescribed</label>
                                <div class="fs-5 fw-bold text-primary">
                                    {{ prescription.quantity_prescribed }} {{ prescription.get_quantity_unit_display }}
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Frequency</label>
                                <div>{{ prescription.frequency }}</div>
                            </div>
                            {% if prescription.duration %}
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Duration</label>
                                <div>{{ prescription.duration }}</div>
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Refills</label>
                                <div>
                                    <span class="fs-5 fw-bold">{{ prescription.refills_remaining }}</span> of {{ prescription.refills_authorized }} remaining
                                    {% if prescription.refills_remaining == 0 %}
                                        <span class="badge bg-warning text-dark ms-2">No Refills</span>
                                    {% endif %}
                                </div>
                            </div>
                            {% if prescription.indication %}
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Indication</label>
                                <div>{{ prescription.indication }}</div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <label class="form-label fw-semibold">Dosage Instructions (SIG)</label>
                        <div class="p-3 bg-light rounded">
                            <div class="fw-medium">{{ prescription.dosage_instructions }}</div>
                        </div>
                    </div>
                    
                    {% if prescription.patient_instructions %}
                    <div class="mt-3">
                        <label class="form-label fw-semibold">Patient Instructions</label>
                        <div class="p-3 bg-info bg-opacity-10 rounded">
                            <div>{{ prescription.patient_instructions }}</div>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if prescription.pharmacy_notes %}
                    <div class="mt-3">
                        <label class="form-label fw-semibold">Pharmacy Notes</label>
                        <div class="p-3 bg-warning bg-opacity-10 rounded">
                            <div>{{ prescription.pharmacy_notes }}</div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Drug Interactions -->
            {% if drug_interactions %}
            <div class="card mb-4">
                <div class="card-header bg-warning bg-opacity-10">
                    <h5 class="mb-0 text-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>Drug Interactions
                    </h5>
                </div>
                <div class="card-body">
                    {% for interaction in drug_interactions %}
                    <div class="alert alert-{% if interaction.severity == 'CRITICAL' %}danger{% elif interaction.severity == 'HIGH' %}warning{% else %}info{% endif %} mb-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="alert-heading">{{ interaction.get_severity_display }} Interaction</h6>
                                <p class="mb-1"><strong>With:</strong> {{ interaction.interacting_medication.display_name }}</p>
                                <p class="mb-0">{{ interaction.description }}</p>
                            </div>
                            <span class="badge bg-{% if interaction.severity == 'CRITICAL' %}danger{% elif interaction.severity == 'HIGH' %}warning{% else %}info{% endif %}">
                                {{ interaction.get_severity_display }}
                            </span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Dispense History -->
            {% if dispense_records %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2"></i>Dispense History
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Date Dispensed</th>
                                    <th>Quantity</th>
                                    <th>Days Supply</th>
                                    <th>Dispensed By</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for record in dispense_records %}
                                <tr>
                                    <td>{{ record.dispensed_datetime|date:"M d, Y g:i A" }}</td>
                                    <td>{{ record.quantity_dispensed }} {{ record.get_quantity_unit_display }}</td>
                                    <td>{{ record.days_supply }} days</td>
                                    <td>{{ record.dispensed_by.get_full_name }}</td>
                                    <td>
                                        <span class="badge bg-{% if record.status == 'DISPENSED' %}success{% elif record.status == 'PARTIAL' %}warning{% else %}secondary{% endif %}">
                                            {{ record.get_status_display }}
                                        </span>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Patient Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-user me-2"></i>Patient Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar-circle bg-primary text-white me-3">
                            {{ prescription.patient.first_name.0 }}{{ prescription.patient.last_name.0 }}
                        </div>
                        <div>
                            <h6 class="mb-0">{{ prescription.patient.get_full_name }}</h6>
                            <small class="text-muted">MRN: {{ prescription.patient.mrn }}</small>
                        </div>
                    </div>
                    
                    <div class="mb-2">
                        <strong>DOB:</strong> {{ prescription.patient.date_of_birth|date:"M d, Y" }}
                        <small class="text-muted">({{ prescription.patient.age }} years old)</small>
                    </div>
                    <div class="mb-2">
                        <strong>Gender:</strong> {{ prescription.patient.get_gender_display }}
                    </div>
                    {% if prescription.patient.phone %}
                    <div class="mb-2">
                        <strong>Phone:</strong> {{ prescription.patient.phone }}
                    </div>
                    {% endif %}
                    {% if prescription.patient.email %}
                    <div class="mb-2">
                        <strong>Email:</strong> {{ prescription.patient.email }}
                    </div>
                    {% endif %}
                    
                    <div class="mt-3">
                        <a href="{% url 'patients:patient_detail' prescription.patient.pk %}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-user me-2"></i>View Patient Profile
                        </a>
                    </div>
                </div>
            </div>

            <!-- Prescriber Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-user-md me-2"></i>Prescriber Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar-circle bg-success text-white me-3">
                            {{ prescription.prescriber.first_name.0 }}{{ prescription.prescriber.last_name.0 }}
                        </div>
                        <div>
                            <h6 class="mb-0">{{ prescription.prescriber.get_full_name }}</h6>
                            <small class="text-muted">{{ prescription.prescriber.profile.title|default:"Physician" }}</small>
                        </div>
                    </div>
                    
                    {% if prescription.prescriber.profile.license_number %}
                    <div class="mb-2">
                        <strong>License:</strong> {{ prescription.prescriber.profile.license_number }}
                    </div>
                    {% endif %}
                    {% if prescription.prescriber.profile.dea_number %}
                    <div class="mb-2">
                        <strong>DEA:</strong> {{ prescription.prescriber.profile.dea_number }}
                    </div>
                    {% endif %}
                    {% if prescription.prescriber.profile.npi_number %}
                    <div class="mb-2">
                        <strong>NPI:</strong> {{ prescription.prescriber.profile.npi_number }}
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Verification Information -->
            {% if prescription.verified %}
            <div class="card mb-4">
                <div class="card-header bg-success bg-opacity-10">
                    <h5 class="mb-0 text-success">
                        <i class="fas fa-check-circle me-2"></i>Verification
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <strong>Verified By:</strong> {{ prescription.verified_by.get_full_name }}
                    </div>
                    <div class="mb-2">
                        <strong>Verified On:</strong> {{ prescription.verified_datetime|date:"M d, Y g:i A" }}
                    </div>
                    <span class="badge bg-success">Verified</span>
                </div>
            </div>
            {% endif %}

            <!-- Quick Actions -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        {% if prescription.status == 'PENDING' %}
                            <button type="button" class="btn btn-success" onclick="verifyPrescription()">
                                <i class="fas fa-check me-2"></i>Verify Prescription
                            </button>
                        {% elif prescription.status == 'VERIFIED' %}
                            <button type="button" class="btn btn-primary" onclick="dispenseMedication()">
                                <i class="fas fa-pills me-2"></i>Dispense Medication
                            </button>
                        {% endif %}
                        
                        <button type="button" class="btn btn-outline-secondary" onclick="checkInteractions()">
                            <i class="fas fa-search me-2"></i>Check Interactions
                        </button>
                        
                        <button type="button" class="btn btn-outline-info" onclick="viewMedicationInfo()">
                            <i class="fas fa-info-circle me-2"></i>Medication Info
                        </button>
                        
                        <button type="button" class="btn btn-outline-warning" onclick="contactPrescriber()">
                            <i class="fas fa-phone me-2"></i>Contact Prescriber
                        </button>
                        
                        {% if prescription.refills_remaining > 0 %}
                        <button type="button" class="btn btn-outline-primary" onclick="processRefill()">
                            <i class="fas fa-redo me-2"></i>Process Refill
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function verifyPrescription() {
    if (confirm('Verify this prescription? This will mark it as ready for dispensing.')) {
        // Implement verification logic
        fetch(`{% url 'pharmacy:verify_prescription' prescription.pk %}`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error verifying prescription: ' + data.error);
            }
        });
    }
}

function dispenseMedication() {
    // Open dispense modal or redirect to dispense page
    window.location.href = `{% url 'pharmacy:dispense_medication' prescription.pk %}`;
}

function checkInteractions() {
    // Check for drug interactions
    fetch(`{% url 'pharmacy:drug_interaction_check' prescription.pk %}`)
    .then(response => response.json())
    .then(data => {
        if (data.interactions && data.interactions.length > 0) {
            let message = 'Drug Interactions Found:\n\n';
            data.interactions.forEach(interaction => {
                message += `${interaction.severity}: ${interaction.description}\n`;
            });
            alert(message);
        } else {
            alert('No drug interactions found.');
        }
    });
}

function viewMedicationInfo() {
    window.open(`{% url 'pharmacy:medication_detail' prescription.medication.pk %}`, '_blank');
}

function contactPrescriber() {
    // Implement prescriber contact functionality
    alert('Contact prescriber functionality would be implemented here.');
}

function processRefill() {
    if (confirm('Process a refill for this prescription?')) {
        // Implement refill logic
        alert('Refill processing functionality would be implemented here.');
    }
}
</script>

<style>
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header {
    background-color: rgba(13, 110, 253, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.btn {
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.fw-semibold {
    font-weight: 600;
}

.badge {
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}
</style>
{% endblock %}