{% extends 'base.html.twig' %}

{% block title %}Registro de Entradas{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
{% endblock %}

{% block body %}
    <div class="d-flex flex-stack mb-5">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                Registro de Entradas (Físico/Presencial)
            </h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ path('app_dashboard') }}" class="text-muted text-hover-primary">Inicio</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-dark">Registro de Entradas</li>
            </ul>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <table id="tablaRegistroEntradas" class="table table-row-bordered table-row-gray-300 align-middle gs-0 gy-3">
                <thead>
                    <tr class="fw-bold text-muted text-uppercase gs-0">
                        <th>Expediente</th>
                        <th>Fecha y Hora</th>
                        <th>Tipo de Atención</th>
                        <th>Registrado por</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#tablaRegistroEntradas').DataTable({
                responsive: true,
                ajax: '{{ path("app_registro_entrada_list_json") }}',
                columns: [
                    { data: 'expediente' },
                    { data: 'fecha' },
                    { data: 'tipo' },
                    { data: 'usuario' }
                ],
                order: [[1, 'desc']],
                language: {
                    url: '/assets/js/datatables/es-ES.json'
                },
                pageLength: 25
            });
        });
    </script>
{% endblock %}