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

{% block title %}Search Appointments{% endblock %}

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

{% block content %}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-xl-12">
            <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">Search</li>
            </ul>

            <h1 class="page-header">Search Appointments</h1>

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Search Filters</h4>
                </div>
                <div class="card-body">
                    <form method="get" class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Patient Name</label>
                            <input type="text" name="patient_name" class="form-control" value="{{ request.GET.patient_name }}" placeholder="Enter patient name">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Patient ID</label>
                            <input type="text" name="patient_id" class="form-control" value="{{ request.GET.patient_id }}" placeholder="Enter patient ID">
                        </div>
                        <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 dept in departments %}
                                    <option value="{{ dept.id }}" {% if request.GET.department == dept.id|stringformat:"s" %}selected{% endif %}>
                                        {{ dept.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <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-3">
                            <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-3">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="">All Statuses</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-3">
                            <label class="form-label">Appointment Type</label>
                            <select name="appointment_type" class="form-select">
                                <option value="">All Types</option>
                                {% for type in appointment_types %}
                                    <option value="{{ type.id }}" {% if request.GET.appointment_type == type.id|stringformat:"s" %}selected{% endif %}>
                                        {{ type.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-search me-2"></i>Search
                            </button>
                            <a href="{% url 'appointments:appointment_search' %}" class="btn btn-secondary ms-2">
                                <i class="fa fa-refresh me-2"></i>Clear
                            </a>
                            <a href="{% url 'appointments:appointment_create' %}" class="btn btn-success ms-2">
                                <i class="fa fa-plus me-2"></i>New Appointment
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            {% if appointments %}
            <div class="card mt-4">
                <div class="card-header">
                    <h4 class="card-title">Search Results ({{ appointments.count }} found)</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="appointmentsTable">
                            <thead>
                                <tr>
                                    <th>Date/Time</th>
                                    <th>Patient</th>
                                    <th>Provider</th>
                                    <th>Department</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for appointment in appointments %}
                                <tr>
                                    <td>
                                        <div class="fw-bold">{{ appointment.appointment_date|date:"M d, Y" }}</div>
                                        <small class="text-muted">{{ appointment.appointment_time|time:"g:i A" }}</small>
                                    </td>
                                    <td>
                                        <div class="fw-bold">{{ appointment.patient.first_name }} {{ appointment.patient.last_name }}</div>
                                        <small class="text-muted">ID: {{ appointment.patient.patient_id }}</small>
                                    </td>
                                    <td>{{ appointment.provider.first_name }} {{ appointment.provider.last_name }}</td>
                                    <td>{{ appointment.department.name }}</td>
                                    <td>{{ appointment.appointment_type.name }}</td>
                                    <td>
                                        {% if appointment.status == 'scheduled' %}
                                            <span class="badge bg-info">Scheduled</span>
                                        {% elif appointment.status == 'confirmed' %}
                                            <span class="badge bg-success">Confirmed</span>
                                        {% elif appointment.status == 'checked_in' %}
                                            <span class="badge bg-primary">Checked In</span>
                                        {% elif appointment.status == 'in_progress' %}
                                            <span class="badge bg-warning">In Progress</span>
                                        {% elif appointment.status == 'completed' %}
                                            <span class="badge bg-success">Completed</span>
                                        {% elif appointment.status == 'cancelled' %}
                                            <span class="badge bg-danger">Cancelled</span>
                                        {% elif appointment.status == 'no_show' %}
                                            <span class="badge bg-secondary">No Show</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{% url 'appointments:appointment_detail' appointment.id %}" class="btn btn-outline-primary btn-sm">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            <a href="{% url 'appointments:appointment_update' appointment.id %}" class="btn btn-outline-warning btn-sm">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            {% if appointment.status == 'scheduled' or appointment.status == 'confirmed' %}
                                            <a href="{% url 'appointments:check_in_patient' appointment.id %}" class="btn btn-outline-success btn-sm">
                                                <i class="fa fa-check"></i>
                                            </a>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% elif request.GET %}
            <div class="card mt-4">
                <div class="card-body text-center">
                    <i class="fa fa-search fa-3x text-muted mb-3"></i>
                    <h5>No appointments found</h5>
                    <p class="text-muted">Try adjusting your search criteria</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

{% block js %}
<script src="{% static 'plugins/datatables.net/js/dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
<script>
$(document).ready(function() {
    $('#appointmentsTable').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[0, 'desc']]
    });
});
</script>
{% endblock %}