<?php
// Iniciar sesión si no está iniciada
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

require_once '../config/database.php';

$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
    $password = $_POST['password'];

    if ($email && $password) {
        // Buscar usuario
        $stmt = $pdo->prepare("SELECT * FROM Usuarios WHERE email = ? AND activo = 1");
        $stmt->execute([$email]);
        $usuario = $stmt->fetch(PDO::FETCH_ASSOC);

        if ($usuario && password_verify($password, $usuario['password_hash'])) {
            // Guardar datos en sesión
            $_SESSION['id_usuario'] = $usuario['id_usuario'];
            $_SESSION['id_rol'] = $usuario['id_rol'];
            $_SESSION['nombre_completo'] = $usuario['nombre_completo'];
            
            // Redirigir al dashboard
            header('Location: index.php');
            exit();
        } else {
            $error = "Credenciales incorrectas o usuario inactivo.";
        }
    } else {
        $error = "Por favor complete todos los campos.";
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iniciar Sesión - Sistema de Soporte HSMN</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        :root {
            --bs-primary: #0d6efd;
            --bs-primary-hover: #0b5ed7;
        }

        body {
            background-color: #f4f6f9;
            min-height: 100vh;
            display: flex;
            align-items: center; 
            justify-content: center;
            padding: 20px;
        }

        .login-container {
            background: white;
            border-radius: 1.25rem;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            max-width: 1600px; 
            width: 100%;
        }

        .login-left {
            background-image: url('fondo_login.jpeg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            position: relative;
            z-index: 1;
            min-height: 830px; 
        }

        .login-left::before {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.45) !important; 
            z-index: -1;
        }

        .login-right {
            padding: 1.5rem 4rem 4rem 4rem; 
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* --- CLASE PARA MANEJAR EL TAMAÑO DE LOS LOGOS EN PC --- */
        .brand-logos img {
            max-height: 160px; 
            width: auto; 
            object-fit: contain;
            transition: all 0.3s ease;
        }

        .btn-login {
            background-color: var(--bs-primary);
            color: white;
            font-weight: 600;
            padding: 0.85rem;
            width: 100%;
            border-radius: 0.5rem;
            border: none;
            transition: all 0.2s;
            letter-spacing: 0.5px;
            font-size: 1.05rem;
        }

        .btn-login:hover {
            background-color: var(--bs-primary-hover);
            color: white;
        }

        .form-control {
            border-left: none;
            padding: 0.75rem 1rem; 
        }

        .form-control:focus {
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
            border-color: var(--bs-primary);
        }

        .input-group-text {
            background-color: #f8f9fa;
            border-right: none;
            padding: 0.75rem 1.1rem;
        }

        .tracking-wider {
            letter-spacing: 1px;
        }

        .links-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            font-size: 0.95rem;
        }

        /* ==========================================================================
           REGLAS RESPONSIVE (Optimizaciones para Celulares y Tablets)
           ========================================================================== */
        @media (max-width: 767.98px) {
            body {
                padding: 10px;
            }

            .login-right {
                padding: 2.5rem 1.5rem; /* Ajustamos márgenes internos en móviles */
            }

            /* Reducimos proporcionalmente los logos en celular para que no saturen la pantalla */
            .brand-logos img {
                max-height: 70px !important; 
            }

            .brand-logos {
                gap: 1.5rem !important; /* Estrechamos la distancia entre ambos logos */
                margin-bottom: 1.5rem !important;
            }

            h2 {
                font-size: 1.6rem !important; /* "Bienvenido" un toque más compacto */
            }

            .links-bottom {
                margin-bottom: 1.5rem;
            }
        }
    </style>
</head>
<body>

<div class="container d-flex justify-content-center align-items-center h-100">
    
    <div class="row login-container align-items-stretch">
        
        <div class="col-md-6 login-left d-none d-md-flex flex-column justify-content-between p-5 text-white">
            <div></div>
            
            <div class="m-auto text-center" style="max-width: 440px;">
                <h1 class="fw-bold mb-3" style="font-size: 2.5rem;">Sistema de Tickets de Atención</h1>
                <p class="text-white text-opacity-75 lh-base fs-5">Portal centralizado para la gestión de incidencias, requerimientos y atención tecnológica institucional.</p>
            </div>

            <div class="text-center w-100" style="font-size: 0.95rem; opacity: 0.8;">
                &copy; 2026 Sistema de Soporte - HSMN
            </div>
        </div>

        <div class="col-md-6 login-right bg-white">
            <div class="w-100">
            
            <div class="text-center mt-0 mb-4">
                <div class="brand-logos d-flex align-items-center justify-content-center gap-5 mb-3">
                    <img src="logo_izquierdo.png" alt="Logo Institucional">
                    <img src="logo_derecho.jpeg" alt="Logo Soporte">
                </div>
                <h2 class="fw-bold text-dark mb-1" style="font-size: 2rem;">Bienvenido</h2>
                <p class="text-muted fs-5">Inicia sesión para acceder al panel administrativo</p>
            </div>

            <?php if (!empty($error)): ?>
                <div class="alert alert-danger p-3 text-center mb-4" style="font-size: 0.95rem;">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i><?php echo $error; ?>
                </div>
            <?php endif; ?>

            <form action="login.php" method="POST">
                
                <div class="mb-4">
                    <div class="input-group input-group-lg">
                        <span class="input-group-text"><i class="bi bi-person"></i></span>
                        <input type="email" class="form-control" name="email" placeholder="Correo Electrónico / Usuario" required autofocus>
                    </div>
                </div>

                <div class="mb-4">
                    <div class="input-group input-group-lg">
                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
                        <input type="password" class="form-control" name="password" placeholder="Contraseña" required>
                    </div>
                </div>

                <div class="links-bottom">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="rememberMe">
                        <label class="form-check-label" for="rememberMe">Recordarme</label>
                    </div>
                </div>

                <button type="submit" class="btn btn-login">
                    INGRESAR
                </button>

            </form>
        </div>
    </div>

</div>

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

</body>
</html>