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

{% block title %}Dispensing Detail - Pharmacy{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <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:dispensing_list' %}">Dispensing</a></li>
    <li class="breadcrumb-item active">{{ object.prescription.prescription_number }}</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    Dispensing Record
    <small>{{ object.prescription.prescription_number }} - {{ object.prescription.patient.get_full_name }}</small>
</h1>
<!-- END page-header -->

<div class="row">
    <div class="col-xl-8">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Dispensing Information</h4>
                <div class="panel-heading-btn">
                    {% if object.status == 'pending' or object.status == 'in_progress' %}
                    <button type="button" class="btn btn-xs btn-success me-2" onclick="completeDispensing()">
                        <i class="fa fa-check"></i> Complete
                    </button>
                    <a href="{% url 'pharmacy:dispensing_edit' object.pk %}" class="btn btn-xs btn-primary me-2">
                        <i class="fa fa-edit"></i> Edit
                    </a>
                    {% endif %}
                    <button type="button" class="btn btn-xs btn-info me-2" onclick="printLabel()">
                        <i class="fa fa-print"></i> Print Label
                    </button>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <!-- Status and Priority -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card border-primary">
                            <div class="card-header bg-primary text-white">
                                <h6 class="card-title mb-0">
                                    <i class="fa fa-info-circle me-2"></i>Status
                                </h6>
                            </div>
                            <div class="card-body text-center">
                                {% if object.status == 'pending' %}
                                <div class="h3 text-info">
                                    <i class="fa fa-clock"></i>
                                </div>
                                <div class="h5 text-info">Pending</div>
                                <div class="small text-muted">Awaiting dispensing</div>
                                {% elif object.status == 'in_progress' %}
                                <div class="h3 text-warning">
                                    <i class="fa fa-spinner fa-spin"></i>
                                </div>
                                <div class="h5 text-warning">In Progress</div>
                                <div class="small text-muted">Currently being processed</div>
                                {% elif object.status == 'dispensed' %}
                                <div class="h3 text-success">
                                    <i class="fa fa-check-circle"></i>
                                </div>
                                <div class="h5 text-success">Dispensed</div>
                                <div class="small text-muted">{{ object.dispensed_date|date:"M d, Y H:i" }}</div>
                                {% elif object.status == 'partial' %}
                                <div class="h3 text-warning">
                                    <i class="fa fa-exclamation-triangle"></i>
                                </div>
                                <div class="h5 text-warning">Partial Fill</div>
                                <div class="small text-muted">{{ object.quantity_dispensed }}/{{ object.quantity_prescribed }}</div>
                                {% elif object.status == 'rejected' %}
                                <div class="h3 text-danger">
                                    <i class="fa fa-times-circle"></i>
                                </div>
                                <div class="h5 text-danger">Rejected</div>
                                <div class="small text-muted">{{ object.rejection_reason }}</div>
                                {% elif object.status == 'cancelled' %}
                                <div class="h3 text-secondary">
                                    <i class="fa fa-ban"></i>
                                </div>
                                <div class="h5 text-secondary">Cancelled</div>
                                <div class="small text-muted">{{ object.cancelled_date|date:"M d, Y H:i" }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-warning">
                            <div class="card-header bg-warning text-dark">
                                <h6 class="card-title mb-0">
                                    <i class="fa fa-flag me-2"></i>Priority
                                </h6>
                            </div>
                            <div class="card-body text-center">
                                {% if object.priority == 'urgent' %}
                                <div class="h3 text-danger">
                                    <i class="fa fa-exclamation-circle"></i>
                                </div>
                                <div class="h5 text-danger">Urgent</div>
                                <div class="small text-muted">Immediate attention required</div>
                                {% elif object.priority == 'high' %}
                                <div class="h3 text-warning">
                                    <i class="fa fa-arrow-up"></i>
                                </div>
                                <div class="h5 text-warning">High</div>
                                <div class="small text-muted">High priority processing</div>
                                {% elif object.priority == 'normal' %}
                                <div class="h3 text-primary">
                                    <i class="fa fa-minus"></i>
                                </div>
                                <div class="h5 text-primary">Normal</div>
                                <div class="small text-muted">Standard processing</div>
                                {% elif object.priority == 'low' %}
                                <div class="h3 text-secondary">
                                    <i class="fa fa-arrow-down"></i>
                                </div>
                                <div class="h5 text-secondary">Low</div>
                                <div class="small text-muted">Low priority processing</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Prescription Information -->
                <div class="card border-info mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="card-title mb-0">
                            <i class="fa fa-prescription me-2"></i>Prescription Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-2"><strong>Prescription Number:</strong> {{ object.prescription.prescription_number }}</div>
                                <div class="mb-2"><strong>Prescriber:</strong> {{ object.prescription.prescriber.get_full_name }}</div>
                                <div class="mb-2"><strong>Date Prescribed:</strong> {{ object.prescription.date_prescribed|date:"M d, Y" }}</div>
                                <div class="mb-2"><strong>DEA Number:</strong> {{ object.prescription.prescriber.dea_number|default:"Not specified" }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-2"><strong>Quantity Prescribed:</strong> {{ object.quantity_prescribed }} {{ object.medication.unit }}</div>
                                <div class="mb-2"><strong>Days Supply:</strong> {{ object.days_supply }} days</div>
                                <div class="mb-2"><strong>Refills Remaining:</strong> {{ object.prescription.refills_remaining }}</div>
                                <div class="mb-2"><strong>Directions:</strong> {{ object.prescription.directions }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Patient Information -->
                <div class="card border-success mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="card-title mb-0">
                            <i class="fa fa-user me-2"></i>Patient Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-2"><strong>Name:</strong> {{ object.prescription.patient.get_full_name }}</div>
                                <div class="mb-2"><strong>Date of Birth:</strong> {{ object.prescription.patient.date_of_birth|date:"M d, Y" }}</div>
                                <div class="mb-2"><strong>Age:</strong> {{ object.prescription.patient.age }} years</div>
                                <div class="mb-2"><strong>Gender:</strong> {{ object.prescription.patient.get_gender_display }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-2"><strong>Phone:</strong> {{ object.prescription.patient.phone_number|default:"Not provided" }}</div>
                                <div class="mb-2"><strong>Address:</strong> {{ object.prescription.patient.address|default:"Not provided" }}</div>
                                <div class="mb-2"><strong>Insurance:</strong> {{ object.prescription.patient.insurance_info|default:"Not provided" }}</div>
                                <div class="mb-2">
                                    {% if object.prescription.patient.allergies.exists %}
                                    <strong>Allergies:</strong>
                                    <div class="mt-1">
                                        {% for allergy in object.prescription.patient.allergies.all %}
                                        <span class="badge bg-warning text-dark me-1">{{ allergy.allergen }}</span>
                                        {% endfor %}
                                    </div>
                                    {% else %}
                                    <strong>Allergies:</strong> No known allergies
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Medication Information -->
                <div class="card border-warning mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="card-title mb-0">
                            <i class="fa fa-pills me-2"></i>Medication Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-2"><strong>Generic Name:</strong> {{ object.medication.generic_name }}</div>
                                <div class="mb-2"><strong>Brand Name:</strong> {{ object.medication.brand_name|default:"Not specified" }}</div>
                                <div class="mb-2"><strong>Strength:</strong> {{ object.medication.strength }}</div>
                                <div class="mb-2"><strong>Dosage Form:</strong> {{ object.medication.dosage_form }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-2"><strong>NDC Number:</strong> {{ object.medication.ndc_number|default:"Not specified" }}</div>
                                <div class="mb-2"><strong>Manufacturer:</strong> {{ object.medication.manufacturer|default:"Not specified" }}</div>
                                <div class="mb-2"><strong>Lot Number:</strong> {{ object.lot_number|default:"Not specified" }}</div>
                                <div class="mb-2"><strong>Expiration Date:</strong> {{ object.expiration_date|date:"M d, Y"|default:"Not specified" }}</div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="d-flex flex-wrap gap-2">
                                    {% if object.medication.is_controlled %}
                                    <span class="badge bg-warning text-dark">
                                        <i class="fa fa-shield me-1"></i>Controlled Substance (Schedule {{ object.medication.controlled_schedule }})
                                    </span>
                                    {% endif %}
                                    {% if object.medication.is_high_alert %}
                                    <span class="badge bg-danger">
                                        <i class="fa fa-exclamation-triangle me-1"></i>High Alert Medication
                                    </span>
                                    {% endif %}
                                    {% if object.medication.requires_refrigeration %}
                                    <span class="badge bg-info">
                                        <i class="fa fa-snowflake me-1"></i>Refrigeration Required
                                    </span>
                                    {% endif %}
                                    {% if object.medication.is_generic %}
                                    <span class="badge bg-secondary">
                                        <i class="fa fa-pills me-1"></i>Generic
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dispensing Details -->
                <div class="card border-primary mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">
                            <i class="fa fa-clipboard-check me-2"></i>Dispensing Details
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-2"><strong>Quantity Dispensed:</strong> {{ object.quantity_dispensed }} {{ object.medication.unit }}</div>
                                <div class="mb-2"><strong>Quantity Prescribed:</strong> {{ object.quantity_prescribed }} {{ object.medication.unit }}</div>
                                <div class="mb-2"><strong>Pharmacist:</strong> {{ object.pharmacist.get_full_name|default:"Not assigned" }}</div>
                                <div class="mb-2"><strong>License Number:</strong> {{ object.pharmacist.license_number|default:"Not specified" }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-2"><strong>Dispensed Date:</strong> {{ object.dispensed_date|date:"M d, Y H:i"|default:"Not dispensed" }}</div>
                                <div class="mb-2"><strong>Created Date:</strong> {{ object.created_at|date:"M d, Y H:i" }}</div>
                                <div class="mb-2"><strong>Last Updated:</strong> {{ object.updated_at|date:"M d, Y H:i" }}</div>
                                <div class="mb-2">
                                    {% if object.is_partial_fill %}
                                    <span class="badge bg-warning text-dark">
                                        <i class="fa fa-exclamation-triangle me-1"></i>Partial Fill
                                    </span>
                                    {% else %}
                                    <span class="badge bg-success">
                                        <i class="fa fa-check me-1"></i>Complete Fill
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notes and Comments -->
                {% if object.notes or object.pharmacist_notes %}
                <div class="card border-secondary mb-4">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="card-title mb-0">
                            <i class="fa fa-sticky-note me-2"></i>Notes and Comments
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if object.notes %}
                        <div class="mb-3">
                            <strong>General Notes:</strong>
                            <div class="mt-1 p-2 bg-light rounded">{{ object.notes }}</div>
                        </div>
                        {% endif %}
                        {% if object.pharmacist_notes %}
                        <div class="mb-3">
                            <strong>Pharmacist Notes:</strong>
                            <div class="mt-1 p-2 bg-light rounded">{{ object.pharmacist_notes }}</div>
                        </div>
                        {% endif %}
                        {% if object.rejection_reason %}
                        <div class="mb-3">
                            <strong>Rejection Reason:</strong>
                            <div class="mt-1 p-2 bg-danger bg-opacity-10 rounded text-danger">{{ object.rejection_reason }}</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Drug Interactions and Alerts -->
                {% if object.drug_interactions.exists or object.allergy_alerts.exists %}
                <div class="card border-danger mb-4">
                    <div class="card-header bg-danger text-white">
                        <h5 class="card-title mb-0">
                            <i class="fa fa-exclamation-triangle me-2"></i>Alerts and Interactions
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if object.drug_interactions.exists %}
                        <div class="mb-3">
                            <strong>Drug Interactions:</strong>
                            <div class="mt-2">
                                {% for interaction in object.drug_interactions.all %}
                                <div class="alert alert-warning mb-2">
                                    <div class="fw-bold">{{ interaction.severity|upper }} - {{ interaction.interacting_medication }}</div>
                                    <div class="small">{{ interaction.description }}</div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                        {% if object.allergy_alerts.exists %}
                        <div class="mb-3">
                            <strong>Allergy Alerts:</strong>
                            <div class="mt-2">
                                {% for alert in object.allergy_alerts.all %}
                                <div class="alert alert-danger mb-2">
                                    <div class="fw-bold">ALLERGY ALERT - {{ alert.allergen }}</div>
                                    <div class="small">{{ alert.reaction_type }} - {{ alert.severity }}</div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Action Buttons -->
                <div class="d-flex justify-content-between">
                    <div>
                        <a href="{% url 'pharmacy:dispensing_list' %}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left me-2"></i>Back to List
                        </a>
                    </div>
                    <div>
                        {% if object.status == 'pending' or object.status == 'in_progress' %}
                        <button type="button" class="btn btn-warning me-2" onclick="rejectDispensing()">
                            <i class="fa fa-times me-2"></i>Reject
                        </button>
                        <button type="button" class="btn btn-success me-2" onclick="completeDispensing()">
                            <i class="fa fa-check me-2"></i>Complete Dispensing
                        </button>
                        {% endif %}
                        <button type="button" class="btn btn-info me-2" onclick="printLabel()">
                            <i class="fa fa-print me-2"></i>Print Label
                        </button>
                        {% if object.status == 'dispensed' %}
                        <button type="button" class="btn btn-primary" onclick="notifyPatient()">
                            <i class="fa fa-bell me-2"></i>Notify Patient
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>

    <div class="col-xl-4">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Quick Actions</h4>
            </div>
            <div class="panel-body">
                <div class="d-grid gap-2">
                    {% if object.status == 'pending' %}
                    <button type="button" class="btn btn-outline-success" onclick="startDispensing()">
                        <i class="fa fa-play me-2"></i>Start Dispensing
                    </button>
                    {% endif %}
                    {% if object.status == 'in_progress' %}
                    <button type="button" class="btn btn-outline-success" onclick="completeDispensing()">
                        <i class="fa fa-check me-2"></i>Complete Dispensing
                    </button>
                    {% endif %}
                    <button type="button" class="btn btn-outline-info" onclick="printLabel()">
                        <i class="fa fa-print me-2"></i>Print Medication Label
                    </button>
                    <button type="button" class="btn btn-outline-primary" onclick="viewPrescription()">
                        <i class="fa fa-prescription me-2"></i>View Full Prescription
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="viewPatientProfile()">
                        <i class="fa fa-user me-2"></i>View Patient Profile
                    </button>
                    {% if object.status == 'dispensed' %}
                    <button type="button" class="btn btn-outline-warning" onclick="notifyPatient()">
                        <i class="fa fa-bell me-2"></i>Notify Patient
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Dispensing Summary</h4>
            </div>
            <div class="panel-body">
                <div class="row text-center">
                    <div class="col-6">
                        <div class="mb-3">
                            <div class="h4 {% if object.quantity_dispensed == object.quantity_prescribed %}text-success{% elif object.quantity_dispensed > 0 %}text-warning{% else %}text-danger{% endif %}">
                                {{ object.quantity_dispensed }}
                            </div>
                            <div class="small text-muted">Dispensed</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mb-3">
                            <div class="h4 text-primary">{{ object.quantity_prescribed }}</div>
                            <div class="small text-muted">Prescribed</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mb-3">
                            <div class="h4 text-info">{{ object.days_supply }}</div>
                            <div class="small text-muted">Days Supply</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mb-3">
                            <div class="h4 text-secondary">{{ object.prescription.refills_remaining }}</div>
                            <div class="small text-muted">Refills Left</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Audit Information</h4>
            </div>
            <div class="panel-body">
                <div class="small">
                    <div class="mb-2"><strong>Created By:</strong> {{ object.created_by.get_full_name|default:"System" }}</div>
                    <div class="mb-2"><strong>Created Date:</strong> {{ object.created_at|date:"M d, Y H:i" }}</div>
                    <div class="mb-2"><strong>Last Modified:</strong> {{ object.updated_at|date:"M d, Y H:i" }}</div>
                    <div class="mb-2"><strong>Modified By:</strong> {{ object.updated_by.get_full_name|default:"System" }}</div>
                    {% if object.dispensed_date %}
                    <div class="mb-2"><strong>Dispensed Date:</strong> {{ object.dispensed_date|date:"M d, Y H:i" }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Related Records</h4>
            </div>
            <div class="panel-body">
                <div class="list-group list-group-flush">
                    <a href="{% url 'pharmacy:prescription_detail' object.prescription.pk %}" class="list-group-item list-group-item-action">
                        <i class="fa fa-prescription me-2"></i>View Prescription
                    </a>
                    <a href="{% url 'patients:patient_detail' object.prescription.patient.pk %}" class="list-group-item list-group-item-action">
                        <i class="fa fa-user me-2"></i>Patient Profile
                    </a>
                    <a href="{% url 'pharmacy:medication_detail' object.medication.pk %}" class="list-group-item list-group-item-action">
                        <i class="fa fa-pills me-2"></i>Medication Details
                    </a>
                    {% if object.inventory_record %}
                    <a href="{% url 'pharmacy:inventory_detail' object.inventory_record.pk %}" class="list-group-item list-group-item-action">
                        <i class="fa fa-boxes me-2"></i>Inventory Record
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Auto-refresh if status is pending or in progress
    {% if object.status == 'pending' or object.status == 'in_progress' %}
    setInterval(function() {
        checkStatusUpdate();
    }, 30000); // Check every 30 seconds
    {% endif %}
});

function checkStatusUpdate() {
    $.ajax({
        url: '{% url "pharmacy:dispensing_status" object.pk %}',
        method: 'GET',
        success: function(response) {
            if (response.status !== '{{ object.status }}') {
                location.reload();
            }
        }
    });
}

function startDispensing() {
    if (confirm('Are you sure you want to start dispensing this medication?')) {
        $.ajax({
            url: '{% url "pharmacy:start_dispensing" object.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                toastr.success('Dispensing started successfully');
                location.reload();
            },
            error: function() {
                toastr.error('Failed to start dispensing');
            }
        });
    }
}

function completeDispensing() {
    if (confirm('Are you sure you want to complete this dispensing?')) {
        $.ajax({
            url: '{% url "pharmacy:complete_dispensing" object.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                toastr.success('Dispensing completed successfully');
                location.reload();
            },
            error: function() {
                toastr.error('Failed to complete dispensing');
            }
        });
    }
}

function rejectDispensing() {
    var reason = prompt('Please provide a reason for rejection:');
    if (reason && reason.trim()) {
        $.ajax({
            url: '{% url "pharmacy:reject_dispensing" object.pk %}',
            method: 'POST',
            data: {
                'reason': reason,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                toastr.success('Dispensing rejected');
                location.reload();
            },
            error: function() {
                toastr.error('Failed to reject dispensing');
            }
        });
    }
}

function printLabel() {
    var printUrl = '{% url "pharmacy:print_dispensing_label" %}?id={{ object.pk }}';
    window.open(printUrl, '_blank');
}

function notifyPatient() {
    $.ajax({
        url: '{% url "pharmacy:notify_patient" object.pk %}',
        method: 'POST',
        data: {
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        },
        success: function(response) {
            toastr.success('Patient notification sent successfully');
        },
        error: function() {
            toastr.error('Failed to send patient notification');
        }
    });
}

function viewPrescription() {
    window.open('{% url "pharmacy:prescription_detail" object.prescription.pk %}', '_blank');
}

function viewPatientProfile() {
    window.open('{% url "patients:patient_detail" object.prescription.patient.pk %}', '_blank');
}
</script>
{% endblock %}