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

{% block title %}Registro de Materiales{% 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="card shadow-sm border-0 mb-5" style="background: linear-gradient(90deg, #26256B 0%, #3E3B92 100%);">
        <div class="card-body p-8">
            <div class="d-flex align-items-center">
                <div class="symbol symbol-50px me-5">
                    <div class="symbol-label bg-white bg-opacity-10">
                        <i class="fa-solid fa-list-check fs-2x text-white"></i>
                    </div>
                </div>
                <div>
                    <h1 class="text-white fw-bold fs-2 mb-1">Registro de Materiales</h1>
                    <div class="text-white opacity-75 fw-semibold fs-6">Gestión y control de reducción de daños</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <div class="d-flex align-items-center position-relative my-1 me-5">
                    <i class="fa-solid fa-magnifying-glass fs-3 position-absolute ms-5 text-gray-500"></i>
                    <input type="text" data-kt-material-table-filter="search" class="form-control form-control-solid w-250px ps-13" placeholder="Filtrar por cualquier campo..." />
                </div>
            </div>
            <div class="card-toolbar">
                <div class="d-flex justify-content-end">
                    <select id="filtroTipoMaterial" class="form-select form-select-solid w-300px" 
                            multiple="multiple" data-control="select2" 
                            data-placeholder="Filtrar por tipo de material" data-allow-clear="true"
                            data-close-on-select="false">
                        <option value="Jeringuillas">Jeringuillas</option>
                        <option value="Preservativos">Preservativos</option>
                        <option value="Platas">Platas</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="card-body pt-0">
            <table id="tablaRegistroMateriales" class="table table-row-bordered table-row-gray-300 align-middle gs-4 gy-4">
                <thead>
                    <tr class="fw-bold text-muted text-uppercase gs-0">
                        <th class="min-w-150px">Tipo</th>
                        <th class="d-none">TipoRaw</th>
                        <th class="min-w-150px">Expediente</th>
                        <th class="min-w-150px">Fecha y Hora</th>
                        <th class="min-w-200px">Detalles / Cantidad</th>
                        <th class="min-w-150px">Registrado por</th>
                        <th class="text-end min-w-100px">Acciones</th>
                    </tr>
                </thead>
                <tbody class="fw-semibold text-gray-600"></tbody>
            </table>
        </div>
    <div class="modal fade" id="modalRegistroMaterial" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- AJAX -->
            </div>
        </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() {
            const table = $('#tablaRegistroMateriales').DataTable({
                responsive: true,
                ajax: '{{ path("app_registro_material_list_json") }}',
                columns: [
                    { data: 'tipo' },
                    { data: 'tipo_raw', visible: false },
                    { data: 'expediente' },
                    { data: 'fecha' },
                    { data: 'detalles' },
                    { data: 'usuario' },
                    { data: 'acciones', orderable: false, searchable: false }
                ],
                order: [[3, 'desc']], // Ahora es la columna 3 (Fecha)
                language: {
                    url: '/assets/js/datatables/es-ES.json'
                },
                pageLength: 25,
                dom: 'lrtip' // Ocultar buscador por defecto de DT para usar el personalizado
            });

            // Buscador personalizado
            $('[data-kt-material-table-filter="search"]').on('keyup', function() {
                table.search($(this).val()).draw();
            });

            // Filtro por tipo (Múltiple)
            $('#filtroTipoMaterial').on('change', function() {
                const selected = $(this).val(); // Esto devuelve un array
                if (!selected || selected.length === 0) {
                    table.column(1).search('', false, false).draw();
                } else {
                    // Crear regex: value1|value2|value3
                    const regex = selected.join('|');
                    table.column(1).search(regex, true, false, true).draw();
                }
            });

            // Inicializar select2
            $('#filtroTipoMaterial').select2({
                placeholder: "Filtrar por tipo de material",
                allowClear: true,
                minimumResultsForSearch: Infinity,
                closeOnSelect: false
            });
        });

        // --- NUEVO: EDITAR Y BORRAR ---

        // Abrir modal de edición
        $(document).on('click', '.btn-edit-material', function () {
            const url = $(this).data('url');
            const title = $(this).data('title');

            $.get(url, function (json) {
                const $modal = $('#modalRegistroMaterial');
                $modal.find('.modal-content').html(json.html);
                if (title) {
                    $modal.find('.modal-title').text(title);
                }
                bootstrap.Modal.getOrCreateInstance($modal[0]).show();
            });
        });

        // Borrar registro
        $(document).on('click', '.btn-delete-material', function () {
            const url = $(this).data('url');
            
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Esta acción no se puede deshacer.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                customClass: {
                    confirmButton: "btn fw-bold btn-danger",
                    cancelButton: "btn fw-bold btn-active-light-primary"
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.post(url, function (json) {
                        if (json.ok) {
                            $('#tablaRegistroMateriales').DataTable().ajax.reload();
                            Swal.fire(
                                '¡Eliminado!',
                                'El registro ha sido eliminado con éxito.',
                                'success'
                            );
                        }
                    });
                }
            });
        });

        // Guardar via AJAX
        $(document).on('submit', '#form-registro-material', function (e) {
            e.preventDefault();
            const form = $(this);
            $.post(form.attr('action'), form.serialize(), function (json) {
                if (json.ok) {
                    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalRegistroMaterial')).hide();
                    $('#tablaRegistroMateriales').DataTable().ajax.reload();
                } else {
                    $('#modalRegistroMaterial').find('.modal-content').html(json.html);
                }
            });
        });
    </script>
{% endblock %}