{% extends 'gakusei/filter-layout.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block style %}
    <link rel="stylesheet" href="{% static 'gakusei/select2/select2.min.css' %}">
    <link rel="stylesheet" href="{% static 'gakusei/select2/select2-bootstrap-5-theme.min.css' %}">
{% endblock %}

{% block script %}
    <script src="{% static 'gakusei/js/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'gakusei/select2/select2.full.min.js' %}"></script>

    <script>
        $(document).ready(function() {
            let opciones = {
                placeholder: "----------",
                allowClear: true,
                containerCssClass : 'select form-select',
                theme: "bootstrap-5",
                width: 'auto',
            }
            
            $("#id_clase").select2(opciones);
            $("#id_estudiante").select2(opciones);
            $("#id_metodo").select2(opciones);
        });
    </script>
{% endblock %}


{% block regresar-url %}{% url 'pagos' %}{% endblock %}

{% block card-title %}Buscar Pagos{% endblock %}


{% block url-filter-form %}{% url 'pagos-filter' %}{% endblock %}
{% block url-filter-button %}{% url 'pagos-filter' %}{% endblock %}


    {% block thead %}
        <th>Fecha</th>
        <th>Clase</th>
        <th>Estudiante</th>
        <th>Método</th>
        <th>Monto</th>
        <th></th>
    {% endblock %}

    {% block tbody %}
        {% for pago in object_list %}
            <tr>
                <td>{{pago.fecha|date:"d/m/y f a"}}</td>
                <td>{{pago.clase}}</td>
                <td>{{pago.estudiante}}</td>
                <td>{{pago.metodo}}</td>
                <td>${{pago.monto_pagado}}</td>
                <td class="text-center align-middle"><a href="{% url 'pagos-detail' pago.pk %}"><i class="fs-4 fa-solid fa-eye"></i></a></td>
            </tr>
        {% empty %}
            <tr>
                <td colspan="6" class="text-center fw-bold fst-italic">Sin Registros</td>
            </tr>
        {% endfor %}
    {% endblock %}