@extends('layouts.app', ['activePage' => 'cuentascontables', 'menuParent' => 'catalogos', 'titlePage' => __('Contabilidad - Importar cuentas contables')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-6 flex items-center gap-4">
                <h6 class="text-xl font-semibold text-gray-800 m-0">Importar cuentas contables</h6>
            </div>
            <div class="col-6 text-right">
                <a href="{{ route('cuentas-contables.') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Volver
                </a>
            </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-12 flex flex-col items-center justify-center">
                                <label class="block text-base font-medium text-gray-700 mb-1 text-center">Importar archivo:</label>
                                <span class="block text-sm text-gray-500 mb-2 text-center">Selecciona un archivo Excel para previsualizar y editar los datos antes de importarlos al sistema.</span>
                                <div class="flex items-center w-full justify-center gap-3">
                                    <span class="inline-flex items-center justify-center bg-blue-100 text-blue-600 rounded-full h-12 w-12">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12" />
                                        </svg>
                                    </span>
                                    <input type="file" id="file-excel" class="w-full max-w-md px-4 py-2 border-2 border-blue-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200 bg-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-base file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" />
                                </div>
                            </div>
                        </div>

                        <div id="contador-registros" class="mb-4 text-center text-gray-700 font-medium" style="display: none;">
                            Total de registros: <span id="total-registros" class="text-blue-600 font-bold">0</span>
                            | Registros editados: <span id="registros-editados" class="text-yellow-600 font-bold">0</span>
                        </div>



                        <div class="bg-gray-50 rounded-lg p-3 shadow-sm border border-gray-200 mb-4">
                            <div class="flex flex-col gap-3">
                                <h3 class="text-lg font-semibold text-gray-800">Configuración de la importación</h3>
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 w-full">
                                    <div class="flex flex-row gap-3">
                                        <div class="flex items-center gap-2">
                                            <input type="radio" id="importar-todo" name="tipo-importacion" value="todo" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
                                            <label for="importar-todo" class="text-base  text-gray-700 cursor-pointer mt-2">Importar todas las cuentas</label>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <input type="radio" id="importar-no-encontradas" name="tipo-importacion" value="nuevas" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300">
                                            <label for="importar-no-encontradas" class="text-base  text-gray-700 cursor-pointer mt-2">Importar solo cuentas nuevas</label>
                                        </div>
                                    </div>
                                    <div class="flex justify-end">
                                        <button id="btn-importar" class="inline-flex items-center px-6 py-2 border border-transparent text-base font-medium rounded-lg shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 transform hover:scale-105">
                                            <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                                            </svg>
                                            Iniciar importación
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="loading-excel" class="flex flex-col justify-center items-center py-8" style="display:none;">
                            <svg class="animate-spin h-10 w-10 text-blue-700 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                            </svg>
                            <span class="text-lg font-semibold text-blue-700">Cargando archivo...</span>
                        </div>
                        <div class="overflow-x-auto table-scroll" style="max-height: 400px; overflow-y: auto;">
                            <div id="list-cuentas-contables" class="space-y-4">
                                <!-- El contenido se generará dinámicamente -->
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de errores de importación -->
<div id="modal-errores-importacion" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40 hidden">
    <div class="bg-white rounded-lg shadow-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto p-6 relative">
        <button id="cerrar-modal-errores" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 text-2xl font-bold">&times;</button>
        <h2 class="text-2xl font-bold text-red-600 mb-4 flex items-center gap-2">
            <svg class="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
            Errores en la importación
        </h2>
        <div class="mb-4 flex gap-3 justify-start">
            <button id="btn-continuar-errores" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200">
                <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Continuar
            </button>
            <button id="btn-ver-lista-errores" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200">
                <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                Ver errores
            </button>
        </div>
        <div id="resumen-errores-importacion" class="text-red-600 font-semibold mb-4"></div>
        <div id="contenido-errores-importacion" class="hidden"></div>
    </div>
</div>

@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<style>
    .table-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #DBEAFE;
        /* Tailwind bg-blue-100 */
    }

    .swal-wide {
        max-width: 800px !important;
    }
</style>
<script>
    function actualizarContadorEditados(input) {
        const tr = input.closest('tr');
        tr.classList.remove('bg-white', 'bg-blue-50');
        tr.classList.add('bg-yellow-100');

        // Contar filas con fondo amarillo (editadas)
        const filasEditadas = document.querySelectorAll('tr.bg-yellow-100').length;
        document.getElementById('registros-editados').textContent = filasEditadas;
    }

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

        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        document.getElementById('file-excel').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            // Mostrar loading y ocultar tabla
            document.getElementById('loading-excel').style.display = 'flex';
            document.getElementById('list-cuentas-contables').style.display = 'none';
            document.getElementById('contador-registros').style.display = 'none';

            setTimeout(() => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, {
                        type: 'array'
                    });
                    const sheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[sheetName];
                    const json = XLSX.utils.sheet_to_json(worksheet, {
                        header: 1
                    });

                    renderPreviewTable(json);

                    // Actualizar contador de registros
                    const totalRegistros = json.length - 1; // Restamos 1 para excluir la fila de encabezados
                    document.getElementById('total-registros').textContent = totalRegistros;
                    document.getElementById('registros-editados').textContent = '0';
                    document.getElementById('contador-registros').style.display = 'block';

                    // Ocultar loading y mostrar tabla
                    document.getElementById('loading-excel').style.display = 'none';
                    document.getElementById('list-cuentas-contables').style.display = 'block';
                };
                reader.readAsArrayBuffer(file);
            }, 2000); // 2 segundos
        });

        function renderPreviewTable(data) {
            if (!data.length) return;
            let html = '<table class="min-w-full divide-y divide-gray-200 table-auto rounded-lg overflow-hidden shadow">';
            // Encabezados (sticky y letra más grande)
            html += '<thead><tr>';
            data[0].forEach(header => {
                html += `<th class=\"p-2 bg-blue-100 text-xssm font-bold sticky top-0 z-20 border-b-2 border-blue-300 text-blue-900\">${header}</th>`;
            });
            html += '</tr></thead><tbody>';

            // Filas editables
            for (let i = 1; i < data.length; i++) {
                // Alternar color de fondo para filas
                const rowBg = i % 2 === 0 ? 'bg-white' : 'bg-blue-50';
                html += `<tr class=\"${rowBg} hover:bg-blue-100 transition-colors\" data-original-bg=\"${rowBg}\">`;
                for (let j = 0; j < data[0].length; j++) {
                    const cell = (data[i] && data[i][j] !== undefined) ? data[i][j] : '';
                    html += `<td class=\"border px-4 py-2\"><input type=\"text\" class=\"w-full border border-gray-300 rounded px-2 py-1 text-xs bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition\" value=\"${cell}\" onchange=\"actualizarContadorEditados(this)\" /></td>`;
                }
                html += '</tr>';
            }
            html += '</tbody></table>';

            document.getElementById('list-cuentas-contables').innerHTML = html;
        }

        $('#btn-importar').click(function() {
            const tipoImportacion = $('input[name="tipo-importacion"]:checked').val();

            if ($('#list-cuentas-contables table tbody tr').length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Advertencia',
                    text: 'No hay registros para importar, por favor verifique el archivo y vuelva a intentarlo',
                    confirmButtonText: 'Aceptar'
                });
                return;
            }
            // Mostrar loading
            Swal.fire({
                title: 'Importando registros...',
                text: 'Por favor espere mientras se procesan los datos',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            // Recolectar datos de la tabla
            const headers = [];
            const registros = [];

            // Obtener encabezados
            $('#list-cuentas-contables table thead th').each(function() {
                headers.push($(this).text());
            });

            // Obtener datos de cada fila
            $('#list-cuentas-contables table tbody tr').each(function() {
                const fila = {};
                $(this).find('td input').each(function(index) {
                    fila[headers[index]] = $(this).val();
                });
                registros.push(fila);
            });

            // Enviar datos al backend
            $.ajax({
                url: '{{ route("cuentas-contables.importar") }}',
                method: 'POST',
                data: JSON.stringify({
                    registros: registros,
                    tipoImportacion: tipoImportacion
                }),
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function(response) {
                    if (response.data && response.data.errorRegistros && response.data.errorRegistros.length > 0) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Importación parcial!',
                            text: `Se importaron los registros correctamente, pero ${response.data.errorRegistros.length} registros presentaron errores.`,
                            confirmButtonText: 'Ver detalle'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                mostrarErroresImportacion(response.data.errorRegistros);
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Éxito!',
                            text: 'Los registros se han importado correctamente',
                            confirmButtonText: 'Aceptar',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = "{{ route('cuentas-contables.') }}";
                            }
                        });
                    }
                },
                error: function(xhr) {
                    let mensaje = 'Ha ocurrido un error al importar los registros';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        mensaje = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: mensaje,
                        confirmButtonText: 'Aceptar'
                    });
                }
            });
        });

        function mostrarErroresImportacion(errorRegistros) {
            // Resumen
            $('#resumen-errores-importacion').html(`Se encontraron <b>${errorRegistros.length}</b> registros con error durante la importación.`);
            // Detalle (oculto por defecto)
            let html = '';
            errorRegistros.forEach((error, index) => {
                html += `<div class='bg-red-100 border border-red-400 rounded-lg p-4 mb-4'>`;
                html += `<div class='font-bold text-red-700 mb-2'>Registro #${index + 1}</div>`;
                html += `<div class='grid grid-cols-2 gap-2 text-sm'>`;
                Object.entries(error.registro).forEach(([key, value]) => {
                    html += `<div class='font-medium text-red-700'>${key}:</div><div class='text-red-700'>${value}</div>`;
                });
                html += `</div>`;
                html += `<div class='mt-2 text-red-600 font-medium break-all'>Error: ${error.error}</div>`;
                html += `</div>`;
            });
            $('#contenido-errores-importacion').html(html).addClass('hidden');
            $('#modal-errores-importacion').removeClass('hidden');

            // Resaltar en la tabla los registros con error
            if (errorRegistros.length > 0) {
                // Obtener los números de cuenta con error
                const cuentasConError = errorRegistros.map(e => e.registro['Número de cuenta'] || e.registro['Numero de cuenta'] || e.registro['numero de cuenta'] || e.registro['numero_cuenta']);
                // Recorrer filas de la tabla y resaltar las que coincidan
                $('#list-cuentas-contables table tbody tr').each(function() {
                    const valorCuenta = $(this).find('td input').eq(1).val(); // Asumiendo que la columna 1 es 'Número de cuenta'
                    if (cuentasConError.includes(valorCuenta)) {
                        $(this).addClass('bg-red-100');
                        $(this).find('td input').addClass('text-red-700 font-bold');
                    }
                });
            }
        }
        // Botón Continuar
        $('#btn-continuar-errores').on('click', function() {
            window.location.href = "{{ route('cuentas-contables.') }}";
        });
        // Botón Ver lista
        $('#btn-ver-lista-errores').on('click', function() {
            $('#contenido-errores-importacion').toggleClass('hidden');
            if (!$('#contenido-errores-importacion').hasClass('hidden')) {
                $(this).text('Ocultar errores');
            } else {
                $(this).text('Ver errores');
            }
        });
        // Cerrar modal de errores
        $('#cerrar-modal-errores').on('click', function() {
            $('#modal-errores-importacion').addClass('hidden');
        });
        // Cerrar modal al hacer click fuera del contenido
        $('#modal-errores-importacion').on('click', function(e) {
            if (e.target === this) {
                $(this).addClass('hidden');
            }
        });
    });
</script>
@endpush