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

{% block title %}Expedientes | Bizkai Sida{% 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="section-box">

    <!-- Header sección -->
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div class="d-flex align-items-center">
            <div class="page-title-icon">
                <i class="fa-solid fa-file-lines fs-3"></i>
            </div>
            <h2 class="fw-bold text-dark mb-0">Expedientes</h2>
        </div>

        <a href="{{ path('app_expediente_new') }}" class="btn btn-orange fw-bold">
            <i class="fa-solid fa-plus fs-4 me-2"></i> Nuevo expediente
        </a>
    </div>

    <!-- FILTROS -->
    <div class="filters-wrapper mb-5">
        <h5 class="fw-bold text-dark mb-3">Filtros</h5>

        <div class="row g-3 mb-4 filters-row">
            <div class="col-md-2">
                <label class="form-label">Fecha entrada desde</label>
                <input type="date" id="f_fecha_desde" class="form-control">
            </div>

            <div class="col-md-2">
                <label class="form-label">Fecha entrada hasta</label>
                <input type="date" id="f_fecha_hasta" class="form-control">
            </div>

            <div class="col-md-2">
                <label class="form-label">Estado expediente</label>
                <select id="f_estado_expediente" class="form-select">
                    <option value="">Todos</option>
                    <option value="abierto">Abierto</option>
                    <option value="cerrado">Cerrado</option>
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label">Estado serológico</label>
                <select id="f_estado" class="form-select">
                    <option value="">Todos</option>
                    {% for estado in estadosSerologicos %}
                        <option value="{{ estado.id }}">{{ estado.nombre }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label">Situación vivienda</label>
                <select id="f_vivienda" class="form-select">
                    <option value="">Todas</option>
                    {% for viv in situacionesVivienda %}
                        <option value="{{ viv.id }}">{{ viv.nombre }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label">Procedencia</label>
                <select id="f_procedencia" class="form-select">
                    <option value="">Todas</option>
                    {% for proc in procedencias %}
                        <option value="{{ proc.id }}">{{ proc.nombre }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <button id="btn-filtrar" class="btn btn-primary me-2">Aplicar filtros</button>
        <button id="btn-limpiar" class="btn btn-light">Limpiar</button>
    </div>

    <!-- TABLA -->
    <div class="table-responsive">
        <table id="expedientes-table"
               class="table table-bizka align-middle table-row-dashed fs-6 gy-4"
               style="width: 100%;">
            <thead>
            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                <th>Código</th>
                <th>Persona</th>
                <th>Fecha entrada</th>
                <th>Fecha cierre</th>
                <th>Estado serológico</th>
                <th>Vivienda</th>
                <th>Procedencia</th>
                <th>Estado expediente</th>
                <th>Acciones</th>
            </tr>
            </thead>
        </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 () {

            let table = $('#expedientes-table').DataTable({
                responsive: true,
                autoWidth: false,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ path("app_expediente_server") }}',
                    data: function (d) {
                        d.fechaDesde        = $('#f_fecha_desde').val();
                        d.fechaHasta        = $('#f_fecha_hasta').val();
                        d.estadoSerologico  = $('#f_estado').val();
                        d.situacionVivienda = $('#f_vivienda').val();
                        d.procedencia       = $('#f_procedencia').val();
                        d.estadoExpediente  = $('#f_estado_expediente').val();
                    }
                },
                order: [[0, 'desc']],
                language: {
                    url: '/assets/js/datatables/es-ES.json'
                }
            });

            $('#btn-filtrar').on('click', () => table.ajax.reload());
            $('#btn-limpiar').on('click', () => {
                $('#f_fecha_desde').val('');
                $('#f_fecha_hasta').val('');
                $('#f_estado').val('');
                $('#f_vivienda').val('');
                $('#f_procedencia').val('');
                $('#f_estado_expediente').val('');
                table.ajax.reload();
            });
        });
    </script>
{% endblock %}