@extends('layouts.index', ['subHeader' => 'Cargas Críticas - Incineraciones'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('registros.index') }}" class="text-decoration-none text-dark"> / Cargas Críticas</a>

    {{-- CSS para Select2 (necesario para los filtros) --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    {{-- Estilos para los filtros de columna --}}
    <style>
        .filter-header {
            position: relative;
            padding-right: 30px !important;
            min-width: 62px !important;
        }

        .filter-trigger {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.3s;
            font-size: 14px;
        }

        .filter-trigger:hover {
            opacity: 1;
            color: #0d6efd;
        }

        .filter-container {
            position: absolute;
            top: 100%;
            left: 0;
            width: 220px;
            background: white;
            z-index: 100;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
            display: none;
        }

        .filter-active {
            color: #0d6efd !important;
            opacity: 1 !important;
        }

        .select2-container {
            width: 100% !important;
            margin-bottom: 10px;
        }

        .filter-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .filter-actions .btn-sm {
            font-size: 12px;
        }
    </style>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            const table = $('#tabla_registros').DataTable({
                serverSide: true,
                processing: true,
                ajax: '{{ route('registros.api.list') }}',
                order: [
                    [0, 'desc']
                ],
                pageLength: 5,
                lengthMenu: [5, 10, 25, 50, 100],
                columns: [
                    // 'data' = La clave del JSON que se muestra en la celda.
                    // 'name' = El identificador enviado al backend para filtrar/ordenar.
                    {
                        data: 'consecutivo',
                        name: 'consecutivo'
                    },
                    {
                        data: 'compania_solicitante_id',
                        name: 'compania_solicitante_id'
                    },
                    {
                        data: 'ceco',
                        name: 'ceco'
                    },
                    {
                        data: 'proveedor',
                        name: 'proveedor_id'
                    },
                    {
                        data: 'area',
                        name: 'area_solicitante_id'
                    },
                    {
                        data: 'ciudad_origen',
                        name: 'ciudad_origen_id'
                    },
                    {
                        data: 'clase_servicio',
                        name: 'clase_servicio_id'
                    },
                    {
                        data: 'analista_gestor',
                        name: 'analista_gestor_id'
                    },
                    {
                        data: 'estado_servicio',
                        name: 'estado_servicio'
                    },
                    {
                        data: 'tipo_recurso',
                        name: 'tipo_recurso_id'
                    },
                    {
                        data: 'acciones',
                        name: 'acciones',
                        orderable: false,
                        searchable: false
                    }
                ],
                dom: `<'row d-flex align-items-center justify-content-between' <'col-lg-8 d-flex align-items-center'f> <'col-lg-4 d-flex align-items-center justify-content-end'B> > <'table-responsive'tr> <'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>`,
                buttons: ['print', 'csv', 'excel', 'pdf'],
                initComplete: function() {
                    // Esta lógica para crear los filtros ya es correcta.
                    const api = this.api();
                    api.columns().every(function() {
                        const column = this;
                        const header = $(column.header());
                        const columnName = api.settings().init().columns[column.index()].name;
                        if (!columnName || columnName === "acciones") return;

                        var $filterContainer = $(
                            `<div class="filter-container">
                                <select class="filter-select" multiple="multiple" style="width:100%"></select>
                                <div class="filter-actions">
                                    <button class="btn btn-sm btn-light clear-filter" style="width: 31px !important; padding: 2px 0 6px 4px !important; height: 32px;"><i class="bi bi-trash2"></i></button>
                                    <button class="btn btn-sm btn-primary apply-filter" style="width: 31px !important; padding: 2px 0 6px 4px !important; height: 32px;"><i class="bi bi-check-circle"></i></button>
                                </div>
                            </div>`
                        );
                        header.addClass('filter-header').append(
                            '<i class="bi bi-funnel filter-trigger"></i>').append(
                            $filterContainer);
                        const $select = $filterContainer.find('select');

                        header.find('.filter-trigger').on('click', function(e) {
                            e.stopPropagation();
                            $('.filter-container').not($filterContainer).hide();
                            $('.filter-trigger').not($(this)).removeClass(
                                'filter-active');
                            $(this).toggleClass('filter-active');
                            if ($select.find('option').length === 0 || $select.find(
                                    'option').first().text() === 'Cargando...') {
                                $select.html('<option>Cargando...</option>');
                                const url =
                                    '{{ route('registros.api.opcionesFiltro', ['columna' => 'PLACEHOLDER']) }}'
                                    .replace('PLACEHOLDER', columnName);
                                $.ajax({
                                    url: url,
                                    type: 'GET',
                                    success: function(opciones) {
                                        $select.empty();
                                        opciones.forEach(opcion => $select
                                            .append($(
                                                    '<option></option>')
                                                .attr('value', opcion)
                                                .text(opcion)));
                                        const searchValue = column.search();
                                        if (searchValue) $select.val(
                                                searchValue.split('|'))
                                            .trigger('change');
                                    },
                                    error: (jqXHR) => {
                                        console.error(
                                            "Error al cargar opciones para:",
                                            columnName, jqXHR
                                            .responseText);
                                        $select.html(
                                            '<option>Error al cargar</option>'
                                            );
                                    }
                                });
                            }
                            $filterContainer.toggle();
                        });

                        $select.select2({
                            placeholder: "Seleccione",
                            allowClear: true,
                            dropdownParent: $filterContainer,
                            closeOnSelect: false
                        });

                        $filterContainer.find('.apply-filter').on('click', function(e) {
                            e.stopPropagation();
                            const values = $select.val();
                            const searchString = values && values.length > 0 ? values
                                .join('|') : '';
                            if (column.search() !== searchString) column.search(
                                searchString, false, true).draw();
                            $filterContainer.hide();
                            header.find('.filter-trigger').toggleClass('filter-active',
                                !!searchString);
                        });

                        $filterContainer.find('.clear-filter').on('click', function(e) {
                            e.stopPropagation();
                            $select.val(null).trigger('change');
                            column.search('').draw();
                            $filterContainer.hide();
                            header.find('.filter-trigger').removeClass('filter-active');
                        });
                    });
                }
            });

            $(document).on('click', function(e) {
                if (!$(e.target).closest('.filter-container, .select2-container, .select2-dropdown')
                    .length && !$(e.target).is('.filter-trigger')) {
                    $('.filter-container').hide();
                    $('.filter-trigger').removeClass('filter-active');
                }
            });
        });
    </script>
@endsection

@section('content')
    <div class="row">
        <div class="d-flex flex-wrap justify-content-between voltearv">
            <div class="row g-3 flex-grow-1">
                <div class="col-md-6">
                    <div class="shadow-s">
                        <div class="d-flex flex-column p-3">
                            <span class="fs-3 fw-bolder purple">Último consecutivo</span>
                            <span class="fs-5 fw-bolder gray">{{ $ultimoConsecutivo ?? 0 }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="shadow-s">
                        <div class="d-flex flex-column p-3">
                            <span class="fs-3 fw-bolder purple">Consecutivo disponible</span>
                            <span class="fs-5 fw-bolder gray">{{ $ultimoConsecutivo + 1 }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-s">
                <div class="btn-group ms-3" role="group">
                    <a href="{{ route('registros.dashboard.index') }}" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-clipboard-data"></i> Reportes
                    </a>
                </div>
                <div class="btn-group" role="group" aria-label="">
                    <a href="{{ route('registros.create') }}" type="button" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-file-earmark-plus"></i> Nuevo registro
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br><br>

    <div class="contanier">
        <div class="shadow-s p-4">
            <div class="table-responsive">
                <table id="tabla_registros" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" class="grayt">Consecutivo</th>
                            <th scope="col" class="grayt">Compañía Solicitante</th>
                            <th scope="col" class="grayt">Ceco</th>
                            <th scope="col" class="grayt">Proveedor</th>
                            <th scope="col" class="grayt">Área solicitante </th>
                            <th scope="col" class="grayt">Ciudad Origen</th>
                            <th scope="col" class="grayt">Clase de Servicio</th>
                            <th scope="col" class="grayt">Analista Gestor</th>
                            <th scope="col" class="grayt">Estado del Servicio</th>
                            <th scope="col" class="grayt">Tipo Recurso</th>
                            <th scope="col" class="grayt">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- El tbody se deja vacío, DataTables lo llena --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection