@extends('layouts.app', ['activePage' => 'consulta', 'menuParent' => 'consulta', 'titlePage' => ''])

@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row gy-3 mb-3 align-items-stretch">
            <div class="col-lg-8 h-100">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm px-4 pt-4 pb-2 mb-2 h-100">
                    <div class="flex items-start justify-between mb-1">
                        <div>
                            <h6 class="text-2xl font-semibold text-slate-900">Consulta de Importaciones</h6>
                            <p class="text-sm text-slate-500">Visualiza todas las importaciones del expediente seguridad social, aplica filtros y revisa su estatus de validacion.</p>
                        </div>
                    </div>

                    <form id="consultaImportacionesFilters" class="space-y-4">
                        <section class="bg-gray-25 rounded-lg border border-gray-200 p-3" id="tourImportacionesFiltros">
                            <div class="flex items-center gap-3 mb-4">
                                <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">&#128269;</span>
                                <div>
                                    <h6 class="text-base font-semibold text-slate-900">PARAMETROS DE BUSQUEDA</h6>
                                    <p class="text-sm text-slate-700 mb-0">Filtra por archivo, ejercicio, periodo, usuario, estatus y fecha de importacion.</p>
                                </div>
                            </div>

                            <div class="grid sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Archivo de catalogo:</label>
                                    <select id="archivoFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md" data-width="100%">
                                        <option value="" selected>-Todos-</option>
                                        @foreach($archivosCatalogo as $archivo)
                                        <option value="{{ $archivo->id }}">{{ $archivo->titulo }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Ejercicio:</label>
                                    <select id="ejercicioFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md" data-width="100%">
                                        <option value="" selected>-Todos-</option>
                                        @foreach($ejerciciosCatalogo as $ejercicio)
                                        <option value="{{ $ejercicio->id }}">{{ $ejercicio->anio }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Periodo:</label>
                                    <select id="periodoFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md" data-width="100%">
                                        <option value="" selected>-Todos-</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Estatus de validacion:</label>
                                    <select id="estadoFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md" data-width="100%">
                                        <option value="" selected>-Todos-</option>
                                        <option value="coincide">Coincide</option>
                                        <option value="revisar">Revision manual</option>
                                        <option value="no_coincide">No coincide</option>
                                        <option value="sin_dato">Sin dato</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Usuario:</label>
                                    <select id="usuarioFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md" data-width="100%">
                                        <option value="" selected>-Todos-</option>
                                        @foreach($usuariosCatalogo as $usuario)
                                        @php
                                        $usuarioNombre = trim((string) ($usuario->name ?? ''));
                                        if ($usuarioNombre === '') {
                                            $usuarioNombre = trim((string) ($usuario->nombres ?? '') . ' ' . (string) ($usuario->apellidos ?? ''));
                                        }
                                        if ($usuarioNombre === '') {
                                            $usuarioNombre = 'Usuario #' . $usuario->id;
                                        }
                                        @endphp
                                        <option value="{{ $usuario->id }}">{{ $usuarioNombre }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Buscar texto:</label>
                                    <input type="text" id="searchTextFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Archivo, ruta, usuario, periodo...">
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Fecha desde:</label>
                                    <input type="date" id="fechaDesdeFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Fecha hasta:</label>
                                    <input type="date" id="fechaHastaFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                                </div>
                            </div>

                            <div class="flex flex-wrap items-center justify-between gap-3 pt-3">
                                <p class="text-xs text-slate-500 mb-0">Usa los filtros para consultar y auditar importaciones.</p>
                                <button type="button" id="btnActualizarImportaciones" class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200" onclick="getImportaciones()">
                                    <i class="material-icons text-base leading-none">refresh</i>
                                    Actualizar listado
                                </button>
                            </div>
                        </section>
                    </form>
                </div>
            </div>

            <div class="col-lg-4 h-100">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 mb-3" id="tourImportacionesResumen">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h6 class="text-sm font-semibold text-slate-900 mb-0">Resumen</h6>
                        </div>
                        <span id="importacionesHistoryBadge" class="cfdi-history-badge neutral">Esperando datos</span>
                    </div>

                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div class="bg-slate-50 rounded-lg p-3 border border-slate-100">
                            <p class="text-xs text-slate-600 font-medium mb-1">Total importaciones</p>
                            <p class="text-lg font-bold text-slate-900" id="importacionesTotal">-</p>
                        </div>
                        <div class="bg-emerald-50 rounded-lg p-3 border border-emerald-100">
                            <p class="text-xs text-emerald-700 font-medium mb-1">Coinciden</p>
                            <p class="text-lg font-bold text-emerald-700" id="importacionesCoinciden">0</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div class="bg-amber-50 rounded-lg p-3 border border-amber-100">
                            <p class="text-xs text-amber-700 font-medium mb-1">Revision manual</p>
                            <p class="text-lg font-bold text-amber-700" id="importacionesRevision">0</p>
                        </div>
                        <div class="bg-slate-50 rounded-lg p-3 border border-slate-100">
                            <p class="text-xs text-slate-600 font-medium mb-1">Sin dato</p>
                            <p class="text-lg font-bold text-slate-900" id="importacionesSinDato">0</p>
                        </div>
                    </div>

                    <div class="bg-blue-50 rounded-lg p-3 border border-blue-100">
                        <p class="text-xs text-blue-700 font-medium mb-1">Ultima importacion</p>
                        <p class="text-sm font-semibold text-blue-800" id="importacionesUltima">-</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4" id="tourImportacionesTabla">
                    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-2">
                        <div>
                            <h6 class="text-base font-semibold text-slate-900 mb-1">Listado de Importaciones</h6>
                            <p class="text-xs text-slate-500 mb-0">Consulta el historial completo de importaciones del expediente seguridad social.</p>
                        </div>
                        <div class="text-left">
                            <p id="importacionesStatus" class="text-xs font-semibold text-slate-600 bg-slate-50 border border-slate-200 rounded-md px-3 py-1">Esperando datos</p>
                            <p class="text-[11px] text-slate-500 mt-1 mb-0">Ultima actualizacion: <span id="importacionesLastRefresh">-</span></p>
                        </div>
                    </div>

                    <div class="table-scroll">
                        <table class="min-w-full" id="list-importaciones" width="100%">
                            <thead class="sticky-top bg-gray-50 px-6 py-3 text-[9px] font-semibold text-left text-gray-500 uppercase tracking-wider">
                                <tr>
                                    <th class="px-2 py-2">Fecha</th>
                                    <th class="px-2 py-2">Archivo catalogo</th>
                                    <th class="px-2 py-2">Ejercicio</th>
                                    <th class="px-2 py-2">Periodo</th>
                                    <th class="px-2 py-2">Archivo original</th>
                                    <th class="px-2 py-2">Archivo guardado</th>
                                    <th class="px-2 py-2">Usuario</th>
                                    <th class="px-2 py-2">Estado</th>
                                    <th class="px-2 py-2">Similitud</th>
                                    <th class="px-2 py-2">Ruta archivo</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="expss-periodos-consulta-json" type="application/json">
    @json($periodosCatalogo)
</script>

<style>
    .cfdi-history-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.85rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        border: 1px solid #cbd5f5;
        transition: all 0.2s ease-in-out;
    }

    .cfdi-history-badge.neutral {
        background-color: #f8fafc;
        color: #475569;
        border-color: #cbd5f5;
    }

    .cfdi-history-badge.success {
        background-color: #dcfce7;
        color: #166534;
        border-color: #86efac;
    }

    .cfdi-history-badge.warning {
        background-color: #fef9c3;
        color: #854d0e;
        border-color: #fde68a;
    }

    .cfdi-history-badge.danger {
        background-color: #fee2e2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 10px;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        font-size: 10px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        font-size: 10px !important;
    }

    table.dataTable tbody td {
        font-size: 10px !important;
    }

    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .table-scroll {
        max-height: 560px;
        overflow-y: auto;
    }
</style>
@endsection

@push('js')
<script>
    let importacionesDataTable = null;
    let $importacionesTable = null;
    let $importacionesStatus;
    let $importacionesLastRefresh;
    let $historyBadge;

    let $resumenTotal;
    let $resumenCoinciden;
    let $resumenRevision;
    let $resumenSinDato;
    let $resumenUltima;

    const historyBadgeStates = ['neutral', 'success', 'warning', 'danger'];

    let updateImportacionesStatus = function() {};
    let refreshImportacionesTimestamp = function() {};

    function parseJsonScript(scriptId) {
        const element = document.getElementById(scriptId);
        if (!element) {
            return [];
        }

        try {
            return JSON.parse(element.textContent || '[]');
        } catch (error) {
            return [];
        }
    }

    const periodosCatalog = parseJsonScript('expss-periodos-consulta-json');

    function setHistoryBadgeState(statusText, stateClass) {
        if (!$historyBadge || !$historyBadge.length) {
            return;
        }

        const status = stateClass || 'neutral';
        $historyBadge.removeClass(historyBadgeStates.join(' ')).addClass(status);
        $historyBadge.text(statusText || 'Cargado');
    }

    function renderPeriodoOptions() {
        const selectedEjercicio = $('#ejercicioFilter').val() || '';
        const currentPeriodo = $('#periodoFilter').val() || '';
        const $periodoFilter = $('#periodoFilter');

        const periodos = periodosCatalog.filter(function(periodo) {
            if (!selectedEjercicio) {
                return true;
            }

            return String(periodo.id_ejercicio) === String(selectedEjercicio);
        });

        const options = ['<option value="">-Todos-</option>'];
        periodos.forEach(function(periodo) {
            const label = String(periodo.periodo || '') + ' - ' + String(periodo.descripcion || '');
            options.push('<option value="' + String(periodo.id) + '">' + label + '</option>');
        });

        $periodoFilter.html(options.join(''));

        if (currentPeriodo && $periodoFilter.find('option[value="' + currentPeriodo + '"]').length) {
            $periodoFilter.val(currentPeriodo);
        } else {
            $periodoFilter.val('');
        }

        $periodoFilter.trigger('change.select2');
    }

    function updateSummary(resumen) {
        const summary = resumen || {
            total: 0,
            coincide: 0,
            revisar: 0,
            sin_dato: 0,
            ultima_importacion: '-'
        };

        if ($resumenTotal && $resumenTotal.length) {
            $resumenTotal.text(summary.total || 0);
        }

        if ($resumenCoinciden && $resumenCoinciden.length) {
            $resumenCoinciden.text(summary.coincide || 0);
        }

        if ($resumenRevision && $resumenRevision.length) {
            $resumenRevision.text(summary.revisar || 0);
        }

        if ($resumenSinDato && $resumenSinDato.length) {
            $resumenSinDato.text(summary.sin_dato || 0);
        }

        if ($resumenUltima && $resumenUltima.length) {
            $resumenUltima.text(summary.ultima_importacion || '-');
        }

        if ((summary.total || 0) === 0) {
            setHistoryBadgeState('Sin resultados', 'neutral');
            return;
        }

        if ((summary.revisar || 0) > 0) {
            setHistoryBadgeState('Con revisiones', 'warning');
            return;
        }

        setHistoryBadgeState('Consulta actualizada', 'success');
    }

    function buildImportacionesColumns() {
        return [{
                data: 'fecha_importacion'
            },
            {
                data: 'archivo_catalogo'
            },
            {
                data: 'ejercicio'
            },
            {
                data: 'periodo'
            },
            {
                data: 'nombre_original'
            },
            {
                data: 'nombre_guardado'
            },
            {
                data: 'usuario'
            },
            {
                data: 'estado_match',
                render: function(data, type, row) {
                    if (type !== 'display') {
                        return data;
                    }

                    const key = String(row.estado_match_key || 'sin_dato');
                    if (key === 'coincide') {
                        return '<span class="inline-flex items-center rounded bg-emerald-100 px-2 py-1 text-[9px] font-medium text-emerald-700">Coincide</span>';
                    }

                    if (key === 'revisar') {
                        return '<span class="inline-flex items-center rounded bg-amber-100 px-2 py-1 text-[9px] font-medium text-amber-700">Revision manual</span>';
                    }

                    if (key === 'no_coincide') {
                        return '<span class="inline-flex items-center rounded bg-rose-100 px-2 py-1 text-[9px] font-medium text-rose-700">No coincide</span>';
                    }

                    return '<span class="inline-flex items-center rounded bg-slate-100 px-2 py-1 text-[9px] font-medium text-slate-700">Sin dato</span>';
                }
            },
            {
                data: 'similitud',
                render: function(data) {
                    const value = Number(data || 0);
                    return value + '%';
                }
            },
            {
                data: 'ruta_archivo',
                render: function(data, type) {
                    if (type !== 'display') {
                        return data;
                    }

                    const text = String(data || '-');
                    return '<span title="' + text + '">' + text + '</span>';
                }
            }
        ];
    }

    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $importacionesStatus = $('#importacionesStatus');
        $importacionesLastRefresh = $('#importacionesLastRefresh');
        $importacionesTable = $('#list-importaciones');
        $historyBadge = $('#importacionesHistoryBadge');

        $resumenTotal = $('#importacionesTotal');
        $resumenCoinciden = $('#importacionesCoinciden');
        $resumenRevision = $('#importacionesRevision');
        $resumenSinDato = $('#importacionesSinDato');
        $resumenUltima = $('#importacionesUltima');

        updateImportacionesStatus = function(message) {
            if ($importacionesStatus && $importacionesStatus.length) {
                $importacionesStatus.text(message);
            }
        };

        refreshImportacionesTimestamp = function() {
            if ($importacionesLastRefresh && $importacionesLastRefresh.length) {
                $importacionesLastRefresh.text(new Date().toLocaleString('es-MX'));
            }
        };

        $('.select2').select2({
            width: '100%'
        });

        renderPeriodoOptions();
        $('#ejercicioFilter').on('change', function() {
            renderPeriodoOptions();
        });

        $('#searchTextFilter').on('keypress', function(event) {
            if (event.which === 13) {
                event.preventDefault();
                getImportaciones();
            }
        });

        updateSummary({
            total: 0,
            coincide: 0,
            revisar: 0,
            sin_dato: 0,
            ultima_importacion: '-'
        });

        getImportaciones();
    });

    function getImportaciones() {
        updateImportacionesStatus('Solicitando datos al servidor...');

        if ($.fn.DataTable.isDataTable('#list-importaciones')) {
            $('#list-importaciones').DataTable().destroy();
            $('#list-importaciones tbody').empty();
        }

        if ($importacionesTable && $importacionesTable.length) {
            $importacionesTable.attr('aria-busy', 'true');
        }

        importacionesDataTable = $('#list-importaciones').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            dom: 'Bfrtip',
            language: {
                url: "{{ asset('material/datatable_sp.json') }}"
            },
            ajax: {
                url: "{{ route('expediente-seguridad-social.consulta.get-importaciones') }}",
                type: 'POST',
                data: {
                    id_archivo: $('#archivoFilter').val(),
                    id_ejercicio: $('#ejercicioFilter').val(),
                    id_periodo: $('#periodoFilter').val(),
                    estado_match: $('#estadoFilter').val(),
                    id_usuario: $('#usuarioFilter').val(),
                    fecha_desde: $('#fechaDesdeFilter').val(),
                    fecha_hasta: $('#fechaHastaFilter').val(),
                    search_text: $('#searchTextFilter').val()
                },
                error: function() {
                    updateImportacionesStatus('No fue posible actualizar los datos');
                    updateSummary({
                        total: 0,
                        coincide: 0,
                        revisar: 0,
                        sin_dato: 0,
                        ultima_importacion: '-'
                    });

                    if ($importacionesTable && $importacionesTable.length) {
                        $importacionesTable.removeAttr('aria-busy');
                    }
                }
            },
            initComplete: function(settings, json) {
                updateImportacionesStatus('Consulta actualizada');
                refreshImportacionesTimestamp();

                if ($importacionesTable && $importacionesTable.length) {
                    $importacionesTable.removeAttr('aria-busy');
                }

                if (json && json.resumen) {
                    updateSummary(json.resumen);
                }
            },
            columns: buildImportacionesColumns(),
            buttons: [{
                    extend: 'excel',
                    title: 'Consulta de importaciones expediente seguridad social ' + (new Date()).toLocaleDateString('es-MX'),
                    text: 'Exportar a Excel',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200'
                },
                {
                    extend: 'pdf',
                    title: 'Consulta de importaciones expediente seguridad social ' + (new Date()).toLocaleDateString('es-MX'),
                    text: 'Exportar a PDF',
                    orientation: 'landscape',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 8;
                        doc.styles.tableHeader.fontSize = 8;
                    }
                }
            ],
            order: [
                [0, 'desc']
            ]
        });
    }
</script>
@endpush