<?php
session_start();
require_once("config/conexion.php");

if(isset($_SESSION["usuario_id"])){
    header("Location: dashboard.php");
    exit;
}

$error = "";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $usuario = trim($_POST["usuario"]);
    $password = trim($_POST["password"]);

    $sql = "SELECT * FROM usuarios WHERE usuario = :usuario LIMIT 1";

    $stmt = $conexion->prepare($sql);

    $stmt->bindParam(":usuario", $usuario);

    $stmt->execute();

    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if($user && password_verify($password, $user["password"])){

        $_SESSION["usuario_id"] = $user["id"];
        $_SESSION["nombre"] = $user["nombre"];
        $_SESSION["rol"] = $user["rol"];

        header("Location: dashboard.php");
        exit;

    } else {

        $error = "Usuario o contraseña incorrectos";

    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>COQUINIELA</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link rel="manifest" href="manifest.json">

<meta name="theme-color" content="#001B4D">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<meta name="apple-mobile-web-app-title" content="COQUINIELA">

<link rel="apple-touch-icon"
href="assets/img/icon-192.png">





<style>

body{
    margin:0;
    height:100vh;
    background:
    linear-gradient(rgba(0,27,77,.85), rgba(0,27,77,.9)),
    url('assets/img/fondo_estadio.jpg');

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    font-family:Arial;
}

.login-box{

    width:95%;
    max-width:400px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border-radius:25px;

    padding:40px;

    box-shadow:0 0 30px rgba(0,0,0,.4);

    text-align:center;
}

.logo{
    width:260px;
    margin-bottom:25px;
}

.form-control{

    height:55px;
    border-radius:15px;
    border:none;
}

.btn-login{

    background:#F4C400;
    color:#001B4D;

    height:55px;

    border:none;
    border-radius:15px;

    font-weight:bold;
    font-size:18px;

    width:100%;

    transition:.3s;
}

.btn-login:hover{
    transform:scale(1.03);
}

.error{
    color:#ffb3b3;
    margin-bottom:15px;
}

</style>

</head>
<body>

<div class="login-box">

    <img src="assets/img/logo.png" class="logo">

    <?php if($error != ""){ ?>
        <div class="error">
            <?php echo $error; ?>
        </div>
    <?php } ?>

    <form method="POST">

        <div class="mb-3">
            <input
                type="text"
                name="usuario"
                class="form-control"
                placeholder="Usuario"
                required
            >
        </div>

        <div class="mb-3">
            <input
                type="password"
                name="password"
                class="form-control"
                placeholder="Contraseña"
                required
            >
        </div>

        <button class="btn-login">
            Entrar
        </button>

    </form>
    <div id="instalarContainer" style="display:none;">

    <button
        id="btnInstalar"
        type="button"
        class="btn-login"
        style="
        margin-top:15px;
        background:#198754;
        color:white;
        "
    >

        📲 Instalar App

    </button>

</div>
    
    

</div>
<div
    class="modal fade"
    id="modalIOS"
    tabindex="-1"
>

    <div class="modal-dialog modal-dialog-centered">

        <div
            class="modal-content"
            style="
            background:#001B4D;
            color:white;
            border-radius:25px;
            "
        >

            <div class="modal-header border-0">

                <h5 class="modal-title">

                    📲 Instalar COQUINIELA

                </h5>

                <button
                    type="button"
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal"
                ></button>

            </div>

            <div class="modal-body text-center">

                <img
                    src="assets/img/icon-192.png"
                    width="90"
                    class="mb-3"
                >

                <h5>
                    Instala la app en tu iPhone
                </h5>

                <p style="color:#ddd;">
                    Accede más rápido desde tu pantalla principal.
                </p>

                <div
                    style="
                    background:rgba(255,255,255,.08);
                    border-radius:15px;
                    padding:20px;
                    text-align:left;
                    "
                >

                    <p>
                        1️⃣ Pulsa el botón Compartir
                        <i class="bi bi-box-arrow-up"></i>
                    </p>

                    <p>
                        2️⃣ Selecciona
                        <strong>Añadir a pantalla de inicio</strong>
                    </p>

                    <p>
                        3️⃣ Pulsa
                        <strong>Agregar</strong>
                    </p>

                </div>

            </div>

        </div>

    </div>

</div>



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

<script>

let deferredPrompt;
console.log("LOGIN CARGADO");

/* ANDROID */

window.addEventListener(

    'beforeinstallprompt',

    (e)=>{

        console.log("PWA INSTALABLE");

        e.preventDefault();

        deferredPrompt = e;

        document.getElementById(

            'instalarContainer'

        ).style.display='block';

    }

);

/* CLICK BOTON */

document.getElementById('btnInstalar')
?.addEventListener('click', async ()=>{

    if(deferredPrompt){

        deferredPrompt.prompt();

        await deferredPrompt.userChoice;

    }

});

/* IPHONE */

const esIOS =

/iPhone|iPad|iPod/i.test(

    navigator.userAgent

)

||

(

    navigator.platform === 'MacIntel'

    &&

    navigator.maxTouchPoints > 1

)

||

navigator.userAgent.includes("Macintosh");




const standalone =
    window.navigator.standalone === true;

if(esIOS && !standalone){

    document.getElementById(
        'instalarContainer'
    ).style.display='block';

    document.getElementById(
        'btnInstalar'
    ).innerHTML =
    '🍎 Instalar en iPhone';

    document.getElementById(
        'btnInstalar'
    ).addEventListener(
        'click',
        function(){

            new bootstrap.Modal(
                document.getElementById(
                    'modalIOS'
                )
            ).show();

        }
    );

}

</script>
<script>

if ('serviceWorker' in navigator) {

    navigator.serviceWorker.register(

        'service-worker.js'

    );

}

</script>

</body>
</html>