<?php
include_once '../../controllers/EstudianteController.php';
include_once '../../controllers/CarreraController.php';
include_once '../../controllers/CursoController.php';

$estudianteController = new EstudianteController();
$carreraController = new CarreraController();
$cursoController = new CursoController();
?>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agregar Estudiante</title>
    <!-- Tailwind CSS CDN -->
    <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',
                        },
                        secondary: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            200: '#e2e8f0',
                            300: '#cbd5e1',
                            400: '#94a3b8',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            800: '#1e293b',
                            900: '#0f172a',
                        },
                        accent: {
                            50: '#ecfdf5',
                            100: '#d1fae5',
                            200: '#a7f3d0',
                            300: '#6ee7b7',
                            400: '#34d399',
                            500: '#10b981',
                            600: '#059669',
                            700: '#047857',
                            800: '#065f46',
                            900: '#064e3b',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter var', 'sans-serif'],
                    },
                    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)',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f9fafb;
        }
        
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #0ea5e9;
            box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
        }
        
        .form-section {
            transition: all 0.3s ease;
        }
        
        .form-section:hover {
            transform: translateY(-2px);
        }
        
        .input-animated {
            transition: all 0.2s ease;
        }
        
        .input-animated:focus {
            transform: translateY(-1px);
        }
        
        .btn-primary {
            background-color: #0ea5e9;
            color: white;
            transition: all 0.2s ease;
        }
        
        .btn-primary:hover {
            background-color: #0284c7;
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .btn-secondary {
            background-color: #f1f5f9;
            color: #334155;
            transition: all 0.2s ease;
        }
        
        .btn-secondary:hover {
            background-color: #e2e8f0;
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
    <script>
        function autocompletarCI() {
            var ci = document.getElementById('ci').value;
            document.getElementById('username').value = ci;
            document.getElementById('contrasena').value = ci;
        }

        function calcularBalance() {
            var fees = parseFloat(document.getElementById('fees').value) || 0;
            var montoPagado = parseFloat(document.getElementById('monto_pagado').value) || 0;
            var balance = fees - montoPagado;
            document.getElementById('balance').value = balance;
        }

        function habilitarOpcion(valor) {
            const carreraDiv = document.getElementById('carreraDiv');
            const cursoDiv = document.getElementById('cursoDiv');

            if (valor === 'carrera') {
                carreraDiv.style.display = 'block';
                cursoDiv.style.display = 'none';
            } else if (valor === 'curso') {
                cursoDiv.style.display = 'block';
                carreraDiv.style.display = 'none';
            }
        }
    </script>
</head>

<body class="bg-gray-50 min-h-screen py-12">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header con logo y título -->
        <div class="text-center mb-10">
            <img src="../../public/images/logo.png" alt="Logo de la Institución" class="h-20 mx-auto mb-4">
            <h1 class="text-3xl font-bold text-gray-900">Agregar Nuevo Estudiante</h1>
            <p class="mt-2 text-lg text-gray-600">Complete el formulario para registrar un nuevo estudiante en el sistema</p>
        </div>
        
        <!-- Botón de volver -->
        <div class="mb-8">
            <a href="gestion_estudiantes.php" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-gray-500" 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 a Gestión de Estudiantes
            </a>
        </div>
        
        <!-- Formulario principal -->
        <form action="gestion_estudiantes.php" method="post" oninput="autocompletarCI(); calcularBalance();" class="space-y-8">
            <!-- Tarjeta de información personal -->
            <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover p-6 form-section">
                <div class="flex items-center mb-6">
                    <div class="rounded-full bg-primary-100 p-2 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-900">Información Personal</h2>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div>
                        <label for="sname" class="block text-sm font-medium text-gray-700 mb-1">Nombre Completo</label>
                        <input type="text" id="sname" name="sname" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                    </div>
                    
                    <div>
                        <label for="ci" class="block text-sm font-medium text-gray-700 mb-1">Cédula de Identidad</label>
                        <input type="text" id="ci" name="ci" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                    </div>
                    
                    <div>
                        <label for="exp_ci" class="block text-sm font-medium text-gray-700 mb-1">Expedido en</label>
                        <select id="exp_ci" name="exp_ci" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                            <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="contact" class="block text-sm font-medium text-gray-700 mb-1">Teléfono de Contacto</label>
                        <input type="text" id="contact" name="contact" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                    </div>
                    
                    <div>
                        <label for="emailid" class="block text-sm font-medium text-gray-700 mb-1">Correo Electrónico</label>
                        <input type="email" id="emailid" name="emailid" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                    </div>
                    
                    <div>
                        <label for="joindate" class="block text-sm font-medium text-gray-700 mb-1">Fecha de Inscripción</label>
                        <input type="datetime-local" id="joindate" name="joindate" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                    </div>
                </div>
            </div>
            
            <!-- Tarjeta de información financiera -->
            <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover p-6 form-section">
                <div class="flex items-center mb-6">
                    <div class="rounded-full bg-accent-100 p-2 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-900">Información Financiera</h2>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div>
                        <label for="fees" class="block text-sm font-medium text-gray-700 mb-1">Costo Total</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500">Bs.</span>
                            </div>
                            <input type="number" id="fees" name="fees" required 
                                class="input-animated w-full pl-12 pr-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                        </div>
                    </div>
                    
                    <div>
                        <label for="monto_pagado" class="block text-sm font-medium text-gray-700 mb-1">Monto Pagado</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500">Bs.</span>
                            </div>
                            <input type="number" id="monto_pagado" name="monto_pagado" 
                                class="input-animated w-full pl-12 pr-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                        </div>
                    </div>
                    
                    <div>
                        <label for="balance" class="block text-sm font-medium text-gray-700 mb-1">Balance Pendiente</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500">Bs.</span>
                            </div>
                            <input type="number" id="balance" name="balance" readonly 
                                class="w-full pl-12 pr-4 py-2.5 bg-gray-100 border border-gray-300 text-gray-900 text-sm rounded-lg block cursor-not-allowed">
                        </div>
                    </div>
                    
                    <div>
                        <label for="branch" class="block text-sm font-medium text-gray-700 mb-1">Forma de Pago</label>
                        <select id="branch" name="branch" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                            <?php
                            $branches = $estudianteController->listarBranches();
                            foreach ($branches as $branch) {
                                echo "<option value='" . $branch['id'] . "'>" . $branch['branch'] . "</option>";
                            }
                            ?>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Tarjeta de información académica -->
            <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover p-6 form-section">
                <div class="flex items-center mb-6">
                    <div class="rounded-full bg-secondary-100 p-2 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path d="M12 14l9-5-9-5-9 5 9 5z" />
                            <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
                        </svg>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-900">Información Académica</h2>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="tipo_info_academica" class="block text-sm font-medium text-gray-700 mb-1">Tipo de Estudio</label>
                        <select id="tipo_info_academica" name="tipo_info_academica" onchange="habilitarOpcion(this.value)"
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                            <option value="" selected disabled>Seleccione una opción</option>
                            <option value="carrera">Carrera</option>
                            <option value="curso">Curso</option>
                        </select>
                    </div>
                    
                    <div id="carreraDiv" style="display:none;">
                        <label for="carrera" class="block text-sm font-medium text-gray-700 mb-1">Carrera</label>
                        <select id="carrera" name="carrera"
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                            <?php
                            $carreras = $carreraController->obtenerCarreras();
                            foreach ($carreras as $carrera) {
                                echo "<option value='" . $carrera['id'] . "'>" . $carrera['carrera'] . "</option>";
                            }
                            ?>
                        </select>
                    </div>
                    
                    <div id="cursoDiv" style="display:none;">
                        <label for="curso" class="block text-sm font-medium text-gray-700 mb-1">Curso</label>
                        <select id="curso" name="curso"
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                            <?php
                            $cursos = $cursoController->listarCursos();
                            foreach ($cursos as $curso) {
                                echo "<option value='" . $curso['id'] . "'>" . $curso['nombre_curso'] . "</option>";
                            }
                            ?>
                        </select>
                    </div>
                    
                    <div>
                        <label for="turno" class="block text-sm font-medium text-gray-700 mb-1">Turno</label>
                        <select id="turno" name="turno" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                            <?php
                            $turnos = $estudianteController->listarTurnos();
                            foreach ($turnos as $turno) {
                                echo "<option value='" . $turno['id'] . "'>" . $turno['turno'] . "</option>";
                            }
                            ?>
                        </select>
                    </div>
                    
                    <div>
                        <label for="modalidad" class="block text-sm font-medium text-gray-700 mb-1">Modalidad</label>
                        <select id="modalidad" name="modalidad" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                            <?php
                            $modalidades = $estudianteController->listarModalidades();
                            foreach ($modalidades as $modalidad) {
                                echo "<option value='" . $modalidad['id'] . "'>" . $modalidad['modalidad'] . "</option>";
                            }
                            ?>
                        </select>
                    </div>
                    
                    <div class="md:col-span-2">
                        <label for="about" class="block text-sm font-medium text-gray-700 mb-1">Información Adicional</label>
                        <textarea id="about" name="about" rows="3" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block"></textarea>
                    </div>
                </div>
            </div>
            
            <!-- Tarjeta de información de cuenta -->
            <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover p-6 form-section">
                <div class="flex items-center mb-6">
                    <div class="rounded-full bg-primary-100 p-2 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                        </svg>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-900">Información de Cuenta</h2>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="Cod_Estu" class="block text-sm font-medium text-gray-700 mb-1">Código de Estudiante</label>
                        <input type="text" id="Cod_Estu" name="Cod_Estu" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                    </div>
                    
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Nombre de Usuario (automático)</label>
                        <input type="text" id="username" name="username" readonly 
                            class="w-full px-4 py-2.5 bg-gray-100 border border-gray-300 text-gray-900 text-sm rounded-lg block cursor-not-allowed">
                    </div>
                    
                    <div>
                        <label for="contrasena" class="block text-sm font-medium text-gray-700 mb-1">Contraseña (automática)</label>
                        <input type="password" id="contrasena" name="contrasena" readonly 
                            class="w-full px-4 py-2.5 bg-gray-100 border border-gray-300 text-gray-900 text-sm rounded-lg block cursor-not-allowed">
                    </div>
                    
                    <div>
                        <label for="sucursal_varchar" class="block text-sm font-medium text-gray-700 mb-1">Sucursal</label>
                        <input type="text" id="sucursal_varchar" name="sucursal_varchar" required 
                            class="input-animated w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block">
                    </div>
                </div>
            </div>
            
            <!-- Botones de acción -->
            <div class="flex justify-end space-x-4 pt-6">
                <button type="button" onclick="window.location.href='gestion_estudiantes.php'" 
                    class="px-6 py-3 bg-white border border-gray-300 rounded-lg font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200">
                    Cancelar
                </button>
                <button type="submit" name="agregar" 
                    class="px-6 py-3 bg-primary-600 border border-transparent rounded-lg font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200">
                    <span class="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 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>
                        Registrar Estudiante
                    </span>
                </button>
            </div>
        </form>
    </div>
</body>

</html>