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

{% block title %}Waitlist Management{% endblock %}

{% block css %}
<link href="{% static 'assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <div class="container">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'appointments:appointment_list' %}">Appointments</a></li>
            <li class="breadcrumb-item active">Waitlist</li>
        </ul>
        
        <div class="row align-items-center mb-3">
            <div class="col">
                <h1 class="page-header">Waitlist Management</h1>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addToWaitlistModal">
                    <i class="fa fa-plus me-2"></i>Add to Waitlist
                </button>
            </div>
        </div>
        
        <!-- Summary Cards -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6">
                <div class="card border-0 text-truncate">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-7">
                                <div class="text-dark fs-13px">Total Waitlist</div>
                                <div class="text-dark fs-20px fw-600 lh-14">{{ total_waitlist }}</div>
                            </div>
                            <div class="col-5">
                                <div class="mt-n1 mb-n1">
                                    <div class="w-75 mx-auto">
                                        <i class="fa fa-clock fa-2x text-primary"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card border-0 text-truncate">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-7">
                                <div class="text-dark fs-13px">Scheduled Today</div>
                                <div class="text-dark fs-20px fw-600 lh-14">{{ scheduled_today }}</div>
                            </div>
                            <div class="col-5">
                                <div class="mt-n1 mb-n1">
                                    <div class="w-75 mx-auto">
                                        <i class="fa fa-calendar-check fa-2x text-success"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card border-0 text-truncate">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-7">
                                <div class="text-dark fs-13px">Priority Cases</div>
                                <div class="text-dark fs-20px fw-600 lh-14">{{ priority_cases }}</div>
                            </div>
                            <div class="col-5">
                                <div class="mt-n1 mb-n1">
                                    <div class="w-75 mx-auto">
                                        <i class="fa fa-exclamation-triangle fa-2x text-warning"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card border-0 text-truncate">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-7">
                                <div class="text-dark fs-13px">Avg Wait Time</div>
                                <div class="text-dark fs-20px fw-600 lh-14">{{ avg_wait_time }} days</div>
                            </div>
                            <div class="col-5">
                                <div class="mt-n1 mb-n1">
                                    <div class="w-75 mx-auto">
                                        <i class="fa fa-hourglass-half fa-2x text-info"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Provider</label>
                        <select name="provider" class="form-select">
                            <option value="">All Providers</option>
                            {% for provider in providers %}
                                <option value="{{ provider.id }}" {% if request.GET.provider == provider.id|stringformat:"s" %}selected{% endif %}>
                                    {{ provider.first_name }} {{ provider.last_name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Department</label>
                        <select name="department" class="form-select">
                            <option value="">All Departments</option>
                            {% for department in departments %}
                                <option value="{{ department.id }}" {% if request.GET.department == department.id|stringformat:"s" %}selected{% endif %}>
                                    {{ department.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <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-3">
                        <label class="form-label">&nbsp;</label>
                        <div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-search me-2"></i>Filter
                            </button>
                            <a href="{% url 'appointments:waitlist_management' %}" class="btn btn-secondary ms-2">Reset</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Waitlist Table -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Current Waitlist</h4>
            </div>
            <div class="card-body">
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                {% endif %}
                
                <div class="table-responsive">
                    <table id="waitlistTable" class="table table-striped table-bordered align-middle">
                        <thead>
                            <tr>
                                <th width="5%">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                    </div>
                                </th>
                                <th>Position</th>
                                <th>Patient</th>
                                <th>Provider</th>
                                <th>Type</th>
                                <th>Priority</th>
                                <th>Added</th>
                                <th>Wait Time</th>
                                <th width="12%">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for entry in waitlist_entries %}
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input waitlist-checkbox" type="checkbox" value="{{ entry.id }}">
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-primary fs-12px">{{ entry.position }}</span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <div class="fw-bold">{{ entry.patient.first_name }} {{ entry.patient.last_name }}</div>
                                            <div class="text-muted small">{{ entry.patient.patient_id }}</div>
                                            <div class="text-muted small">{{ entry.patient.phone_number|default:"No phone" }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <div class="fw-bold">{{ entry.preferred_provider.first_name }} {{ entry.preferred_provider.last_name }}</div>
                                        <div class="text-muted small">{{ entry.preferred_provider.department.name }}</div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ entry.appointment_type.name }}</span>
                                </td>
                                <td>
                                    {% if entry.priority == 'urgent' %}
                                        <span class="badge bg-danger">Urgent</span>
                                    {% elif entry.priority == 'high' %}
                                        <span class="badge bg-warning">High</span>
                                    {% elif entry.priority == 'normal' %}
                                        <span class="badge bg-success">Normal</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Low</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div>{{ entry.added_date|date:"M d, Y" }}</div>
                                    <div class="text-muted small">{{ entry.added_date|time:"g:i A" }}</div>
                                </td>
                                <td>
                                    <div class="fw-bold">{{ entry.wait_days }} days</div>
                                    {% if entry.wait_days > 30 %}
                                        <div class="text-danger small">Long wait</div>
                                    {% elif entry.wait_days > 14 %}
                                        <div class="text-warning small">Extended wait</div>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-outline-success" onclick="scheduleFromWaitlist('{{ entry.id }}')" 
                                                title="Schedule Appointment">
                                            <i class="fa fa-calendar-plus"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-primary" onclick="contactPatient('{{ entry.id }}')" 
                                                title="Contact Patient">
                                            <i class="fa fa-phone"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-warning" onclick="editWaitlistEntry('{{ entry.id }}')" 
                                                title="Edit Entry">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-danger" onclick="removeFromWaitlist('{{ entry.id }}')" 
                                                title="Remove from Waitlist">
                                            <i class="fa fa-times"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="9" class="text-center text-muted py-4">
                                    <i class="fa fa-list fa-3x mb-3"></i>
                                    <div>No patients on waitlist</div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add to Waitlist Modal -->
<div class="modal fade" id="addToWaitlistModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Patient to Waitlist</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'appointments:add_to_waitlist' %}">
                <div class="modal-body">
                    {% csrf_token %}
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Patient <span class="text-danger">*</span></label>
                            <select name="patient" class="form-select" required>
                                <option value="">Select Patient</option>
                                {% for patient in patients %}
                                    <option value="{{ patient.id }}">
                                        {{ patient.first_name }} {{ patient.last_name }} ({{ patient.patient_id }})
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Preferred Provider <span class="text-danger">*</span></label>
                            <select name="preferred_provider" class="form-select" required>
                                <option value="">Select Provider</option>
                                {% for provider in providers %}
                                    <option value="{{ provider.id }}">
                                        {{ provider.first_name }} {{ provider.last_name }} - {{ provider.department.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Appointment Type <span class="text-danger">*</span></label>
                            <select name="appointment_type" class="form-select" required>
                                <option value="">Select Type</option>
                                {% for type in appointment_types %}
                                    <option value="{{ type.id }}">{{ type.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Priority <span class="text-danger">*</span></label>
                            <select name="priority" class="form-select" required>
                                <option value="normal">Normal</option>
                                <option value="high">High</option>
                                <option value="urgent">Urgent</option>
                                <option value="low">Low</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Preferred Date Range</label>
                            <div class="row">
                                <div class="col-6">
                                    <input type="date" name="preferred_start_date" class="form-control">
                                </div>
                                <div class="col-6">
                                    <input type="date" name="preferred_end_date" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Preferred Time</label>
                            <select name="preferred_time" class="form-select">
                                <option value="">Any Time</option>
                                <option value="morning">Morning (8 AM - 12 PM)</option>
                                <option value="afternoon">Afternoon (12 PM - 5 PM)</option>
                                <option value="evening">Evening (5 PM - 8 PM)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Reason for Appointment</label>
                        <textarea name="reason" class="form-control" rows="3" 
                                  placeholder="Brief description of the reason for the appointment"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Special Requirements</label>
                        <textarea name="special_requirements" class="form-control" rows="2" 
                                  placeholder="Any special requirements or accommodations needed"></textarea>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="flexible_scheduling" id="flexible_scheduling">
                                <label class="form-check-label" for="flexible_scheduling">
                                    Patient has flexible scheduling
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="auto_notify" id="auto_notify" checked>
                                <label class="form-check-label" for="auto_notify">
                                    Automatically notify when slot becomes available
                                </label>
                            </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">
                        <i class="fa fa-plus me-2"></i>Add to Waitlist
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'assets/plugins/datatables.net/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize DataTable
    $('#waitlistTable').DataTable({
        responsive: true,
        order: [[1, 'asc']],
        columnDefs: [
            { orderable: false, targets: [0, 8] }
        ]
    });
    
    // Select all functionality
    $('#selectAll').change(function() {
        $('.waitlist-checkbox').prop('checked', this.checked);
    });
    
    // Set default dates
    var today = new Date();
    var nextMonth = new Date(today);
    nextMonth.setMonth(nextMonth.getMonth() + 1);
    
    $('input[name="preferred_start_date"]').val(today.toISOString().split('T')[0]);
    $('input[name="preferred_end_date"]').val(nextMonth.toISOString().split('T')[0]);
});

function scheduleFromWaitlist(entryId) {
    if (confirm('Schedule an appointment for this patient?')) {
        window.location.href = '{% url "appointments:schedule_from_waitlist" 0 %}'.replace('0', entryId);
    }
}

function contactPatient(entryId) {
    window.open('{% url "appointments:contact_waitlist_patient" 0 %}'.replace('0', entryId), '_blank');
}

function editWaitlistEntry(entryId) {
    window.location.href = '{% url "appointments:edit_waitlist_entry" 0 %}'.replace('0', entryId);
}

function removeFromWaitlist(entryId) {
    if (confirm('Are you sure you want to remove this patient from the waitlist?')) {
        $.post('{% url "appointments:remove_from_waitlist" %}', {
            'entry_id': entryId,
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        }, function(data) {
            if (data.success) {
                location.reload();
            } else {
                alert('Failed to remove from waitlist: ' + data.error);
            }
        });
    }
}
</script>
{% endblock %}