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

{% block title %}Drug Interactions - Pharmacy Management{% 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>Drug Interactions</h4>
                        <h6>Monitor and manage potential drug interactions</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'pharmacy:drug_interaction_check' %}" class="btn btn-added">
                            <i class="fas fa-search me-1"></i>Check Interactions
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert Statistics -->
        <div class="row">
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="dash-widget dash-widget1">
                    <div class="dash-widgetimg">
                        <span><i class="fas fa-exclamation-triangle text-danger"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.critical_interactions|default:8 }}</h5>
                        <h6>Critical Interactions</h6>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="dash-widget dash-widget2">
                    <div class="dash-widgetimg">
                        <span><i class="fas fa-exclamation-circle text-warning"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.major_interactions|default:24 }}</h5>
                        <h6>Major Interactions</h6>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="dash-widget dash-widget3">
                    <div class="dash-widgetimg">
                        <span><i class="fas fa-info-circle text-info"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.moderate_interactions|default:156 }}</h5>
                        <h6>Moderate Interactions</h6>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="dash-widget dash-widget4">
                    <div class="dash-widgetimg">
                        <span><i class="fas fa-check-circle text-success"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.resolved_interactions|default:89 }}</h5>
                        <h6>Resolved Today</h6>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters and Search -->
        <div class="card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-path">
                            <a class="btn btn-filter" id="filter_search">
                                <i class="fas fa-filter"></i>
                                <span><i class="fas fa-times"></i></span>
                            </a>
                        </div>
                        <div class="search-input">
                            <a class="btn btn-searchset">
                                <i class="fas fa-search"></i>
                            </a>
                            <input type="text" id="searchInput" placeholder="Search by drug name, patient, or interaction...">
                        </div>
                    </div>
                    <div class="wordset">
                        <ul>
                            <li>
                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="PDF" onclick="exportToPDF()">
                                    <i class="fas fa-file-pdf"></i>
                                </a>
                            </li>
                            <li>
                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Excel" onclick="exportToExcel()">
                                    <i class="fas fa-file-excel"></i>
                                </a>
                            </li>
                            <li>
                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Print" onclick="printTable()">
                                    <i class="fas fa-print"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Filter Panel -->
                <div class="card mb-0" id="filter_inputs" style="display: none;">
                    <div class="card-body pb-0">
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>Severity Level</label>
                                    <select class="select" id="severityFilter">
                                        <option value="">All Severities</option>
                                        <option value="critical">Critical</option>
                                        <option value="major">Major</option>
                                        <option value="moderate">Moderate</option>
                                        <option value="minor">Minor</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>Status</label>
                                    <select class="select" id="statusFilter">
                                        <option value="">All Status</option>
                                        <option value="active">Active</option>
                                        <option value="resolved">Resolved</option>
                                        <option value="overridden">Overridden</option>
                                        <option value="monitoring">Monitoring</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>Date Range</label>
                                    <input type="date" class="form-control" id="startDate" placeholder="Start Date">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>End Date</label>
                                    <input type="date" class="form-control" id="endDate" placeholder="End Date">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>Interaction Type</label>
                                    <select class="select" id="interactionTypeFilter">
                                        <option value="">All Types</option>
                                        <option value="drug-drug">Drug-Drug</option>
                                        <option value="drug-food">Drug-Food</option>
                                        <option value="drug-allergy">Drug-Allergy</option>
                                        <option value="drug-condition">Drug-Condition</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>Department</label>
                                    <select class="select" id="departmentFilter">
                                        <option value="">All Departments</option>
                                        <option value="emergency">Emergency</option>
                                        <option value="icu">ICU</option>
                                        <option value="cardiology">Cardiology</option>
                                        <option value="oncology">Oncology</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <a class="btn btn-filters ms-auto" onclick="applyFilters()">
                                        <i class="fas fa-search"></i>
                                    </a>
                                    <a class="btn btn-filters ms-2" onclick="clearFilters()">
                                        <i class="fas fa-times-circle"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Drug Interactions Table -->
                <div class="table-responsive">
                    <table class="table" id="interactionsTable">
                        <thead>
                            <tr>
                                <th>
                                    <label class="checkboxs">
                                        <input type="checkbox" id="select-all">
                                        <span class="checkmarks"></span>
                                    </label>
                                </th>
                                <th>Alert ID</th>
                                <th>Patient</th>
                                <th>Interacting Drugs</th>
                                <th>Severity</th>
                                <th>Type</th>
                                <th>Clinical Effect</th>
                                <th>Detected Date</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Sample Data -->
                            <tr>
                                <td>
                                    <label class="checkboxs">
                                        <input type="checkbox" value="1">
                                        <span class="checkmarks"></span>
                                    </label>
                                </td>
                                <td>INT-2024-001</td>
                                <td>
                                    <div class="userimgname">
                                        <a href="#" class="product-img">
                                            <i class="fas fa-user-circle"></i>
                                        </a>
                                        <a href="#">John Smith</a>
                                        <small class="d-block text-muted">MRN: 123456</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="drug-interaction">
                                        <span class="drug-name">Warfarin</span>
                                        <i class="fas fa-exchange-alt mx-2 text-danger"></i>
                                        <span class="drug-name">Aspirin</span>
                                        <small class="d-block text-muted">Blood thinners combination</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badges bg-lightred">
                                        <i class="fas fa-exclamation-triangle me-1"></i>Critical
                                    </span>
                                </td>
                                <td>Drug-Drug</td>
                                <td>
                                    <div class="clinical-effect">
                                        <strong>Increased bleeding risk</strong>
                                        <small class="d-block text-muted">Monitor INR closely</small>
                                    </div>
                                </td>
                                <td>2024-01-15 09:30 AM</td>
                                <td><span class="badges bg-lightyellow">Active</span></td>
                                <td>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Override">
                                        <i class="fas fa-shield-alt"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Resolve">
                                        <i class="fas fa-check-circle"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label class="checkboxs">
                                        <input type="checkbox" value="2">
                                        <span class="checkmarks"></span>
                                    </label>
                                </td>
                                <td>INT-2024-002</td>
                                <td>
                                    <div class="userimgname">
                                        <a href="#" class="product-img">
                                            <i class="fas fa-user-circle"></i>
                                        </a>
                                        <a href="#">Sarah Johnson</a>
                                        <small class="d-block text-muted">MRN: 789012</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="drug-interaction">
                                        <span class="drug-name">Simvastatin</span>
                                        <i class="fas fa-exchange-alt mx-2 text-warning"></i>
                                        <span class="drug-name">Amlodipine</span>
                                        <small class="d-block text-muted">Statin interaction</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badges bg-lightyellow">
                                        <i class="fas fa-exclamation-circle me-1"></i>Major
                                    </span>
                                </td>
                                <td>Drug-Drug</td>
                                <td>
                                    <div class="clinical-effect">
                                        <strong>Increased myopathy risk</strong>
                                        <small class="d-block text-muted">Monitor CK levels</small>
                                    </div>
                                </td>
                                <td>2024-01-15 11:45 AM</td>
                                <td><span class="badges bg-lightblue">Monitoring</span></td>
                                <td>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Add Note">
                                        <i class="fas fa-sticky-note"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Resolve">
                                        <i class="fas fa-check-circle"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label class="checkboxs">
                                        <input type="checkbox" value="3">
                                        <span class="checkmarks"></span>
                                    </label>
                                </td>
                                <td>INT-2024-003</td>
                                <td>
                                    <div class="userimgname">
                                        <a href="#" class="product-img">
                                            <i class="fas fa-user-circle"></i>
                                        </a>
                                        <a href="#">Michael Brown</a>
                                        <small class="d-block text-muted">MRN: 345678</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="drug-interaction">
                                        <span class="drug-name">Lisinopril</span>
                                        <i class="fas fa-utensils mx-2 text-info"></i>
                                        <span class="drug-name">Potassium</span>
                                        <small class="d-block text-muted">Drug-food interaction</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badges bg-lightblue">
                                        <i class="fas fa-info-circle me-1"></i>Moderate
                                    </span>
                                </td>
                                <td>Drug-Food</td>
                                <td>
                                    <div class="clinical-effect">
                                        <strong>Hyperkalemia risk</strong>
                                        <small class="d-block text-muted">Limit potassium intake</small>
                                    </div>
                                </td>
                                <td>2024-01-15 02:15 PM</td>
                                <td><span class="badges bg-lightgreen">Resolved</span></td>
                                <td>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="View Resolution">
                                        <i class="fas fa-clipboard-check"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Reactivate">
                                        <i class="fas fa-redo"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label class="checkboxs">
                                        <input type="checkbox" value="4">
                                        <span class="checkmarks"></span>
                                    </label>
                                </td>
                                <td>INT-2024-004</td>
                                <td>
                                    <div class="userimgname">
                                        <a href="#" class="product-img">
                                            <i class="fas fa-user-circle"></i>
                                        </a>
                                        <a href="#">Emily Davis</a>
                                        <small class="d-block text-muted">MRN: 901234</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="drug-interaction">
                                        <span class="drug-name">Metformin</span>
                                        <i class="fas fa-disease mx-2 text-secondary"></i>
                                        <span class="drug-name">Kidney Disease</span>
                                        <small class="d-block text-muted">Drug-condition interaction</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badges bg-lightyellow">
                                        <i class="fas fa-exclamation-circle me-1"></i>Major
                                    </span>
                                </td>
                                <td>Drug-Condition</td>
                                <td>
                                    <div class="clinical-effect">
                                        <strong>Lactic acidosis risk</strong>
                                        <small class="d-block text-muted">Monitor renal function</small>
                                    </div>
                                </td>
                                <td>2024-01-14 04:30 PM</td>
                                <td><span class="badges bg-lightpurple">Overridden</span></td>
                                <td>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Override Reason">
                                        <i class="fas fa-comment-medical"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Review">
                                        <i class="fas fa-search-plus"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="pagination-wrapper">
                    <div class="row">
                        <div class="col-sm-12 col-md-5">
                            <div class="dataTables_info">
                                Showing 1 to 4 of 277 entries
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-7">
                            <div class="dataTables_paginate">
                                <ul class="pagination">
                                    <li class="paginate_button page-item previous disabled">
                                        <a href="#" class="page-link">Previous</a>
                                    </li>
                                    <li class="paginate_button page-item active">
                                        <a href="#" class="page-link">1</a>
                                    </li>
                                    <li class="paginate_button page-item">
                                        <a href="#" class="page-link">2</a>
                                    </li>
                                    <li class="paginate_button page-item">
                                        <a href="#" class="page-link">3</a>
                                    </li>
                                    <li class="paginate_button page-item next">
                                        <a href="#" class="page-link">Next</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize search functionality
    const searchInput = document.getElementById('searchInput');
    searchInput.addEventListener('keyup', function() {
        filterTable();
    });

    // Initialize select all checkbox
    const selectAllCheckbox = document.getElementById('select-all');
    selectAllCheckbox.addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

    // Initialize filter toggle
    const filterButton = document.getElementById('filter_search');
    const filterPanel = document.getElementById('filter_inputs');
    filterButton.addEventListener('click', function() {
        if (filterPanel.style.display === 'none') {
            filterPanel.style.display = 'block';
        } else {
            filterPanel.style.display = 'none';
        }
    });

    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

function filterTable() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const table = document.getElementById('interactionsTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const cells = row.getElementsByTagName('td');
        let found = false;

        // Search in alert ID, patient name, drugs
        const searchableText = (
            cells[1].textContent + ' ' +  // Alert ID
            cells[2].textContent + ' ' +  // Patient
            cells[3].textContent         // Drugs
        ).toLowerCase();

        if (searchableText.includes(searchTerm)) {
            found = true;
        }

        row.style.display = found ? '' : 'none';
    }
}

function applyFilters() {
    const severity = document.getElementById('severityFilter').value;
    const status = document.getElementById('statusFilter').value;
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    const interactionType = document.getElementById('interactionTypeFilter').value;
    const department = document.getElementById('departmentFilter').value;

    console.log('Applying filters:', {
        severity, status, startDate, endDate, interactionType, department
    });

    // Filter logic would be implemented here
    alert('Filters applied! In a real implementation, this would filter the drug interactions.');
}

function clearFilters() {
    document.getElementById('severityFilter').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('startDate').value = '';
    document.getElementById('endDate').value = '';
    document.getElementById('interactionTypeFilter').value = '';
    document.getElementById('departmentFilter').value = '';
    document.getElementById('searchInput').value = '';

    // Show all rows
    const table = document.getElementById('interactionsTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (let i = 0; i < rows.length; i++) {
        rows[i].style.display = '';
    }

    console.log('Filters cleared');
}

function exportToPDF() {
    console.log('Exporting drug interactions to PDF...');
    alert('PDF export functionality would be implemented here.');
}

function exportToExcel() {
    console.log('Exporting drug interactions to Excel...');
    alert('Excel export functionality would be implemented here.');
}

function printTable() {
    console.log('Printing drug interactions...');
    window.print();
}
</script>

<style>
.drug-interaction {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.drug-name {
    font-weight: 600;
    color: #495057;
}

.clinical-effect strong {
    color: #dc3545;
}

.dash-widget1 .dash-widgetimg span {
    background: linear-gradient(90deg, #ff6b6b 0%, #ee5a52 100%);
}

.dash-widget2 .dash-widgetimg span {
    background: linear-gradient(90deg, #ffa726 0%, #fb8c00 100%);
}

.dash-widget3 .dash-widgetimg span {
    background: linear-gradient(90deg, #42a5f5 0%, #1e88e5 100%);
}

.dash-widget4 .dash-widgetimg span {
    background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%);
}

@media (max-width: 768px) {
    .drug-interaction {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .drug-interaction .fas {
        margin: 5px 0;
    }
}
</style>
{% endblock %}