<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>چوونه‌ژوره‌وه‌</title>
    <link rel="icon" href="<?php echo htmlspecialchars($favicon); ?>"> <!-- Dynamically set favicon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="src/css/login.css">
    <link rel="stylesheet" href="src/css/toastNotifications.css">
    <link rel="stylesheet" href="src/css/fonts.css">

</head>
<body>
    <div class="login-page">
        <div class="welcome-section">
        <h1>بەخێر بێیتەوە</h1>
        <p>هەژمارەکەت داخڵ بکە بۆ ئەنجامدانی کارەکانت</p> 
        </div>
        <div class="login-container">
            <!-- Login Form -->
            <div id="login-form" style="display: <?php echo isset($_SESSION['username']) ? 'none' : 'block'; ?>;">
            <img src="<?php echo htmlspecialchars($logo); ?>" alt="Logo" class="logo-image">
            <form action="" method="POST">
                    <div class="input-group">
                        <label for="username"><i class="fas fa-user"></i> ناوی بەکارهێنەر </label>
                        <input type="text" id="username" name="username" placeholder="   ناوی بەکارهێنەر بنووسە  " value="" required>
                    </div>
                    <div class="input-group">
                        <label for="password"><i class="fas fa-lock"></i> وشەی نهێنی </label>
                        <div class="password-wrapper">
                            <input type="password" id="password" name="password" placeholder=" وشەی نهێنی بنووسە " required>
                            <i class="fas fa-eye-slash toggle-password" id="toggle-password"></i>
                        </div>
                    </div>
                    <button type="submit" class="login-button" name="login">
                        <i class="fas fa-sign-in-alt"></i> چوونه‌ژوره‌وه‌
                    </button>
                </form>
            </div>

            <!-- Key Code Verification Form -->
            <div id="keycode-form" style="display: <?php echo isset($_SESSION['username']) ? 'block' : 'none'; ?>;">
            <img src="<?php echo htmlspecialchars($logo); ?>" alt="Logo" class="logo-image">
                <form action="" method="POST">
                    <div class="input-group">
                        <label for="key-code"><i class="fas fa-key"></i> كلیلی چوونەژوورەوە</label>
                        <input type="text" id="key-code" name="key_code" placeholder="كلیلی چوونەژوورەوە بنوسه‌"
                               value="<?php echo htmlspecialchars($key_code); ?>"
                               <?php echo $disable_keycode_input ? 'disabled' : ''; ?> required>
                    </div>
                    <button type="submit" class="login-button" name="verify" <?php echo $disable_keycode_input ? 'disabled' : ''; ?>>
                        <i class="fas fa-check"></i> پشتڕاستکردنەوە
                    </button>
                </form>
                <!-- Return to Login Button -->
                <button class="return-button" onclick="logoutAndShowLoginForm()">
                    <i class="fas fa-arrow-right"></i> گەڕانەوە
                </button>
            </div>

            <!-- Error or Success Messages -->
            <?php if (!empty($error_message)): ?>
                <div class="toast error">
                    <i class="fas fa-times-circle"></i> <?= $error_message; ?>
                </div>
            <?php elseif (isset($_SESSION['message'])): ?>
                <div class="toast <?= $_SESSION['message']['type'] ?>">
                    <i class="fas <?= $_SESSION['message']['type'] === 'success' ? 'fa-check-circle' : 'fa-times-circle' ?>"></i>
                    <?= $_SESSION['message']['text'] ?>
                </div>
                <?php if ($_SESSION['message']['type'] === 'success' && $disable_keycode_input): ?>
    <script>
        // Function to lock all buttons and inputs
        function lockInputsAndButtons() {
            const buttons = document.querySelectorAll('button');
            const inputs = document.querySelectorAll('input');

            buttons.forEach(button => {
                button.disabled = true;
                button.classList.add('locked'); // Add locked class for styling
            });

            inputs.forEach(input => {
                input.disabled = true;
                input.classList.add('locked'); // Add locked class for styling
            });
        }

        // Lock the inputs and buttons immediately
        lockInputsAndButtons();

        // Redirect to the admin page after 3 seconds
        setTimeout(function() {
            window.location.href = "admin.php";
        }, 3000); // 3-second delay
    </script>
<?php endif; ?>


                <?php unset($_SESSION['message']); ?>
            <?php endif; ?>
        </div>
    </div>

    

    <div class="footer">
    <p> ٢٠٢٤ ئه‌م پڕۆژه‌یه‌ دروست كراوه‌ له‌لایان كۆمپانیای  <a href="https://RazeTech.net" target="_blank">ڕەیز تێک</a></p>
    </div>

    <script src="src/js/toastNotifications.js"></script>
    <script src="src/js/login.js"></script>
</body>
</html>