{% extends "admin/base_site.html" %}
{% block page_title %}{{ title }}{% endblock %}
{% load static %}
{% block extrastyle %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
          rel="stylesheet" />
    <style>
    .page-header {
        background-color: #f8f9fa;
        padding: 1rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid #dee2e6;
    }

    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border-radius: 0.5rem;
        border: none;
    }

    .table {
        margin-bottom: 0;
    }

    .table thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        color: #495057;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.875rem;
    }

    .table td {
        vertical-align: middle;
    }

    .btn-action {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease-in-out;
    }

    .btn-approve {
        background-color: #28a745;
        border-color: #28a745;
        color: #fff;
    }

    .btn-approve:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

    .btn-reject {
        background-color: #dc3545;
        border-color: #dc3545;
        color: #fff;
    }

    .btn-reject:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }

    .empty-state {
        padding: 3rem;
        text-align: center;
        background-color: #f8f9fa;
        border-radius: 0.5rem;
    }

    .empty-state-icon {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }

    .search-box {
        max-width: 300px;
    }
    </style>
{% endblock %}
{% block content %}
    <div class="page-header">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <h1 class="h3 mb-0">Leave Applications</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <!-- Search and Filter -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="search-box">
                            <input type="text"
                                   class="form-control"
                                   id="leaveSearch"
                                   placeholder="Search leave applications..." />
                        </div>
                    </div>
                </div>
                {% if leaves %}
                    <div class="table-responsive table-bordered">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th width="1%">S.N</th>
                                    <th width="20%">Student Name</th>
                                    <th width="10%">Leave Date</th>
                                    <th width="25%">Leave Message</th>
                                    <th width="10%">Applied On</th>
                                    <th width="15%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for leave in leaves %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ leave.student_id.first_name }}</td>
                                        <td>{{ leave.leave_date }}</td>
                                        <td>{{ leave.leave_message }}</td>
                                        <td>{{ leave.created_at }}</td>
                                        <td>
                                            {% if leave.leave_status == 0 %}
                                                <a href="{% url 'student_leave_approve' leave_id=leave.id %}"
                                                   class="btn btn-action btn-approve me-2">
                                                    <i class="fas fa-check-circle me-1"></i>Approve
                                                </a>
                                                <a href="{% url 'student_leave_reject' leave_id=leave.id %}"
                                                   class="btn btn-action btn-reject">
                                                    <i class="fas fa-times-circle me-1"></i>Reject
                                                </a>
                                            {% elif leave.leave_status == 1 %}
                                                <button class="btn btn-action btn-approve" disabled>Approved</button>
                                            {% else %}
                                                <button class="btn btn-action btn-reject" disabled>Rejected</button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="empty-state">
                        <i class="fas fa-calendar-times empty-state-icon"></i>
                        <h3>No Leave Applications Found</h3>
                        <p class="text-muted">There are no leave applications to display at the moment.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% block extrajs %}
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        <script>
    document
        .getElementById("leaveSearch")
        .addEventListener("keyup", function () {
            const searchText = this.value.toLowerCase();
            const tableRows = document.querySelectorAll("tbody tr");

            tableRows.forEach((row) => {
                const studentName = row.cells[1].textContent.toLowerCase();
                const leaveMessage = row.cells[3].textContent.toLowerCase();

                if (
                    studentName.includes(searchText) ||
                    leaveMessage.includes(searchText)
                ) {
                    row.style.display = "";
                } else {
                    row.style.display = "none";
                }
            });
        });
        </script>
    {% endblock %}
{% endblock %}