@extends('adminlte::page')

@section('title', $type == 'general' ? 'Revisión General de Transportation Method' : 'Revisión Específica de Transportation Method')

@section('content_header')
    <h1>{{ $type == 'general' ? 'Revisión General de Transportation Method' : 'Revisión Específica de Transportation Method' }}</h1>
    @if($type == 'general')
        {{-- <button class="btn btn-primary" id="startGeneralReview">Ejecutar Revisión General</button> --}}
        <a href="{{ route('review.specific.shipments') }}" class="btn btn-secondary">Revisar Lista Específica</a>
    @else
        {{-- <button class="btn btn-primary" id="startSpecificReview">Ejecutar Revisión de Lista Específica</button> 
        <a href="{{ route('review.general') }}" class="btn btn-secondary">Revisar Todos los Registros</a>--}}
        <button class="btn btn-info" data-toggle="modal" data-target="#manageListModal">Gestionar Lista Específica</button>
    @endif
@stop

@section('content')
    {{-- TEMPORALMENTE COMENTADO: Mensaje explicativo de la funcionalidad de modificación --}}
    {{--
    <!-- Mensaje explicativo de la funcionalidad -->
    <div id="functionalityInfo" class="alert alert-info alert-dismissible fade show" role="alert">
        <div class="d-flex align-items-start">
            <div class="mr-3">
                <i class="fas fa-info-circle fa-2x text-info"></i>
            </div>
            <div>
                <h5 class="alert-heading mb-2"><strong>🔍 Funcionalidad de la Herramienta</strong></h5>
                <p class="mb-2"><strong>¿Qué hace esta herramienta?</strong></p>
                <ul class="mb-2">
                    <li>📊 <strong>Revisa</strong> el campo <code>TransportationMethodTypeCode</code> en todos los registros JSON</li>
                    <li>✅ <strong>Valida</strong> que el código esté en la lista permitida: <code>['M', 'T', 'A']</code></li>
                    <li>🔄 <strong>Modifica</strong> solo los códigos inválidos, nulos o vacíos cambiándolos a <code>'M'</code></li>
                    <li>📋 <strong>Reporta</strong> qué registros fueron analizados y cuáles modificados</li>
                    <li>🔢 <strong>Agrega prefijo "00"</strong> automáticamente a los números de la lista específica para coincidir con la base de datos</li>
                </ul>
                <p class="mb-0"><em>💡 La herramienta <strong>solo modifica</strong> los registros que no cumplan con los criterios especificados.</em></p>
            </div>
        </div>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    --}}

    <!-- Nuevo mensaje explicativo para la funcionalidad actual -->
    <div id="currentFunctionalityInfo" class="alert alert-success alert-dismissible fade show" role="alert">
        <div class="d-flex align-items-start">
            <div class="mr-3">
                <i class="fas fa-paper-plane fa-2x text-success"></i>
            </div>
            <div>
                <h5 class="alert-heading mb-2"><strong>📤 Envío a Kipin - Funcionalidad Actual</strong></h5>
                <p class="mb-2"><strong>¿Qué hace esta herramienta actualmente?</strong></p>
                <ul class="mb-2">
                    <li>📋 <strong>Muestra</strong> los registros de la lista específica o general</li>
                    <li>✅ <strong>Permite seleccionar</strong> qué registros enviar a Kipin</li>
                    <li>🚀 <strong>Envía</strong> los registros seleccionados directamente a la API de Kipin</li>
                    <li>🔢 <strong>Agrega prefijo "00"</strong> automáticamente a los números para coincidir con la base de datos</li>
                    <li>📊 <strong>Reporta</strong> el resultado del envío (exitosos/fallidos)</li>
                </ul>
                <p class="mb-0"><em>💡 La funcionalidad de <strong>modificación automática de códigos</strong> está temporalmente desactivada.</em></p>
            </div>
        </div>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div id="spinner" class="text-center" style="display: none;">
        <div class="spinner-border" role="status">
            <span class="sr-only">Analizando...</span>
        </div>
        <p>Analizando registros, por favor espere...</p>
        <div class="progress mt-3">
            <div class="progress-bar" role="progressbar" style="width: 0%" id="progressBar"></div>
        </div>
        <p id="progressText">Procesando...</p>
    </div>
    <div id="content">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ $type == 'general' ? 'Análisis General de Transportation Method' : 'Análisis Específico de Transportation Method' }}</h3>
            </div>
            <div class="card-body">
                @if(isset($analyzedRecords) && $analyzedRecords->count() > 0)
                    <div class="mb-3">
                        <strong>Total de registros analizados:</strong> <span class="stats-total">{{ $analyzedRecords->count() }}</span><br>
                        <strong>Registros modificados:</strong> <span class="stats-modified">{{ $modifiedRecords->count() }}</span>
                        <div class="mt-2">
                            <button class="btn btn-success btn-sm" id="sendToKipinBtn">
                                <i class="fas fa-paper-plane"></i> Enviar a Kipin
                            </button>
                            <button class="btn btn-info btn-sm" id="refreshTableBtn">
                                <i class="fas fa-sync-alt"></i> Actualizar Tabla
                            </button>
                            <button class="btn btn-outline-primary btn-sm" id="selectAllBtn">
                                <i class="fas fa-check-square"></i> Seleccionar Todos
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" id="deselectAllBtn">
                                <i class="fas fa-square"></i> Deseleccionar Todos
                            </button>
                            <span class="ml-3 text-muted" id="selectedCount">0 registros seleccionados</span>
                        </div>
                    </div>
                    <table id="analyzedRecordsTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="width: 50px;">
                                    <input type="checkbox" id="selectAllCheckbox">
                                </th>
                                <th>Shipment Number</th>
                                <th>Estado</th>
                                <th>Códigos Originales</th>
                                <th>Códigos Actualizados</th>
                                <th>¿Modificado?</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($analyzedRecords as $record)
                                <tr data-shipment="{{ $record['shipment_number'] }}">
                                    <td>
                                        <input type="checkbox" class="record-checkbox" value="{{ $record['shipment_number'] }}"
                                               {{ $record['modified'] ? 'checked' : '' }}>
                                    </td>
                                    <td>{{ $record['shipment_number'] }}</td>
                                    <td>{{ $record['status'] }}</td>
                                    <td>{{ $record['original_codes'] }}</td>
                                    <td>{{ $record['new_codes'] }}</td>
                                    <td>
                                        @if($record['modified'])
                                            <span class="badge badge-success">Sí</span>
                                        @else
                                            <span class="badge badge-secondary">No</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="mb-3">
                        <strong>Total de registros analizados:</strong> <span class="stats-total">0</span><br>
                        <strong>Registros modificados:</strong> <span class="stats-modified">0</span>
                        <div class="mt-2">
                            <button class="btn btn-success btn-sm" id="sendToKipinBtn" disabled>
                                <i class="fas fa-paper-plane"></i> Enviar a Kipin
                            </button>
                            <button class="btn btn-info btn-sm" id="refreshTableBtn">
                                <i class="fas fa-sync-alt"></i> Actualizar Tabla
                            </button>
                            <button class="btn btn-outline-primary btn-sm" id="selectAllBtn" disabled>
                                <i class="fas fa-check-square"></i> Seleccionar Todos
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" id="deselectAllBtn" disabled>
                                <i class="fas fa-square"></i> Deseleccionar Todos
                            </button>
                            <span class="ml-3 text-muted" id="selectedCount">0 registros seleccionados</span>
                        </div>
                    </div>
                    <table id="analyzedRecordsTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="width: 50px;">
                                    <input type="checkbox" id="selectAllCheckbox" disabled>
                                </th>
                                <th>Shipment Number</th>
                                <th>Estado</th>
                                <th>Códigos Originales</th>
                                <th>Códigos Actualizados</th>
                                <th>¿Modificado?</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>

    <!-- Modal para gestionar la lista específica -->
    @if($type == 'specific')
    <div class="modal fade" id="manageListModal" tabindex="-1" role="dialog" aria-labelledby="manageListModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="manageListModalLabel">Gestionar Lista Específica de Shipment Numbers</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <button class="btn btn-success" id="addShipmentBtn">
                                <i class="fas fa-plus"></i> Agregar Shipment
                            </button>
                        </div>
                        <div class="col-md-6 text-right">
                            <button class="btn btn-danger" id="deleteAllShipmentsBtn">
                                <i class="fas fa-trash"></i> Borrar Todos
                            </button>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-upload"></i> Cargar desde CSV
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form id="csvUploadForm" enctype="multipart/form-data">
                                        <div class="form-group">
                                            <label for="csvFile">Seleccionar archivo CSV:</label>
                                            <input type="file" class="form-control-file" id="csvFile" name="csv_file" accept=".csv,.txt" required>
                                            <small class="form-text text-muted">
                                                <strong>Formatos soportados:</strong><br>
                                                • Números separados por comas: <code>46628235,46628108,46623457</code><br>
                                                • Una columna por fila: <code>46628235</code> (una por línea)<br>
                                                • Múltiples columnas y filas: El sistema detectará automáticamente todos los números<br>
                                                • Ignora celdas vacías y texto no numérico
                                            </small>
                                        </div>
                                        <button type="submit" class="btn btn-primary" id="uploadCsvBtn">
                                            <i class="fas fa-upload"></i> Cargar CSV
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <table id="specificShipmentsTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Shipment Number</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Se llenará con AJAX -->
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para agregar/editar -->
    <div class="modal fade" id="shipmentModal" tabindex="-1" role="dialog" aria-labelledby="shipmentModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="shipmentModalLabel">Agregar/Editar Shipment</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="shipmentForm">
                        <div class="form-group">
                            <label for="shipment_number">Shipment Number</label>
                            <input type="text" class="form-control" id="shipment_number" name="shipment_number" required>
                        </div>
                        <input type="hidden" id="old_shipment_number" name="old_shipment_number">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="saveShipmentBtn">Guardar</button>
                </div>
            </div>
        </div>
    </div>
    @endif
@stop

@section('css')
    <style>
        /* Estilos para el mensaje explicativo */
        #currentFunctionalityInfo {
            border-left: 4px solid #28a745;
            background-color: #d4edda;
        }

        #currentFunctionalityInfo .alert-heading {
            color: #000;
            font-size: 1.1rem;
            font-weight: bold;
        }

        #currentFunctionalityInfo p, #currentFunctionalityInfo li {
            color: #000;
        }

        #currentFunctionalityInfo code {
            background-color: rgba(0, 0, 0, 0.1);
            color: #000;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.9em;
            font-weight: bold;
        }

        #currentFunctionalityInfo ul {
            padding-left: 1.2rem;
        }

        #currentFunctionalityInfo li {
            margin-bottom: 0.3rem;
        }

        /* Animación suave para ocultar el mensaje */
        #currentFunctionalityInfo {
            transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
        }

        /* Estilos para el modal de gestión de shipments */
        #manageListModal .card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        #manageListModal .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 0.75rem 1.25rem;
        }

        #manageListModal .card-body {
            padding: 1.25rem;
        }

        #manageListModal .btn {
            margin-right: 0.5rem;
        }

        #manageListModal .btn:last-child {
            margin-right: 0;
        }

        /* Estilos para el formulario de carga CSV */
        #csvUploadForm .form-control-file {
            margin-bottom: 0.5rem;
        }

        #csvUploadForm .form-text {
            font-size: 0.875rem;
            color: #6c757d;
            margin-bottom: 1rem;
        }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        let allProcessedRecords = [];
        let totalModified = 0;
        let isProcessing = false;

        {{-- TEMPORALMENTE COMENTADO: Funciones de procesamiento de batch --}}
        {/*
        function startReview(type) {
            if (isProcessing) return;

            isProcessing = true;
            allProcessedRecords = [];
            totalModified = 0;

            // Ocultar mensaje explicativo si aún está visible
            $('#currentFunctionalityInfo').hide();

            // Mostrar spinner y barra de progreso
            document.getElementById('spinner').style.display = 'block';
            document.getElementById('content').style.display = 'none';
            document.getElementById('progressBar').style.width = '0%';
            document.getElementById('progressText').textContent = 'Iniciando análisis...';

            // Limpiar tabla
            $('#analyzedRecordsTable').DataTable().clear().draw();

            processBatch(type, 0);
        }

        function processBatch(type, offset) {
            console.log('Iniciando processBatch con type:', type, 'offset:', offset);

            $.ajax({
                url: '{{ route("process.transportation.batch") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    type: type,
                    offset: offset,
                    batch_size: 50
                },
                success: function(response) {
                    console.log('Respuesta exitosa:', response);
                    if (response.success) {
                        // Agregar registros procesados a la colección
                        allProcessedRecords = allProcessedRecords.concat(response.processed_records);
                        totalModified += response.modified_count;

                        // Actualizar barra de progreso
                        document.getElementById('progressBar').style.width = response.progress + '%';
                        document.getElementById('progressText').textContent =
                            'Procesando... ' + response.progress + '% completado (' +
                            allProcessedRecords.length + ' de ' + response.total_records + ' registros)';

                        // Agregar filas a la tabla en tiempo real
                        const table = $('#analyzedRecordsTable').DataTable();
                        response.processed_records.forEach(function(record) {
                            const checkboxHtml = `<input type="checkbox" class="record-checkbox" value="${record.shipment_number}" ${record.modified ? 'checked' : ''}>`;
                            table.row.add([
                                checkboxHtml,
                                record.shipment_number,
                                record.status,
                                record.original_codes,
                                record.new_codes,
                                record.modified ?
                                    '<span class="badge badge-success">Sí</span>' :
                                    '<span class="badge badge-secondary">No</span>'
                            ]);
                        });
                        table.draw(false);

                        if (response.is_complete) {
                            // Procesamiento completado
                            completeProcessing();
                        } else {
                            // Procesar siguiente lote
                            setTimeout(() => processBatch(type, response.next_offset), 100);
                        }
                    } else {
                        alert('Error en el procesamiento: ' + response.message);
                        isProcessing = false;
                        document.getElementById('spinner').style.display = 'none';
                        document.getElementById('content').style.display = 'block';
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error AJAX:', xhr, status, error);
                    alert('Error de conexión: ' + status + ' - ' + error + '\nURL: ' + '{{ route("process.transportation.batch") }}');
                    isProcessing = false;
                    document.getElementById('spinner').style.display = 'none';
                    document.getElementById('content').style.display = 'block';
                }
            });
        }

        function completeProcessing() {
            isProcessing = false;
            document.getElementById('progressBar').style.width = '100%';
            document.getElementById('progressText').textContent = 'Análisis completado - 100%';

            // Ocultar spinner y mostrar resultados
            setTimeout(() => {
                document.getElementById('spinner').style.display = 'none';
                document.getElementById('content').style.display = 'block';

                // Actualizar estadísticas
                $('.stats-total').text(allProcessedRecords.length);
                $('.stats-modified').text(totalModified);

                // Actualizar estado de los botones y checkboxes
                updateSendToKipinButton();
            }, 1000);
        }
        */}

        function updateSendToKipinButton() {
            const selectedCheckboxes = $('.record-checkbox:checked');
            const totalRecords = $('.record-checkbox').length;
            const selectedCount = selectedCheckboxes.length;

            // Actualizar contador de seleccionados
            $('#selectedCount').text(`${selectedCount} de ${totalRecords} registros seleccionados`);

            // Habilitar/deshabilitar botones según la selección
            const sendBtn = $('#sendToKipinBtn');
            const selectAllBtn = $('#selectAllBtn');
            const deselectAllBtn = $('#deselectAllBtn');
            const selectAllCheckbox = $('#selectAllCheckbox');

            if (totalRecords > 0) {
                sendBtn.prop('disabled', selectedCount === 0);
                selectAllBtn.prop('disabled', false);
                deselectAllBtn.prop('disabled', false);
                selectAllCheckbox.prop('disabled', false);

                // Actualizar estado del checkbox "Seleccionar todos"
                selectAllCheckbox.prop('checked', selectedCount === totalRecords && totalRecords > 0);
                selectAllCheckbox.prop('indeterminate', selectedCount > 0 && selectedCount < totalRecords);
            } else {
                sendBtn.prop('disabled', true);
                selectAllBtn.prop('disabled', true);
                deselectAllBtn.prop('disabled', true);
                selectAllCheckbox.prop('disabled', true);
            }
        }

        $(document).ready(function() {
            // Inicializar DataTable con la columna de checkbox
            const table = $('#analyzedRecordsTable').DataTable({
                "pageLength": 10,
                "lengthMenu": [5, 10, 15, 20],
                "language": {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "No se encontraron resultados",
                    "info": "Mostrando página _PAGE_ de _PAGES_",
                    "infoEmpty": "No hay registros disponibles",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar:",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
                "columnDefs": [
                    {
                        "targets": 0,
                        "orderable": false,
                        "searchable": false
                    }
                ]
            });

            // Si hay datos iniciales, no limpiar la tabla
            @if(!isset($analyzedRecords) || $analyzedRecords->count() == 0)
                table.clear().draw();
            @endif

            // Event listeners para los botones (TEMPORALMENTE COMENTADOS)
            /*
            $('#startGeneralReview').on('click', function() {
                $('#currentFunctionalityInfo').hide(); // Ocultar mensaje explicativo
                startReview('general');
            });

            $('#startSpecificReview').on('click', function() {
                $('#currentFunctionalityInfo').hide(); // Ocultar mensaje explicativo
                startReview('specific');
            });
            */

            // Event listeners para selección de registros
            $('#selectAllBtn').on('click', function() {
                $('.record-checkbox').prop('checked', true);
                updateSendToKipinButton();
            });

            $('#deselectAllBtn').on('click', function() {
                $('.record-checkbox').prop('checked', false);
                updateSendToKipinButton();
            });

            $('#selectAllCheckbox').on('change', function() {
                const isChecked = $(this).is(':checked');
                $('.record-checkbox').prop('checked', isChecked);
                updateSendToKipinButton();
            });

            // Event listener para checkboxes individuales
            $(document).on('change', '.record-checkbox', function() {
                updateSendToKipinButton();
            });

            @if($type == 'specific')
            var specificTable = $('#specificShipmentsTable').DataTable({
                "pageLength": 10,
                "lengthMenu": [5, 10, 15, 20],
                "language": {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "No se encontraron resultados",
                    "info": "Mostrando página _PAGE_ de _PAGES_",
                    "infoEmpty": "No hay registros disponibles",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar:",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
                "ajax": {
                    "url": "{{ route('get.specific.shipments') }}",
                    "type": "GET",
                    "dataSrc": "data"
                },
                "columns": [
                    { "data": null, "render": function(data, type, row, meta) { return data; } },
                    {
                        "data": null,
                        "render": function(data, type, row, meta) {
                            return '<button class="btn btn-sm btn-warning edit-btn" data-shipment="' + data + '">Editar</button> ' +
                                   '<button class="btn btn-sm btn-danger delete-btn" data-shipment="' + data + '">Eliminar</button>';
                        }
                    }
                ]
            });

            $('#manageListModal').on('shown.bs.modal', function () {
                specificTable.ajax.reload();
            });

            $('#addShipmentBtn').on('click', function() {
                $('#shipmentModalLabel').text('Agregar Shipment');
                $('#shipment_number').val('');
                $('#old_shipment_number').val('');
                $('#shipmentModal').modal('show');
            });

            // Event listener para borrar todos los shipments
            $('#deleteAllShipmentsBtn').on('click', function() {
                Swal.fire({
                    title: '¿Estás seguro?',
                    text: 'Esta acción eliminará TODOS los shipments de la lista específica. Esta acción no se puede deshacer.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="fas fa-trash"></i> Sí, borrar todos',
                    cancelButtonText: 'Cancelar',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Mostrar loading
                        Swal.fire({
                            title: 'Eliminando...',
                            text: 'Por favor espere mientras se eliminan todos los registros.',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        $.ajax({
                            url: '{{ route("delete.all.specific.shipments") }}',
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '¡Eliminación exitosa!',
                                        text: `Se eliminaron ${response.deleted_count} registros de la lista específica.`,
                                        confirmButtonText: 'Aceptar'
                                    });
                                    specificTable.ajax.reload();
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: response.message || 'Ocurrió un error al eliminar los registros.',
                                        confirmButtonText: 'Aceptar'
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error('Error AJAX:', xhr, status, error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error de conexión',
                                    text: 'No se pudo conectar con el servidor. Por favor, inténtelo de nuevo.',
                                    confirmButtonText: 'Aceptar'
                                });
                            }
                        });
                    }
                });
            });

            // Event listener para cargar CSV
            $('#csvUploadForm').on('submit', function(e) {
                e.preventDefault();

                const fileInput = $('#csvFile')[0];
                if (!fileInput.files[0]) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Archivo requerido',
                        text: 'Por favor selecciona un archivo CSV.',
                        confirmButtonText: 'Aceptar'
                    });
                    return;
                }

                const file = fileInput.files[0];
                const formData = new FormData();
                formData.append('csv_file', file);
                formData.append('_token', '{{ csrf_token() }}');

                // Mostrar loading
                Swal.fire({
                    title: 'Procesando CSV...',
                    text: 'Por favor espere mientras se procesa el archivo.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: '{{ route("upload.specific.shipments.csv") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Carga exitosa!',
                                html: `Se procesaron <strong>${response.processed_count}</strong> registros.<br>
                                       Agregados: <strong>${response.added_count}</strong><br>
                                       Duplicados omitidos: <strong>${response.duplicate_count}</strong>`,
                                confirmButtonText: 'Aceptar'
                            });
                            specificTable.ajax.reload();
                            $('#csvFile').val(''); // Limpiar el input
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error en la carga',
                                text: response.message || 'Ocurrió un error al procesar el archivo CSV.',
                                confirmButtonText: 'Aceptar'
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error AJAX:', xhr, status, error);
                        let errorMessage = 'No se pudo conectar con el servidor.';

                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            const errors = Object.values(xhr.responseJSON.errors).flat();
                            errorMessage = errors.join('<br>');
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Error de conexión',
                            html: errorMessage,
                            confirmButtonText: 'Aceptar'
                        });
                    }
                });
            });

            $('#specificShipmentsTable').on('click', '.edit-btn', function() {
                var shipment = $(this).data('shipment');
                $('#shipmentModalLabel').text('Editar Shipment');
                $('#shipment_number').val(shipment);
                $('#old_shipment_number').val(shipment);
                $('#shipmentModal').modal('show');
            });

            $('#specificShipmentsTable').on('click', '.delete-btn', function() {
                var shipment = $(this).data('shipment');
                if (confirm('¿Estás seguro de que quieres eliminar este shipment?')) {
                    $.ajax({
                        url: '{{ route("delete.specific.shipment") }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            shipment_number: shipment
                        },
                        success: function(response) {
                            if (response.success) {
                                alert('Shipment eliminado exitosamente');
                                specificTable.ajax.reload();
                            } else {
                                alert('Error: ' + response.message);
                            }
                        },
                        error: function() {
                            alert('Error al eliminar el shipment');
                        }
                    });
                }
            });

            $('#saveShipmentBtn').on('click', function() {
                var formData = new FormData(document.getElementById('shipmentForm'));
                formData.append('_token', '{{ csrf_token() }}');

                var url = $('#old_shipment_number').val() ? '{{ route("edit.specific.shipment") }}' : '{{ route("add.specific.shipment") }}';

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            alert('Shipment guardado exitosamente');
                            $('#shipmentModal').modal('hide');
                            specificTable.ajax.reload();
                        } else {
                            alert('Error: ' + response.message);
                        }
                    },
                    error: function() {
                        alert('Error al guardar el shipment');
                    }
                });
            });
            @endif

            // Event listener para el botón de enviar a Kipin
            $('#sendToKipinBtn').on('click', function() {
                const selectedShipments = $('.record-checkbox:checked').map(function() {
                    return $(this).val();
                }).get();

                if (selectedShipments.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Sin selección',
                        text: 'Por favor selecciona al menos un registro para enviar a Kipin.',
                        confirmButtonText: 'Entendido'
                    });
                    return;
                }

                Swal.fire({
                    title: '¿Enviar registros a Kipin?',
                    html: `Se enviarán <strong>${selectedShipments.length}</strong> registro(s) seleccionado(s) a la API de Kipin.<br><br>
                           <div class="alert alert-info" style="padding: 10px; margin: 10px 0; border-radius: 5px;">
                               <small><strong>Registros seleccionados:</strong></small><br>
                               <small style="word-break: break-all;">${selectedShipments.join(', ')}</small>
                           </div>
                           <strong>¿Está seguro de que desea continuar?</strong>`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="fas fa-paper-plane"></i> Sí, enviar a Kipin',
                    cancelButtonText: '<i class="fas fa-times"></i> Cancelar',
                    reverseButtons: true,
                    width: '600px'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Mostrar loading
                        Swal.fire({
                            title: 'Enviando a Kipin...',
                            html: 'Por favor espere mientras se procesa la solicitud.',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        // Enviar AJAX request con registros seleccionados
                        $.ajax({
                            url: '{{ route("send.to.kipin") }}',
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                type: '{{ $type }}',
                                selected_shipments: selectedShipments
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '¡Envío exitoso!',
                                        html: `Se enviaron <strong>${response.sent_count}</strong> registro(s) a Kipin exitosamente.<br><br>${response.message}`,
                                        confirmButtonText: 'Aceptar'
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error en el envío',
                                        text: response.message || 'Ocurrió un error al enviar los datos a Kipin.',
                                        confirmButtonText: 'Aceptar'
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error('Error AJAX:', xhr, status, error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error de conexión',
                                    text: 'No se pudo conectar con el servidor. Por favor, inténtelo de nuevo.',
                                    confirmButtonText: 'Aceptar'
                                });
                            }
                        });
                    }
                });
            });

            // Event listener para el botón de actualizar tabla
            $('#refreshTableBtn').on('click', function() {
                // Mostrar loading
                const refreshBtn = $(this);
                const originalContent = refreshBtn.html();
                
                refreshBtn.html('<i class="fas fa-spinner fa-spin"></i> Actualizando...');
                refreshBtn.prop('disabled', true);

                // Usar AJAX para obtener datos actualizados
                $.ajax({
                    url: '{{ route("refresh.table.data") }}',
                    type: 'GET',
                    success: function(response) {
                        if (response.success && response.data) {
                            // Actualizar las estadísticas
                            $('.stats-total').text(response.data.totalAnalyzed);
                            $('.stats-modified').text(response.data.totalModified);
                            
                            // Limpiar la tabla actual
                            const tableBody = $('#analyzedRecordsTable tbody');
                            tableBody.empty();
                            
                            // Agregar los nuevos datos
                            if (response.data.analyzedRecords.length > 0) {
                                response.data.analyzedRecords.forEach(function(record) {
                                    const modifiedBadge = record.modified 
                                        ? '<span class="badge badge-success">Sí</span>'
                                        : '<span class="badge badge-secondary">No</span>';
                                    
                                    const checked = record.modified ? 'checked' : '';
                                    
                                    const row = `
                                        <tr data-shipment="${record.shipment_number}">
                                            <td>
                                                <input type="checkbox" class="record-checkbox" value="${record.shipment_number}" ${checked}>
                                            </td>
                                            <td>${record.shipment_number}</td>
                                            <td>${record.status}</td>
                                            <td>${record.original_codes}</td>
                                            <td>${record.new_codes}</td>
                                            <td>${modifiedBadge}</td>
                                        </tr>
                                    `;
                                    tableBody.append(row);
                                });
                                
                                // Habilitar botones si hay datos
                                $('#sendToKipinBtn').prop('disabled', false);
                                $('#selectAllBtn').prop('disabled', false);
                                $('#deselectAllBtn').prop('disabled', false);
                            } else {
                                // Mostrar mensaje de no hay datos
                                tableBody.append(`
                                    <tr>
                                        <td colspan="6" class="text-center text-muted">
                                            No hay registros para mostrar
                                        </td>
                                    </tr>
                                `);
                                
                                // Deshabilitar botones si no hay datos
                                $('#sendToKipinBtn').prop('disabled', true);
                                $('#selectAllBtn').prop('disabled', true);
                                $('#deselectAllBtn').prop('disabled', true);
                            }
                            
                            // Actualizar contador de seleccionados
                            updateSendToKipinButton();
                            
                            // Re-vincular eventos si es necesario (los eventos con $(document).on ya funcionan)
                            // Desmarcar el checkbox principal
                            $('#selectAllCheckbox').prop('checked', false);
                            
                            // Mostrar notificación de éxito
                            Swal.fire({
                                icon: 'success',
                                title: '¡Tabla actualizada!',
                                text: `Se encontraron ${response.data.totalAnalyzed} registro(s)`,
                                timer: 2000,
                                showConfirmButton: false,
                                toast: true,
                                position: 'top-end'
                            });
                        } else {
                            throw new Error('Respuesta inválida del servidor');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error al actualizar tabla:', xhr, status, error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error al actualizar',
                            text: 'No se pudo actualizar la tabla. Recargando la página...',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.reload();
                        });
                    },
                    complete: function() {
                        // Restaurar el botón
                        refreshBtn.html(originalContent);
                        refreshBtn.prop('disabled', false);
                    }
                });
            });
        });
    </script>
@stop