<?php
require_once '../../app/Controllers/authAdmin.php';

?>
<!doctype html>
<html lang="pt-br">

<head>
    <meta charset="utf-8" />
    <title>Login | TRYBE Panel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Painel de Acesso TRYBE" name="description" />
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Bootstrap Css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Icons -->
    <link href="assets/css/icons.min.css" rel="stylesheet" />
    <!-- App Css -->
    <link href="assets/css/app.min.css" rel="stylesheet" />

    <link rel="stylesheet" href="../assets/css/build/tailwind.css" />

    <style>
        body {
            background-color: #0d0d0d;
            color: white;
            font-family: "Segoe UI", sans-serif;
        }

        .custom-card {
            background-color: #1c1c1c;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
            border-radius: 14px;
            border: none;
            animation: fadeInUp 0.6s ease-out;
        }

        .form-control {
            background-color: #2a2a2a;
            border: none;
            color: white;
        }

        .form-control:focus {
            background-color: #2a2a2a;
            color: white;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }

        .form-floating label {
            color: #aaa;
        }

        .form-check-input {
            background-color: #444;
            border: none;
        }

        .btn-outline-light:hover {
            background-color: #fff;
            color: #000;
        }

        a {
            color: #0d6efd;
        }

        a:hover {
            color: #0a58ca;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .subtext {
            font-size: 14px;
            color: #aaa;
        }
    </style>
</head>

<body>

    <?php if ($toastMessage) : ?>
        <?php if ($toastType === 'success') : ?>
            <div
                id="toast"
                class="fixed bottom-4 right-4 z-50 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg animate-slide-in flex items-center gap-2 w-[90%] max-w-sm">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
                <span><?= htmlspecialchars($toastMessage) ?></span>
            </div>
        <?php elseif ($toastType === 'error') : ?>
            <div style="background-color: red;"
                id="toast"
                class="fixed bottom-4 right-4 z-50 bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg animate-slide-in flex items-center gap-2 w-[90%] max-w-sm">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span><?= htmlspecialchars($toastMessage) ?></span>
            </div>
        <?php endif; ?>
    <?php endif; ?>

    <div class="d-flex justify-content-center align-items-center min-vh-100">
        <div class="col-md-5 col-lg-4 col-xl-3">
            <div class="card custom-card p-4 ">
                <div class="card-body">
                    <div class="text-center mb-4">
                        <i class="mdi mdi-account-circle-outline display-4 text-[#005E60]"></i>
                        <h4 class="fw-semibold mt-2 text-white">Bem-vindo de volta</h4>
                        <p class="subtext">Acesse sua conta para continuar</p>
                        <hr class="border-secondary mt-3 mb-4">
                    </div>

                    <form method="POST">
                        <div class="form-floating mb-3">
                            <input name="email-admin" type="email" value="<?=htmlspecialchars($_POST['email-admin'] ?? '') ?>" class="form-control" id="input-username" placeholder="Email">
                            <label for="input-username">E-mail</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input name="pass-admin" type="password" class="form-control" id="password-input" placeholder="Senha">
                            <label for="password-input">Senha</label>
                        </div>

                        <div class="form-check mb-3 d-flex justify-content-between align-items-center">
                            <div>
                                <input class="form-check-input" type="checkbox" id="remember-check">
                                <label class="form-check-label text-white-50 ms-1" for="remember-check">
                                    Lembrar-me
                                </label>
                            </div>
                            <a href="#" class="text-white-50 text-decoration-underline small">Esqueceu a senha?</a>
                        </div>

                        <div class="d-grid mb-4">
                            <button name="send-login-admin" class="btn btn-[#005E60]" type="submit">Entrar</button>
                        </div>
                    </form>

                    <div class="text-center">
                    </div>
                </div>
            </div>

            <div class="text-center mt-3">
                <p class="text-white-50 mb-0">© <script>
                        document.write(new Date().getFullYear())
                    </script> TRYBE iGaming. Feito com <i class="mdi mdi-heart text-danger"></i></p>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/metismenujs/metismenujs.min.js"></script>
    <script src="assets/libs/simplebar/simplebar.min.js"></script>
    <script src="assets/libs/feather-icons/feather.min.js"></script>
    <script src="assets/js/pages/pass-addon.init.js"></script>
    <script>
        const toast = document.getElementById("toast");

        if (toast) {
            toast.classList.add("opacity-0");
            toast.style.transition = "opacity 0.4s ease";

            setTimeout(() => {
                toast.classList.remove("opacity-0");
                toast.classList.add("opacity-100");
            }, 100);

            setTimeout(() => {
                toast.classList.add("opacity-0");
                setTimeout(() => toast.remove(), 400);
            }, 5000);
        }

        const phoneMask = IMask(document.querySelector('input[name="phone"]'), {
            mask: '(00) 00000-0000'
        });

        window.addEventListener('load', () => {
            document.getElementById('loading').style.display = 'none';
            document.getElementById('main-content').classList.remove('hidden');
        });
    </script>
</body>

</html>