@extends('layouts.kaiadmin.master')

@section('template_title')
Credenciales FEL
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container-fluid px-4 mt-4">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="fw-bold">
            <i class="fas fa-key me-2"></i> Credenciales FEL
        </h4>
        <button class="btn btn-primary" id="btnNuevo">
            <i class="fas fa-plus-circle"></i> Nueva Credencial
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-body table-responsive">
            <table class="table table-hover align-middle" id="tablaFEL">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Usuario</th>
                        <th>Prefijo</th>
                        <th>Observación</th>
                        <th>F. Activación</th>
                        <th>F. Vigencia</th>
                        <th>Estado</th>
                        <th width="120">Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(function () {

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

    /* =========================
       DATATABLE CLIENT SIDE
    ========================= */
    let tabla = $('#tablaFEL').DataTable({
        ajax: {
            url: "{{ route('credenciales-f-e-ls.create') }}",
            dataSrc: ''
        },
        columns: [
            { data: 'id' },
            { data: 'usuarioEmisor' },
            { data: 'prefijoEmisor' },
            { data: 'observacion', defaultContent: '-' },
            { data: 'fechaActivacion' },
            { data: 'fechaVigencia' },
            {
                data: 'estados_id',
                render: d => d == 1
                    ? '<span class="badge bg-success">Activo</span>'
                    : '<span class="badge bg-danger">Inactivo</span>'
            },
            {
                data: null,
                orderable: false,
                render: d => `
                    <div class="btn-group">
                        <button class="btn btn-sm btn-outline-info btnVer"
                            data-id="${d.id}"
                            data-usuario="${d.usuarioEmisor}"
                            data-prefijo="${d.prefijoEmisor}"
                            data-observacion="${d.observacion ?? ''}"
                            data-activacion="${d.fechaActivacion}"
                            data-vigencia="${d.fechaVigencia}"
                            data-estado="${d.estados_id}">
                            <i class="fas fa-eye"></i>
                        </button>

                        <button class="btn btn-sm btn-outline-warning btnEditar"
                            data-id="${d.id}"
                            data-usuario="${d.usuarioEmisor}"
                            data-prefijo="${d.prefijoEmisor}"
                            data-observacion="${d.observacion ?? ''}"
                            data-activacion="${d.fechaActivacion}"
                            data-vigencia="${d.fechaVigencia}"
                            data-estado="${d.estados_id}">
                            <i class="fas fa-edit"></i>
                        </button>

                        <button class="btn btn-sm btn-outline-danger btnEliminar"
                            data-id="${d.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `
            }
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
        }
    });

    /* =========================
       CREAR (MEJORADO)
    ========================= */
    $('#btnNuevo').click(function () {
        Swal.fire({
            title: '➕ Nueva Credencial FEL',
            html: `
                <div style="text-align: left; margin: 15px 0; max-height: 70vh; overflow-y: auto; padding-right: 10px;">
                    <div style="background-color: #f8f9fa; padding: 20px; border-radius: 8px;">
                        
                        <!-- Sección: Información del Emisor -->
                        <div style="margin-bottom: 20px; border-bottom: 2px solid #dee2e6; padding-bottom: 15px;">
                            <h6 style="color: #495057; margin-bottom: 15px; font-weight: bold;">
                                <i class="fas fa-building" style="margin-right: 5px; color: #007bff;"></i> 
                                Información del Emisor
                            </h6>
                            
                            <div style="margin-bottom: 15px;">
                                <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                    <i class="fas fa-user" style="margin-right: 5px; color: #007bff;"></i>
                                    Usuario Emisor <span style="color: #dc3545;">*</span>
                                </label>
                                <input id="usuarioEmisor" class="swal2-input" 
                                    style="width: 100%; margin: 0;" 
                                    placeholder="Ingrese el usuario del emisor"
                                    autocomplete="off">
                                <small style="color: #6c757d; display: block; margin-top: 5px;">
                                    Usuario proporcionado por la SAT
                                </small>
                            </div>
                            
                            <div style="margin-bottom: 15px;">
                                <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                    <i class="fas fa-tag" style="margin-right: 5px; color: #28a745;"></i>
                                    Prefijo Emisor <span style="color: #dc3545;">*</span>
                                </label>
                                <input id="prefijoEmisor" class="swal2-input" 
                                    style="width: 100%; margin: 0;" 
                                    placeholder="Ej: FEL"
                                    autocomplete="off">
                            </div>
                        </div>
                        
                        <!-- Sección: Credenciales de Seguridad -->
                        <div style="margin-bottom: 20px; border-bottom: 2px solid #dee2e6; padding-bottom: 15px;">
                            <h6 style="color: #495057; margin-bottom: 15px; font-weight: bold;">
                                <i class="fas fa-lock" style="margin-right: 5px; color: #dc3545;"></i> 
                                Credenciales de Seguridad
                            </h6>
                            
                            <div style="margin-bottom: 15px;">
                                <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                    <i class="fas fa-key" style="margin-right: 5px; color: #ffc107;"></i>
                                    Llave Emisor <span style="color: #dc3545;">*</span>
                                </label>
                                <input id="llaveEmisor" type="password" class="swal2-input" 
                                    style="width: 100%; margin: 0;" 
                                    placeholder="Ingrese la llave del emisor">
                                <small style="color: #6c757d; display: block; margin-top: 5px;">
                                    La llave se almacenará de forma segura
                                </small>
                            </div>
                            
                            <div style="margin-bottom: 15px;">
                                <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                    <i class="fas fa-file-signature" style="margin-right: 5px; color: #17a2b8;"></i>
                                    Token Firma <span style="color: #dc3545;">*</span>
                                </label>
                                <input id="tokenFirma" type="password" class="swal2-input" 
                                    style="width: 100%; margin: 0;" 
                                    placeholder="Ingrese el token de firma">
                            </div>
                        </div>
                        
                        <!-- Sección: Fechas y Estado -->
                        <div style="margin-bottom: 20px; border-bottom: 2px solid #dee2e6; padding-bottom: 15px;">
                            <h6 style="color: #495057; margin-bottom: 15px; font-weight: bold;">
                                <i class="fas fa-calendar-alt" style="margin-right: 5px; color: #fd7e14;"></i> 
                                Vigencia y Estado
                            </h6>
                            
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                                <div>
                                    <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                        <i class="fas fa-play-circle" style="margin-right: 5px; color: #28a745;"></i>
                                        Fecha Activación
                                    </label>
                                    <input id="fechaActivacion" type="date" class="swal2-input" 
                                        style="width: 100%; margin: 0;" 
                                        value="${new Date().toISOString().split('T')[0]}">
                                </div>
                                <div>
                                    <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                        <i class="fas fa-stop-circle" style="margin-right: 5px; color: #dc3545;"></i>
                                        Fecha Vigencia
                                    </label>
                                    <input id="fechaVigencia" type="date" class="swal2-input" 
                                        style="width: 100%; margin: 0;">
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 15px;">
                                <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                    <i class="fas fa-toggle-on" style="margin-right: 5px; color: #6f42c1;"></i>
                                    Estado
                                </label>
                                <select id="estados_id" class="swal2-select" 
                                    style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ced4da;">
                                    <option value="1" selected>🟢 Activo</option>
                                    <option value="0">🔴 Inactivo</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- Sección: Observaciones -->
                        <div style="margin-bottom: 15px;">
                            <h6 style="color: #495057; margin-bottom: 15px; font-weight: bold;">
                                <i class="fas fa-comment" style="margin-right: 5px; color: #6c757d;"></i> 
                                Observaciones
                            </h6>
                            
                            <div>
                                <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                    Observación
                                </label>
                                <textarea id="observacion" class="swal2-textarea" 
                                    style="width: 100%; min-height: 80px; margin: 0;" 
                                    placeholder="Notas adicionales sobre esta credencial..."></textarea>
                            </div>
                        </div>
                        
                        <!-- Leyenda de campos obligatorios -->
                        <div style="margin-top: 20px; padding: 10px; background-color: #e7f3ff; border-radius: 5px;">
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <i class="fas fa-info-circle" style="color: #004085; font-size: 1.2em;"></i>
                                <span style="color: #004085; font-size: 0.9em;">
                                    Los campos marcados con <span style="color: #dc3545;">*</span> son obligatorios
                                </span>
                            </div>
                        </div>
                        
                    </div>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: '💾 Guardar Credencial',
            cancelButtonText: '❌ Cancelar',
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            width: '700px',
            
            preConfirm: () => {
                const usuario = $('#usuarioEmisor').val();
                const prefijo = $('#prefijoEmisor').val();
                const llave = $('#llaveEmisor').val();
                const token = $('#tokenFirma').val();
                
                if (!usuario || usuario.trim() === '') {
                    Swal.showValidationMessage('El usuario emisor es obligatorio');
                    return false;
                }
                if (!prefijo || prefijo.trim() === '') {
                    Swal.showValidationMessage('El prefijo emisor es obligatorio');
                    return false;
                }
                if (!llave || llave.trim() === '') {
                    Swal.showValidationMessage('La llave del emisor es obligatoria');
                    return false;
                }
                if (!token || token.trim() === '') {
                    Swal.showValidationMessage('El token de firma es obligatorio');
                    return false;
                }
                
                return {
                    usuarioEmisor: usuario,
                    prefijoEmisor: prefijo,
                    llaveEmisor: llave,
                    tokenFirma: token,
                    observacion: $('#observacion').val(),
                    fechaActivacion: $('#fechaActivacion').val(),
                    fechaVigencia: $('#fechaVigencia').val(),
                    estados_id: $('#estados_id').val()
                };
            }
        }).then(r => {
            if (r.isConfirmed) {
                Swal.fire({
                    title: 'Guardando...',
                    text: 'Por favor espere',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                $.post("{{ route('credenciales-f-e-ls.store') }}", r.value)
                    .done(() => {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Guardado!',
                            text: 'La credencial se creó correctamente',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        tabla.ajax.reload(null, false);
                    })
                    .fail((xhr) => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON?.message || 'Error al guardar la credencial'
                        });
                    });
            }
        });
    });

    /* =========================
       VER (MEJORADO)
    ========================= */
    $(document).on('click', '.btnVer', function () {
        let estado = $(this).data('estado') == 1 ? 'Activo' : 'Inactivo';
        let colorEstado = $(this).data('estado') == 1 ? '#28a745' : '#dc3545';
        
        Swal.fire({
            title: '🔍 Detalle de Credencial FEL',
            html: `
                <div style="text-align: left; margin: 20px 0;">
                    <div style="background-color: #f8f9fa; border-radius: 10px; padding: 20px;">
                        
                        <!-- Header con ID -->
                        <div style="background-color: #e9ecef; border-radius: 8px; padding: 10px; margin-bottom: 20px; text-align: center;">
                            <span style="font-weight: bold; font-size: 1.1em;">Credencial #${$(this).data('id')}</span>
                        </div>
                        
                        <!-- Grid de 2 columnas para la información -->
                        <div style="display: grid; grid-template-columns: 120px 1fr; gap: 15px; align-items: center;">
                            
                            <!-- Usuario -->
                            <div style="font-weight: bold; color: #495057;">
                                <i class="fas fa-user" style="color: #007bff; width: 20px;"></i> Usuario:
                            </div>
                            <div style="background-color: white; padding: 8px 12px; border-radius: 5px; border: 1px solid #dee2e6;">
                                ${$(this).data('usuario')}
                            </div>
                            
                            <!-- Prefijo -->
                            <div style="font-weight: bold; color: #495057;">
                                <i class="fas fa-tag" style="color: #28a745; width: 20px;"></i> Prefijo:
                            </div>
                            <div style="background-color: white; padding: 8px 12px; border-radius: 5px; border: 1px solid #dee2e6;">
                                ${$(this).data('prefijo')}
                            </div>
                            
                            <!-- Fecha Activación -->
                            <div style="font-weight: bold; color: #495057;">
                                <i class="fas fa-play-circle" style="color: #28a745; width: 20px;"></i> Activación:
                            </div>
                            <div style="background-color: white; padding: 8px 12px; border-radius: 5px; border: 1px solid #dee2e6;">
                                ${$(this).data('activacion')}
                            </div>
                            
                            <!-- Fecha Vigencia -->
                            <div style="font-weight: bold; color: #495057;">
                                <i class="fas fa-stop-circle" style="color: #dc3545; width: 20px;"></i> Vigencia:
                            </div>
                            <div style="background-color: white; padding: 8px 12px; border-radius: 5px; border: 1px solid #dee2e6;">
                                ${$(this).data('vigencia')}
                            </div>
                            
                            <!-- Estado -->
                            <div style="font-weight: bold; color: #495057;">
                                <i class="fas fa-toggle-on" style="color: #6f42c1; width: 20px;"></i> Estado:
                            </div>
                            <div>
                                <span style="background-color: ${colorEstado}; color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold;">
                                    ${estado}
                                </span>
                            </div>
                            
                        </div>
                        
                        <!-- Observación (fila completa) -->
                        <div style="margin-top: 20px;">
                            <div style="font-weight: bold; color: #495057; margin-bottom: 8px;">
                                <i class="fas fa-comment" style="color: #6c757d;"></i> Observación:
                            </div>
                            <div style="background-color: white; padding: 12px; border-radius: 5px; border: 1px solid #dee2e6; min-height: 60px;">
                                ${$(this).data('observacion') || '<span style="color: #999;">Sin observación</span>'}
                            </div>
                        </div>
                        
                        <!-- Nota de seguridad -->
                        <div style="margin-top: 20px; padding: 10px; background-color: #fff3cd; border-radius: 5px; border-left: 4px solid #ffc107;">
                            <i class="fas fa-shield-alt" style="color: #856404;"></i>
                            <span style="color: #856404; margin-left: 8px; font-size: 0.9em;">
                                Por seguridad, la llave y token no se muestran
                            </span>
                        </div>
                        
                    </div>
                </div>
            `,
            icon: 'info',
            confirmButtonText: 'Cerrar',
            confirmButtonColor: '#6c757d',
            width: '600px'
        });
    });

    /* =========================
       EDITAR (MEJORADO)
    ========================= */
    $(document).on('click', '.btnEditar', function () {
        let id = $(this).data('id');
        let estadoActual = $(this).data('estado');
        
        Swal.fire({
            title: '✏️ Editar Credencial FEL',
            html: `
                <div style="text-align: left; margin: 15px 0; max-height: 70vh; overflow-y: auto; padding-right: 10px;">
                    <div style="background-color: #f8f9fa; padding: 20px; border-radius: 8px;">
                        
                        <!-- ID (solo informativo) -->
                        <div style="background-color: #e9ecef; border-radius: 5px; padding: 8px; margin-bottom: 20px; text-align: center;">
                            <span style="font-weight: bold;">Editando Credencial #${id}</span>
                        </div>
                        
                        <!-- Campos del formulario -->
                        <div style="margin-bottom: 15px;">
                            <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                <i class="fas fa-user" style="margin-right: 5px; color: #007bff;"></i>
                                Usuario Emisor <span style="color: #dc3545;">*</span>
                            </label>
                            <input id="usuarioEmisor" class="swal2-input" 
                                style="width: 100%; margin: 0;" 
                                value="${$(this).data('usuario')}" 
                                placeholder="Ingrese el usuario">
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                <i class="fas fa-tag" style="margin-right: 5px; color: #28a745;"></i>
                                Prefijo Emisor <span style="color: #dc3545;">*</span>
                            </label>
                            <input id="prefijoEmisor" class="swal2-input" 
                                style="width: 100%; margin: 0;" 
                                value="${$(this).data('prefijo')}" 
                                placeholder="Ej: FEL">
                        </div>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                            <div>
                                <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                    <i class="fas fa-play-circle" style="margin-right: 5px; color: #28a745;"></i>
                                    Fecha Activación
                                </label>
                                <input id="fechaActivacion" type="date" class="swal2-input" 
                                    style="width: 100%; margin: 0;" 
                                    value="${$(this).data('activacion')}">
                            </div>
                            <div>
                                <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                    <i class="fas fa-stop-circle" style="margin-right: 5px; color: #dc3545;"></i>
                                    Fecha Vigencia
                                </label>
                                <input id="fechaVigencia" type="date" class="swal2-input" 
                                    style="width: 100%; margin: 0;" 
                                    value="${$(this).data('vigencia')}">
                            </div>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                <i class="fas fa-comment" style="margin-right: 5px; color: #6c757d;"></i>
                                Observación
                            </label>
                            <textarea id="observacion" class="swal2-textarea" 
                                style="width: 100%; min-height: 80px; margin: 0;" 
                                placeholder="Notas adicionales...">${$(this).data('observacion') || ''}</textarea>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 5px;">
                                <i class="fas fa-toggle-on" style="margin-right: 5px; color: #6f42c1;"></i>
                                Estado
                            </label>
                            <select id="estados_id" class="swal2-select" 
                                style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ced4da;">
                                <option value="1" ${estadoActual == 1 ? 'selected' : ''}>🟢 Activo</option>
                                <option value="0" ${estadoActual == 0 ? 'selected' : ''}>🔴 Inactivo</option>
                            </select>
                        </div>
                        
                        <!-- Nota informativa -->
                        <div style="margin-top: 20px; padding: 10px; background-color: #e7f3ff; border-radius: 5px;">
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <i class="fas fa-info-circle" style="color: #004085;"></i>
                                <span style="color: #004085; font-size: 0.9em;">
                                    Los campos marcados con <span style="color: #dc3545;">*</span> son obligatorios.
                                    Token y Llave no se muestran por seguridad.
                                </span>
                            </div>
                        </div>
                        
                    </div>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: '💾 Actualizar',
            cancelButtonText: '❌ Cancelar',
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            width: '600px',
            
            preConfirm: () => {
                const usuario = $('#usuarioEmisor').val();
                const prefijo = $('#prefijoEmisor').val();
                
                if (!usuario || usuario.trim() === '') {
                    Swal.showValidationMessage('El usuario emisor es obligatorio');
                    return false;
                }
                if (!prefijo || prefijo.trim() === '') {
                    Swal.showValidationMessage('El prefijo emisor es obligatorio');
                    return false;
                }
                
                return {
                    usuarioEmisor: usuario,
                    prefijoEmisor: prefijo,
                    observacion: $('#observacion').val(),
                    fechaActivacion: $('#fechaActivacion').val(),
                    fechaVigencia: $('#fechaVigencia').val(),
                    estados_id: $('#estados_id').val()
                };
            }
        }).then(r => {
            if (r.isConfirmed) {
                Swal.fire({
                    title: 'Actualizando...',
                    text: 'Por favor espere',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                $.ajax({
                    url: "credenciales-f-e-ls/" + id,
                    type: 'PUT',
                    data: r.value,
                    success: () => {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Actualizado!',
                            text: 'La credencial se actualizó correctamente',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        tabla.ajax.reload(null, false);
                    },
                    error: (xhr) => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON?.message || 'Error al actualizar'
                        });
                    }
                });
            }
        });
    });

    /* =========================
       ELIMINAR (MEJORADO)
    ========================= */
    $(document).on('click', '.btnEliminar', function () {
        let id = $(this).data('id');
        let fila = $(this).closest('tr');
        let usuario = fila.find('td:eq(1)').text(); // Columna de usuario
        
        Swal.fire({
            title: '¿Eliminar Credencial?',
            html: `
                <div style="text-align: center;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 48px; color: #dc3545; margin-bottom: 15px;"></i>
                    <p style="font-size: 1.1em; margin-bottom: 10px;">
                        ¿Estás seguro de eliminar la credencial?
                    </p>
                    <p style="background-color: #f8f9fa; padding: 10px; border-radius: 5px;">
                        <strong>Usuario:</strong> ${usuario}<br>
                        <strong>ID:</strong> #${id}
                    </p>
                    <p style="color: #dc3545; font-weight: bold;">
                        ¡Esta acción no se puede deshacer!
                    </p>
                </div>
            `,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '🗑️ Sí, eliminar',
            cancelButtonText: '❌ Cancelar',
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            reverseButtons: true
        }).then(r => {
            if (r.isConfirmed) {
                Swal.fire({
                    title: 'Eliminando...',
                    text: 'Por favor espere',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                $.ajax({
                    url: "credenciales-f-e-ls/" + id,
                    type: 'DELETE',
                    success: () => {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Eliminado!',
                            text: 'La credencial ha sido eliminada',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        tabla.ajax.reload(null, false);
                    },
                    error: (xhr) => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON?.message || 'Error al eliminar'
                        });
                    }
                });
            }
        });
    });

});
</script>

<!-- Estilos adicionales para mejorar la apariencia -->
<style>
    /* Mejoras para los modales de SweetAlert */
    .swal2-popup {
        font-family: inherit;
    }
    
    .swal2-input, .swal2-textarea, .swal2-select {
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }
    
    /* Animación para los botones de acción */
    .btn-group .btn {
        transition: all 0.2s;
    }
    
    .btn-group .btn:hover {
        transform: translateY(-2px);
    }
    
    /* Mejoras para la tabla */
    .table-hover tbody tr:hover {
        background-color: rgba(0,123,255,0.05);
    }
    
    .badge {
        font-size: 0.85em;
        padding: 0.5em 0.75em;
    }
</style>
@endsection