<?php
// /views/login.php
session_start();
 
/* If a session exists, redirect to the destination */
if (!empty($_SESSION['user_id'])) {
    $to = $_SESSION['return_to'] ?? '../dashboard.php';
    header("Location: $to");
    exit;
}
 
/* Flash messages */
$welcome_message = $_SESSION['welcome_message'] ?? '';
unset($_SESSION['welcome_message']);
 
$login_error = $_SESSION['login_error'] ?? '';
unset($_SESSION['login_error']);
 
/* Prefill the identifier field (name/email/phone) */
$prefill_ident =
    $_SESSION['form_data']['nombre_completo']
    ?? $_SESSION['form_data']['ident']
    ?? '';
unset($_SESSION['form_data']); // No longer needed
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taquería - Iniciar Sesión</title>
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="floating-carousel">
        <div class="carousel-image active" style="background-image: url('imgs/tacosEventos.jpeg');"></div>
        <div class="carousel-image" style="background-image: url('imgs/tacos2.jpg');"></div>
        <div class="carousel-image" style="background-image: url('imgs/tacos3.jpg');"></div>
    </div>
    
    <div class="background-image" style="background-image: url('imgs/fiestaMexicana.jpg');"></div>
    <div class="background-overlay"></div>
    
    <div class="login-container">
        <?php if ($welcome_message): ?>
            <div class="welcome-message">
                <i class="fas fa-hand-holding-heart"></i>
                <p><?= htmlspecialchars($welcome_message) ?></p>
            </div>
        <?php endif; ?>
 
        <?php if ($login_error): ?>
            <div class="login-error">
                <i class="fa-solid fa-triangle-exclamation"></i>
                <p><?= htmlspecialchars($login_error) ?></p>
            </div>
        <?php endif; ?>
 
        <div class="login-header">
            <img src="imgs/logo.png" alt="Logo de la Taquería" class="login-logo">
            <h2>¡Inicia Sesión!</h2>
        </div>
 
        <form action="../controllers/controller_login.php" method="POST" class="login-form" autocomplete="on">
            <input type="hidden" name="action" value="login">
 
            <div class="input-group">
                <i class="fas fa-user icon"></i>
                <input
                    type="text"
                    id="ident"
                    name="ident"
                    value="<?= htmlspecialchars($prefill_ident) ?>"
                    placeholder="Correo, teléfono o nombre"
                    inputmode="text"
                    required
                >
            </div>
 
            <div class="input-group">
                <i class="fas fa-lock icon"></i>
                <input
                    type="password"
                    id="contrasena"
                    name="contrasena"
                    placeholder="Contraseña"
                    required
                >
                <span class="toggle-password" id="togglePassword" aria-label="Mostrar/ocultar contraseña">
                    <i class="fa-solid fa-eye-slash"></i>
                </span>
            </div>
 
            <button type="submit" class="login-button">ACCEDER</button>
        </form>
    </div>
 
    <div id="myModal" class="modal" style="display:none">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p id="modal-message"></p>
        </div>
    </div>
 
    <script src="js/login.js"></script>
    <script>
        // Lógica del carrusel para el nuevo contenedor
        document.addEventListener('DOMContentLoaded', () => {
            const images = document.querySelectorAll('.floating-carousel .carousel-image');
            let current = 0;

            function nextImage() {
                images[current].classList.remove('active');
                current = (current + 1) % images.length;
                images[current].classList.add('active');
            }

            setInterval(nextImage, 3000); // Cambia cada 3 segundos
        });
    </script>
</body>
</html>