@extends('layouts.app', ['activePage' => 'proveedores', 'menuParent' => 'catalogos', '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-3 h-100">
                    <div class="flex items-start justify-between mb-1">
                        <div>
                            <h6 class="text-2xl font-semibold text-slate-900">Gestor de Proveedores</h6>
                            <p class="text-sm text-slate-500">Consulta, filtra e importa proveedores con una vista clara y acciones rapidas.</p>
                        </div>
                    </div>

                    <form id="proveedoresFilters" class="space-y-4">
                        <section class="rounded-lg border border-gray-200 p-3" id="tourProveedoresFiltros">
                            <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">&#128736;</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 el listado por tipo de proveedor y actualiza la tabla en un clic.</p>
                                </div>
                            </div>

                            <div class="grid sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Tipo de proveedor:</label>
                                    <select id="idtipoproveedor" 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-live-search="true">
                                        <option value="0" selected>Todos</option>
                                        @foreach($data['tipo_p'] as $p)
                                        <option value="{{ $p->id }}">{{ $p->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </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 botones para buscar, registrar o importar proveedores.</p>
                                <div class="flex flex-wrap gap-2">
                                    <button type="button" id="btnBuscarProveedores" 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">
                                        <i class="material-icons text-base leading-none">search</i>
                                        Buscar
                                    </button>
                                    <a class="inline-flex items-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-800 px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200" href="{{ route('travelagent.catalogos.proveedores.alta') }}">
                                        <i class="material-icons text-base leading-none">add</i>
                                        Nuevo proveedor
                                    </a>

                                    {{--
                                    <button type="button" id="btnOpenImportModal" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200" data-toggle="modal" data-target="#importarExcel">
                                        <i class="material-icons text-base leading-none">upload_file</i>
                                        Importar
                                    </button>

                                    --}}
                                </div>
                            </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" id="tourResumenProveedores">
                    <div class="flex items-center justify-between mb-4">
                        <h6 class="text-sm font-semibold text-slate-900 mb-0">Resumen</h6>
                        <span id="proveedoresHistoryBadge" class="cfdi-history-badge neutral">Esperando datos</span>
                    </div>

                    <div class="grid grid-cols-2 gap-3 mb-3">
                        <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 proveedores</p>
                            <p class="text-lg font-bold text-slate-900" id="resumenTotalProveedores">0</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">Activos</p>
                            <p class="text-lg font-bold text-emerald-700" id="resumenActivos">0</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div class="bg-rose-50 rounded-lg p-3 border border-rose-100">
                            <p class="text-xs text-rose-700 font-medium mb-1">Inactivos</p>
                            <p class="text-lg font-bold text-rose-700" id="resumenInactivos">0</p>
                        </div>
                        <div class="bg-amber-50 rounded-lg p-3 border border-amber-100">
                            <p class="text-xs text-amber-700 font-medium mb-1">Sin configurar</p>
                            <p class="text-lg font-bold text-amber-700" id="resumenSinConfigurar">0</p>
                        </div>
                    </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="tourProveedoresTabla">
                    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-2 mb-2">
                        <div>
                            <h6 class="text-base font-semibold text-slate-900 mb-1">Listado de Proveedores</h6>
                            <p class="text-xs text-slate-500 mb-0">Consulta RFC, contacto, estatus y acciones administrativas en una sola tabla.</p>
                        </div>
                        <div class="text-left">
                            <p id="proveedoresStatus" 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="proveedoresLastRefresh">-</span></p>
                        </div>
                    </div>

                    <div class="table-scroll">
                        <table class="min-w-full" id="gridProveedores" width="100%">
                            <thead class="sticky-top bg-gray-50 px-6 py-3 text-[10px] font-semibold text-left text-gray-500 uppercase tracking-wider">
                                <tr>
                                    <th class="px-2 py-2">ID</th>
                                    <th class="px-2 py-2">RFC</th>
                                    <th class="px-2 py-2">Nombre o Razon Social</th>
                                    <th class="px-2 py-2">Tipo proveedor</th>
                                    <th class="px-2 py-2">Contacto</th>
                                    <th class="px-2 py-2">Correo</th>
                                    <th class="px-2 py-2">Telefono</th>
                                    <th class="px-2 py-2">Estatus</th>
                                    <th class="px-2 py-2">Acciones</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="importarExcel" tabindex="-1" role="dialog" aria-labelledby="importarExcelLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="importarExcelLabel">Importar archivo EXCEL</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="material-icons">clear</i>
                </button>
            </div>
            <div class="modal-body">
                <h5 class="text-center card-description" style="margin-top: -20px;">Selecciona tu archivo de proveedores a importar</h5>
                <h6 style="margin-top: -15px;" class="text-center">
                    <a href="{{ asset('archivos/estaticos/plantilla_importar_proveedores.xlsx') }}" download>(Descargar plantilla)</a>
                </h6>
                <form method="post" enctype="multipart/form-data" id="formImportExcel">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mt-1">
                            <input type="file" name="file" id="file" class="form-control">
                        </div>
                        <div class="col-md-6 text-right">
                            <button type="submit" id="btn_import" class="btn btn-sm btn-success">Importar</button>
                            <button type="submit" id="btn_validate" class="btn btn-sm btn-primary" title="Validar proveedores antes de importar">
                                <i class="material-icons">published_with_changes</i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modalProveedoresErr" tabindex="-1" role="dialog" aria-labelledby="modalProveedoresErrLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalProveedoresErrLabel">Validacion de proveedores</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="material-icons">clear</i>
                </button>
            </div>
            <div class="modal-body">
                <h5 class="text-center card-description" style="margin-top: -20px;">Corrige los proveedores e importa tu archivo</h5>
                <div class="material-datatables">
                    <table class="table table-bordered" width="100%" style="width:100%">
                        <thead>
                            <tr>
                                <th width="20%">Fila</th>
                                <th>Errores</th>
                            </tr>
                        </thead>
                        <tbody id="listProveedoresErr"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<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,
    table.dataTable tbody td {
        font-size: 10px !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: 560px;
        overflow-y: auto;
    }
</style>
@endsection

@push('js')
<script>
    let proveedoresTable = null;
    const badgeStates = ['neutral', 'success', 'warning', 'danger'];

    const $dom = {
        status: null,
        lastRefresh: null,
        historyBadge: null,
        total: null,
        activos: null,
        inactivos: null,
        sinConfigurar: null,
    };

    function notify(icon, type, title, message) {
        showNotification(icon, 'top', 'center', type, title, message);
    }

    function setStatus(message) {
        if ($dom.status && $dom.status.length) {
            $dom.status.text(message);
        }
    }

    function refreshTimestamp() {
        if ($dom.lastRefresh && $dom.lastRefresh.length) {
            $dom.lastRefresh.text(new Date().toLocaleString('es-MX'));
        }
    }

    function setBadge(text, state) {
        if (!$dom.historyBadge || !$dom.historyBadge.length) {
            return;
        }

        const safeState = badgeStates.includes(state) ? state : 'neutral';
        $dom.historyBadge.removeClass(badgeStates.join(' ')).addClass(safeState).text(text);
    }

    function updateResumen(resumen) {
        const data = resumen || {
            total: 0,
            activos: 0,
            inactivos: 0,
            sin_configurar: 0,
        };

        $dom.total.text(data.total || 0);
        $dom.activos.text(data.activos || 0);
        $dom.inactivos.text(data.inactivos || 0);
        $dom.sinConfigurar.text(data.sin_configurar || 0);

        if ((data.total || 0) === 0) {
            setBadge('Sin resultados', 'warning');
            return;
        }

        if ((data.inactivos || 0) > 0) {
            setBadge('Revisar inactivos', 'warning');
            return;
        }

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

    function getFilterData() {
        return {
            tipo_proveedor: $('#idtipoproveedor').val(),
        };
    }

    function buildDatatable() {
        if ($.fn.DataTable.isDataTable('#gridProveedores')) {
            $('#gridProveedores').DataTable().destroy();
            $('#gridProveedores tbody').empty();
        }

        setStatus('Solicitando datos al servidor...');

        proveedoresTable = $('#gridProveedores').DataTable({
            lengthMenu: [10, 20, 50, 100, 200, 500],
            processing: true,
            dom: 'Blfrtip',
            language: {
                url: "{{ asset('material/datatable_sp.json') }}"
            },
            ajax: {
                url: "{{ route('travelagent.catalogos.proveedores.get_proveedores') }}",
                type: 'POST',
                data: function() {
                    return getFilterData();
                },
                dataSrc: function(json) {
                    updateResumen(json.resumen || null);
                    return json.data || [];
                },
                error: function() {
                    setStatus('No fue posible actualizar los datos');
                    setBadge('Error de consulta', 'danger');
                    updateResumen(null);
                }
            },
            columns: [{
                    data: 'id'
                },
                {
                    data: 'RFC'
                },
                {
                    data: 'razon_social'
                },
                {
                    data: 'tipo_proveedor_descripcion'
                },
                {
                    data: 'contacto'
                },
                {
                    data: 'correo'
                },
                {
                    data: 'telefono'
                },
                {
                    data: 'estatus',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'acciones',
                    orderable: false,
                    searchable: false
                },
            ],
            order: [
                [0, 'desc']
            ],
            buttons: [{
                    extend: 'excelHtml5',
                    text: 'EXCEL',
                    titleAttr: 'Excel',
                },
                {
                    extend: 'csvHtml5',
                    text: 'CSV',
                    titleAttr: 'CSV',
                },
                {
                    extend: 'pdfHtml5',
                    text: 'PDF',
                    titleAttr: 'PDF',
                },
                {
                    extend: 'copyHtml5',
                    text: 'COPIAR',
                    titleAttr: 'Copiar',
                },
            ],
            initComplete: function() {
                setStatus('Consulta actualizada');
                refreshTimestamp();
            }
        });
    }

    function loadGrid() {
        buildDatatable();
    }

    function desactivar(estatus, id) {
        const isInactivar = String(estatus) === '0';
        const txt = isInactivar ? 'Estas seguro de inactivar el proveedor?' : 'Estas seguro de activar el proveedor?';
        const txt2 = isInactivar ? 'Se inactivo correctamente' : 'Se activo correctamente';

        Swal.fire({
            title: txt,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, hazlo'
        }).then((result) => {
            if (!result.value) {
                return;
            }

            $('#loadingLoad').modal('show');
            $.ajax({
                    url: "{{ route('travelagent.catalogos.proveedores.update_estatus') }}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        estatus: estatus,
                        id: id,
                    }
                })
                .done(function() {
                    notify('thumb_up', 'success', 'BIEN', txt2);
                    if (proveedoresTable) {
                        proveedoresTable.ajax.reload(null, false);
                    }
                })
                .fail(function() {
                    notify('error', 'danger', 'ERROR', 'No fue posible actualizar el estatus del proveedor.');
                })
                .always(function() {
                    $('#loadingLoad').modal('hide');
                });
        });
    }

    function listProveedoresErr(data) {
        $('#listProveedoresErr').empty();
        let html = '';

        $.each(data || [], function(_, value) {
            html += '<tr><td>' + value.fila + '</td><td>';
            $.each(value.message_err || [], function(indexMs, valueMs) {
                html += (indexMs + 1) + '. ' + valueMs + '<br>';
            });
            html += '</td></tr>';
        });

        $('#listProveedoresErr').append(html);
        $('#modalProveedoresErr').modal('show');
    }

    function submitImportForm(tipo) {
        const formData = new FormData(document.getElementById('formImportExcel'));
        formData.append('tipo', tipo);

        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{ route('travelagent.catalogos.proveedores.importar') }}",
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .done(function(resp) {
                if (resp.result === 1) {
                    notify('thumb_up', 'success', 'BIEN', resp.mensaje);
                    if (proveedoresTable) {
                        proveedoresTable.ajax.reload(null, false);
                    }
                    $('#importarExcel').modal('hide');
                    return;
                }

                if (resp.result === 2) {
                    notify('thumb_up', 'success', 'BIEN', resp.mensaje);
                    return;
                }

                notify('error', 'danger', 'ERROR', resp.mensaje || 'Se detectaron errores de validacion.');
                listProveedoresErr(resp.data_err || []);
            })
            .fail(function() {
                notify('error', 'danger', 'ERROR', 'Algo salio mal durante el proceso.');
            })
            .always(function() {
                $('#loadingLoad').modal('hide');
            });
    }

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

        if (window.TourManager) {
            TourManager.start('proveedores');
        }

        $dom.status = $('#proveedoresStatus');
        $dom.lastRefresh = $('#proveedoresLastRefresh');
        $dom.historyBadge = $('#proveedoresHistoryBadge');
        $dom.total = $('#resumenTotalProveedores');
        $dom.activos = $('#resumenActivos');
        $dom.inactivos = $('#resumenInactivos');
        $dom.sinConfigurar = $('#resumenSinConfigurar');

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

        $('#btnBuscarProveedores').on('click', function() {
            loadGrid();
        });

        $('#formImportExcel').on('submit', function(e) {
            e.preventDefault();

            if ($('#file').val() === '') {
                notify('error', 'danger', 'ERROR', 'Debes seleccionar el archivo a importar.');
                return false;
            }

            const submitterId = $(document.activeElement).attr('id');
            const tipo = submitterId === 'btn_validate' ? 2 : 1;
            submitImportForm(tipo);
        });

        loadGrid();
    });
</script>
@endpush