<?php
require_once __DIR__ . '/../config/paths.php';
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema Escolar - Login</title>

    <!-- Favicon -->
    <link rel="icon" href="<?php echo asset('fav1.ico', true); ?>" type="image/x-icon">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    
    <!-- Custom Login CSS -->
    <link rel="stylesheet" href="<?php echo asset('login_new.css', true); ?>">
</head>

<body class="login-body">
    <!-- Fondo animado -->
    <div class="animated-background"></div>
    
    <main class="login-container">
        <div class="login-card">
            <!-- Logo y título -->
            <div class="login-header">
                <img src="<?php echo asset('logo_crn.png'); ?>" alt="Logo" class="login-logo">
                <h1 class="login-title">Sistema de Gestión Escolar</h1>
                <p class="login-subtitle">Bienvenido</p>
            </div>
            
            <!-- Alertas -->
            <?php if (isset($_GET['error'])): ?>
                <div class="alert alert-danger alert-modern">
                    <i class="bi bi-exclamation-circle me-2"></i>
                    <?php echo htmlspecialchars($_GET['error']); ?>
                </div>
            <?php endif; ?>
            
            <?php if (isset($_GET['diagnostico'])): ?>
                <div class="alert alert-warning alert-modern">
                    <i class="bi bi-info-circle me-2"></i>
                    <?php echo htmlspecialchars($_GET['diagnostico']); ?>
                </div>
            <?php endif; ?>
            
            <!-- Formulario -->
            <form method="post" action="<?php echo src('login_process.php'); ?>" class="login-form">
                <!-- Input Usuario con icono -->
                <div class="input-group-modern">
                    <div class="input-icon">
                        <i class="bi bi-person"></i>
                    </div>
                    <input 
                        type="text" 
                        name="usuario" 
                        class="form-control-modern" 
                        placeholder="Usuario" 
                        required 
                        autocomplete="username"
                    >
                </div>
                
                <!-- Input Contraseña con icono -->
                <div class="input-group-modern">
                    <div class="input-icon">
                        <i class="bi bi-lock"></i>
                    </div>
                    <input 
                        type="password" 
                        name="password" 
                        class="form-control-modern" 
                        placeholder="Contraseña" 
                        required 
                        autocomplete="current-password"
                    >
                </div>
                
                <!-- Botón -->
                <button type="submit" class="btn-login">
                    <span>Entrar</span>
                    <i class="bi bi-arrow-right ms-2"></i>
                </button>
            </form>
        </div>
    </main>
    
    <!-- Footer -->
    <footer class="login-footer">
        <span>Sistema de Gestión Escolar © 2025 | WMB Development</span>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>