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

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

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Prescription Search</h4>
                        <h6>Search and manage prescription orders and medication history</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'pharmacy:prescription_create' %}" class="btn btn-primary">
                            <i class="fa fa-plus"></i> New Prescription
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Search Filters -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Search Filters</h5>
                    </div>
                    <div class="card-body">
                        <form method="get" class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">Patient Search</label>
                                <input type="text" name="patient_search" class="form-control" 
                                       placeholder="Name, MRN, or Phone" value="{{ request.GET.patient_search }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Prescription Number</label>
                                <input type="text" name="prescription_number" class="form-control" 
                                       placeholder="Rx Number" value="{{ request.GET.prescription_number }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Medication</label>
                                <input type="text" name="medication" class="form-control" 
                                       placeholder="Drug name or NDC" value="{{ request.GET.medication }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Prescriber</label>
                                <select name="prescriber" class="form-select">
                                    <option value="">All Prescribers</option>
                                    {% for prescriber in prescribers %}
                                    <option value="{{ prescriber.id }}" 
                                            {% if request.GET.prescriber == prescriber.id|stringformat:"s" %}selected{% endif %}>
                                        {{ prescriber.get_full_name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Status</label>
                                <select name="status" class="form-select">
                                    <option value="">All Status</option>
                                    <option value="pending" {% if request.GET.status == 'pending' %}selected{% endif %}>Pending</option>
                                    <option value="in_progress" {% if request.GET.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                                    <option value="ready" {% if request.GET.status == 'ready' %}selected{% endif %}>Ready</option>
                                    <option value="dispensed" {% if request.GET.status == 'dispensed' %}selected{% endif %}>Dispensed</option>
                                    <option value="cancelled" {% if request.GET.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Priority</label>
                                <select name="priority" class="form-select">
                                    <option value="">All Priorities</option>
                                    <option value="urgent" {% if request.GET.priority == 'urgent' %}selected{% endif %}>Urgent</option>
                                    <option value="high" {% if request.GET.priority == 'high' %}selected{% endif %}>High</option>
                                    <option value="normal" {% if request.GET.priority == 'normal' %}selected{% endif %}>Normal</option>
                                    <option value="low" {% if request.GET.priority == 'low' %}selected{% endif %}>Low</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Date From</label>
                                <input type="date" name="date_from" class="form-control" value="{{ request.GET.date_from }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Date To</label>
                                <input type="date" name="date_to" class="form-control" value="{{ request.GET.date_to }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Insurance</label>
                                <select name="insurance" class="form-select">
                                    <option value="">All Insurance</option>
                                    {% for insurance in insurance_plans %}
                                    <option value="{{ insurance.id }}" 
                                            {% if request.GET.insurance == insurance.id|stringformat:"s" %}selected{% endif %}>
                                        {{ insurance.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Controlled Substance</label>
                                <select name="controlled" class="form-select">
                                    <option value="">All Medications</option>
                                    <option value="yes" {% if request.GET.controlled == 'yes' %}selected{% endif %}>Controlled Only</option>
                                    <option value="no" {% if request.GET.controlled == 'no' %}selected{% endif %}>Non-Controlled Only</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-search"></i> Search
                                </button>
                                <a href="{% url 'pharmacy:prescription_search' %}" class="btn btn-secondary">
                                    <i class="fa fa-refresh"></i> Reset
                                </a>
                                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#advancedSearchModal">
                                    <i class="fa fa-cog"></i> Advanced Search
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Search Results Summary -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">
                            Search Results 
                            <span class="badge bg-primary">{{ prescriptions.count|default:0 }} found</span>
                        </h5>
                        <div class="card-tools">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                                    <i class="fa fa-download"></i> Export
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><i class="fa fa-file-pdf"></i> PDF</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="fa fa-file-excel"></i> Excel</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="fa fa-file-csv"></i> CSV</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" id="selectAll" class="form-check-input">
                                        </th>
                                        <th>Rx Number</th>
                                        <th>Patient</th>
                                        <th>Medication</th>
                                        <th>Prescriber</th>
                                        <th>Date Prescribed</th>
                                        <th>Status</th>
                                        <th>Priority</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for prescription in prescriptions %}
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="selected_prescriptions" 
                                                   value="{{ prescription.id }}" class="form-check-input">
                                        </td>
                                        <td>
                                            <a href="{% url 'pharmacy:prescription_detail' prescription.id %}" class="text-primary">
                                                {{ prescription.prescription_number }}
                                            </a>
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ prescription.patient.get_full_name }}</strong><br>
                                                <small class="text-muted">{{ prescription.patient.medical_record_number }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ prescription.medication.name }}</strong><br>
                                                <small class="text-muted">
                                                    {{ prescription.strength }} - {{ prescription.quantity }} {{ prescription.unit }}
                                                </small>
                                                {% if prescription.medication.controlled_substance %}
                                                <br><span class="badge bg-warning">Controlled</span>
                                                {% endif %}
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                {{ prescription.prescriber.get_full_name }}<br>
                                                <small class="text-muted">{{ prescription.prescriber.specialty|default:"Physician" }}</small>
                                            </div>
                                        </td>
                                        <td>{{ prescription.date_prescribed|date:"M d, Y H:i" }}</td>
                                        <td>
                                            {% if prescription.status == 'pending' %}
                                                <span class="badge bg-warning">Pending</span>
                                            {% elif prescription.status == 'in_progress' %}
                                                <span class="badge bg-info">In Progress</span>
                                            {% elif prescription.status == 'ready' %}
                                                <span class="badge bg-success">Ready</span>
                                            {% elif prescription.status == 'dispensed' %}
                                                <span class="badge bg-primary">Dispensed</span>
                                            {% elif prescription.status == 'cancelled' %}
                                                <span class="badge bg-danger">Cancelled</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if prescription.priority == 'urgent' %}
                                                <span class="badge bg-danger">Urgent</span>
                                            {% elif prescription.priority == 'high' %}
                                                <span class="badge bg-warning">High</span>
                                            {% elif prescription.priority == 'normal' %}
                                                <span class="badge bg-primary">Normal</span>
                                            {% else %}
                                                <span class="badge bg-secondary">Low</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <a href="{% url 'pharmacy:prescription_detail' prescription.id %}" 
                                                   class="btn btn-sm btn-outline-primary" title="View Details">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                {% if prescription.status == 'pending' %}
                                                <a href="{% url 'pharmacy:prescription_process' prescription.id %}" 
                                                   class="btn btn-sm btn-outline-success" title="Process">
                                                    <i class="fa fa-play"></i>
                                                </a>
                                                {% endif %}
                                                {% if prescription.status == 'ready' %}
                                                <a href="{% url 'pharmacy:prescription_dispense' prescription.id %}" 
                                                   class="btn btn-sm btn-outline-info" title="Dispense">
                                                    <i class="fa fa-hand-holding"></i>
                                                </a>
                                                {% endif %}
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                                            data-bs-toggle="dropdown" title="More Actions">
                                                        <i class="fa fa-ellipsis-v"></i>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item" href="#"><i class="fa fa-edit"></i> Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="fa fa-print"></i> Print Label</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="fa fa-history"></i> View History</a></li>
                                                        <li><hr class="dropdown-divider"></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="fa fa-times"></i> Cancel</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="9" class="text-center text-muted">
                                            <i class="fa fa-search fa-3x mb-3"></i>
                                            <p>No prescriptions found matching your search criteria</p>
                                            <a href="{% url 'pharmacy:prescription_create' %}" class="btn btn-primary">
                                                <i class="fa fa-plus"></i> Create New Prescription
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        {% if prescriptions.has_other_pages %}
                        <nav aria-label="Prescription search pagination">
                            <ul class="pagination justify-content-center">
                                {% if prescriptions.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ prescriptions.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">Previous</a>
                                    </li>
                                {% endif %}
                                
                                {% for num in prescriptions.paginator.page_range %}
                                    {% if prescriptions.number == num %}
                                        <li class="page-item active">
                                            <span class="page-link">{{ num }}</span>
                                        </li>
                                    {% elif num > prescriptions.number|add:'-3' and num < prescriptions.number|add:'3' %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                                
                                {% if prescriptions.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ prescriptions.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">Next</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Bulk Actions -->
        {% if prescriptions %}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Bulk Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-outline-primary" id="bulkProcessBtn">
                                        <i class="fa fa-play"></i> Process Selected
                                    </button>
                                    <button type="button" class="btn btn-outline-success" id="bulkDispenseBtn">
                                        <i class="fa fa-hand-holding"></i> Dispense Selected
                                    </button>
                                    <button type="button" class="btn btn-outline-info" id="bulkPrintBtn">
                                        <i class="fa fa-print"></i> Print Labels
                                    </button>
                                    <button type="button" class="btn btn-outline-warning" id="bulkTransferBtn">
                                        <i class="fa fa-exchange-alt"></i> Transfer Selected
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4 text-end">
                                <span id="selectedCount" class="text-muted">0 prescriptions selected</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Advanced Search Modal -->
<div class="modal fade" id="advancedSearchModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Advanced Search Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="get">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Drug Class</label>
                                <select name="drug_class" class="form-select">
                                    <option value="">All Drug Classes</option>
                                    <option value="antibiotics">Antibiotics</option>
                                    <option value="cardiovascular">Cardiovascular</option>
                                    <option value="diabetes">Diabetes</option>
                                    <option value="pain_management">Pain Management</option>
                                    <option value="mental_health">Mental Health</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Dosage Form</label>
                                <select name="dosage_form" class="form-select">
                                    <option value="">All Forms</option>
                                    <option value="tablet">Tablet</option>
                                    <option value="capsule">Capsule</option>
                                    <option value="liquid">Liquid</option>
                                    <option value="injection">Injection</option>
                                    <option value="topical">Topical</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Days Supply</label>
                                <div class="row">
                                    <div class="col-6">
                                        <input type="number" name="days_supply_min" class="form-control" placeholder="Min days">
                                    </div>
                                    <div class="col-6">
                                        <input type="number" name="days_supply_max" class="form-control" placeholder="Max days">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Refills Remaining</label>
                                <select name="refills_remaining" class="form-select">
                                    <option value="">Any</option>
                                    <option value="0">No Refills</option>
                                    <option value="1">1 Refill</option>
                                    <option value="2">2+ Refills</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Patient Age Range</label>
                                <div class="row">
                                    <div class="col-6">
                                        <input type="number" name="age_min" class="form-control" placeholder="Min age">
                                    </div>
                                    <div class="col-6">
                                        <input type="number" name="age_max" class="form-control" placeholder="Max age">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Generic/Brand</label>
                                <select name="generic_brand" class="form-select">
                                    <option value="">Both</option>
                                    <option value="generic">Generic Only</option>
                                    <option value="brand">Brand Only</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Apply Advanced Search</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Select all functionality
    const selectAllCheckbox = document.getElementById('selectAll');
    const prescriptionCheckboxes = document.querySelectorAll('input[name="selected_prescriptions"]');
    const selectedCountElement = document.getElementById('selectedCount');

    function updateSelectedCount() {
        const selectedCount = document.querySelectorAll('input[name="selected_prescriptions"]:checked').length;
        selectedCountElement.textContent = `${selectedCount} prescription${selectedCount !== 1 ? 's' : ''} selected`;
        
        // Enable/disable bulk action buttons
        const bulkButtons = document.querySelectorAll('[id^="bulk"]');
        bulkButtons.forEach(button => {
            button.disabled = selectedCount === 0;
        });
    }

    selectAllCheckbox.addEventListener('change', function() {
        prescriptionCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateSelectedCount();
    });

    prescriptionCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const allChecked = Array.from(prescriptionCheckboxes).every(cb => cb.checked);
            const noneChecked = Array.from(prescriptionCheckboxes).every(cb => !cb.checked);
            
            selectAllCheckbox.checked = allChecked;
            selectAllCheckbox.indeterminate = !allChecked && !noneChecked;
            
            updateSelectedCount();
        });
    });

    // Bulk action handlers
    document.getElementById('bulkProcessBtn').addEventListener('click', function() {
        const selected = getSelectedPrescriptions();
        if (selected.length > 0) {
            if (confirm(`Process ${selected.length} selected prescription(s)?`)) {
                // Handle bulk processing
                console.log('Processing prescriptions:', selected);
            }
        }
    });

    document.getElementById('bulkDispenseBtn').addEventListener('click', function() {
        const selected = getSelectedPrescriptions();
        if (selected.length > 0) {
            if (confirm(`Dispense ${selected.length} selected prescription(s)?`)) {
                // Handle bulk dispensing
                console.log('Dispensing prescriptions:', selected);
            }
        }
    });

    document.getElementById('bulkPrintBtn').addEventListener('click', function() {
        const selected = getSelectedPrescriptions();
        if (selected.length > 0) {
            // Handle bulk printing
            console.log('Printing labels for prescriptions:', selected);
        }
    });

    function getSelectedPrescriptions() {
        return Array.from(document.querySelectorAll('input[name="selected_prescriptions"]:checked'))
                   .map(checkbox => checkbox.value);
    }

    // Initialize count
    updateSelectedCount();

    // Auto-complete for medication search
    const medicationInput = document.querySelector('input[name="medication"]');
    if (medicationInput) {
        medicationInput.addEventListener('input', function() {
            // Implement medication auto-complete
            console.log('Searching medications for:', this.value);
        });
    }
});
</script>
{% endblock %}