@extends('layouts.app', ['activePage' => 'campos_excel', 'menuParent' => '', 'titlePage' => __('Bancos - Parametros')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <!-- Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="text-2xl font-bold text-gray-900 mb-1">Configuración de campos excel</h5>
                        <p class="text-sm text-gray-600">Administra los campos que se mostrarán en tus archivos Excel exportados</p>
                    </div>
                    <button class="btn btn-primary bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md font-medium transition-colors duration-200" onclick="abrirModalCampo()">
                        <i class="material-icons align-middle text-base">add</i> Agregar Campo
                    </button>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Panel de Campos -->
            <div class="col-lg-6 mb-4">
                <div class="bg-white rounded-lg shadow-md h-100">
                    <div class="px-6 py-4 border-b border-gray-200 d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-lg font-semibold text-gray-900 mb-0">Campos Disponibles</h6>
                            <small class="text-gray-600">
                                <span id="contadorCampos" class="badge badge-info">0</span>
                                campos configurados
                            </small>
                        </div>
                        <small class="text-gray-500 cursor-help" title="Arrastra para reordenar">
                            <i class="material-icons" style="font-size: 0.9rem;">drag_indicator</i>
                        </small>
                    </div>
                    <div class="px-6 py-4" style="max-height: 500px; overflow-y: auto;">
                        <div id="listaCampos" class="sortable-list space-y-2">
                            <!-- Los campos se cargarán aquí -->
                        </div>
                        <div id="camposVacios" class="text-center py-8">
                            <i class="material-icons text-5xl text-gray-300 mb-2">folder_open</i>
                            <p class="text-gray-500 text-sm">No hay campos configurados</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Panel de Preview Excel -->
            <div class="col-lg-6 mb-4">
                <div class="bg-white rounded-lg shadow-md h-100 d-flex flex-column">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-green-50 to-emerald-50 d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-lg font-semibold text-gray-900 mb-0">
                                <i class="material-icons align-middle text-green-600 mr-2">table_chart</i>
                                Preview Excel
                            </h6>
                            <small class="text-gray-600">Visualización en tiempo real</small>
                        </div>
                        <button id="btnDescargarPreview" class="btn btn-sm btn-success px-3 py-1 d-none" onclick="descargarExcelPreview()" title="Descargar preview">
                            <i class="material-icons align-middle text-sm">download</i> Descargar
                        </button>
                    </div>
                    <div class="flex-grow-1 px-6 py-4 overflow-auto" style="min-height: 300px;">
                        <!-- <div id="previewExcel" class="text-center py-12 d-flex flex-column justify-content-center align-items-center h-100">
                            <i class="material-icons text-7xl text-gray-300 mb-3" id="iconoPreview">preview</i>
                            <h6 class="text-gray-700 font-semibold mb-1" id="titlePreview">Sin campos configurados</h6>
                            <p class="text-gray-500 text-sm" id="descPreview">Agrega campos en el panel izquierdo para ver el preview</p>
                        </div> -->

                        <div id="contenedorTablaPreview" style="display: none;">
                            <div class="mb-3 p-3 bg-blue-50 rounded border-l-4 border-blue-500">
                                <small class="text-gray-700">
                                    <i class="material-icons align-middle text-xs">info</i>
                                    Muestra los campos <strong>Activos</strong> en el orden configurado
                                </small>
                            </div>

                            <div class="table-responsive">
                                <table id="tablaPreview" class="table table-sm table-hover mb-0">
                                    <thead>
                                        <tr id="filaEncabezados"></tr>
                                    </thead>
                                    <tbody>
                                        <tr id="filaEjemplo"></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para crear/editar campo -->
<div class="modal fade" id="modalCampo" tabindex="-1" role="dialog" aria-labelledby="modalCampoLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h5 class="modal-title text-lg font-semibold text-gray-900" id="modalCampoLabel">Nuevo campo</h5>
                <button type="button" class="close text-gray-400 hover:text-gray-500" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body p-6">
                <input type="hidden" id="campo_id" name="id">
                <div class="form-group ">
                    <label for="nombreCampo" class="block text-sm font-medium text-gray-700 mb-2">Nombre del campo: <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="nombreCampo" name="nombre" placeholder="ej: RFC, Empresa, Monto" required>
                </div>

                <div class="form-group ">
                    <label for="tipoCampo" class="block text-sm font-medium text-gray-700 mb-2">Tipo de dato: <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#0A415F]" id="tipoCampo" name="tipo" required>
                        <option value="">Selecciona un tipo</option>
                        <optgroup label="Texto">
                            <option value="texto">Texto</option>
                            <option value="textarea">Texto largo (Textarea)</option>
                            <option value="email">Correo electrónico</option>
                            <option value="url">URL</option>
                        </optgroup>
                        <optgroup label="Números">
                            <option value="numero">Número</option>
                            <option value="moneda">Moneda</option>
                            <option value="porcentaje">Porcentaje</option>
                        </optgroup>
                        <optgroup label="Fechas y Tiempo">
                            <option value="fecha">Fecha</option>
                            <option value="time">Hora</option>
                            <option value="datetime">Fecha y hora</option>
                        </optgroup>
                        <optgroup label="Selección">
                            <option value="select">Lista desplegable (Select)</option>
                            <option value="checkbox">Casilla de verificación</option>
                            <option value="radio">Botón de opción</option>
                        </optgroup>
                        <optgroup label="Otros">
                            <option value="telefono">Teléfono</option>
                            <option value="color">Color</option>
                        </optgroup>
                    </select>
                </div>


                <div class="form-group ">
                    <label for="tipoMovimientoCampo" class="block text-sm font-medium text-gray-700 mb-2">Tipo de movimiento: <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#0A415F]" id="tipoMovimientoCampo" name="tipo_movimiento" required>
                        <option value="">Ambos (Ingreso y Egreso)</option>
                        <option value="ingreso">Ingreso</option>
                        <option value="egreso">Egreso</option>
                    </select>
                    <small class="text-gray-500 mt-1 block">Selecciona para qué tipo de movimiento se mostrará este campo</small>
                </div>
                <div class="form-group ">
                    <label class="inline-flex items-center">
                        <input type="checkbox" id="mostrarEnFormulario" name="mostrar_en_formulario" value="1" checked class="w-4 h-4 text-[#0A415F] border-gray-300 rounded focus:ring-[#0A415F]">
                        <span class="ml-2 text-sm text-gray-700">Mostrar en formulario</span>
                    </label>
                    <small class="text-gray-500 mt-1 block">Si está marcado, el campo se mostrará en el formulario de captura</small>
                </div>
                <div class="form-group ">
                    <label for="estatusCampo" class="block text-sm font-medium text-gray-700 mb-2">Estatus:</label>
                    <div class="flex items-center space-x-4">
                        <label class="inline-flex items-center">
                            <input type="radio" id="estatusActivo" name="estatusCampo" value="Activo" checked class="w-4 h-4 text-[#0A415F] focus:ring-2 focus:ring-[#0A415F]">
                            <span class="ml-2 text-sm text-gray-700">Activo</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" id="estatusInactivo" name="estatusCampo" value="Inactivo" class="w-4 h-4 text-[#0A415F] focus:ring-2 focus:ring-[#0A415F]">
                            <span class="ml-2 text-sm text-gray-700">Inactivo</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200">
                <button type="button" class="bg-transparent text-red-500 hover:text-red-600 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="guardarCampo()">Guardar Campo</button>
            </div>
        </div>
    </div>
</div>

<style>
    .campo-item {
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        padding: 0.75rem;
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
        transition: all 0.3s ease;
        cursor: grab;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .campo-item:active {
        cursor: grabbing;
    }

    .campo-item.dragging {
        opacity: 0.5;
        background: #f5f5f5;
    }

    .campo-item:hover {
        border-color: #0A415F;
        box-shadow: 0 4px 6px -1px rgba(10, 65, 95, 0.1);
        background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
    }

    .campo-item.inactivo {
        opacity: 0.6;
        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    }

    .drag-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        cursor: grab;
        color: #9ca3af;
        flex-shrink: 0;
    }

    .drag-handle:active {
        cursor: grabbing;
        color: #0A415F;
    }

    .campo-contenido {
        flex: 1;
        min-width: 0;
    }

    .campo-nombre {
        font-weight: 600;
        color: #1f2937;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
        word-break: break-word;
    }

    .campo-meta {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: wrap;
    }

    .campo-tipo {
        display: inline-block;
        background-color: #dbeafe;
        color: #1e40af;
        padding: 0.15rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .estado-badge {
        display: inline-block;
        padding: 0.15rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .estado-activo {
        background-color: #dcfce7;
        color: #166534;
    }

    .estado-inactivo {
        background-color: #fee2e2;
        color: #991b1b;
    }

    .campo-acciones {
        display: flex;
        gap: 0.35rem;
        flex-shrink: 0;
    }

    .campo-acciones button {
        padding: 0.35rem;
        font-size: 0.8rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease;
        border: none;
        width: 1.75rem;
        height: 1.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .campo-acciones button i {
        font-size: 0.9rem;
    }

    .btn-editar {
        background-color: #e0e7ff;
        color: #4f46e5;
    }

    .btn-editar:hover {
        background-color: #c7d2fe;
        color: #4338ca;
    }

    .btn-eliminar {
        background-color: #fee2e2;
        color: #dc2626;
    }

    .btn-eliminar:hover {
        background-color: #fecaca;
        color: #b91c1c;
    }

    #tablaPreview {
        border: 2px solid #e5e7eb;
        border-collapse: collapse;
        width: 100%;
    }

    #tablaPreview thead {
        background: linear-gradient(135deg, #0A415F 0%, #082d47 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    #tablaPreview th {
        font-weight: 700;
        color: white;
        padding: 1rem 0.75rem;
        text-align: left;
        border: 1px solid #0A415F;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #tablaPreview td {
        padding: 0.9rem 0.75rem;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.85rem;
        color: #374151;
    }

    #tablaPreview tbody tr {
        background-color: #ffffff;
        transition: all 0.2s ease;
    }

    #tablaPreview tbody tr:hover {
        background-color: #f0f9ff;
        border-left: 3px solid #0A415F;
        padding-left: 0.5rem;
    }

    #tablaPreview tbody tr:nth-child(even) {
        background-color: #f9fafb;
    }

    #tablaPreview tbody tr:nth-child(even):hover {
        background-color: #f0f9ff;
    }

    #previewExcel {
        min-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    #contenedorTablaPreview {
        width: 100%;
        max-height: 400px;
        overflow-y: auto;
    }

    .table-responsive {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .btn-success {
        background-color: #10b981 !important;
        border-color: #10b981 !important;
    }

    .btn-success:hover {
        background-color: #059669 !important;
        border-color: #059669 !important;
    }

    .h-100 {
        height: 100%;
    }

    .d-flex {
        display: flex;
    }

    .flex-column {
        flex-direction: column;
    }

    .flex-grow-1 {
        flex-grow: 1;
    }

    .justify-content-center {
        justify-content: center;
    }

    .align-items-center {
        align-items: center;
    }

    .badge {
        display: inline-block;
        padding: 0.35rem 0.65rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .badge-info {
        background-color: #dbeafe;
        color: #1e40af;
    }

    .cursor-help {
        cursor: help;
    }
</style>
@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
    let camposActuales = [];
    let draggedElement = null;

    $(document).ready(function() {
        cargarCampos();
    });

    function cargarCampos() {
        $.ajax({
            url: "{{route('configuracion.get-campos-excel')}}",
            type: 'POST',
            success: function(response) {
                // console.log('Respuesta del servidor:', response);
                camposActuales = response.data || [];
                // console.log('Campos cargados:', camposActuales);
                renderizarCampos();
                generarPreviewExcel();
                inicializarDragDrop();
            },
            error: function(error) {
                console.error('Error al cargar campos:', error);
            }
        });
    }

    function renderizarCampos() {
        const listaCampos = $('#listaCampos');
        const camposVacios = $('#camposVacios');
        const contadorCampos = $('#contadorCampos');

        listaCampos.empty();

        if (camposActuales.length === 0) {
            camposVacios.show();
            contadorCampos.text('0');
            return;
        }

        camposVacios.hide();
        contadorCampos.text(camposActuales.length);

        camposActuales.forEach((campo, index) => {
            const estadoClass = campo.estatus === 'Activo' ? '' : 'inactivo';
            const estadoBadge = campo.estatus === 'Activo' ?
                '<span class="estado-badge estado-activo">Activo</span>' :
                '<span class="estado-badge estado-inactivo">Inactivo</span>';

            // Badge para tipo de movimiento
            let tipoMovimientoBadge = '';
            if (campo.tipo_movimiento) {
                const tipoMovimiento = campo.tipo_movimiento.toLowerCase();
                const tipoMovimientoText = tipoMovimiento === 'ingreso' ? 'Ingreso' : tipoMovimiento === 'egreso' ? 'Egreso' : campo.tipo_movimiento;
                tipoMovimientoBadge = `<span class="estado-badge" style="background-color: #fef3c7; color: #92400e;">${tipoMovimientoText}</span>`;
            } else {
                tipoMovimientoBadge = '<span class="estado-badge" style="background-color: #dbeafe; color: #1e40af;">Ambos</span>';
            }

            // Badge para mostrar en formulario
            const mostrarEnFormulario = campo.mostrar_en_formulario == 1 || campo.mostrar_en_formulario === true;
            const mostrarBadge = mostrarEnFormulario ?
                '<span class="estado-badge estado-activo" title="Se muestra en formulario">✓ Formulario</span>' :
                '<span class="estado-badge estado-inactivo" title="No se muestra en formulario">✗ Formulario</span>';

            const html = `
                <div class="campo-item ${estadoClass}" draggable="true" data-id="${campo.id}" data-orden="${campo.orden}">
                    <div class="drag-handle">
                        <i class="material-icons">drag_indicator</i>
                    </div>
                    <div class="campo-contenido">
                        <div class="campo-nombre">${campo.nombre}</div>
                        <div class="campo-meta">
                            <span class="campo-tipo">${campo.tipo}</span>
                            ${estadoBadge}
                            ${tipoMovimientoBadge}
                            ${mostrarBadge}
                        </div>
                    </div>
                    <div class="campo-acciones">
                        <button class="btn btn-sm btn-editar" onclick="editarCampo(${campo.id})" type="button">
                            <i class="material-icons">edit</i>
                        </button>
                        <button class="btn btn-sm btn-eliminar" onclick="eliminarCampo(${campo.id})" type="button">
                            <i class="material-icons">delete</i>
                        </button>
                    </div>
                </div>
            `;
            listaCampos.append(html);
        });
    }

    function inicializarDragDrop() {
        const listaCampos = document.getElementById('listaCampos');

        listaCampos.addEventListener('dragstart', function(e) {
            draggedElement = e.target.closest('.campo-item');
            draggedElement.classList.add('dragging');
        });

        listaCampos.addEventListener('dragend', function(e) {
            if (draggedElement) {
                draggedElement.classList.remove('dragging');
                draggedElement = null;
            }
        });

        listaCampos.addEventListener('dragover', function(e) {
            e.preventDefault();
            e.dropEffect = 'move';

            const afterElement = getDragAfterElement(listaCampos, e.clientY);
            if (afterElement == null) {
                listaCampos.appendChild(draggedElement);
            } else {
                listaCampos.insertBefore(draggedElement, afterElement);
            }
        });

        listaCampos.addEventListener('drop', function(e) {
            e.preventDefault();
            actualizarOrdenCampos();
        });
    }

    function getDragAfterElement(container, y) {
        const draggableElements = [...container.querySelectorAll('.campo-item:not(.dragging)')];

        return draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect();
            const offset = y - box.top - box.height / 2;

            if (offset < 0 && offset > closest.offset) {
                return {
                    offset: offset,
                    element: child
                };
            } else {
                return closest;
            }
        }, {
            offset: Number.NEGATIVE_INFINITY
        }).element;
    }

    function actualizarOrdenCampos() {
        const items = document.querySelectorAll('.campo-item');
        const ordenes = Array.from(items).map(item => parseInt(item.dataset.id));

        $.ajax({
            url: "{{route('configuracion.actualizar-orden-campos')}}",
            type: 'POST',
            data: {
                ordenes: ordenes
            },
            success: function(response) {
                // Actualizar el array local con los nuevos órdenes
                const nuevosOrdenes = {};
                ordenes.forEach((id, index) => {
                    nuevosOrdenes[id] = index + 1;
                });

                camposActuales.forEach(campo => {
                    campo.orden = nuevosOrdenes[campo.id];
                });

                generarPreviewExcel();
            },
            error: function(xhr) {
                console.error('Error al actualizar orden');
                cargarCampos(); // Recargar si hay error
            }
        });
    }

    function generarPreviewExcel() {
        // const previewExcel = $('#previewExcel');
        const contenedorTabla = $('#contenedorTablaPreview');
        const filaEncabezados = $('#filaEncabezados');
        const filaEjemplo = $('#filaEjemplo');

        // Obtener campos activos ordenados que se muestran en formulario
        const camposActivos = [...camposActuales]
            .filter(c => {
                const estatusActivo = c.estatus && c.estatus.trim().toLowerCase() === 'activo';
                // const mostrarEnFormulario = c.mostrar_en_formulario == 1 || c.mostrar_en_formulario === true;
                // return estatusActivo && mostrarEnFormulario;
                return estatusActivo;
            })
            .sort((a, b) => (a.orden || 0) - (b.orden || 0));

        // console.log('Campos totales:', camposActuales.length);
        // console.log('Campos activos:', camposActivos.length);
        // console.log('Datos de campos:', camposActuales);
        // console.log('Campos activos filtrados:', camposActivos);

        // // Si no hay campos activos, mostrar mensaje y ocultar tabla
        // if (camposActivos.length === 0) {
        //     previewExcel.show();
        //     contenedorTabla.hide();

        //     // Actualizar mensaje según si hay componentes o no
        //     const hayComponentos = camposActuales.length > 0;
        //     const iconoPreview = $('#iconoPreview');
        //     const titlePreview = $('#titlePreview');
        //     const descPreview = $('#descPreview');

        //     if (hayComponentos) {
        //         iconoPreview.text('visibility_off');
        //         titlePreview.text('Todos los campos están inactivos');
        //         descPreview.text('Activa al menos un campo para ver el preview');
        //     } else {
        //         iconoPreview.text('preview');
        //         titlePreview.text('Sin campos configurados');
        //         descPreview.text('Agrega campos en el panel izquierdo para ver el preview');
        //     }

        //     actualizarInfoPreview(0);
        //     return;
        // }

        // Mostrar tabla y ocultar mensaje
        // previewExcel.hide();
        contenedorTabla.show();

        // Limpiar filas previas
        filaEncabezados.empty();
        filaEjemplo.empty();

        // Generar encabezados y fila de ejemplo
        camposActivos.forEach((campo, index) => {
            // Añadir encabezado
            filaEncabezados.append(`<th>${campo.nombre}</th>`);

            // Generar valor de ejemplo según tipo
            let valorEjemplo = '';
            const tipoLower = campo.tipo.toLowerCase();

            switch (tipoLower) {
                case 'numero':
                case 'number':
                    valorEjemplo = '1,234.50';
                    break;
                case 'fecha':
                case 'date':
                    valorEjemplo = new Date().toLocaleDateString('es-MX');
                    break;
                case 'moneda':
                case 'currency':
                    valorEjemplo = '$1,000.00';
                    break;
                case 'porcentaje':
                case 'percentage':
                    valorEjemplo = '25%';
                    break;
                case 'email':
                    valorEjemplo = 'ejemplo@email.com';
                    break;
                case 'telefono':
                case 'tel':
                case 'phone':
                    valorEjemplo = '(555) 123-4567';
                    break;
                case 'url':
                    valorEjemplo = 'https://ejemplo.com';
                    break;
                case 'time':
                    valorEjemplo = new Date().toLocaleTimeString('es-MX', {
                        hour: '2-digit',
                        minute: '2-digit'
                    });
                    break;
                case 'datetime':
                case 'datetime-local':
                    valorEjemplo = new Date().toLocaleString('es-MX');
                    break;
                case 'textarea':
                case 'texto_largo':
                    valorEjemplo = 'Texto largo de ejemplo...';
                    break;
                case 'select':
                case 'dropdown':
                    valorEjemplo = 'Opción seleccionada';
                    break;
                case 'checkbox':
                    valorEjemplo = '✓';
                    break;
                case 'radio':
                    valorEjemplo = 'Sí';
                    break;
                case 'color':
                    valorEjemplo = '#FF5733';
                    break;
                case 'texto':
                case 'text':
                default:
                    valorEjemplo = 'Ejemplo ' + (index + 1);
            }

            // Añadir celda de datos
            filaEjemplo.append(`<td><code class="px-2 py-1 bg-gray-100 rounded text-xs">${valorEjemplo}</code></td>`);
        });

        // Mostrar botón de descarga
        actualizarInfoPreview(camposActivos.length);
    }

    function actualizarInfoPreview(cantidadCampos) {
        const btnDescargar = $('#btnDescargarPreview');
        if (cantidadCampos > 0) {
            btnDescargar.removeClass('d-none');
        } else {
            btnDescargar.addClass('d-none');
        }
    }

    function abrirModalCampo() {
        $('#modalCampoLabel').text('Nuevo campo');
        $('#campo_id').val('');
        $('#nombreCampo').val('');
        $('#tipoCampo').val('');
        $('#tipoMovimientoCampo').val('');
        $('#estatusActivo').prop('checked', true);
        $('#mostrarEnFormulario').prop('checked', true);
        $('#modalCampo').modal('show');
    }

    function guardarCampo() {
        const id = $('#campo_id').val();
        const nombre = $('#nombreCampo').val().trim();
        const tipo = $('#tipoCampo').val();
        const estatus = $('input[name="estatusCampo"]:checked').val();
        const tipoMovimiento = $('#tipoMovimientoCampo').val();
        const mostrarEnFormulario = $('#mostrarEnFormulario').is(':checked') ? 1 : 0;

        if (!nombre || !tipo) {
            Swal.fire({
                icon: 'warning',
                title: 'Campos Requeridos',
                text: 'Por favor completa el nombre y tipo de dato',
                confirmButtonColor: '#0A415F'
            });
            return;
        }

        $.ajax({
            url: "{{route('configuracion.save-campos-excel')}}",
            type: 'POST',
            data: {
                id: id || '',
                nombre: nombre,
                tipo: tipo,
                estatus: estatus,
                tipo_movimiento: tipoMovimiento,
                mostrar_en_formulario: mostrarEnFormulario,
            },
            success: function(response) {
                $('#modalCampo').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: id ? 'Campo actualizado correctamente' : 'Campo creado correctamente',
                    confirmButtonColor: '#0A415F'
                }).then(() => {
                    cargarCampos();
                });
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error al guardar el campo',
                    confirmButtonColor: '#0A415F'
                });
            }
        });
    }

    function editarCampo(id) {
        const campo = camposActuales.find(c => c.id === id);
        if (!campo) return;

        $('#modalCampoLabel').text('Editar campo');
        $('#campo_id').val(campo.id);
        $('#nombreCampo').val(campo.nombre);
        $('#tipoCampo').val(campo.tipo);
        $('#tipoMovimientoCampo').val(campo.tipo_movimiento || '');
        $('input[name="estatusCampo"][value="' + campo.estatus + '"]').prop('checked', true);
        $('#mostrarEnFormulario').prop('checked', campo.mostrar_en_formulario == 1 || campo.mostrar_en_formulario === true);
        $('#modalCampo').modal('show');
    }

    function eliminarCampo(id) {
        Swal.fire({
            title: '¿Eliminar campo?',
            text: 'Esta acción no se puede deshacer',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc2626',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{route('configuracion.delete-campos-excel', ['id' => ':id'])}}".replace(':id', id),
                    type: 'DELETE',
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Eliminado',
                            text: 'Campo eliminado correctamente',
                            confirmButtonColor: '#0A415F'
                        }).then(() => {
                            cargarCampos();
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error al eliminar el campo',
                            confirmButtonColor: '#0A415F'
                        });
                    }
                });
            }
        });
    }

    function descargarExcelPreview() {
        const camposActivos = camposActuales.filter(c => c.estatus === 'Activo');

        if (camposActivos.length === 0) {
            Swal.fire({
                icon: 'info',
                title: 'Sin datos',
                text: 'Agrega campos activos antes de descargar',
                confirmButtonColor: '#0A415F'
            });
            return;
        }

        try {
            const ws = XLSX.utils.table_to_sheet(document.getElementById('tablaPreview'));

            // Personalizar ancho de columnas
            const maxWidth = 20;
            const colWidths = camposActivos.map(campo => ({
                wch: Math.min(campo.nombre.length + 2, maxWidth)
            }));
            ws['!cols'] = colWidths;

            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Preview Campos");

            const nombreArchivo = `preview_campos_excel_${new Date().getTime()}.xlsx`;
            XLSX.writeFile(wb, nombreArchivo);

            Swal.fire({
                icon: 'success',
                title: 'Descargado',
                text: 'El archivo se descargó correctamente',
                confirmButtonColor: '#0A415F',
                timer: 2000
            });
        } catch (error) {
            console.error('Error al descargar:', error);
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Error al descargar el archivo',
                confirmButtonColor: '#0A415F'
            });
        }
    }
</script>
@endpush