@extends('layouts.admin')

@section('title')
    @lang('translation.Gestión de Roles')
@endsection

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('build/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Select2 -->
    <link href="{{ URL::asset('build/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            <a href="{{ route('admin.usuarios.index') }}">Usuarios</a>
        @endslot
        @slot('title')
            Gestión de Roles
        @endslot
    @endcomponent

    <div class="row">
        <!-- Estadísticas de Roles -->
        <div class="col-xl-12">
            <div class="row">
                <div class="col-md-3">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Total Administradores</p>
                                    <h4 class="mb-0">{{ $estadisticas['admins'] ?? 0 }}</h4>
                                </div>
                                <div class="flex-shrink-0 align-self-center">
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-danger">
                                        <span class="avatar-title">
                                            <i class="bx bx-shield font-size-24"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Total Propietarios</p>
                                    <h4 class="mb-0">{{ $estadisticas['propietarios'] ?? 0 }}</h4>
                                </div>
                                <div class="flex-shrink-0 align-self-center">
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-warning">
                                        <span class="avatar-title">
                                            <i class="bx bx-building font-size-24"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Total Usuarios</p>
                                    <h4 class="mb-0">{{ $estadisticas['usuarios'] ?? 0 }}</h4>
                                </div>
                                <div class="flex-shrink-0 align-self-center">
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-success">
                                        <span class="avatar-title">
                                            <i class="bx bx-user font-size-24"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Total Usuarios</p>
                                    <h4 class="mb-0">{{ $estadisticas['total'] ?? 0 }}</h4>
                                </div>
                                <div class="flex-shrink-0 align-self-center">
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-info">
                                        <span class="avatar-title">
                                            <i class="bx bx-group font-size-24"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Filtros y Acciones -->
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h4 class="card-title mb-0">Gestión de Roles de Usuario</h4>
                        </div>
                        <div class="col-auto">
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCambioMasivo">
                                    <i class="bx bx-transfer"></i> Cambio Masivo
                                </button>
                                <button type="button" class="btn btn-info" onclick="exportarRoles()">
                                    <i class="bx bx-download"></i> Exportar
                                </button>
                                <button type="button" class="btn btn-success" onclick="actualizarTabla()">
                                    <i class="bx bx-refresh"></i> Actualizar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label for="filtroRol" class="form-label">Filtrar por Rol</label>
                            <select class="form-select" id="filtroRol" onchange="filtrarTabla()">
                                <option value="">Todos los roles</option>
                                <option value="admin">Administrador</option>
                                <option value="propietario">Propietario</option>
                                <option value="usuario">Usuario</option>
                            </select>
                        </div>
                        
                        <div class="col-md-3">
                            <label for="filtroEstado" class="form-label">Filtrar por Estado</label>
                            <select class="form-select" id="filtroEstado" onchange="filtrarTabla()">
                                <option value="">Todos los estados</option>
                                <option value="activo">Activo</option>
                                <option value="inactivo">Inactivo</option>
                                <option value="suspendido">Suspendido</option>
                            </select>
                        </div>
                        
                        <div class="col-md-3">
                            <label for="filtroVerificado" class="form-label">Email Verificado</label>
                            <select class="form-select" id="filtroVerificado" onchange="filtrarTabla()">
                                <option value="">Todos</option>
                                <option value="si">Verificado</option>
                                <option value="no">No verificado</option>
                            </select>
                        </div>
                        
                        <div class="col-md-3">
                            <label for="buscarUsuario" class="form-label">Buscar Usuario</label>
                            <input type="text" class="form-control" id="buscarUsuario" placeholder="Nombre, email..." onkeyup="filtrarTabla()">
                        </div>
                    </div>
                    
                    <!-- Tabla de Usuarios -->
                    <div class="table-responsive">
                        <table class="table table-nowrap table-hover mb-0" id="tablaRoles">
                            <thead class="table-light">
                                <tr>
                                    <th>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                                        </div>
                                    </th>
                                    <th>Usuario</th>
                                    <th>Email</th>
                                    <th>Rol Actual</th>
                                    <th>Estado</th>
                                    <th>Email Verificado</th>
                                    <th>Último Acceso</th>
                                    <th>Registro</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($usuarios ?? [] as $usuario)
                                    <tr>
                                        <td>
                                            <div class="form-check">
                                                <input class="form-check-input usuario-checkbox" type="checkbox" value="{{ $usuario->id }}">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-3">
                                                    <img src="{{ $usuario->avatar ? asset('storage/' . $usuario->avatar) : asset('images/users/avatar-default.svg') }}" 
                                                         alt="Avatar" class="rounded-circle" width="40" height="40" style="object-fit: cover;">
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="mb-0">{{ $usuario->nombre }} {{ $usuario->apellido }}</h6>
                                                    <p class="text-muted mb-0 font-size-12">ID: {{ $usuario->id }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $usuario->email }}</td>
                                        <td>
                                            <span class="badge bg-{{ $usuario->rol == 'admin' ? 'danger' : ($usuario->rol == 'propietario' ? 'warning' : 'success') }} fs-6">
                                                <i class="bx bx-{{ $usuario->rol == 'admin' ? 'shield' : ($usuario->rol == 'propietario' ? 'building' : 'user') }} me-1"></i>
                                                {{ ucfirst($usuario->rol) }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ $usuario->estado == 'activo' ? 'success' : ($usuario->estado == 'inactivo' ? 'warning' : 'danger') }}">
                                                {{ ucfirst($usuario->estado) }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($usuario->email_verified_at)
                                                <span class="badge bg-success">
                                                    <i class="bx bx-check-circle"></i> Verificado
                                                </span>
                                            @else
                                                <span class="badge bg-warning">
                                                    <i class="bx bx-error-circle"></i> Pendiente
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($usuario->last_login_at)
                                                <span class="text-muted">{{ $usuario->last_login_at->format('d/m/Y H:i') }}</span>
                                                <br><small class="text-muted">{{ $usuario->last_login_at->diffForHumans() }}</small>
                                            @else
                                                <span class="text-muted">Nunca</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="text-muted">{{ $usuario->created_at->format('d/m/Y') }}</span>
                                            <br><small class="text-muted">{{ $usuario->created_at->diffForHumans() }}</small>
                                        </td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" 
                                                        type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="bx bx-dots-horizontal-rounded"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end">
                                                    <li><a class="dropdown-item" href="{{ route('admin.usuarios.show', $usuario->id) }}">Ver Perfil</a></li>
                                                    <li><a class="dropdown-item" href="{{ route('admin.usuarios.edit', $usuario->id) }}">Editar</a></li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li><a class="dropdown-item" href="#" onclick="cambiarRol({{ $usuario->id }}, '{{ $usuario->rol }}')">Cambiar Rol</a></li>
                                                    @if($usuario->estado == 'activo')
                                                        <li><a class="dropdown-item text-warning" href="#" onclick="cambiarEstado({{ $usuario->id }}, 'inactivo')">Desactivar</a></li>
                                                    @else
                                                        <li><a class="dropdown-item text-success" href="#" onclick="cambiarEstado({{ $usuario->id }}, 'activo')">Activar</a></li>
                                                    @endif
                                                    @if(!$usuario->email_verified_at)
                                                        <li><a class="dropdown-item" href="#" onclick="verificarEmail({{ $usuario->id }})">Verificar Email</a></li>
                                                    @endif
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li><a class="dropdown-item text-danger" href="#" onclick="eliminarUsuario({{ $usuario->id }})">Eliminar</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center text-muted py-4">
                                            <i class="bx bx-user-x font-size-24 d-block mb-2"></i>
                                            No hay usuarios registrados
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Paginación -->
                    @if(isset($usuarios) && $usuarios->hasPages())
                        <div class="row mt-3">
                            <div class="col-sm-12 col-md-5">
                                <div class="dataTables_info">
                                    Mostrando {{ $usuarios->firstItem() }} a {{ $usuarios->lastItem() }} de {{ $usuarios->total() }} registros
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-7">
                                <div class="dataTables_paginate">
                                    {{ $usuarios->appends(request()->query())->links('pagination.custom') }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Cambio Masivo de Roles -->
    <div class="modal fade" id="modalCambioMasivo" tabindex="-1" aria-labelledby="modalCambioMasivoLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCambioMasivoLabel">Cambio Masivo de Roles</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formCambioMasivo">
                    <div class="modal-body">
                        <div class="alert alert-info">
                            <i class="bx bx-info-circle me-2"></i>
                            Seleccione los usuarios en la tabla y elija el nuevo rol para aplicar el cambio masivo.
                        </div>
                        
                        <div class="mb-3">
                            <label for="nuevoRolMasivo" class="form-label">Nuevo Rol <span class="text-danger">*</span></label>
                            <select class="form-select" id="nuevoRolMasivo" required>
                                <option value="">Seleccionar rol...</option>
                                <option value="admin">Administrador</option>
                                <option value="propietario">Propietario</option>
                                <option value="usuario">Usuario</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="motivoCambio" class="form-label">Motivo del Cambio</label>
                            <textarea class="form-control" id="motivoCambio" rows="3" placeholder="Opcional: Describa el motivo del cambio de rol..."></textarea>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="notificarCambio" checked>
                                <label class="form-check-label" for="notificarCambio">
                                    Notificar a los usuarios sobre el cambio de rol
                                </label>
                            </div>
                        </div>
                        
                        <div id="usuariosSeleccionados" class="border rounded p-3 bg-light">
                            <h6 class="mb-2">Usuarios Seleccionados:</h6>
                            <div id="listaUsuariosSeleccionados">
                                <p class="text-muted mb-0">No hay usuarios seleccionados</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="bx bx-transfer"></i> Aplicar Cambios
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Cambio Individual de Rol -->
    <div class="modal fade" id="modalCambioRol" tabindex="-1" aria-labelledby="modalCambioRolLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCambioRolLabel">Cambiar Rol de Usuario</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formCambioRol">
                    <div class="modal-body">
                        <div id="infoUsuario" class="mb-3">
                            <!-- Información del usuario se carga dinámicamente -->
                        </div>
                        
                        <div class="mb-3">
                            <label for="rolActual" class="form-label">Rol Actual</label>
                            <input type="text" class="form-control" id="rolActual" readonly>
                        </div>
                        
                        <div class="mb-3">
                            <label for="nuevoRol" class="form-label">Nuevo Rol <span class="text-danger">*</span></label>
                            <select class="form-select" id="nuevoRol" required>
                                <option value="">Seleccionar nuevo rol...</option>
                                <option value="admin">Administrador</option>
                                <option value="propietario">Propietario</option>
                                <option value="usuario">Usuario</option>
                            </select>
                            <div class="form-text">El cambio de rol afectará los permisos del usuario inmediatamente.</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="motivoCambioIndividual" class="form-label">Motivo del Cambio</label>
                            <textarea class="form-control" id="motivoCambioIndividual" rows="3" placeholder="Opcional: Describa el motivo del cambio de rol..."></textarea>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="notificarCambioIndividual" checked>
                                <label class="form-check-label" for="notificarCambioIndividual">
                                    Notificar al usuario sobre el cambio de rol
                                </label>
                            </div>
                        </div>
                        
                        <input type="hidden" id="usuarioId">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="bx bx-check"></i> Cambiar Rol
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- DataTables -->
    <script src="{{ URL::asset('build/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Select2 -->
    <script src="{{ URL::asset('build/libs/select2/js/select2.min.js') }}"></script>
    
    <script>
        $(document).ready(function() {
            // Inicializar DataTable
            $('#tablaRoles').DataTable({
                pageLength: 25,
                responsive: true,
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json'
                },
                order: [[7, 'desc']], // Ordenar por fecha de registro
                columnDefs: [
                    { orderable: false, targets: [0, 8] } // Deshabilitar ordenamiento en checkbox y acciones
                ]
            });
            
            // Inicializar Select2
            $('#nuevoRolMasivo, #nuevoRol').select2({
                dropdownParent: $('.modal')
            });
            
            // Actualizar lista de usuarios seleccionados
            $('.usuario-checkbox').on('change', function() {
                actualizarUsuariosSeleccionados();
            });
            
            // Form cambio masivo
            $('#formCambioMasivo').on('submit', function(e) {
                e.preventDefault();
                procesarCambioMasivo();
            });
            
            // Form cambio individual
            $('#formCambioRol').on('submit', function(e) {
                e.preventDefault();
                procesarCambioIndividual();
            });
        });
        
        function toggleSelectAll() {
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('.usuario-checkbox');
            
            checkboxes.forEach(checkbox => {
                checkbox.checked = selectAll.checked;
            });
            
            actualizarUsuariosSeleccionados();
        }
        
        function actualizarUsuariosSeleccionados() {
            const checkboxes = document.querySelectorAll('.usuario-checkbox:checked');
            const lista = document.getElementById('listaUsuariosSeleccionados');
            
            if (checkboxes.length === 0) {
                lista.innerHTML = '<p class="text-muted mb-0">No hay usuarios seleccionados</p>';
            } else {
                let html = '<div class="d-flex flex-wrap gap-2">';
                checkboxes.forEach(checkbox => {
                    const row = checkbox.closest('tr');
                    const nombre = row.querySelector('h6').textContent;
                    const rol = row.querySelector('.badge').textContent.trim();
                    
                    html += `<span class="badge bg-light text-dark border">${nombre} (${rol})</span>`;
                });
                html += '</div>';
                lista.innerHTML = html;
            }
        }
        
        function cambiarRol(usuarioId, rolActual) {
            // Cargar información del usuario
            fetch(`/admin/usuarios/${usuarioId}/info`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('infoUsuario').innerHTML = `
                        <div class="d-flex align-items-center p-3 bg-light rounded">
                            <img src="${data.avatar || '/images/users/avatar-default.svg'}" 
                                 alt="Avatar" class="rounded-circle me-3" width="50" height="50" style="object-fit: cover;">
                            <div>
                                <h6 class="mb-0">${data.nombre} ${data.apellido}</h6>
                                <p class="text-muted mb-0">${data.email}</p>
                            </div>
                        </div>
                    `;
                    
                    document.getElementById('rolActual').value = rolActual.charAt(0).toUpperCase() + rolActual.slice(1);
                    document.getElementById('usuarioId').value = usuarioId;
                    
                    // Remover el rol actual de las opciones
                    const selectNuevoRol = document.getElementById('nuevoRol');
                    Array.from(selectNuevoRol.options).forEach(option => {
                        option.disabled = option.value === rolActual;
                    });
                    
                    $('#modalCambioRol').modal('show');
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire('Error', 'No se pudo cargar la información del usuario', 'error');
                });
        }
        
        function procesarCambioMasivo() {
            const checkboxes = document.querySelectorAll('.usuario-checkbox:checked');
            const nuevoRol = document.getElementById('nuevoRolMasivo').value;
            const motivo = document.getElementById('motivoCambio').value;
            const notificar = document.getElementById('notificarCambio').checked;
            
            if (checkboxes.length === 0) {
                Swal.fire('Advertencia', 'Debe seleccionar al menos un usuario', 'warning');
                return;
            }
            
            if (!nuevoRol) {
                Swal.fire('Advertencia', 'Debe seleccionar un nuevo rol', 'warning');
                return;
            }
            
            const usuariosIds = Array.from(checkboxes).map(cb => cb.value);
            
            Swal.fire({
                title: '¿Confirmar cambio masivo?',
                text: `Se cambiará el rol de ${usuariosIds.length} usuario(s) a ${nuevoRol}`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Sí, cambiar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Aquí harías la petición AJAX
                    const formData = {
                        usuarios: usuariosIds,
                        nuevo_rol: nuevoRol,
                        motivo: motivo,
                        notificar: notificar
                    };
                    
                    // Simular petición AJAX
                    setTimeout(() => {
                        Swal.fire('¡Éxito!', 'Roles actualizados correctamente', 'success');
                        $('#modalCambioMasivo').modal('hide');
                        location.reload();
                    }, 1000);
                }
            });
        }
        
        function procesarCambioIndividual() {
            const usuarioId = document.getElementById('usuarioId').value;
            const nuevoRol = document.getElementById('nuevoRol').value;
            const motivo = document.getElementById('motivoCambioIndividual').value;
            const notificar = document.getElementById('notificarCambioIndividual').checked;
            
            if (!nuevoRol) {
                Swal.fire('Advertencia', 'Debe seleccionar un nuevo rol', 'warning');
                return;
            }
            
            Swal.fire({
                title: '¿Confirmar cambio de rol?',
                text: `Se cambiará el rol del usuario a ${nuevoRol}`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Sí, cambiar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Aquí harías la petición AJAX
                    const formData = {
                        usuario_id: usuarioId,
                        nuevo_rol: nuevoRol,
                        motivo: motivo,
                        notificar: notificar
                    };
                    
                    // Simular petición AJAX
                    setTimeout(() => {
                        Swal.fire('¡Éxito!', 'Rol actualizado correctamente', 'success');
                        $('#modalCambioRol').modal('hide');
                        location.reload();
                    }, 1000);
                }
            });
        }
        
        function cambiarEstado(usuarioId, nuevoEstado) {
            const accion = nuevoEstado === 'activo' ? 'activar' : 'desactivar';
            
            Swal.fire({
                title: `¿${accion.charAt(0).toUpperCase() + accion.slice(1)} usuario?`,
                text: `¿Está seguro que desea ${accion} este usuario?`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: `Sí, ${accion}`,
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Aquí harías la petición AJAX
                    setTimeout(() => {
                        Swal.fire('¡Éxito!', `Usuario ${accion}do correctamente`, 'success');
                        location.reload();
                    }, 1000);
                }
            });
        }
        
        function verificarEmail(usuarioId) {
            Swal.fire({
                title: 'Verificar Email',
                text: '¿Marcar el email como verificado?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Sí, verificar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Aquí harías la petición AJAX
                    setTimeout(() => {
                        Swal.fire('¡Verificado!', 'Email marcado como verificado', 'success');
                        location.reload();
                    }, 1000);
                }
            });
        }
        
        function eliminarUsuario(usuarioId) {
            Swal.fire({
                title: '¿Eliminar Usuario?',
                text: 'Esta acción no se puede deshacer',
                icon: 'error',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#d33'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Aquí harías la petición AJAX
                    setTimeout(() => {
                        Swal.fire('¡Eliminado!', 'Usuario eliminado correctamente', 'success');
                        location.reload();
                    }, 1000);
                }
            });
        }
        
        function filtrarTabla() {
            const tabla = $('#tablaRoles').DataTable();
            
            const filtroRol = document.getElementById('filtroRol').value;
            const filtroEstado = document.getElementById('filtroEstado').value;
            const filtroVerificado = document.getElementById('filtroVerificado').value;
            const buscarUsuario = document.getElementById('buscarUsuario').value;
            
            // Aplicar filtros
            tabla.column(3).search(filtroRol);
            tabla.column(4).search(filtroEstado);
            tabla.column(5).search(filtroVerificado === 'si' ? 'Verificado' : (filtroVerificado === 'no' ? 'Pendiente' : ''));
            tabla.search(buscarUsuario);
            
            tabla.draw();
        }
        
        function exportarRoles() {
            Swal.fire({
                title: 'Exportar Roles',
                text: 'Seleccione el formato de exportación',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Excel',
                cancelButtonText: 'PDF',
                showDenyButton: true,
                denyButtonText: 'CSV'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.open('/admin/usuarios/roles/export/excel', '_blank');
                } else if (result.isDenied) {
                    window.open('/admin/usuarios/roles/export/csv', '_blank');
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    window.open('/admin/usuarios/roles/export/pdf', '_blank');
                }
            });
        }
        
        function actualizarTabla() {
            location.reload();
        }
        
        // Mostrar mensaje de éxito si existe
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: '¡Éxito!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false
            });
        @endif
    </script>
@endsection