<?php
include_once '../../controllers/RolController.php';
$rolController = new RolController();
$roles = [];

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_POST['agregar'])) {
        $resultado = $rolController->agregarRol($_POST['nombrederol'], $_POST['descripcion']);
        if ($resultado) {
            echo "<script>
                document.addEventListener('DOMContentLoaded', function() {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: 'Rol agregado correctamente',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                });
            </script>";
        } else {
            echo "<script>
                document.addEventListener('DOMContentLoaded', function() {
                    Swal.fire({
                        title: 'Error',
                        text: 'No se pudo agregar el rol',
                        icon: 'error',
                        confirmButtonColor: '#ef4444'
                    });
                });
            </script>";
        }
    } elseif (isset($_POST['actualizar'])) {
        $resultado = $rolController->actualizarRol($_POST['idRol'], $_POST['nombrederol'], $_POST['descripcion']);
        if ($resultado) {
            echo "<script>
                document.addEventListener('DOMContentLoaded', function() {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: 'Rol actualizado correctamente',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                });
            </script>";
        } else {
            echo "<script>
                document.addEventListener('DOMContentLoaded', function() {
                    Swal.fire({
                        title: 'Error',
                        text: 'No se pudo actualizar el rol',
                        icon: 'error',
                        confirmButtonColor: '#ef4444'
                    });
                });
            </script>";
        }
    } elseif (isset($_POST['eliminar'])) {
        $resultado = $rolController->eliminarRol($_POST['idRol']);
        if ($resultado) {
            echo "<script>
                document.addEventListener('DOMContentLoaded', function() {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: 'Rol eliminado correctamente',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                });
            </script>";
        } else {
            echo "<script>
                document.addEventListener('DOMContentLoaded', function() {
                    Swal.fire({
                        title: 'Error',
                        text: 'No se pudo eliminar el rol',
                        icon: 'error',
                        confirmButtonColor: '#ef4444'
                    });
                });
            </script>";
        }
    } elseif (isset($_POST['visualizar'])) {
        $roles = $rolController->listarRoles();
    }
}

// Cargar roles automáticamente al cargar la página
if (empty($roles)) {
    $roles = $rolController->listarRoles();
}
?>

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestionar Roles</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        :root {
            --primary: #6366f1;
            --primary-hover: #4f46e5;
            --secondary: #06b6d4;
            --secondary-hover: #0891b2;
            --accent: #f43f5e;
            --accent-hover: #e11d48;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --info: #3b82f6;
            --background: #f8fafc;
            --foreground: #0f172a;
            --card: rgba(255, 255, 255, 0.8);
            --card-foreground: #1e293b;
            --border: #e2e8f0;
            --input: #e2e8f0;
            --ring: #6366f1;
            --muted: #94a3b8;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--background);
            color: var(--foreground);
            background-image: 
                radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.1) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.1) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(244, 63, 94, 0.1) 0px, transparent 50%),
                radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.1) 0px, transparent 50%);
            background-attachment: fixed;
            background-size: cover;
        }

        .glass {
            background: var(--card);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
        }

        .card {
            border-radius: 1.5rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
        }

        .btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10, 10);
            opacity: 0;
            transition: transform 0.5s, opacity 1s;
        }

        .btn:active::after {
            transform: scale(0, 0);
            opacity: 0.3;
            transition: 0s;
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background-color: var(--secondary);
            color: white;
        }

        .btn-secondary:hover {
            background-color: var(--secondary-hover);
            transform: translateY(-2px);
        }

        .btn-success {
            background-color: var(--success);
            color: white;
        }

        .btn-success:hover {
            background-color: #0d9488;
            transform: translateY(-2px);
        }

        .btn-warning {
            background-color: var(--warning);
            color: white;
        }

        .btn-warning:hover {
            background-color: #d97706;
            transform: translateY(-2px);
        }

        .btn-danger {
            background-color: var(--danger);
            color: white;
        }

        .btn-danger:hover {
            background-color: #b91c1c;
            transform: translateY(-2px);
        }

        .form-input {
            border: 1px solid var(--input);
            border-radius: 0.75rem;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.875rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            background-color: white;
            width: 100%;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--ring);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .form-textarea {
            border: 1px solid var(--input);
            border-radius: 0.75rem;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.875rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            background-color: white;
            width: 100%;
            min-height: 100px;
            resize: vertical;
        }

        .form-textarea:focus {
            outline: none;
            border-color: var(--ring);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .input-container {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .input-container svg {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted);
            width: 1.25rem;
            height: 1.25rem;
            z-index: 1;
        }

        .textarea-container svg {
            top: 1.5rem;
        }

        .input-container label {
            position: absolute;
            left: 2.5rem;
            top: 0;
            padding: 0 0.25rem;
            color: var(--muted);
            font-size: 0.75rem;
            font-weight: 500;
            transform: translateY(-50%);
            background-color: white;
            z-index: 1;
        }

        .fade-in {
            animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .slide-in {
            animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .scale-in {
            animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Icon pulse animation */
        .icon-container {
            position: relative;
            width: 40px;
            height: 40px;
        }

        .icon-pulse {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: currentColor;
            opacity: 0.2;
            animation: iconPulse 2s infinite;
        }

        @keyframes iconPulse {
            0% {
                transform: scale(1);
                opacity: 0.2;
            }
            50% {
                transform: scale(1.3);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 0.2;
            }
        }

        /* Table styles */
        .table-container {
            overflow-x: auto;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .table th {
            background-color: rgba(243, 244, 246, 0.8);
            padding: 1rem;
            text-align: left;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            color: var(--foreground);
            border-bottom: 1px solid var(--border);
        }

        .table td {
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            background-color: rgba(255, 255, 255, 0.6);
            transition: all 0.2s;
        }

        .table tr:last-child td {
            border-bottom: none;
        }

        .table tr:hover td {
            background-color: rgba(243, 244, 246, 0.8);
        }

        /* Scrollbar styles */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(243, 244, 246, 0.5);
            border-radius: 9999px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.5);
            border-radius: 9999px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.7);
        }
    </style>
</head>

<body>
    <div class="max-w-4xl mx-auto p-6">
        <!-- Header con animación -->
        <div class="text-center mb-8 animate__animated animate__fadeInDown">
            <div class="flex justify-center items-center mb-4">
                <div class="relative">
                    <img src="../../public/images/logo.png" alt="Logo de la Institución" class="w-32 z-10 relative">
                    <div class="absolute inset-0 bg-indigo-500 filter blur-xl opacity-20 rounded-full"></div>
                </div>
            </div>
            <h2 class="text-3xl font-bold text-gray-800 mt-4 relative inline-block">
                Gestionar Roles
                <span class="absolute bottom-0 left-0 w-full h-1.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-full"></span>
            </h2>
        </div>

        <!-- Botón de volver con animación -->
        <a href="dashboard.php" class="inline-flex items-center btn btn-primary px-6 py-2.5 rounded-full mb-6 animate__animated animate__fadeInLeft">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
            </svg>
            Volver al Menú Principal
        </a>

        <!-- Botón de visualizar -->
        <form action="gestion_roles.php" method="post" class="mb-6">
            <button type="submit" name="visualizar" class="btn btn-success px-6 py-2.5 rounded-full inline-flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                    <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                </svg>
                Visualizar Roles
            </button>
        </form>

        <!-- Formulario para agregar/actualizar roles -->
        <div class="card glass p-8 mb-8 fade-in">
            <div class="flex items-center mb-6">
                <div class="icon-container mr-4">
                    <div class="icon-pulse bg-indigo-500"></div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-indigo-500 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">Agregar o Actualizar Rol</h3>
            </div>
            
            <form action="gestion_roles.php" method="post" id="rolForm">
                <input type="hidden" name="idRol" id="idRol">
                
                <div class="input-container">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                    <label for="nombrederol">Nombre del Rol</label>
                    <input type="text" id="nombrederol" name="nombrederol" required class="form-input">
                </div>
                
                <div class="input-container textarea-container">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    <label for="descripcion">Descripción</label>
                    <textarea id="descripcion" name="descripcion" required class="form-textarea"></textarea>
                </div>
                
                <div class="flex justify-center space-x-4 mt-8">
                    <button type="submit" name="agregar" class="btn btn-primary px-6 py-2.5 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                        Agregar Rol
                    </button>
                    <button type="submit" name="actualizar" class="btn btn-warning px-6 py-2.5 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                        </svg>
                        Actualizar Rol
                    </button>
                    <button type="button" onclick="limpiarFormulario()" class="btn btn-secondary px-6 py-2.5 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
                        </svg>
                        Limpiar
                    </button>
                </div>
            </form>
        </div>

        <!-- Tabla de roles -->
        <div class="card glass p-8 mb-8 fade-in">
            <div class="flex items-center mb-6">
                <div class="icon-container mr-4">
                    <div class="icon-pulse bg-blue-500"></div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-800">Lista de Roles</h3>
            </div>
            
            <?php if (!empty($roles)): ?>
                <div class="table-container glass">
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="rounded-tl-lg">ID</th>
                                <th>Nombre del Rol</th>
                                <th>Descripción</th>
                                <th class="rounded-tr-lg">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($roles as $index => $rol): ?>
                                <tr class="hover:bg-gray-50 transition-colors duration-150 ease-in-out" style="animation-delay: <?php echo $index * 0.05; ?>s">
                                    <td><?php echo $rol['idRol']; ?></td>
                                    <td class="font-medium"><?php echo $rol['nombrederol']; ?></td>
                                    <td><?php echo $rol['descripcion']; ?></td>
                                    <td>
                                        <div class="flex space-x-2">
                                            <button type="button" onclick="editarRol(<?php echo $rol['idRol']; ?>, '<?php echo addslashes($rol['nombrederol']); ?>', '<?php echo addslashes($rol['descripcion']); ?>')" class="btn btn-warning text-white px-4 py-2 rounded-full inline-flex items-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                                                </svg>
                                                Editar
                                            </button>
                                            <form action="gestion_roles.php" method="post" class="inline" onsubmit="return confirmarEliminacion()">
                                                <input type="hidden" name="idRol" value="<?php echo $rol['idRol']; ?>">
                                                <button type="submit" name="eliminar" class="btn btn-danger text-white px-4 py-2 rounded-full inline-flex items-center">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                                    </svg>
                                                    Eliminar
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            <?php else: ?>
                <div class="text-center py-8 text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <p class="text-lg font-medium">No se encontraron roles</p>
                    <p class="text-sm mt-2">Comienza agregando un nuevo rol usando el formulario de arriba</p>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <script>
    // Función para editar un rol
    function editarRol(id, nombre, descripcion) {
        document.getElementById('idRol').value = id;
        document.getElementById('nombrederol').value = nombre;
        document.getElementById('descripcion').value = descripcion;
        
        // Desplazar hacia el formulario
        document.getElementById('rolForm').scrollIntoView({ behavior: 'smooth' });
        
        // Resaltar los campos
        document.getElementById('nombrederol').classList.add('ring-2', 'ring-indigo-500');
        document.getElementById('descripcion').classList.add('ring-2', 'ring-indigo-500');
        
        // Quitar el resaltado después de un tiempo
        setTimeout(() => {
            document.getElementById('nombrederol').classList.remove('ring-2', 'ring-indigo-500');
            document.getElementById('descripcion').classList.remove('ring-2', 'ring-indigo-500');
        }, 2000);
    }
    
    // Función para limpiar el formulario
    function limpiarFormulario() {
        document.getElementById('idRol').value = '';
        document.getElementById('nombrederol').value = '';
        document.getElementById('descripcion').value = '';
    }
    
    // Función para confirmar eliminación
    function confirmarEliminacion() {
        return Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción no se puede deshacer",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            return result.isConfirmed;
        });
    }

    // Animación para las filas de la tabla
    document.addEventListener('DOMContentLoaded', function() {
        const rows = document.querySelectorAll('tbody tr');
        rows.forEach((row, index) => {
            row.style.animation = `fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) ${index * 0.1}s forwards`;
            row.style.opacity = '0';
        });
    });
    </script>
</body>

</html>

