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

{% block title %}{{ object.name }} - Medications - 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:medication_list' %}">Medications</a></li>
    <li class="breadcrumb-item active">{{ object.name }}</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    {{ object.name }}
    <small>{{ object.generic_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">Medication Information</h4>
                <div class="panel-heading-btn">
                    <a href="{% url 'pharmacy:medication_edit' object.pk %}" class="btn btn-xs btn-primary me-2">
                        <i class="fa fa-edit"></i> Edit
                    </a>
                    <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">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Generic Name</label>
                            <div>{{ object.generic_name }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Brand Name</label>
                            <div>{{ object.brand_name|default:"Not specified" }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Manufacturer</label>
                            <div>{{ object.manufacturer|default:"Not specified" }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">NDC Number</label>
                            <div>{{ object.ndc_number|default:"Not specified" }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Category</label>
                            <div>
                                <span class="badge bg-info">{{ object.get_category_display }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Dosage Form</label>
                            <div>{{ object.get_dosage_form_display }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Strength</label>
                            <div>{{ object.strength }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Route of Administration</label>
                            <div>{{ object.get_route_display }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Unit of Measure</label>
                            <div>{{ object.unit_of_measure }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Status</label>
                            <div>
                                {% if object.is_active %}
                                <span class="badge bg-success">Active</span>
                                {% else %}
                                <span class="badge bg-secondary">Inactive</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Special Indicators -->
                <div class="row mb-3">
                    <div class="col-12">
                        <div class="d-flex flex-wrap gap-2">
                            {% if object.is_controlled %}
                            <span class="badge bg-warning text-dark">
                                <i class="fa fa-shield me-1"></i>Controlled Substance - Schedule {{ object.controlled_schedule }}
                            </span>
                            {% endif %}
                            {% if object.requires_refrigeration %}
                            <span class="badge bg-info">
                                <i class="fa fa-snowflake me-1"></i>Requires Refrigeration
                            </span>
                            {% endif %}
                            {% if object.is_high_alert %}
                            <span class="badge bg-danger">
                                <i class="fa fa-exclamation-triangle me-1"></i>High Alert Medication
                            </span>
                            {% endif %}
                            {% if object.is_generic %}
                            <span class="badge bg-secondary">
                                <i class="fa fa-check me-1"></i>Generic Available
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Clinical Information -->
                {% if object.indications or object.contraindications or object.side_effects %}
                <div class="card border-primary mb-3">
                    <div class="card-header bg-primary text-white">
                        <h6 class="card-title mb-0">
                            <i class="fa fa-stethoscope me-2"></i>Clinical Information
                        </h6>
                    </div>
                    <div class="card-body">
                        {% if object.indications %}
                        <div class="mb-3">
                            <label class="form-label fw-bold">Indications</label>
                            <div>{{ object.indications|linebreaks }}</div>
                        </div>
                        {% endif %}
                        {% if object.contraindications %}
                        <div class="mb-3">
                            <label class="form-label fw-bold">Contraindications</label>
                            <div class="text-danger">{{ object.contraindications|linebreaks }}</div>
                        </div>
                        {% endif %}
                        {% if object.side_effects %}
                        <div class="mb-3">
                            <label class="form-label fw-bold">Side Effects</label>
                            <div class="text-warning">{{ object.side_effects|linebreaks }}</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Dosage Information -->
                {% if object.usual_adult_dose or object.usual_pediatric_dose or object.maximum_dose %}
                <div class="card border-success mb-3">
                    <div class="card-header bg-success text-white">
                        <h6 class="card-title mb-0">
                            <i class="fa fa-calculator me-2"></i>Dosage Information
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            {% if object.usual_adult_dose %}
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Usual Adult Dose</label>
                                <div>{{ object.usual_adult_dose }}</div>
                            </div>
                            {% endif %}
                            {% if object.usual_pediatric_dose %}
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Usual Pediatric Dose</label>
                                <div>{{ object.usual_pediatric_dose }}</div>
                            </div>
                            {% endif %}
                            {% if object.maximum_dose %}
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Maximum Dose</label>
                                <div class="text-danger">{{ object.maximum_dose }}</div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Storage and Handling -->
                <div class="card border-warning mb-3">
                    <div class="card-header bg-warning text-dark">
                        <h6 class="card-title mb-0">
                            <i class="fa fa-warehouse me-2"></i>Storage and Handling
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-2">
                                    <label class="form-label fw-bold">Storage Temperature</label>
                                    <div>{{ object.storage_temperature|default:"Room temperature" }}</div>
                                </div>
                                <div class="mb-2">
                                    <label class="form-label fw-bold">Storage Conditions</label>
                                    <div>{{ object.storage_conditions|default:"Store in a cool, dry place" }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-2">
                                    <label class="form-label fw-bold">Shelf Life</label>
                                    <div>{{ object.shelf_life|default:"Not specified" }}</div>
                                </div>
                                <div class="mb-2">
                                    <label class="form-label fw-bold">Special Handling</label>
                                    <div>{{ object.special_handling|default:"Standard handling" }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notes -->
                {% if object.notes %}
                <div class="mb-3">
                    <label class="form-label fw-bold">Notes</label>
                    <div class="border rounded p-3 bg-light">{{ object.notes|linebreaks }}</div>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Drug Interactions</h4>
                <div class="panel-heading-btn">
                    <button type="button" class="btn btn-xs btn-warning me-2" onclick="checkInteractions()">
                        <i class="fa fa-exclamation-triangle"></i> Check Interactions
                    </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">
                <div id="interactions-content">
                    <div class="text-center text-muted">
                        <i class="fa fa-info-circle fa-2x mb-2"></i>
                        <div>Click "Check Interactions" to view known drug interactions</div>
                    </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">
                    <a href="{% url 'pharmacy:medication_edit' object.pk %}" class="btn btn-primary">
                        <i class="fa fa-edit me-2"></i>Edit Medication
                    </a>
                    <a href="{% url 'pharmacy:prescription_create' %}?medication={{ object.pk }}" class="btn btn-success">
                        <i class="fa fa-plus me-2"></i>Create Prescription
                    </a>
                    <button type="button" class="btn btn-info" onclick="viewInventory()">
                        <i class="fa fa-boxes me-2"></i>View Inventory
                    </button>
                    <button type="button" class="btn btn-warning" onclick="checkInteractions()">
                        <i class="fa fa-exclamation-triangle me-2"></i>Check Interactions
                    </button>
                    <a href="{% url 'pharmacy:medication_print' object.pk %}" class="btn btn-secondary" target="_blank">
                        <i class="fa fa-print me-2"></i>Print Information
                    </a>
                    {% if perms.pharmacy.delete_medication %}
                    <a href="{% url 'pharmacy:medication_delete' object.pk %}" class="btn btn-danger">
                        <i class="fa fa-trash me-2"></i>Delete Medication
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Inventory Status</h4>
            </div>
            <div class="panel-body">
                <div id="inventory-status">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div class="mt-2">Loading inventory status...</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Prescription Statistics</h4>
            </div>
            <div class="panel-body">
                <div id="prescription-stats">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div class="mt-2">Loading statistics...</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Medication Details</h4>
            </div>
            <div class="panel-body">
                <div class="list-group list-group-flush">
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        Created
                        <span class="text-muted">{{ object.created_at|date:"M d, Y" }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        Last Updated
                        <span class="text-muted">{{ object.updated_at|date:"M d, Y" }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        Created By
                        <span class="text-muted">{{ object.created_by.get_full_name|default:"System" }}</span>
                    </div>
                    {% if object.barcode %}
                    <div class="list-group-item">
                        <div class="fw-bold">Barcode</div>
                        <div class="font-monospace">{{ object.barcode }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Load inventory status
    loadInventoryStatus();
    
    // Load prescription statistics
    loadPrescriptionStats();
    
    // Auto-refresh every 30 seconds
    setInterval(function() {
        loadInventoryStatus();
        loadPrescriptionStats();
    }, 30000);
});

function loadInventoryStatus() {
    $.ajax({
        url: '{% url "pharmacy:medication_inventory_status" object.pk %}',
        method: 'GET',
        success: function(response) {
            var html = '';
            
            if (response.inventory_items && response.inventory_items.length > 0) {
                response.inventory_items.forEach(function(item) {
                    var statusClass = 'success';
                    var statusIcon = 'check';
                    
                    if (item.quantity <= item.reorder_level) {
                        statusClass = 'warning';
                        statusIcon = 'exclamation-triangle';
                    }
                    if (item.quantity <= 0) {
                        statusClass = 'danger';
                        statusIcon = 'times';
                    }
                    
                    html += '<div class="d-flex justify-content-between align-items-center mb-2">';
                    html += '<div>';
                    html += '<div class="fw-bold">' + item.location_name + '</div>';
                    html += '<div class="small text-muted">Lot: ' + (item.lot_number || 'N/A') + '</div>';
                    html += '</div>';
                    html += '<div class="text-end">';
                    html += '<div class="badge bg-' + statusClass + '">';
                    html += '<i class="fa fa-' + statusIcon + ' me-1"></i>' + item.quantity + ' ' + item.unit;
                    html += '</div>';
                    if (item.expiry_date) {
                        html += '<div class="small text-muted">Exp: ' + item.expiry_date + '</div>';
                    }
                    html += '</div>';
                    html += '</div>';
                });
                
                // Total quantity
                html += '<hr>';
                html += '<div class="d-flex justify-content-between align-items-center">';
                html += '<div class="fw-bold">Total Quantity</div>';
                html += '<div class="fw-bold">' + response.total_quantity + ' units</div>';
                html += '</div>';
            } else {
                html = '<div class="text-center text-muted">';
                html += '<i class="fa fa-box-open fa-2x mb-2"></i>';
                html += '<div>No inventory records found</div>';
                html += '</div>';
            }
            
            $('#inventory-status').html(html);
        },
        error: function() {
            $('#inventory-status').html('<div class="text-danger text-center">Failed to load inventory status</div>');
        }
    });
}

function loadPrescriptionStats() {
    $.ajax({
        url: '{% url "pharmacy:medication_prescription_stats" object.pk %}',
        method: 'GET',
        success: function(response) {
            var html = '';
            
            html += '<div class="row text-center">';
            html += '<div class="col-6">';
            html += '<div class="h4 mb-0">' + response.total_prescriptions + '</div>';
            html += '<div class="small text-muted">Total Prescriptions</div>';
            html += '</div>';
            html += '<div class="col-6">';
            html += '<div class="h4 mb-0">' + response.active_prescriptions + '</div>';
            html += '<div class="small text-muted">Active</div>';
            html += '</div>';
            html += '</div>';
            
            html += '<hr>';
            
            html += '<div class="row text-center">';
            html += '<div class="col-6">';
            html += '<div class="h5 mb-0">' + response.this_month + '</div>';
            html += '<div class="small text-muted">This Month</div>';
            html += '</div>';
            html += '<div class="col-6">';
            html += '<div class="h5 mb-0">' + response.last_30_days + '</div>';
            html += '<div class="small text-muted">Last 30 Days</div>';
            html += '</div>';
            html += '</div>';
            
            if (response.recent_prescriptions && response.recent_prescriptions.length > 0) {
                html += '<hr>';
                html += '<div class="fw-bold mb-2">Recent Prescriptions</div>';
                response.recent_prescriptions.forEach(function(prescription) {
                    html += '<div class="d-flex justify-content-between align-items-center mb-1">';
                    html += '<div class="small">' + prescription.patient_name + '</div>';
                    html += '<div class="small text-muted">' + prescription.date + '</div>';
                    html += '</div>';
                });
            }
            
            $('#prescription-stats').html(html);
        },
        error: function() {
            $('#prescription-stats').html('<div class="text-danger text-center">Failed to load statistics</div>');
        }
    });
}

function checkInteractions() {
    $.ajax({
        url: '{% url "pharmacy:medication_interactions" object.pk %}',
        method: 'GET',
        success: function(response) {
            var html = '';
            
            if (response.interactions && response.interactions.length > 0) {
                html += '<div class="alert alert-warning">';
                html += '<h6 class="alert-heading">Known Drug Interactions</h6>';
                html += '<ul class="mb-0">';
                response.interactions.forEach(function(interaction) {
                    html += '<li><strong>' + interaction.drug_name + '</strong>: ' + interaction.description + '</li>';
                });
                html += '</ul>';
                html += '</div>';
            } else {
                html += '<div class="alert alert-success">';
                html += '<i class="fa fa-check me-2"></i>No known drug interactions found in the database.';
                html += '</div>';
            }
            
            if (response.contraindications && response.contraindications.length > 0) {
                html += '<div class="alert alert-danger">';
                html += '<h6 class="alert-heading">Contraindications</h6>';
                html += '<ul class="mb-0">';
                response.contraindications.forEach(function(contraindication) {
                    html += '<li>' + contraindication + '</li>';
                });
                html += '</ul>';
                html += '</div>';
            }
            
            $('#interactions-content').html(html);
        },
        error: function() {
            $('#interactions-content').html('<div class="text-danger text-center">Failed to load interaction data</div>');
        }
    });
}

function viewInventory() {
    window.location.href = '{% url "pharmacy:inventory_list" %}?medication=' + {{ object.pk }};
}
</script>
{% endblock %}