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

{% block title %}Encounter Management - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-notes-medical me-2"></i>Encounter Management
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{% url 'emr:dashboard' %}">EMR</a></li>
                    <li class="breadcrumb-item active">Encounters</li>
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                <i class="fas fa-download me-2"></i>Export
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" onclick="exportEncounters('csv')">
                    <i class="fas fa-file-csv me-2"></i>Export as CSV
                </a></li>
                <li><a class="dropdown-item" href="#" onclick="exportEncounters('excel')">
                    <i class="fas fa-file-excel me-2"></i>Export as Excel
                </a></li>
                <li><a class="dropdown-item" href="#" onclick="exportEncounters('pdf')">
                    <i class="fas fa-file-pdf me-2"></i>Export as PDF
                </a></li>
            </ul>
            <button type="button" class="btn btn-primary" onclick="createNewEncounter()">
                <i class="fas fa-plus me-2"></i>New Encounter
            </button>
        </div>
    </div>

    <!-- Filters Card -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fas fa-filter me-2"></i>Filters
            </h5>
        </div>
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-2">
                    <label for="encounter_type" class="form-label">Type</label>
                    <select name="encounter_type" id="encounter_type" class="form-select">
                        <option value="">All Types</option>
                        {% for value, label in encounter_types %}
                        <option value="{{ value }}" {% if request.GET.encounter_type == value %}selected{% endif %}>
                            {{ label }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">Status</label>
                    <select name="status" id="status" class="form-select">
                        <option value="">All Status</option>
                        {% for value, label in encounter_statuses %}
                        <option value="{{ value }}" {% if request.GET.status == value %}selected{% endif %}>
                            {{ label }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="date_from" class="form-label">From Date</label>
                    <input type="date" name="date_from" id="date_from" class="form-control" 
                           value="{{ request.GET.date_from }}">
                </div>
                <div class="col-md-2">
                    <label for="date_to" class="form-label">To Date</label>
                    <input type="date" name="date_to" id="date_to" class="form-control" 
                           value="{{ request.GET.date_to }}">
                </div>
                <div class="col-md-3">
                    <label for="search" class="form-label">Search</label>
                    <input type="text" name="search" id="search" class="form-control" 
                           placeholder="Search patients, providers, complaints..." 
                           value="{{ request.GET.search }}">
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fas fa-search me-1"></i>Filter
                    </button>
                    <a href="{% url 'emr:encounter_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Encounters List -->
    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-list me-2"></i>Encounters
                    {% if encounters %}
                        <span class="badge bg-secondary ms-2">{{ encounters|length }}</span>
                    {% endif %}
                </h5>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-secondary" onclick="refreshEncounters()">
                        <i class="fas fa-sync-alt me-1"></i>Refresh
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="toggleBulkActions()">
                        <i class="fas fa-check-square me-1"></i>Bulk Actions
                    </button>
                </div>
            </div>
        </div>
        
        <div class="card-body p-0">
            <!-- Bulk Actions Bar (Hidden by default) -->
            <div id="bulk-actions-bar" class="bg-light border-bottom p-3" style="display: none;">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span id="selected-count">0</span> encounter(s) selected
                    </div>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-primary" onclick="bulkUpdateStatus()">
                            <i class="fas fa-edit me-1"></i>Update Status
                        </button>
                        <button type="button" class="btn btn-outline-success" onclick="bulkExport()">
                            <i class="fas fa-download me-1"></i>Export Selected
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="clearSelection()">
                            <i class="fas fa-times me-1"></i>Clear
                        </button>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th width="40">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="select-all">
                                </div>
                            </th>
                            <th>Patient</th>
                            <th>Type</th>
                            <th>Provider</th>
                            <th>Date/Time</th>
                            <th>Status</th>
                            <th>Chief Complaint</th>
                            <th width="120">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for encounter in encounters %}
                        <tr>
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input encounter-checkbox" type="checkbox" 
                                           value="{{ encounter.id }}">
                                </div>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-primary bg-gradient rounded-circle d-flex align-items-center justify-content-center me-2">
                                        <span class="text-white small fw-bold">
                                            {{ encounter.patient.first_name.0 }}{{ encounter.patient.last_name.0 }}
                                        </span>
                                    </div>
                                    <div>
                                        <div class="fw-semibold">{{ encounter.patient.get_full_name }}</div>
                                        <small class="text-muted">MRN: {{ encounter.patient.mrn }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-primary">{{ encounter.get_encounter_type_display }}</span>
                            </td>
                            <td>{{ encounter.provider.get_full_name }}</td>
                            <td>
                                <div>{{ encounter.start_datetime|date:"M d, Y" }}</div>
                                <small class="text-muted">{{ encounter.start_datetime|time:"H:i" }}</small>
                            </td>
                            <td>
                                <span class="badge bg-{% if encounter.status == 'FINISHED' %}success{% elif encounter.status == 'CANCELLED' %}danger{% elif encounter.status == 'IN_PROGRESS' %}warning{% else %}secondary{% endif %}">
                                    {{ encounter.get_status_display }}
                                </span>
                            </td>
                            <td>
                                <div class="text-truncate" style="max-width: 200px;" title="{{ encounter.chief_complaint }}">
                                    {{ encounter.chief_complaint|default:"Not specified" }}
                                </div>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{% url 'emr:encounter_detail' encounter.pk %}" 
                                       class="btn btn-outline-primary btn-sm" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split" 
                                            data-bs-toggle="dropdown">
                                        <span class="visually-hidden">Toggle Dropdown</span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">
                                            <i class="fas fa-edit me-2"></i>Edit Encounter
                                        </a></li>
                                        <li><a class="dropdown-item" href="{% url 'emr:add_vital_signs' encounter.id %}">
                                            <i class="fas fa-heartbeat me-2"></i>Add Vital Signs
                                        </a></li>
                                        <li><a class="dropdown-item" href="#">
                                            <i class="fas fa-notes-medical me-2"></i>Add Clinical Note
                                        </a></li>
                                        <li><a class="dropdown-item" href="{% url 'emr:add_problem' encounter.patient.id %}">
                                            <i class="fas fa-exclamation-triangle me-2"></i>Add Problem
                                        </a></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item" href="#">
                                            <i class="fas fa-print me-2"></i>Print Summary
                                        </a></li>
                                        <li><a class="dropdown-item text-danger" href="#">
                                            <i class="fas fa-trash me-2"></i>Delete
                                        </a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="8" class="text-center py-5">
                                <i class="fas fa-notes-medical fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">No encounters found</h5>
                                <p class="text-muted">No encounters match your current filters.</p>
                                <button type="button" class="btn btn-primary" onclick="createNewEncounter()">
                                    <i class="fas fa-plus me-2"></i>Create First Encounter
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Pagination -->
        {% if is_paginated %}
        <div class="card-footer">
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                    Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} encounters
                </div>
                <nav aria-label="Encounters pagination">
                    <ul class="pagination pagination-sm mb-0">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if request.GET.encounter_type %}&encounter_type={{ request.GET.encounter_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">First</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.encounter_type %}&encounter_type={{ request.GET.encounter_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Previous</a>
                            </li>
                        {% endif %}
                        
                        <li class="page-item active">
                            <span class="page-link">{{ page_obj.number }}</span>
                        </li>
                        
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.encounter_type %}&encounter_type={{ request.GET.encounter_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Next</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.encounter_type %}&encounter_type={{ request.GET.encounter_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Last</a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<script>
// Encounter list functionality
document.addEventListener('DOMContentLoaded', function() {
    // Initialize bulk selection
    const selectAllCheckbox = document.getElementById('select-all');
    const encounterCheckboxes = document.querySelectorAll('.encounter-checkbox');
    
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            encounterCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateSelectedCount();
        });
    }
    
    encounterCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateSelectedCount();
            
            // Update select all checkbox state
            const checkedCount = document.querySelectorAll('.encounter-checkbox:checked').length;
            if (selectAllCheckbox) {
                selectAllCheckbox.checked = checkedCount === encounterCheckboxes.length;
                selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < encounterCheckboxes.length;
            }
        });
    });
});

function updateSelectedCount() {
    const checkedCount = document.querySelectorAll('.encounter-checkbox:checked').length;
    const selectedCountElement = document.getElementById('selected-count');
    
    if (selectedCountElement) {
        selectedCountElement.textContent = checkedCount;
    }
    
    // Show/hide bulk actions bar
    const bulkActionsBar = document.getElementById('bulk-actions-bar');
    if (bulkActionsBar) {
        bulkActionsBar.style.display = checkedCount > 0 ? 'block' : 'none';
    }
}

function toggleBulkActions() {
    const bulkActionsBar = document.getElementById('bulk-actions-bar');
    const isVisible = bulkActionsBar.style.display !== 'none';
    
    if (isVisible) {
        clearSelection();
    } else {
        bulkActionsBar.style.display = 'block';
    }
}

function clearSelection() {
    document.querySelectorAll('.encounter-checkbox').forEach(checkbox => {
        checkbox.checked = false;
    });
    
    const selectAllCheckbox = document.getElementById('select-all');
    if (selectAllCheckbox) {
        selectAllCheckbox.checked = false;
        selectAllCheckbox.indeterminate = false;
    }
    
    updateSelectedCount();
}

function refreshEncounters() {
    location.reload();
}

function createNewEncounter() {
    // Implementation would depend on your encounter creation workflow
    alert('New encounter creation functionality would be implemented here');
}

function exportEncounters(format) {
    const form = document.querySelector('form');
    const formData = new FormData(form);
    const params = new URLSearchParams(formData);
    params.append('format', format);
    
    window.open(`{% url 'emr:encounter_list' %}export/?${params}`, '_blank');
}

function bulkUpdateStatus() {
    const selectedIds = Array.from(document.querySelectorAll('.encounter-checkbox:checked'))
                            .map(checkbox => checkbox.value);
    
    if (selectedIds.length === 0) {
        alert('Please select encounters to update');
        return;
    }
    
    const newStatus = prompt('Enter new status (PLANNED, ARRIVED, TRIAGED, IN_PROGRESS, ON_HOLD, FINISHED, CANCELLED):');
    if (newStatus) {
        // Implementation for bulk status update
        console.log('Updating encounters:', selectedIds, 'to status:', newStatus);
        alert('Bulk status update functionality would be implemented here');
    }
}

function bulkExport() {
    const selectedIds = Array.from(document.querySelectorAll('.encounter-checkbox:checked'))
                            .map(checkbox => checkbox.value);
    
    if (selectedIds.length === 0) {
        alert('Please select encounters to export');
        return;
    }
    
    const params = new URLSearchParams();
    selectedIds.forEach(id => params.append('ids', id));
    
    window.open(`{% url 'emr:encounter_list' %}export/?${params}`, '_blank');
}

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') {
        return;
    }
    
    switch (e.key) {
        case 'n':
            e.preventDefault();
            createNewEncounter();
            break;
        case 'r':
            e.preventDefault();
            refreshEncounters();
            break;
        case '/':
            e.preventDefault();
            document.getElementById('search').focus();
            break;
        case 'a':
            if (e.ctrlKey || e.metaKey) {
                e.preventDefault();
                const selectAllCheckbox = document.getElementById('select-all');
                if (selectAllCheckbox) {
                    selectAllCheckbox.click();
                }
            }
            break;
    }
});
</script>

<style>
.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.bg-gradient {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-check-input:indeterminate {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

#bulk-actions-bar {
    border-bottom: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }
}
</style>
{% endblock %}