{% extends 'base.html' %}

{% block title %}Appointments - Hospital Management System{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        <i class="fas fa-calendar-alt"></i> Appointments
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-download"></i> Export
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-print"></i> Print
            </button>
        </div>
        <button type="button" class="btn btn-sm btn-primary">
            <i class="fas fa-calendar-plus"></i> Schedule New
        </button>
    </div>
</div>

<!-- Search and Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-3">
                <label for="search" class="form-label">Search</label>
                <input type="text" 
                       class="form-control" 
                       id="search" 
                       name="search" 
                       value="{{ request.GET.search }}"
                       placeholder="Patient name, MRN, provider..."
                       hx-get="{% url 'appointments:appointment_search' %}"
                       hx-target="#appointment-list"
                       hx-trigger="keyup changed delay:500ms">
            </div>
            
            <div class="col-md-2">
                <label for="status" class="form-label">Status</label>
                <select class="form-select" id="status" name="status">
                    <option value="">All Statuses</option>
                    <option value="PENDING" {% if request.GET.status == 'PENDING' %}selected{% endif %}>Pending</option>
                    <option value="SCHEDULED" {% if request.GET.status == 'SCHEDULED' %}selected{% endif %}>Scheduled</option>
                    <option value="CONFIRMED" {% if request.GET.status == 'CONFIRMED' %}selected{% endif %}>Confirmed</option>
                    <option value="CHECKED_IN" {% if request.GET.status == 'CHECKED_IN' %}selected{% endif %}>Checked In</option>
                    <option value="IN_PROGRESS" {% if request.GET.status == 'IN_PROGRESS' %}selected{% endif %}>In Progress</option>
                    <option value="COMPLETED" {% if request.GET.status == 'COMPLETED' %}selected{% endif %}>Completed</option>
                    <option value="CANCELLED" {% if request.GET.status == 'CANCELLED' %}selected{% endif %}>Cancelled</option>
                    <option value="NO_SHOW" {% if request.GET.status == 'NO_SHOW' %}selected{% endif %}>No Show</option>
                </select>
            </div>
            
            <div class="col-md-2">
                <label for="appointment_type" class="form-label">Type</label>
                <select class="form-select" id="appointment_type" name="appointment_type">
                    <option value="">All Types</option>
                    <option value="CONSULTATION" {% if request.GET.appointment_type == 'CONSULTATION' %}selected{% endif %}>Consultation</option>
                    <option value="FOLLOW_UP" {% if request.GET.appointment_type == 'FOLLOW_UP' %}selected{% endif %}>Follow-up</option>
                    <option value="PROCEDURE" {% if request.GET.appointment_type == 'PROCEDURE' %}selected{% endif %}>Procedure</option>
                    <option value="SURGERY" {% if request.GET.appointment_type == 'SURGERY' %}selected{% endif %}>Surgery</option>
                    <option value="DIAGNOSTIC" {% if request.GET.appointment_type == 'DIAGNOSTIC' %}selected{% endif %}>Diagnostic</option>
                    <option value="TELEMEDICINE" {% if request.GET.appointment_type == 'TELEMEDICINE' %}selected{% endif %}>Telemedicine</option>
                </select>
            </div>
            
            <div class="col-md-2">
                <label for="specialty" class="form-label">Specialty</label>
                <select class="form-select" id="specialty" name="specialty">
                    <option value="">All Specialties</option>
                    {% for specialty in specialties %}
                    <option value="{{ specialty }}" {% if request.GET.specialty == specialty %}selected{% endif %}>
                        {{ specialty|title }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="col-md-2">
                <label for="date_filter" class="form-label">Date</label>
                <select class="form-select" id="date_filter" name="date_filter">
                    <option value="">All Dates</option>
                    <option value="today" {% if request.GET.date_filter == 'today' %}selected{% endif %}>Today</option>
                    <option value="tomorrow" {% if request.GET.date_filter == 'tomorrow' %}selected{% endif %}>Tomorrow</option>
                    <option value="this_week" {% if request.GET.date_filter == 'this_week' %}selected{% endif %}>This Week</option>
                </select>
            </div>
            
            <div class="col-md-1">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Appointment List -->
<div id="appointment-list">
    {% include 'appointments/partials/appointment_list.html' %}
</div>

<!-- Pagination -->
{% if is_paginated %}
{% include 'partial/pagination.html' %}
{% endif %}
{% endblock %}