@extends('layouts.app', ['activePage' => 'historial-descargas', 'menuParent' => '', 'titlePage' => ''])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-2">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Histórico de descargas del SAT</h6>
                <p class="text-sm text-gray-600">Consulta y filtra las descargas históricas de XML del SAT</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-4">
                            <div class="col-span-2" id="tour-historico-tipo-descarga">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de descarga:</label>
                                <select id="tipoDescargaFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                    <option value="" disabled selected>-Todos-</option>
                                    <option value="Emitidas">Emitidas</option>
                                    <option value="Recibidas">Recibidas</option>
                                </select>
                            </div>
                            <div class="col-span-2" id="tour-historico-estatus">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Estatus:</label>
                                <select id="estatusFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                    <option value="" disabled selected>-Todos-</option>
                                    <option value="Completado">Completado</option>
                                    <option value="Fallido">Fallida</option>
                                </select>
                            </div>
                            <div class="col-span-2" id="tour-historico-usuario">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Usuario:</label>
                                <select id="usuarioFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                    <option value="" disabled selected>-Todos-</option>
                                    @foreach($usuarios as $usuario)
                                    <option value="{{ $usuario->id }}">{{ $usuario->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-2" id="tour-historico-fecha-desde">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Fecha desde:</label>
                                <input type="date" id="fechaDesdeFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div class="col-span-2" id="tour-historico-fecha-hasta">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Fecha hasta:</label>
                                <input type="date" id="fechaHastaFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div class="col-span-2 mt-4" id="tour-historico-buscar">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 transition-colors duration-200" onclick="getHistoricoDescargaXml()">
                                    <i class="material-icons align-middle text-sm">search</i> Buscar
                                </button>
                            </div>
                        </div>
                        <div class="table-scroll" id="tour-historico-tabla">
                            <table class="min-w-full" id="list-historico-descarga-xml">
                                <thead class="sticky-top bg-gray-50 px-6 py-3 text-[10px] font-semibold text-left font-medium text-gray-500 uppercase tracking-wider">
                                    <tr>
                                        <th class="px-2 py-2">Estatus</th>
                                        <th class="px-2 py-2">Tipo descarga</th>
                                        <th class="px-2 py-2">Fecha de descarga</th>
                                        <th class="px-2 py-2">Usuario</th>
                                        <th class="px-2 py-2">CFDI's descargados</th>
                                        <th class="px-2 py-2">CFDI's insertados</th>
                                        <th class="px-2 py-2">CFDI's con errores</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .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 tfoot th,
    table.dataTable tfoot td {
        font-size: 11px !important;
    }

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

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

    .dataTables_wrapper .dataTables_filter input {
        padding: 0.25rem 0.5rem !important;
        border-radius: 0.375rem !important;
        border: 1px solid #e2e8f0 !important;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: #0A415F !important;
        box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
    }

    .table-scroll {
        max-height: 650px;
        overflow-y: auto;
    }

    .estatus-row span {
        margin-right: 6px;
        width: 22px;
        height: 22px;
        display: inline-block;
    }

    .estatus-completado {
        background-color: #10B981;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 500;
    }

    .estatus-en_proceso {
        background-color: #F59E0B;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 500;
    }

    .estatus-error {
        background-color: #EF4444;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 500;
    }

    .estatus-parcial {
        background-color: #8B5CF6;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 500;
    }
</style>
@endsection

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

        // Iniciar tour si corresponde
        if (window.TourManager) {
            TourManager.start('historicoDescargaXml');
        }
        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        // Establecer fechas por defecto (últimos 30 días)
        var fechaHasta = new Date();
        var fechaDesde = new Date();
        fechaDesde.setDate(fechaDesde.getDate() - 30);

        $('#fechaDesdeFilter').val(fechaDesde.toISOString().split('T')[0]);
        $('#fechaHastaFilter').val(fechaHasta.toISOString().split('T')[0]);

        // Llamar a la función getHistoricoDescargaXml
        getHistoricoDescargaXml();


    });

    function getHistoricoDescargaXml() {
        $('#list-historico-descarga-xml').dataTable().fnDestroy();

        var table = $('#list-historico-descarga-xml').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            dom: 'Bfrtip',
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('historial-descargas.get-historico')}}",
                type: "POST",
                data: {
                    tipoDescarga: $('#tipoDescargaFilter').val(),
                    estatus: $('#estatusFilter').val(),
                    usuario: $('#usuarioFilter').val(),
                    fechaDesde: $('#fechaDesdeFilter').val(),
                    fechaHasta: $('#fechaHastaFilter').val(),
                },
            },
            createdRow: function(row, data, rowIndex) {
                $.each($('td', row), function(colIndex) {
                    $(this).attr('title', 'Ver detalles del histórico');
                });
            },
            columns: [{
                    data: "estatus",
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var estatusClass = '';
                        var estatusText = '';

                        switch (data) {
                            case 'Completado':
                                estatusClass = 'estatus-completado';
                                estatusText = 'Completado';
                                break;
                            case 'Fallido':
                                estatusClass = 'estatus-parcial';
                                estatusText = 'Completado parcial';
                                break;
                            default:
                                estatusClass = 'estatus-error';
                                estatusText = 'Desconocido';
                        }

                        return '<span class="' + estatusClass + '">' + estatusText + '</span>';
                    }
                },
                {
                    data: "tipo_descarga",
                    render: function(data, type, row) {
                        var tipoText = '';
                        switch (data) {
                            case 'Emitidas':
                                tipoText = 'Emitidas';
                                break;
                            case 'Recibidas':
                                tipoText = 'Recibidas';
                                break;
                            default:
                                tipoText = data;
                        }
                        return tipoText;
                    }
                },
                {
                    data: "fecha_descarga_formateada",
                },
                {
                    data: "usuario.name",
                    defaultContent: 'N/A'
                },
                {
                    data: "cantidad_archivos_descargados",
                },
                {
                    data: "cantidad_archivos_insertados",
                },
                {
                    data: "cantidad_archivos_errores",
                },
            ],
            buttons: [{
                    extend: 'excel',
                    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',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    },
                },
                {
                    extend: 'pdf',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    text: 'Exportar a PDF',
                    title: 'Histórico de Descarga de XMLs',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    },
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 8;
                        doc.styles.tableHeader.fontSize = 8;
                    }
                }
            ],
            order: [
                [2, "desc"]
            ],
        });
    }
</script>
@endpush