<?php
// Configurações de erro (Em produção, mude para 0)
$is_development = true; 
error_reporting($is_development ? E_ALL : 0);
ini_set('display_errors', $is_development ? 1 : 0);

// Trata a barra para evitar o caminho inválido '//assets/'
$static_url = rtrim(dirname($_SERVER['SCRIPT_NAME']), '/\\') . '/assets/';
$page_title = $page_title ?? "MAX VISION PRO";
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title><?php echo $page_title; ?></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="<?php echo $static_url; ?>media/logos/logo.png" />
    
    <link rel="preload" href="<?php echo $static_url; ?>plugins/global/plugins.bundle.css" as="style">
    <link rel="preload" href="<?php echo $static_url; ?>css/style.bundle.css" as="style">

    <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" />
    
    <script>
        if (localStorage.getItem("data-bs-theme") === "light") {
            document.documentElement.setAttribute("data-bs-theme", "light");
        } else {
            document.documentElement.setAttribute("data-bs-theme", "dark");
        }
    </script>

    <style>
        :root { --primary-color: #0095e8; }

        body {
            background-color: #151521; 
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            overflow: hidden;
            font-family: 'Inter', sans-serif;
        }

        .login-bg {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at center, #1e1e2d 0%, #0d0d12 100%);
            z-index: -1;
        }

        .login-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            padding: 3rem;
            width: 100%;
            max-width: 450px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            margin: 0 15px;
        }

        [data-bs-theme="light"] .login-card {
            background: #ffffff;
            border: 1px solid #f1f1f4;
        }

        .form-control.form-control-solid {
            border-radius: 0px !important;
            border: 1px solid transparent !important;
            background-color: #f9f9f9 !important;
            transition: all 0.3s ease;
        }

        [data-bs-theme="dark"] .form-control.form-control-solid {
            background-color: #1b1b29 !important;
            color: #ffffff !important;
        }

        .form-control.form-control-solid:focus {
            border-color: var(--primary-color) !important;
            background-color: transparent !important;
        }

        .btn-square {
            border-radius: 0px !important;
            font-weight: 700;
            letter-spacing: 1.5px;
            padding: 15px;
            transition: transform 0.2s active;
        }
        
        .btn-square:active { transform: scale(0.98); }

        /* --- CORREÇÃO DA ANIMAÇÃO DO BOTÃO --- */
        .indicator-progress { display: none; }
        [data-kt-indicator="on"] .indicator-label { display: none; }
        [data-kt-indicator="on"] .indicator-progress { display: inline-block; }
        /* ------------------------------------- */

        .password-wrapper { position: relative; }
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #5e6278;
        }

        .theme-switcher {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        @media (max-width: 768px) {
            .login-card {
                padding: 2rem 1.5rem;
            }
            .theme-switcher {
                top: 15px;
                right: 15px;
            }
            .login-card h1 {
                font-size: 1.5rem !important;
            }
            .text-gray-500.fw-semibold.fs-6 {
                font-size: 0.9rem !important;
            }
        }
    </style>
</head>

<body id="kt_body" class="app-blank">
    <div class="login-bg"></div>

    <div class="theme-switcher">
        <i class="ki-outline ki-night-day fs-2 theme-light-show"></i>
        <i class="ki-outline ki-moon fs-2 theme-dark-show"></i>
        <div class="form-check form-switch form-check-custom form-check-solid">
            <input class="form-check-input h-20px w-40px" type="checkbox" id="theme_mode_toggle" />
        </div>
    </div>

    <div class="d-flex flex-column flex-root" id="kt_app_root">
        <div class="d-flex flex-center flex-column flex-column-fluid p-5">
            
            <div class="login-card">
                <form class="form w-100" id="kt_sign_in_form" action="dns.php" method="POST">
                    
                    <div class="text-center mb-10">
                        <img alt="Logo" src="<?php echo $static_url; ?>media/logos/logo.png" class="h-80px mb-5" />
                        <h1 class="text-gray-900 fw-bolder mb-3 theme-light-show">MAX VISION PRO</h1>
                        <h1 class="text-white fw-bolder mb-3 theme-dark-show">MAX VISION PRO</h1>
                        <div class="text-gray-500 fw-semibold fs-6">Insira suas credenciais de acesso</div>
                    </div>

                    <div class="fv-row mb-5">
                        <label class="form-label fs-7 fw-bold text-uppercase">Usuário</label>
                        <input type="text" name="username" placeholder="Seu nome de usuário" autocomplete="username" class="form-control form-control-lg form-control-solid" required />
                    </div>

                    <div class="fv-row mb-8">
                        <div class="d-flex flex-stack mb-2">
                            <label class="form-label fw-bold text-uppercase fs-7 mb-0">Senha</label>
                        </div>
                        <div class="password-wrapper">
                            <input type="password" id="password_input" name="password" placeholder="••••••••" autocomplete="current-password" class="form-control form-control-lg form-control-solid" required />
                            <i class="ki-outline ki-eye fs-2 password-toggle" id="password_icon"></i>
                        </div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" id="kt_sign_in_submit" class="btn btn-primary btn-square">
                            <span class="indicator-label">ENTRAR NO SISTEMA</span>
                            <span class="indicator-progress">Autenticando... 
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
            
            <div class="mt-8 text-gray-600 fs-8 text-uppercase ls-1">
                &copy; <?php echo date('Y'); ?> MAX VISION PRO - Todos os direitos reservados.
            </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?v=<?php echo time(); ?>"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Lógica de Troca de Tema Sincronizada com o <head>
            const themeToggle = document.getElementById('theme_mode_toggle');
            const htmlElement = document.documentElement;

            themeToggle.checked = htmlElement.getAttribute("data-bs-theme") === "dark";

            themeToggle.addEventListener('change', function() {
                const newTheme = this.checked ? "dark" : "light";
                htmlElement.setAttribute("data-bs-theme", newTheme);
                localStorage.setItem("data-bs-theme", newTheme);
            });

            // Password Visibility
            const passwordInput = document.getElementById('password_input');
            const passwordIcon = document.getElementById('password_icon');

            passwordIcon.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                this.classList.toggle('ki-eye');
                this.classList.toggle('ki-eye-slash');
            });

            // --- EFEITO DE CARREGAMENTO NO CLICK ---
            const form = document.getElementById('kt_sign_in_form');
            const submitBtn = document.getElementById('kt_sign_in_submit');

            form.addEventListener('submit', function(e) {
                // Ativa o loading
                submitBtn.setAttribute('data-kt-indicator', 'on');
                
                // O timeout garante que o formulário seja disparado com segurança antes do botão ser desabilitado
                // Corrigindo um erro nativo onde desabilitar instantaneamente cancelava o POST em navegadores como Safari
                setTimeout(() => {
                    submitBtn.disabled = true;
                }, 10);
            });
        });
    </script>
</body>
</html>