<?php
// Iniciar sesión para manejar mensajes de error
session_start();
$error = isset($_GET['error']) ? $_GET['error'] : '';
// Helper para versionado de assets (cache busting)
require_once __DIR__ . '/frontend/includes/version.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Horarios - Login</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS (con cache busting) -->
    <link href="<?= asset('/frontend/assets/css/styles.css') ?>" rel="stylesheet">
    <!-- Font Awesome para íconos -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- DotLottie Player -->
    <script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>
</head>
<body>
    <div class="bubbles">
        <?php for($i=0;$i<12;$i++): ?>
            <div class="bubble" style="left:<?=rand(2,98)?>vw;width:<?=rand(30,80)?>px;height:<?=rand(30,80)?>px;animation-duration:<?=rand(8,16)?>s;"></div>
        <?php endfor; ?>
    </div>
    <div class="login-container">
        <div class="login-card">
            <div class="text-center mb-4">
                <dotlottie-player
                    src="https://lottie.host/4f62ff12-ec9c-4af8-a6cd-a1d818ab5258/8ODu0xKvDC.lottie"
                    background="transparent"
                    speed="1"
                    style="width: 120px; height: 120px; display:block; margin:0 auto 1rem auto;"
                    loop
                    autoplay
                ></dotlottie-player>
                <h2 class="login-title">Jornada Rocasa</h2>
                <p class="login-subtitle">Inicie sesión con sus credenciales</p>
            </div>
            <?php if($error == '1'): ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Error!</strong> Credenciales incorrectas.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            <?php endif; ?>
            <form action="backend/auth/login.php" method="POST">
                <div class="mb-3">
                    <label for="attuid" class="form-label">ATTUID</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                        <input type="text" class="form-control" id="attuid" name="attuid" placeholder="Ingrese su ATTUID" required>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="password" class="form-label">Contraseña</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                        <input type="password" class="form-control" id="password" name="password" placeholder="Ingrese su contraseña" required>
                    </div>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="remember-me" name="remember-me">
                    <label class="form-check-label" for="remember-me">Recordarme</label>
                </div>
                <button type="submit" class="btn btn-primary w-100 login-btn">
                    <i class="fas fa-sign-in-alt me-2"></i> Iniciar sesión
                </button>
                <div class="text-center mt-3">
                    <a href="#" class="text-decoration-none">¿Olvidó su contraseña?</a>
                </div>
            </form>
        </div>
    </div>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
