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

$static_url = dirname($_SERVER['SCRIPT_NAME']) . '/assets/';
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <title><?php echo isset($page_title) ? $page_title : "IBO MAX"; ?></title>
    <meta charset="utf-8" />
    <meta name="description" content="IBO MAX" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="<?php echo $static_url; ?>media/logos/logo.png" />
    <link href="<?php echo $static_url; ?>plugins/global/plugins.bundle.css" rel="stylesheet" />
    <link href="<?php echo $static_url; ?>css/style.bundle.css" rel="stylesheet" />
    <link href="<?php echo $static_url; ?>css/custom_style.css" rel="stylesheet" />
    
    <style>
        /* Trava a rolagem da tela no PC e Mobile */
        html {
            overflow: hidden !important;
            touch-action: none !important; 
        }

        /* Centraliza perfeitamente o conteúdo na tela toda */
        body#kt_body {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 100vh !important;
            margin: 0;
            overflow: hidden !important;
        }

        #kt_app_root, .flex-column-fluid {
            flex: none !important;
            width: 100%;
        }

        /* Inputs de usuário e senha Quadrados */
        input.form-control {
            border-radius: 0px !important; /* Formato Quadrado */
            border: 1px solid #e4e6ef !important;
            padding: 15px !important;
            background-color: #ffffff !important;
        }

        /* Inputs no modo escuro */
        [data-bs-theme="dark"] input.form-control {
            background-color: #1b1b29 !important;
            border: 1px solid #323248 !important;
            color: #ffffff !important;
        }

        input.form-control:focus {
            border-color: #0095e8 !important;
            box-shadow: none !important;
        }

        /* Botão ENTRAR Quadrado */
        #kt_sign_in_submit {
            border-radius: 0px !important; /* Formato Quadrado */
            background-color: #0095e8 !important;
            border: none !important;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: background 0.3s ease;
        }

        #kt_sign_in_submit:hover {
            background-color: #007ac0 !important;
        }
        
        /* Ajuste do tamanho da Logo */
        img[alt="Logo"] {
            max-height: 120px !important;
            margin-bottom: 20px !important;
        }
    </style>
</head>

<body id="kt_body" class="app-blank">
    <script>var defaultThemeMode = "light"; var themeMode; if ( document.documentElement ) { if ( document.documentElement.hasAttribute("data-bs-theme-mode")) { themeMode = document.documentElement.getAttribute("data-bs-theme-mode"); } else { if ( localStorage.getItem("data-bs-theme") !== null ) { themeMode = localStorage.getItem("data-bs-theme"); } else { themeMode = defaultThemeMode; } } if (themeMode === "system") { themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } document.documentElement.setAttribute("data-bs-theme", themeMode); }</script>

    <div class="d-flex flex-column flex-root" id="kt_app_root">
        <div class="d-flex flex-column flex-column-fluid">
            <div class="d-flex flex-center flex-column flex-column-fluid p-5 p-md-10">
                
                <div class="w-100 mw-450px p-5 p-md-15 mx-auto">
                    
                    <form class="form w-100" novalidate="novalidate" id="kt_sign_in_form" data-kt-redirect-url="index.html" action="#">
                        
                        <div class="d-flex flex-row align-items-center justify-content-center mb-8">
                            <span class="d-flex flex-center gap-1 theme-light-show fs-6 text-muted">
                                <i class="ki-outline ki-night-day fs-1"></i>Dark Mode
                            </span>
                            
                            <span class="d-flex flex-center gap-1 theme-dark-show fs-6 text-muted">
                                <i class="ki-outline ki-moon fs-1"></i>Light Mode
                            </span>
                            
                            <div data-bs-theme="dark" class="ms-3">
                                <div class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input h-25px w-45px" type="checkbox" value="1" id="kt_sidebar_theme_mode_toggle" />
                                </div>
                            </div>
                        </div>

                        <div class="text-center mb-11">
                            <img alt="Logo" src="<?php echo $static_url; ?>media/logos/logo.png" class="img-fluid mw-100 h-auto h-md-200px" style="max-height: 180px;" />
                        </div>

                        <div class="fv-row mb-8">
                            <input type="text" placeholder="Username" name="username" autocomplete="off" class="form-control bg-transparent fs-6 h-50px" />
                        </div>

                        <div class="fv-row mb-3">
                            <input type="password" placeholder="Password" name="password" autocomplete="off" class="form-control bg-transparent fs-6 h-50px" />
                        </div>

                        <div class="d-grid mb-10">
                            <button type="submit" id="kt_sign_in_submit" class="btn btn-primary fw-bold h-50px">
                                <span class="indicator-label">ENTRAR</span>
                                <span class="indicator-progress">Please wait... 
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                        </div>
                    </form>

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

    <script src="<?php echo $static_url; ?>plugins/global/plugins.bundle.js"></script>
    <script src="<?php echo $static_url; ?>js/scripts.bundle.js"></script>
    <script src="<?php echo $static_url; ?>js/users.js"></script>
</body>

</html>