<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

if (version_compare(PHP_VERSION, '5.3.7', '<')) {
    exit("Sorry, Simple PHP Login does not run on a PHP version smaller than 5.3.7 !");
} else if (version_compare(PHP_VERSION, '5.5.0', '<')) {
    require_once("libraries/password_compatibility_library.php");
}

require_once("config/db.php");
require_once("config/conexion.php");
require_once("classes/Login.php");

$login = new Login();

if ($login->isUserLoggedIn() == true) {
    header("location: coordinaciones.php");
} else {
include("head.php");
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href='img/logonino.jpeg' sizes="32x32" type="image/jpeg">
    
    <title>Sistema administrativo <?php echo NOMBRE_EMPRESA; ?> | Login</title>
    
    
    <style>
        :root {
            --primary-color: #28a745; /* Verde éxito */
            --accent-color: #1e3c72;  /* Azul profesional */
            --glass-bg: rgba(255, 255, 255, 0.95);
        }

   body {
    background: #f4f7f6;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    display: block; /* Cambiamos de flex a block para que los elementos sigan el orden natural */
}

        /* Banner Superior Moderno */
.top-banner {
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-bottom: 3px solid #28a745;
}

.access-text {
    color: #999;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

        .logo-container-top {
            display: flex;
            align-items: center;
            gap: 15px;
            text-decoration: none;
            color: #333;
        }

        .logo-top {
            height: 50px;
            border-radius: 8px;
        }

        .system-name {
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--accent-color);
        }

        /* Contenedor Principal */
.main-content {
    padding: 120px 20px; /* Espacio arriba y abajo del login */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Que empiece desde arriba con el padding */
    min-height: calc(100vh - 250px); /* Asegura que el footer no se suba */
}
      .login-card {
    background: white;
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
    border: 1px solid #eee;
}
        .login-card h2 {
            margin-bottom: 30px;
            color: #444;
            font-weight: 600;
        }

        .profile-img-card {
            width: 90px;
            height: 90px;
            margin: 0 auto 20px;
            border-radius: 50%;
            border: 4px solid white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .form-control {
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            border: 2px solid #eef0f2;
            width: 100%;
            box-sizing: border-box;
            background: #fcfcfc;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            background: white;
            outline: none;
            box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.1);
        }

        .btn-signin {
            background: var(--primary-color);
            background: linear-gradient(to right, #28a745, #218838);
            border: none;
            border-radius: 12px;
            padding: 15px;
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            width: 100%;
            cursor: pointer;
            margin-top: 10px;
            box-shadow: 0 8px 15px rgba(40, 167, 69, 0.3);
            transition: all 0.3s ease;
        }

        .btn-signin:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 20px rgba(40, 167, 69, 0.4);
        }

        .alert {
            padding: 12px;
            border-radius: 12px;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }

        .back-link {
            display: inline-block;
            margin-top: 20px;
            color: #888;
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.2s;
        }

        .back-link:hover { color: var(--accent-color); }
    </style>
</head>
<body>

    <header class="top-banner">
        <header2></header2>
    </header>

    <div class="main-content">
        <div class="login-card">
            <img src="img/logonino.jpeg" class="profile-img-card" alt="Avatar">
            <h2>Iniciar Sesión</h2>
            
            <form method="post" action="login.php" name="loginform" autocomplete="off">
                <?php
                if (isset($login)) {
                    if (!empty($login->errors)) {
                        foreach ($login->errors as $error) {
                            echo '<div class="alert alert-danger">' . $error . '</div>';
                        }
                    }
                    if (!empty($login->messages)) {
                        foreach ($login->messages as $message) {
                            echo '<div class="alert alert-success">' . $message . '</div>';
                        }
                    }
                }
                ?>

                <input class="form-control" placeholder="Usuario" name="user_name" type="text" required autofocus>
                <input class="form-control" placeholder="Contraseña" name="user_password" type="password" required>
                
                <button type="submit" class="btn-signin" name="login">Entrar al Sistema</button>
            </form>

    </div>

    <footer style="padding: 20px; text-align: center;">
        <?php include("footer.php");?>
    </footer>

</body>
</html>
<?php
}
?>