<?php
include_once '../../controllers/DocenteController.php';
$docenteController = new DocenteController();
$docentes = [];

// Solo cargar docentes cuando se ha realizado un filtrado
$mostrarTabla = false;

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_POST['agregar'])) {
        $resultado = $docenteController->agregarDocente(
            $_POST['nombres_varchar'],
            $_POST['paterno_varchar'],
            $_POST['materno_varchar'],
            $_POST['ci_varchar'],
            $_POST['contrasena'],
            $_POST['ci_expe_varchar'],
            $_POST['fecha_nacimiento_dt'],
            $_POST['genero_varchar'],
            $_POST['celular_varchar'],
            $_POST['email_varchar'],
            $_POST['direccion_varchar'],
            $_POST['usuario_varchar'],
            $_POST['sucursal']
        );
        if ($resultado) {
            $alertType = "success";
            $alertMessage = "Docente agregado correctamente.";
        } else {
            $alertType = "error";
            $alertMessage = "Error al agregar docente.";
        }
    } elseif (isset($_POST['actualizar'])) {
        $contrasena = !empty($_POST['contrasena']) ? $_POST['contrasena'] : null;
        $resultado = $docenteController->actualizarDocente(
            $_POST['cod_docente_int'],
            $_POST['nombres_varchar'],
            $_POST['paterno_varchar'],
            $_POST['materno_varchar'],
            $_POST['ci_varchar'],
            $_POST['ci_expe_varchar'],
            $_POST['fecha_nacimiento_dt'],
            $_POST['genero_varchar'],
            $_POST['celular_varchar'],
            $_POST['email_varchar'],
            $_POST['direccion_varchar'],
            $_POST['usuario_varchar'],
            $_POST['sucursal'],
            $contrasena
        );
        if ($resultado) {
            $alertType = "success";
            $alertMessage = "Docente actualizado correctamente.";
        } else {
            $alertType = "error";
            $alertMessage = "Error al actualizar docente.";
        }
        // Mostrar la tabla después de actualizar
        $mostrarTabla = true;
        $docentes = $docenteController->listarDocentes();
    } elseif (isset($_POST['eliminar'])) {
        $resultado = $docenteController->eliminarDocente($_POST['cod_docente_int']);
        if ($resultado) {
            $alertType = "success";
            $alertMessage = "Docente eliminado correctamente.";
        } else {
            $alertType = "error";
            $alertMessage = "Error al eliminar docente.";
        }
        // Mostrar la tabla después de eliminar
        $mostrarTabla = true;
        $docentes = $docenteController->listarDocentes();
    } elseif (isset($_POST['filtrar'])) {
        $fechaInicio = $_POST['fecha_inicio'];
        $fechaFin = $_POST['fecha_fin'];
        $docentes = $docenteController->listarDocentesPorFecha($fechaInicio, $fechaFin);
        $mostrarTabla = true;
    }
}
?>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestión de Docentes</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                            950: '#082f49',
                        },
                        secondary: {
                            50: '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            300: '#c4b5fd',
                            400: '#a78bfa',
                            500: '#8b5cf6',
                            600: '#7c3aed',
                            700: '#6d28d9',
                            800: '#5b21b6',
                            900: '#4c1d95',
                            950: '#2e1065',
                        },
                        success: {
                            50: '#ecfdf5',
                            100: '#d1fae5',
                            500: '#10b981',
                            600: '#059669',
                            700: '#047857',
                        },
                        danger: {
                            50: '#fef2f2',
                            100: '#fee2e2',
                            500: '#ef4444',
                            600: '#dc2626',
                            700: '#b91c1c',
                        },
                        warning: {
                            50: '#fffbeb',
                            100: '#fef3c7',
                            500: '#f59e0b',
                            600: '#d97706',
                            700: '#b45309',
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.3s ease-out forwards',
                        'slide-up': 'slideUp 0.3s ease-out forwards',
                        'slide-down': 'slideDown 0.3s ease-out forwards',
                        'slide-in-right': 'slideInRight 0.3s ease-out forwards',
                        'slide-in-left': 'slideInLeft 0.3s ease-out forwards',
                        'bounce-in': 'bounceIn 0.3s ease-out forwards',
                        'scale-in': 'scaleIn 0.2s ease-out forwards',
                        'scale-out': 'scaleOut 0.2s ease-out forwards',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        slideDown: {
                            '0%': { transform: 'translateY(-20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        slideInRight: {
                            '0%': { transform: 'translateX(20px)', opacity: '0' },
                            '100%': { transform: 'translateX(0)', opacity: '1' },
                        },
                        slideInLeft: {
                            '0%': { transform: 'translateX(-20px)', opacity: '0' },
                            '100%': { transform: 'translateX(0)', opacity: '1' },
                        },
                        bounceIn: {
                            '0%': { transform: 'scale(0.8)', opacity: '0' },
                            '70%': { transform: 'scale(1.05)', opacity: '1' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        },
                        scaleIn: {
                            '0%': { transform: 'scale(0.9)', opacity: '0' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        },
                        scaleOut: {
                            '0%': { transform: 'scale(1)', opacity: '1' },
                            '100%': { transform: 'scale(0.9)', opacity: '0' },
                        },
                    },
                    boxShadow: {
                        'card': '0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
                        'card-hover': '0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                        'dropdown': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'button': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                        'button-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                    }
                }
            }
        }
    </script>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f9fafb;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
        }
        
        .card {
            transition: all 0.3s ease;
            border-radius: 0.75rem;
            overflow: hidden;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--tw-shadow-card-hover);
        }
        
        .btn {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        
        .btn:hover::after {
            animation: ripple 1s ease-out;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-primary {
            background-image: linear-gradient(to right, var(--tw-gradient-stops));
            --tw-gradient-from: #0ea5e9;
            --tw-gradient-to: #0284c7;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
            background-size: 200% auto;
            transition: 0.5s;
        }
        
        .btn-primary:hover {
            background-position: right center;
        }
        
        .btn-success {
            background-image: linear-gradient(to right, var(--tw-gradient-stops));
            --tw-gradient-from: #10b981;
            --tw-gradient-to: #059669;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
            background-size: 200% auto;
            transition: 0.5s;
        }
        
        .btn-success:hover {
            background-position: right center;
        }
        
        .btn-danger {
            background-image: linear-gradient(to right, var(--tw-gradient-stops));
            --tw-gradient-from: #ef4444;
            --tw-gradient-to: #dc2626;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
            background-size: 200% auto;
            transition: 0.5s;
        }
        
        .btn-danger:hover {
            background-position: right center;
        }
        
        .btn-warning {
            background-image: linear-gradient(to right, var(--tw-gradient-stops));
            --tw-gradient-from: #f59e0b;
            --tw-gradient-to: #d97706;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
            background-size: 200% auto;
            transition: 0.5s;
        }
        
        .btn-warning:hover {
            background-position: right center;
        }
        
        .table-container {
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .header-gradient {
            background: linear-gradient(to right, #0ea5e9, #0284c7);
        }
        
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }
        
        .modal-content {
            border-radius: 0.75rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        .tooltip {
            position: relative;
            display: inline-block;
        }
        
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        
        /* Animación para filas de tabla */
        .table-row-animate {
            animation: fadeIn 0.3s ease-out forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Estilos para scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #0ea5e9;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #0284c7;
        }
    </style>
</head>

<body x-data="{ 
    showDeleteModal: false, 
    showEditModal: false,
    currentDocente: null,
    formData: {
        cod_docente_int: '',
        nombres_varchar: '',
        paterno_varchar: '',
        materno_varchar: '',
        ci_varchar: '',
        ci_expe_varchar: '',
        fecha_nacimiento_dt: '',
        genero_varchar: '',
        celular_varchar: '',
        email_varchar: '',
        direccion_varchar: '',
        usuario_varchar: '',
        sucursal: '',
        contrasena: ''
    },
    resetForm() {
        this.formData = {
            cod_docente_int: '',
            nombres_varchar: '',
            paterno_varchar: '',
            materno_varchar: '',
            ci_varchar: '',
            ci_expe_varchar: '',
            fecha_nacimiento_dt: '',
            genero_varchar: '',
            celular_varchar: '',
            email_varchar: '',
            direccion_varchar: '',
            usuario_varchar: '',
            sucursal: '',
            contrasena: ''
        };
    },
    setFormData(docente) {
        this.formData = {
            cod_docente_int: docente.cod_docente_int,
            nombres_varchar: docente.nombres_varchar,
            paterno_varchar: docente.paterno_varchar,
            materno_varchar: docente.materno_varchar,
            ci_varchar: docente.ci_varchar,
            ci_expe_varchar: docente.ci_expe_varchar,
            fecha_nacimiento_dt: docente.fecha_nacimiento_dt,
            genero_varchar: docente.genero_varchar,
            celular_varchar: docente.celular_varchar,
            email_varchar: docente.email_varchar,
            direccion_varchar: docente.direccion_varchar,
            usuario_varchar: docente.usuario_varchar,
            sucursal: docente.sucursal,
            contrasena: ''
        };
    }
}">
    <!-- Alerta de SweetAlert2 -->
    <?php if (isset($alertType) && isset($alertMessage)): ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: '<?php echo $alertType; ?>',
                title: '<?php echo $alertType == "success" ? "¡Éxito!" : "¡Error!"; ?>',
                text: '<?php echo $alertMessage; ?>',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                toast: true,
                position: 'top-end',
                showClass: {
                    popup: 'animate_animated animate_fadeInDown'
                },
                hideClass: {
                    popup: 'animate_animated animate_fadeOutUp'
                }
            });
        });
    </script>
    <?php endif; ?>

    <div class="min-h-screen bg-gray-50 py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Header con logo y título -->
            <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 animate_animated animate_fadeIn">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="flex items-center mb-4 md:mb-0">
                        <div class="bg-primary-600 p-3 rounded-lg mr-4 shadow-lg">
                            <i class="fas fa-chalkboard-teacher text-white text-2xl"></i>
                        </div>
                        <div>
                            <h1 class="text-3xl font-bold text-gray-900">Gestión de Docentes</h1>
                            <p class="text-gray-600">Administra la información de los docentes de la institución</p>
                        </div>
                    </div>
                    <img src="../../public/images/logo.png" alt="Logo de la Institución" class="w-28 h-28 object-contain">
                </div>
            </div>
            
            <!-- Barra de navegación y acciones -->
            <div class="bg-white rounded-2xl shadow-lg p-4 mb-8">
                <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                    <a href="../superadmin/dashboard.php" class="btn btn-primary text-white py-2 px-4 rounded-lg flex items-center justify-center w-full md:w-auto">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <span>Volver al Dashboard</span>
                    </a>
                    
                    <button type="button" onclick="window.location.href='agregar_docente.php'" class="btn btn-success text-white py-2 px-4 rounded-lg flex items-center justify-center w-full md:w-auto">
                        <i class="fas fa-plus mr-2"></i>
                        <span>Agregar Nuevo Docente</span>
                    </button>
                </div>
            </div>
            
            <!-- Filtros y búsqueda -->
            <div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-filter text-primary-600 mr-2"></i>
                    Filtrar Docentes
                </h2>
                
                <form action="gestion_docentes.php" method="post" class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="fecha_inicio" class="block text-sm font-medium text-gray-700 mb-1">Fecha Inicio:</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="far fa-calendar-alt text-gray-400"></i>
                            </div>
                            <input type="date" id="fecha_inicio" name="fecha_inicio" required
                                class="block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200">
                        </div>
                    </div>
                    
                    <div>
                        <label for="fecha_fin" class="block text-sm font-medium text-gray-700 mb-1">Fecha Fin:</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="far fa-calendar-alt text-gray-400"></i>
                            </div>
                            <input type="date" id="fecha_fin" name="fecha_fin" required
                                class="block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200">
                        </div>
                    </div>
                    
                    <div class="flex items-end">
                        <button type="submit" name="filtrar" class="btn btn-primary text-white py-2.5 px-4 rounded-lg w-full flex items-center justify-center">
                            <i class="fas fa-search mr-2"></i>
                            <span>Buscar Docentes</span>
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- Tabla de docentes (solo se muestra después de filtrar) -->
            <?php if ($mostrarTabla): ?>
            <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 animate_animated animate_fadeIn">
                <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
                    <i class="fas fa-list text-primary-600 mr-2"></i>
                    Listado de Docentes
                </h2>
                
                <?php if (!empty($docentes)): ?>
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white rounded-lg overflow-hidden">
                            <thead>
                                <tr class="header-gradient text-white text-left">
                                    <th class="py-3 px-4 font-semibold">ID</th>
                                    <th class="py-3 px-4 font-semibold">Nombres</th>
                                    <th class="py-3 px-4 font-semibold">Apellidos</th>
                                    <th class="py-3 px-4 font-semibold">CI</th>
                                    <th class="py-3 px-4 font-semibold">Contacto</th>
                                    <th class="py-3 px-4 font-semibold">Usuario</th>
                                    <th class="py-3 px-4 font-semibold">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($docentes as $index => $docente): ?>
                                    <tr class="border-b border-gray-200 hover:bg-gray-50 transition-colors table-row-animate" style="animation-delay: <?php echo $index * 0.03; ?>s">
                                        <td class="py-3 px-4 text-gray-800"><?php echo $docente['cod_docente_int']; ?></td>
                                        <td class="py-3 px-4 text-gray-800"><?php echo $docente['nombres_varchar']; ?></td>
                                        <td class="py-3 px-4 text-gray-800"><?php echo $docente['paterno_varchar'] . ' ' . $docente['materno_varchar']; ?></td>
                                        <td class="py-3 px-4 text-gray-800"><?php echo $docente['ci_varchar'] . ' ' . $docente['ci_expe_varchar']; ?></td>
                                        <td class="py-3 px-4">
                                            <div class="flex flex-col">
                                                <span class="text-gray-800"><?php echo $docente['celular_varchar']; ?></span>
                                                <span class="text-gray-500 text-sm"><?php echo $docente['email_varchar']; ?></span>
                                            </div>
                                        </td>
                                        <td class="py-3 px-4 text-gray-800"><?php echo $docente['usuario_varchar']; ?></td>
                                        <td class="py-3 px-4">
                                            <div class="flex space-x-2">
                                                <button 
                                                    @click="setFormData(<?php echo htmlspecialchars(json_encode($docente)); ?>); showEditModal = true;" 
                                                    class="btn btn-warning text-white py-1.5 px-3 rounded-lg flex items-center justify-center tooltip">
                                                    <i class="fas fa-edit"></i>
                                                    <span class="tooltiptext">Editar</span>
                                                </button>
                                                <button 
                                                    @click="currentDocente = <?php echo $docente['cod_docente_int']; ?>; showDeleteModal = true;" 
                                                    class="btn btn-danger text-white py-1.5 px-3 rounded-lg flex items-center justify-center tooltip">
                                                    <i class="fas fa-trash-alt"></i>
                                                    <span class="tooltiptext">Eliminar</span>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php else: ?>
                    <div class="bg-gray-50 rounded-xl p-8 text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4">
                            <i class="fas fa-search text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">No se encontraron docentes</h3>
                        <p class="text-gray-600 mb-6">No hay docentes registrados que coincidan con los criterios de búsqueda.</p>
                        <button onclick="window.location.href='agregar_docente.php'" class="btn btn-primary text-white py-2 px-6 rounded-lg inline-flex items-center">
                            <i class="fas fa-plus mr-2"></i>
                            <span>Agregar Nuevo Docente</span>
                        </button>
                    </div>
                <?php endif; ?>
            </div>
            <?php endif; ?>
            
            <!-- Modal de confirmación de eliminación -->
            <div x-show="showDeleteModal" 
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 z-50 overflow-y-auto modal-backdrop flex items-center justify-center" 
                style="display: none;">
                <div class="relative bg-white rounded-2xl max-w-md w-full mx-auto p-6 shadow-2xl modal-content animate_animated animate_zoomIn">
                    <div class="text-center">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100 mb-4">
                            <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-medium text-gray-900 mb-2">Confirmar eliminación</h3>
                        <p class="text-gray-600 mb-6">¿Estás seguro de que deseas eliminar este docente? Esta acción no se puede deshacer.</p>
                        
                        <div class="flex justify-center space-x-4">
                            <button @click="showDeleteModal = false" class="btn bg-gray-200 text-gray-800 py-2 px-4 rounded-lg hover:bg-gray-300">
                                Cancelar
                            </button>
                            <form action="gestion_docentes.php" method="post" class="inline-block">
                                <input type="hidden" name="cod_docente_int" :value="currentDocente">
                                <button type="submit" name="eliminar" class="btn btn-danger text-white py-2 px-4 rounded-lg">
                                    Eliminar
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Modal de edición -->
            <div x-show="showEditModal" 
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 z-50 overflow-y-auto modal-backdrop flex items-center justify-center" 
                style="display: none;">
                <div class="relative bg-white rounded-2xl max-w-3xl w-full mx-auto p-6 shadow-2xl modal-content animate_animated animate_zoomIn">
                    <div class="absolute top-4 right-4">
                        <button @click="showEditModal = false" class="text-gray-400 hover:text-gray-600 transition-colors">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>
                    
                    <h3 class="text-xl font-medium text-gray-900 mb-6 flex items-center">
                        <i class="fas fa-user-edit text-primary-600 mr-2"></i>
                        Editar Docente
                    </h3>
                    
                    <form action="gestion_docentes.php" method="post" class="space-y-6">
                        <input type="hidden" name="cod_docente_int" :value="formData.cod_docente_int">
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="nombres_varchar" class="block text-sm font-medium text-gray-700 mb-1">Nombres:</label>
                                <input type="text" id="nombres_varchar" name="nombres_varchar" x-model="formData.nombres_varchar" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="paterno_varchar" class="block text-sm font-medium text-gray-700 mb-1">Apellido Paterno:</label>
                                <input type="text" id="paterno_varchar" name="paterno_varchar" x-model="formData.paterno_varchar" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="materno_varchar" class="block text-sm font-medium text-gray-700 mb-1">Apellido Materno:</label>
                                <input type="text" id="materno_varchar" name="materno_varchar" x-model="formData.materno_varchar"
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="ci_varchar" class="block text-sm font-medium text-gray-700 mb-1">CI:</label>
                                <input type="text" id="ci_varchar" name="ci_varchar" x-model="formData.ci_varchar" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="ci_expe_varchar" class="block text-sm font-medium text-gray-700 mb-1">Expedido en:</label>
                                <select id="ci_expe_varchar" name="ci_expe_varchar" x-model="formData.ci_expe_varchar" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                                    <option value="LP">La Paz (LP)</option>
                                    <option value="CB">Cochabamba (CB)</option>
                                    <option value="SC">Santa Cruz (SC)</option>
                                    <option value="OR">Oruro (OR)</option>
                                    <option value="PT">Potosí (PT)</option>
                                    <option value="CH">Chuquisaca (CH)</option>
                                    <option value="TJ">Tarija (TJ)</option>
                                    <option value="BN">Beni (BN)</option>
                                    <option value="PD">Pando (PD)</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="fecha_nacimiento_dt" class="block text-sm font-medium text-gray-700 mb-1">Fecha de Nacimiento:</label>
                                <input type="date" id="fecha_nacimiento_dt" name="fecha_nacimiento_dt" x-model="formData.fecha_nacimiento_dt" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="genero_varchar" class="block text-sm font-medium text-gray-700 mb-1">Género:</label>
                                <select id="genero_varchar" name="genero_varchar" x-model="formData.genero_varchar" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                                    <option value="M">Masculino</option>
                                    <option value="F">Femenino</option>
                                    <option value="O">Otro</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="celular_varchar" class="block text-sm font-medium text-gray-700 mb-1">Celular:</label>
                                <input type="text" id="celular_varchar" name="celular_varchar" x-model="formData.celular_varchar" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="email_varchar" class="block text-sm font-medium text-gray-700 mb-1">Correo Electrónico:</label>
                                <input type="email" id="email_varchar" name="email_varchar" x-model="formData.email_varchar" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="direccion_varchar" class="block text-sm font-medium text-gray-700 mb-1">Dirección:</label>
                                <input type="text" id="direccion_varchar" name="direccion_varchar" x-model="formData.direccion_varchar" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="usuario_varchar" class="block text-sm font-medium text-gray-700 mb-1">Usuario:</label>
                                <input type="text" id="usuario_varchar" name="usuario_varchar" x-model="formData.usuario_varchar" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="sucursal" class="block text-sm font-medium text-gray-700 mb-1">Sucursal:</label>
                                <input type="text" id="sucursal" name="sucursal" x-model="formData.sucursal" required
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                            
                            <div>
                                <label for="contrasena" class="block text-sm font-medium text-gray-700 mb-1">Contraseña (dejar en blanco para mantener):</label>
                                <input type="password" id="contrasena" name="contrasena" x-model="formData.contrasena"
                                    class="block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-800">
                            </div>
                        </div>
                        
                        <div class="flex justify-end space-x-4 pt-4">
                            <button type="button" @click="showEditModal = false" class="btn bg-gray-200 text-gray-800 py-2 px-6 rounded-lg hover:bg-gray-300">
                                Cancelar
                            </button>
                            <button type="submit" name="actualizar" class="btn btn-primary text-white py-2 px-6 rounded-lg">
                                Guardar Cambios
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
        </div>
    </div>
</body>

</html>