<?php 
session_start();

$servername = "localhost";
$username_db = "root";
$password_db = "";
$database = "control_atrasos";

$mensaje = '';

$conexion = new mysqli($servername, $username_db, $password_db, $database);

if ($conexion->connect_error) {
    die("Error de conexión: " . $conexion->connect_error);
}

$conexion->query("CREATE TABLE IF NOT EXISTS usuarios (
    id_usuario INT AUTO_INCREMENT PRIMARY KEY,
    cedula VARCHAR(20) NOT NULL UNIQUE,
    contrasena VARCHAR(255) NOT NULL,
    rol ENUM('Administrador', 'Docente', 'Inspector') NOT NULL,
    nombre VARCHAR(100) NOT NULL,
    apellido VARCHAR(100) NOT NULL,
    estado ENUM('Activo', 'Inactivo') DEFAULT 'Activo'
)");

$verificar = $conexion->query("SELECT COUNT(*) as total FROM usuarios WHERE rol = 'Administrador'");
$row = $verificar->fetch_assoc();
if ($row['total'] == 0) {
    $conexion->query("INSERT INTO usuarios (cedula, contrasena, rol, nombre, apellido) VALUES ('1234567890', '123456', 'Administrador', 'Admin', 'Principal')");
}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $cedula = trim($_POST['cedula']);
    $contrasena = $_POST['contrasena'];
    $tipo = $_POST['tipo'];

    if (!empty($cedula) && !empty($contrasena) && !empty($tipo)) {
        $sql = "SELECT * FROM usuarios WHERE cedula = '$cedula' AND rol = '$tipo' AND estado = 'Activo'";
        $resultado = $conexion->query($sql);
        
        if ($resultado && $resultado->num_rows > 0) {
            $usuario = $resultado->fetch_assoc();
            
            if ($contrasena == $usuario['contrasena']) {
                $_SESSION['cedula'] = $usuario['cedula'];
                $_SESSION['nombre'] = $usuario['nombre'];
                $_SESSION['apellido'] = $usuario['apellido'];
                $_SESSION['rol'] = $usuario['rol'];
                $_SESSION['ingresado'] = true;

                if ($usuario['rol'] == 'Administrador') {
                    header("Location: admin.php");
                    exit();
                } elseif ($usuario['rol'] == 'Inspector') {
                    header("Location: inspector.php");
                    exit();
                } elseif ($usuario['rol'] == 'Docente') {
                    header("Location: docente.php");
                    exit();
                }
            } else {
                $mensaje = '<div class="mensaje-error">❌ Credenciales incorrectas</div>';
            }
        } else {
            $mensaje = '<div class="mensaje-error">❌ Usuario no encontrado o inactivo</div>';
        }
    } else {
        $mensaje = '<div class="mensaje-error">⚠️ Completa todos los campos</div>';
    }
}
$conexion->close();
?>

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - U.E. Jaime Roldós Aguilera</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/cssall.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { 
    background: linear-gradient(135deg, #002c6b 0%, #004a9f 50%, #002c6b 100%);
    min-height: 100vh;
}

/* Fondo con imagen unidad.png */
.fondo-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('unidad.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

.header { 
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    color: white; 
    padding: 20px 40px; 
    display: flex; 
    align-items: center; 
    position: relative;
    z-index: 1;
}

.logo img { 
    width: 90px; 
    margin-right: 20px; 
    object-fit: contain;
}

.titulo h1 { font-size: 32px; font-weight: 700; }
.titulo h2 { font-size: 16px; font-weight: 300; opacity: 0.9; }
.contenedor { 
    max-width: 1000px; 
    width: 95%; 
    margin: 30px auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 50px; 
    position: relative;
    z-index: 1;
}

.info { width: 45%; text-align: center; color: white; }
.info img { width: 140px; margin-bottom: 10px; }
.info h3 { font-size: 22px; font-weight: 600; margin-top: 10px; }
.info .anio { font-size: 55px; font-weight: bold; color: #f0b323; }
.info p { font-size: 18px; opacity: 0.9; }

.login { 
    width: 380px; 
    background: rgba(255,255,255,0.95);
    padding: 35px; 
    border-radius: 20px; 
    color: #002c6b; 
    box-shadow: 0 15px 50px rgba(0,0,0,0.3); 
}
.login h2 { text-align: center; margin-bottom: 25px; font-size: 26px; }
.login label { display: block; margin-top: 15px; margin-bottom: 8px; font-weight: 600; color: #333; }
.login input, .login select { 
    width: 100%; 
    padding: 14px; 
    border: 2px solid #ddd; 
    border-radius: 8px; 
    font-size: 16px;
    transition: 0.3s;
}
.login input:focus, .login select:focus { 
    border-color: #002c6b; 
    outline: none; 
}
.boton { 
    width: 100%; 
    margin-top: 25px; 
    padding: 14px; 
    background: #f0b323; 
    color: #002c6b; 
    border: none; 
    border-radius: 8px; 
    font-size: 18px; 
    font-weight: bold; 
    cursor: pointer;
    transition: 0.3s;
}
.boton:hover { background: #ffd15c; transform: translateY(-2px); }
.mensaje-error { 
    text-align: center; 
    margin-bottom: 20px; 
    color: #e74c3c; 
    font-weight: 600; 
    background: #fadbd8; 
    padding: 12px; 
    border-radius: 8px; 
}
.footer { 
    color: white; 
    text-align: center; 
    padding: 20px;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}
@media(max-width: 768px) { 
    .header { flex-direction: column; text-align: center; } 
    .contenedor { flex-direction: column; gap: 30px; } 
    .info, .login { width: 100%; }
    .fondo-img { background-size: 90%; }
}
</style>
</head>
<body>
<div class="fondo-img"></div>

<div class="header">
    <div class="logo"><img src="Logo.png" alt="Logo"></div>
    <div class="titulo">
        <h2>UNIDAD EDUCATIVA FISCOMISIONAL</h2>
        <h1>JAIME ROLDÓS AGUILERA</h1>
    </div>
</div>
<div class="contenedor">
    <div class="info">
        <img src="Logo.png" alt="Logo">
        <h3>RÉGIMEN SIERRA</h3>
        <div class="anio">2025 - 2026</div>
        <p>Sistema de Control Académico<br>U.E. Jaime Roldós Aguilera</p>
    </div>
    <div class="login">
        <h2><i class="fas fa-school"></i> Ingreso</h2>
        <?php if (!empty($mensaje)) { echo $mensaje; } ?>
        <form method="POST">
            <label>Tipo Usuario</label>
            <select name="tipo" required>
                <option value="">Seleccione...</option>
                <option value="Administrador">Administrador</option>
                <option value="Docente">Docente</option>
                <option value="Inspector">Inspector</option>
            </select>
            <label>Cédula</label>
            <input type="text" name="cedula" placeholder="Ingrese su cédula">
            <label>Contraseña</label>
            <input type="password" name="contrasena" placeholder="Ingrese su contraseña">
            <button type="submit" class="boton"><i class="fas fa-sign-in-alt"></i> INGRESAR</button>
        </form>
    </div>
</div>
<div class="footer">© 2025 U.E. Jaime Roldós Aguilera</div>
</body>
</html>