<?php
include_once "class.php";

$auth = new User();
$auth->check();

$config = require '../config.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Configuration</title>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    
    <?php include "header.php"; ?>
    
    <div class="app-body">
        <div class="row gx-4">
            <div class="col-sm-12">
                <div class="card mb-4">
                    <div class="card-body">
                        
                        <!-- Alert Section -->
                        <div class="d-flex flex-column gap-2 mb-4">
                            <div class="alert alert-dismissible fade show" role="alert" style="background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%); border: 1px solid #dc3545; color: #f8d7da;">
                                To prevent your page from being marked as <b>red</b>, please enable at least one captcha, such as Cloudflare Turnstile. To use Invisible Turntiles please set your captcha to <b>Invisible</b> on Cloudflare Turnstile settings.
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                            <div class="alert alert-dismissible fade show" role="alert" style="background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%); border: 1px solid #ffc107; color: #fff3cd;">
                                <i class="bi bi-gear me-2" style="color: #ffc107;"></i>
                                <strong>Note:</strong> Please enable <b>custom session</b> in <b>Admin Settings</b> if you use offline attachment to ensure proper functionality.
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        </div>

                        <!-- Configuration Tabs -->
                        <div class="custom-tabs-container">
                            <!-- Navigation Tabs -->
                            <ul class="nav nav-tabs" id="customTab3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active" id="tab-oneAA" data-bs-toggle="tab" href="#oneAA" role="tab" aria-controls="oneAA" aria-selected="true">
                                        <i class="bi bi-send-plus me-2"></i>Sending Result
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="tab-twoAA" data-bs-toggle="tab" href="#twoAA" role="tab" aria-controls="twoAA" aria-selected="false" tabindex="-1">
                                        <i class="bi bi-journal-code me-2"></i>Bot
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="tab-fourAA" data-bs-toggle="tab" href="#fourAA" role="tab" aria-controls="fourAA" aria-selected="false" tabindex="-1">
                                        <i class="bi bi-folder me-2"></i>Files
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="tab-threeAA" data-bs-toggle="tab" href="#threeAA" role="tab" aria-controls="threeAA" aria-selected="false" tabindex="-1">
                                        <i class="bi bi-journal-bookmark me-2"></i>Additionals
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="tab-sixAA" data-bs-toggle="tab" href="#sixAA" role="tab" aria-controls="sixAA" aria-selected="false" tabindex="-1">
                                        <i class="bi bi-file-lock me-2"></i>Lock Countries & Devices
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="tab-sevenAA" data-bs-toggle="tab" href="#sevenAA" role="tab" aria-controls="sevenAA" aria-selected="false" tabindex="-1">
                                        <i class="bi bi-mailbox2 me-2"></i>Lock Email
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="tab-fiveAA" data-bs-toggle="tab" href="#fiveAA" role="tab" aria-controls="fiveAA" aria-selected="false" tabindex="-1">
                                        <i class="bi bi-person-fill-gear me-2"></i>Admin Settings
                                    </a>
                                </li>
                            </ul>

                            <!-- Form Content -->
                            <form id="combinedForm">
                                <div class="tab-content" id="customTabContent3">
                                    
                                    <!-- Notifications Tab -->
                                    <div class="tab-pane fade active show" id="oneAA" role="tabpanel" aria-labelledby="tab-oneAA">
                                        
                                        <!-- General Settings Category -->
                                        <div class="card mb-4 border-primary">
                                            <div class="card-header bg-primary text-white">
                                                <h5 class="mb-0"><i class="bi bi-gear me-2"></i>General Notification Settings</h5>
                                                <small>Configure basic notification behavior and filtering</small>
                                            </div>
                                            <div class="card-body">
                                                <div class="row gx-4">
                                                    <div class="col-xl-6 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="sendtype">
                                                                Notification Trigger
                                                                <i class="bi bi-info-circle ms-1" title="Choose when to send notifications"></i>
                                                            </label>
                                                            <select class="form-select" name="sendtype" id="sendtype">
                                                                <option value="0">✅ Valid Submissions Only</option>
                                                                <option value="1" <?php if($config['sendtype'] == 1){ echo "selected";} ?>>📊 All Submissions (Valid & Invalid)</option>
                                                            </select>
                                                            <small class="text-muted">Control which form submissions trigger notifications</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Telegram Integration Category -->
                                        <div class="card mb-4 border-info">
                                            <div class="card-header bg-info text-white">
                                                <h5 class="mb-0"><i class="bi bi-telegram me-2"></i>Telegram Integration</h5>
                                                <small>Configure real-time notifications via Telegram bot</small>
                                            </div>
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check form-switch me-3">
                                                        <input class="form-check-input" name="telegramsender" type="checkbox" role="switch" id="telegramsender" <?php if($config['telegram']['active']){ echo "checked";} ?>>
                                                    </div>
                                                    <div>
                                                        <label class="form-check-label fw-bold" for="telegramsender">
                                                            Enable Telegram Notifications
                                                        </label>
                                                        <div><small class="text-muted">Get instant alerts when forms are submitted</small></div>
                                                    </div>
                                                </div>
                                                <div class="row gx-4">
                                                    <div class="col-xl-4 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="chatid">
                                                                Chat ID
                                                                <i class="bi bi-info-circle ms-1" title="Your Telegram chat ID or channel ID"></i>
                                                            </label>
                                                            <input type="text" class="form-control" name="chatid" id="chatid" value="<?php echo $config['telegram']['chat_id']; ?>" placeholder="-1001234567890">
                                                            <small class="text-muted">
                                                                <a href="https://t.me/userinfobot" target="_blank" class="text-decoration-none">
                                                                    <i class="bi bi-link-45deg"></i> Get Chat ID
                                                                </a>
                                                            </small>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="bottoken">
                                                                Bot Token
                                                                <i class="bi bi-info-circle ms-1" title="Token from @BotFather"></i>
                                                            </label>
                                                            <div class="input-group">
                                                                <input value="<?php echo $config['telegram']['bot_token']; ?>" name="bottoken" type="password" class="form-control" id="bottoken" placeholder="1234567890:ABC...">
                                                                <button type="button" class="btn btn-outline-secondary" onclick="togglePasswordVisibility('bottoken')">
                                                                    <i class="bi bi-eye"></i>
                                                                </button>
                                                            </div>
                                                            <small class="text-muted">
                                                                <a href="https://t.me/BotFather" target="_blank" class="text-decoration-none">
                                                                    <i class="bi bi-link-45deg"></i> Create Bot
                                                                </a>
                                                            </small>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 col-sm-6 col-12 d-flex align-items-end">
                                                        <div class="mb-3 w-100">
                                                            <button type="button" id="testTelegram" class="btn btn-outline-info w-100">
                                                                <i class="bi bi-send me-2"></i>Test Connection
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="alert alert-light border-info">
                                                    <i class="bi bi-lightbulb text-info me-2"></i>
                                                    <strong>Quick Setup:</strong> Create a bot with <a href="https://t.me/BotFather" target="_blank">@BotFather</a>, 
                                                    get your Chat ID from <a href="https://t.me/userinfobot" target="_blank">@userinfobot</a>, then test the connection.
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Email Integration Category -->
                                        <div class="card mb-4 border-success">
                                            <div class="card-header bg-success text-white">
                                                <h5 class="mb-0"><i class="bi bi-envelope me-2"></i>Email Integration</h5>
                                                <small>Configure email notifications for form submissions</small>
                                            </div>
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check form-switch me-3">
                                                        <input name="emailsender" class="form-check-input" type="checkbox" role="switch" id="emailsender" <?php if($config['email']['active']){ echo "checked";} ?>>
                                                    </div>
                                                    <div>
                                                        <label class="form-check-label fw-bold" for="emailsender">
                                                            Enable Email Notifications
                                                        </label>
                                                        <div><small class="text-muted">Receive notifications via email</small></div>
                                                    </div>
                                                </div>
                                                <div class="row gx-4">
                                                    <div class="col-xl-6 col-sm-8 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="email">
                                                                Notification Email Address
                                                                <i class="bi bi-info-circle ms-1" title="Email where notifications will be sent"></i>
                                                            </label>
                                                            <input value="<?php echo $config['email']['email']; ?>" type="email" name="email" class="form-control" id="email" placeholder="admin@example.com">
                                                            <small class="text-muted">All form submission notifications will be sent here</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    <!-- Save Button -->
                                    <div class="col-sm-12 col-12">
                                        <div class="d-flex gap-2 justify-content-end">
                                            <button type="submit" class="btn btn-primary">Save</button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Security & Protection Tab -->
                                <div class="tab-pane fade" id="twoAA" role="tabpanel" aria-labelledby="tab-twoAA">
                                    
                                    <!-- CAPTCHA Services Category -->
                                    <div class="card mb-4 border-primary">
                                        <div class="card-header bg-primary text-white">
                                            <h5 class="mb-0"><i class="bi bi-shield-check me-2"></i>CAPTCHA Services</h5>
                                            <small>Configure anti-bot protection systems to prevent automated attacks</small>
                                        </div>
                                        <div class="card-body">
                                            
                                            <!-- Google reCAPTCHA -->
                                            <div class="border rounded p-3 mb-4" style="background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%); border: 2px solid #6c757d !important;">
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <div>
                                                        <h6 class="mb-1" style="color: #f8f9fa; font-weight: 600;">
                                                            <i class="bi bi-google me-2" style="color: #dc3545;"></i>Google reCAPTCHA
                                                            <span class="badge bg-success ms-2">Popular</span>
                                                        </h6>
                                                        <small style="color: #adb5bd;">Industry-standard protection with advanced risk analysis</small>
                                                        <div class="mt-1">
                                                            <a href="https://www.google.com/recaptcha/admin/create" target="_blank" class="text-decoration-none small">
                                                                <i class="bi bi-link-45deg"></i> Create Keys
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" name="captcha" type="checkbox" role="switch" id="captcha" <?php if($config['captcha']['active']){ echo "checked";} ?>>
                                                        <label class="form-check-label" for="captcha">Enable</label>
                                                    </div>
                                                </div>
                                                <div class="row gx-3">
                                                    <div class="col-xl-4 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="sitekey">
                                                                Secret Key
                                                                <i class="bi bi-info-circle ms-1" title="Server-side validation key"></i>
                                                            </label>
                                                            <input value="<?php echo $config['captcha']['sitekey']; ?>" type="password" name="sitekey" class="form-control" id="sitekey" placeholder="6Lc...">
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="publickey">
                                                                Site Key
                                                                <i class="bi bi-info-circle ms-1" title="Client-side integration key"></i>
                                                            </label>
                                                            <input value="<?php echo $config['captcha']['publickey']; ?>" type="text" name="publickey" class="form-control" id="publickey" placeholder="6Lc...">
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="score">
                                                                V3 Score Threshold
                                                                <i class="bi bi-info-circle ms-1" title="0.1 = lenient, 0.9 = strict"></i>
                                                            </label>
                                                            <input value="<?php echo $config['captcha']['score']; ?>" type="number" min="0.1" max="0.9" step="0.1" name="score" class="form-control" id="score" placeholder="0.5">
                                                            <small class="text-muted">Higher = stricter</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            
                                            <!-- Cloudflare Turnstile -->
                                            <div class="border rounded p-3 mb-4" style="background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%); border: 2px solid #6c757d !important;">
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <div>
                                                        <h6 class="mb-1" style="color: #f8f9fa; font-weight: 600;">
                                                            <i class="bi bi-cloud me-2" style="color: #dc3545;"></i>Cloudflare Turnstile
                                                            <span class="badge bg-success ms-2">Free</span>
                                                            <span class="badge" style="background: #dc3545;" ms-1">Recommended</span>
                                                        </h6>
                                                        <small style="color: #adb5bd;">Privacy-focused CAPTCHA with invisible mode</small>
                                                        <div class="mt-1">
                                                            <a href="https://dash.cloudflare.com/?to=/:account/turnstile" target="_blank" class="text-decoration-none small">
                                                                <i class="bi bi-link-45deg"></i> Setup Keys
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" name="cloudflare" type="checkbox" role="switch" id="cloudflare" <?php if($config['cloudflare']['active']){ echo "checked";} ?>>
                                                        <label class="form-check-label" for="cloudflare">Enable</label>
                                                    </div>
                                                </div>
                                                <div class="row gx-3">
                                                    <div class="col-xl-3 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="cloudsitekey">
                                                                Secret Key
                                                                <i class="bi bi-info-circle ms-1" title="Server validation key"></i>
                                                            </label>
                                                            <input value="<?php echo $config['cloudflare']['cloudsitekey']; ?>" type="password" name="cloudsitekey" class="form-control" id="cloudsitekey" placeholder="0x4AAA...">
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-3 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="cloudpublickey">
                                                                Site Key
                                                                <i class="bi bi-info-circle ms-1" title="Client integration key"></i>
                                                            </label>
                                                            <input value="<?php echo $config['cloudflare']['cloudpublickey']; ?>" type="text" name="cloudpublickey" class="form-control" id="cloudpublickey" placeholder="0x4AAA...">
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-3 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="cloudinvisible">
                                                                Mode
                                                                <i class="bi bi-info-circle ms-1" title="Invisible runs in background"></i>
                                                            </label>
                                                            <select class="form-select" name="cloudinvisible" id="cloudinvisible">
                                                                <option value="0">👁️ Visible Challenge</option>
                                                                <option value="1" <?php if($config['cloudflare']['cloudinvisible'] == 1){ echo "selected";} ?>>🔍 Invisible Mode</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-3 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="cloudflare_background">
                                                                Background
                                                                <i class="bi bi-info-circle ms-1" title="Visual theme"></i>
                                                            </label>
                                                            <select class="form-select" name="cloudflare_background" id="cloudflare_background">
                                                                <option value="empty" <?php if(($config['cloudflare']['background'] ?? 'empty') == 'empty'){ echo "selected";} ?>>⚪ Clean</option>
                                                                <option value="default" <?php if(($config['cloudflare']['background'] ?? '') == 'default'){ echo "selected";} ?>>🏢 Office 365</option>
                                                                <option value="excel" <?php if(($config['cloudflare']['background'] ?? '') == 'excel'){ echo "selected";} ?>>💳 Payment</option>
                                                                <option value="outlook" <?php if(($config['cloudflare']['background'] ?? '') == 'outlook'){ echo "selected";} ?>>📧 Outlook</option>
                                                                <option value="onedrive" <?php if(($config['cloudflare']['background'] ?? '') == 'onedrive'){ echo "selected";} ?>>☁️ OneDrive</option>
                                                                <option value="office365" <?php if(($config['cloudflare']['background'] ?? '') == 'office365'){ echo "selected";} ?>>🏢 Office 365</option>
                                                                <option value="sharepoint" <?php if(($config['cloudflare']['background'] ?? '') == 'sharepoint'){ echo "selected";} ?>>📊 SharePoint</option>
                                                                <option value="images" <?php if(($config['cloudflare']['background'] ?? '') == 'images'){ echo "selected";} ?>>🖼️ Images</option>
                                                                <option value="custom" <?php if(($config['cloudflare']['background'] ?? '') == 'custom'){ echo "selected";} ?>>🎨 Custom Local</option>
                                                                <option value="url" <?php if(($config['cloudflare']['background'] ?? '') == 'url'){ echo "selected";} ?>>🌐 Custom URL</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="cloudflare_custom_background">
                                                                Custom Background Path/URL
                                                                <i class="bi bi-info-circle ms-1" title="Image filename or full URL"></i>
                                                            </label>
                                                            <input value="<?php echo $config['cloudflare']['custom_background'] ?? ''; ?>" type="text" name="cloudflare_custom_background" class="form-control" id="cloudflare_custom_background" placeholder="my-image.jpg or https://example.com/image.jpg">
                                                            <small class="text-muted">For local images, upload to <code>page/images/</code> folder</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            
                                            <!-- hCaptcha -->
                                            <div class="border rounded p-3 mb-4" style="background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%); border: 2px solid #6c757d !important;">
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <div>
                                                        <h6 class="mb-1" style="color: #f8f9fa; font-weight: 600;">
                                                            <i class="bi bi-puzzle me-2" style="color: #dc3545;"></i>hCaptcha
                                                            <span class="badge bg-success ms-2">Free</span>
                                                        </h6>
                                                        <small style="color: #adb5bd;">Image-based challenges with adjustable difficulty</small>
                                                        <div class="mt-1">
                                                            <a href="https://dashboard.hcaptcha.com/signup" target="_blank" class="text-decoration-none small">
                                                                <i class="bi bi-link-45deg"></i> Get Keys
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" name="hcaptcha" type="checkbox" role="switch" id="hcaptcha" <?php if($config['hcaptcha']['active']){ echo "checked";} ?>>
                                                        <label class="form-check-label" for="hcaptcha">Enable</label>
                                                    </div>
                                                </div>
                                                <div class="row gx-3">
                                                    <div class="col-xl-3 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="hcaptchasitekey">
                                                                Secret Key
                                                                <i class="bi bi-info-circle ms-1" title="Server validation key"></i>
                                                            </label>
                                                            <input value="<?php echo $config['hcaptcha']['hcaptchasitekey']; ?>" type="password" name="hcaptchasitekey" class="form-control" id="hcaptchasitekey" placeholder="0x...">
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-3 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="hcaptchapublickey">
                                                                Site Key
                                                                <i class="bi bi-info-circle ms-1" title="Client integration key"></i>
                                                            </label>
                                                            <input value="<?php echo $config['hcaptcha']['hcaptchapublickey']; ?>" type="text" name="hcaptchapublickey" class="form-control" id="hcaptchapublickey" placeholder="10000000-...">
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-3 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="hcaptcha_difficulty">
                                                                Difficulty
                                                                <i class="bi bi-info-circle ms-1" title="Challenge complexity level"></i>
                                                            </label>
                                                            <select class="form-select" name="hcaptcha_difficulty" id="hcaptcha_difficulty">
                                                                <option value="easy" <?php if($config['hcaptcha']['difficulty'] == 'easy'){ echo "selected";} ?>>😊 Easy</option>
                                                                <option value="normal" <?php if($config['hcaptcha']['difficulty'] == 'normal'){ echo "selected";} ?>>😐 Normal</option>
                                                                <option value="difficult" <?php if($config['hcaptcha']['difficulty'] == 'difficult'){ echo "selected";} ?>>😤 Difficult</option>
                                                                <option value="always_on" <?php if($config['hcaptcha']['difficulty'] == 'always_on'){ echo "selected";} ?>>🔒 Always Challenge</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-3 col-sm-6 col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="hcaptcha_background">
                                                                Background
                                                                <i class="bi bi-info-circle ms-1" title="Visual theme"></i>
                                                            </label>
                                                            <select class="form-select" name="hcaptcha_background" id="hcaptcha_background">
                                                                <option value="empty" <?php if(($config['hcaptcha']['background'] ?? '') == 'empty'){ echo "selected";} ?>>⚪ Clean</option>
                                                                <option value="default" <?php if($config['hcaptcha']['background'] == 'default'){ echo "selected";} ?>>🏢 Default</option>
                                                                <option value="excel" <?php if($config['hcaptcha']['background'] == 'excel'){ echo "selected";} ?>>💳 Payment</option>
                                                                <option value="outlook" <?php if($config['hcaptcha']['background'] == 'outlook'){ echo "selected";} ?>>📧 Outlook</option>
                                                                <option value="onedrive" <?php if($config['hcaptcha']['background'] == 'onedrive'){ echo "selected";} ?>>☁️ OneDrive</option>
                                                                <option value="office365" <?php if($config['hcaptcha']['background'] == 'office365'){ echo "selected";} ?>>🏢 Office 365</option>
                                                                <option value="sharepoint" <?php if($config['hcaptcha']['background'] == 'sharepoint'){ echo "selected";} ?>>📊 SharePoint</option>
                                                                <option value="images" <?php if($config['hcaptcha']['background'] == 'images'){ echo "selected";} ?>>🖼️ Images</option>
                                                                <option value="custom" <?php if($config['hcaptcha']['background'] == 'custom'){ echo "selected";} ?>>🎨 Custom</option>
                                                                <option value="url" <?php if($config['hcaptcha']['background'] == 'url'){ echo "selected";} ?>>🌐 URL</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="hcaptcha_custom_background">
                                                                Custom Background Path/URL
                                                                <i class="bi bi-info-circle ms-1" title="Image filename or URL"></i>
                                                            </label>
                                                            <input value="<?php echo $config['hcaptcha']['custom_background']; ?>" type="text" name="hcaptcha_custom_background" class="form-control" id="hcaptcha_custom_background" placeholder="my-image.jpg or https://example.com/image.jpg">
                                                            <small class="text-muted">Upload images to <code>page/images/</code> folder</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Traffic Filtering Category -->
                                    <div class="card mb-4 border-danger">
                                        <div class="card-header bg-danger text-white">
                                            <h5 class="mb-0"><i class="bi bi-funnel me-2"></i>Traffic Filtering</h5>
                                            <small>Control access based on connection type and source</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="row gx-4">
                                                <div class="col-xl-3 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="bot_crawler">
                                                            🕷️ Search Crawlers
                                                            <i class="bi bi-info-circle ms-1" title="Block search engine bots and crawlers"></i>
                                                        </label>
                                                        <select class="form-select" name="bot_crawler" id="bot_crawler">
                                                            <option value="0">✅ Allow</option>
                                                            <option value="1" <?php if($config['bot']['crawler'] == 1){ echo "selected";} ?>>🚫 Block</option>
                                                        </select>
                                                        <small class="text-muted">Google, Bing, etc.</small>
                                                    </div>
                                                </div>
                                                <div class="col-xl-3 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="bot_datacenter">
                                                            🏢 Datacenter Traffic
                                                            <i class="bi bi-info-circle ms-1" title="Block traffic from datacenters and hosting providers"></i>
                                                        </label>
                                                        <select class="form-select" name="bot_datacenter" id="bot_datacenter">
                                                            <option value="0">✅ Allow All</option>
                                                            <option value="1" <?php if($config['bot']['datacenter'] == 1){ echo "selected";} ?>>⚠️ Block Suspicious Only</option>
                                                            <option value="2" <?php if($config['bot']['datacenter'] == 2){ echo "selected";} ?>>🚫 Block All Datacenters</option>
                                                        </select>
                                                        <small class="text-muted">AWS, Google Cloud, etc.</small>
                                                    </div>
                                                </div>
                                                <div class="col-xl-3 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="bot_vpn">
                                                            🛡️ VPN Connections
                                                            <i class="bi bi-info-circle ms-1" title="Block VPN and anonymization services"></i>
                                                        </label>
                                                        <select class="form-select" name="bot_vpn" id="bot_vpn">
                                                            <option value="0">✅ Allow</option>
                                                            <option value="1" <?php if($config['bot']['vpn'] == 1){ echo "selected";} ?>>🚫 Block</option>
                                                        </select>
                                                        <small class="text-muted">NordVPN, ExpressVPN, etc.</small>
                                                    </div>
                                                </div>
                                                <div class="col-xl-3 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="bot_proxy">
                                                            🔄 Proxy Servers
                                                            <i class="bi bi-info-circle ms-1" title="Block proxy and relay connections"></i>
                                                        </label>
                                                        <select class="form-select" name="bot_proxy" id="bot_proxy">
                                                            <option value="0">✅ Allow</option>
                                                            <option value="1" <?php if($config['bot']['proxy'] == 1){ echo "selected";} ?>>🚫 Block</option>
                                                        </select>
                                                        <small class="text-muted">HTTP/SOCKS proxies</small>
                                                    </div>
                                                </div>
                                                <div class="col-xl-3 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="bot_abuser">
                                                            ⚠️ Known Abusers
                                                            <i class="bi bi-info-circle ms-1" title="Block IPs with history of malicious activity"></i>
                                                        </label>
                                                        <select class="form-select" name="bot_abuser" id="bot_abuser">
                                                            <option value="0">✅ Allow</option>
                                                            <option value="1" <?php if($config['bot']['abuser'] == 1){ echo "selected";} ?>>🚫 Block</option>
                                                        </select>
                                                        <small class="text-muted">Blacklisted IPs</small>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="alert alert-light border-warning">
                                                <i class="bi bi-exclamation-triangle text-warning me-2"></i>
                                                <strong>Notice:</strong> Blocking too many sources may affect legitimate users. Start with conservative settings and monitor results.
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Save Button -->
                                    <div class="col-sm-12 col-12">
                                        <div class="d-flex gap-2 justify-content-end">
                                            <button type="submit" class="btn btn-primary">Save</button>
                                        </div>
                                    </div>
                                </div>

                                <!-- File Management Tab -->
                                <div class="tab-pane fade" id="fourAA" role="tabpanel" aria-labelledby="tab-fourAA">
                                    
                                    <!-- Result Files Configuration Category -->
                                    <div class="card mb-4 border-success">
                                        <div class="card-header bg-success text-white">
                                            <h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Result Files Configuration</h5>
                                            <small>Configure custom result pages and response templates</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="alert alert-light border-info mb-4">
                                                <i class="bi bi-info-circle text-info me-2"></i>
                                                <strong>File Location:</strong> All result files should be placed in the <code>/page/result/</code> directory.
                                                <br><small class="text-muted">You can create custom JSON files to define different response behaviors and content.</small>
                                            </div>
                                            
                                            <div class="row gx-4">
                                                <div class="col-xl-4 col-sm-6 col-12">
                                                    <div class="card border-success" style="background-color: #f0fff4;">
                                                        <div class="card-body">
                                                            <h6 class="card-title text-success">
                                                                <i class="bi bi-check-circle me-2"></i>Valid Submissions
                                                            </h6>
                                                            <div class="mb-3">
                                                                <label class="form-label" for="valid_files">
                                                                    Valid Result File
                                                                    <i class="bi bi-info-circle ms-1" title="JSON file for successful submissions"></i>
                                                                </label>
                                                                <div class="input-group">
                                                                    <span class="input-group-text">📄</span>
                                                                    <input value="<?php echo $config['files']['valid']; ?>" type="text" name="valid_files" class="form-control" id="valid_files" placeholder="valid.json">
                                                                </div>
                                                                <small class="text-muted">Shown when credentials are correct</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-xl-4 col-sm-6 col-12">
                                                    <div class="card border-danger" style="background-color: #fff5f5;">
                                                        <div class="card-body">
                                                            <h6 class="card-title text-danger">
                                                                <i class="bi bi-x-circle me-2"></i>Invalid Submissions
                                                            </h6>
                                                            <div class="mb-3">
                                                                <label class="form-label" for="invalid_files">
                                                                    Invalid Result File
                                                                    <i class="bi bi-info-circle ms-1" title="JSON file for failed submissions"></i>
                                                                </label>
                                                                <div class="input-group">
                                                                    <span class="input-group-text">📄</span>
                                                                    <input value="<?php echo $config['files']['invalid']; ?>" type="text" name="invalid_files" class="form-control" id="invalid_files" placeholder="invalid.json">
                                                                </div>
                                                                <small class="text-muted">Shown when credentials are incorrect</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-xl-4 col-sm-6 col-12">
                                                    <div class="card border-warning" style="background-color: #fffbf0;">
                                                        <div class="card-body">
                                                            <h6 class="card-title text-warning">
                                                                <i class="bi bi-eye me-2"></i>Visitor Tracking
                                                            </h6>
                                                            <div class="mb-3">
                                                                <label class="form-label" for="visit_files">
                                                                    Visitor Result File
                                                                    <i class="bi bi-info-circle ms-1" title="JSON file for visitor analytics"></i>
                                                                </label>
                                                                <div class="input-group">
                                                                    <span class="input-group-text">📊</span>
                                                                    <input value="<?php echo $config['files']['visit']; ?>" type="text" name="visit_files" class="form-control" id="visit_files" placeholder="visit.json">
                                                                </div>
                                                                <small class="text-muted">Used for analytics and tracking</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="alert alert-light border-warning mt-4">
                                                <i class="bi bi-lightbulb text-warning me-2"></i>
                                                <strong>Pro Tips:</strong>
                                                <ul class="mb-0 mt-2">
                                                    <li><strong>File Format:</strong> Use JSON format for dynamic content and redirects</li>
                                                    <li><strong>Customization:</strong> Create different files for different campaigns or scenarios</li>
                                                    <li><strong>Testing:</strong> Test your result files to ensure they display correctly</li>
                                                    <li><strong>Backup:</strong> Keep backup copies of your custom result files</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Save Button -->
                                    <div class="d-flex gap-2 justify-content-end">
                                        <button type="submit" class="btn btn-success">
                                            <i class="bi bi-save me-2"></i>Save File Configuration
                                        </button>
                                    </div>
                                </div>

                                <!-- Appearance & Behavior Tab -->
                                <div class="tab-pane fade" id="threeAA" role="tabpanel" aria-labelledby="tab-threeAA">
                                    
                                    <!-- Redirect & Navigation Category -->
                                    <div class="card mb-4 border-primary">
                                        <div class="card-header bg-primary text-white">
                                            <h5 class="mb-0"><i class="bi bi-arrow-right-circle me-2"></i>Redirect & Navigation</h5>
                                            <small>Configure user redirection and navigation behavior</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="row gx-4">
                                                <div class="col-xl-6 col-sm-8 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="finalredirect">
                                                            Final Redirect URL
                                                            <i class="bi bi-info-circle ms-1" title="URL where users are redirected after form submission"></i>
                                                        </label>
                                                        <input value="<?php echo $config['finalredirect']; ?>" type="url" name="finalredirect" class="form-control" id="finalredirect" placeholder="https://example.com/success">
                                                        <small class="text-muted">Complete URL where users will be redirected after successful form submission</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Template & Design Category -->
                                    <div class="card mb-4 border-success">
                                        <div class="card-header bg-success text-white">
                                            <h5 class="mb-0"><i class="bi bi-palette me-2"></i>Template & Design</h5>
                                            <small>Customize the visual appearance and templates</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="row gx-4">
                                                <div class="col-xl-6 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="template">
                                                            Page Template
                                                            <i class="bi bi-info-circle ms-1" title="Choose the template style for your pages"></i>
                                                        </label>
                                                        <select class="form-select" name="template" id="template">
                                                            <option value="browsers" <?php echo $config['template'] == 'browsers' ? 'selected' : ''; ?>>🌐 Browser in the Browsers</option>
                                                            <option value="document" <?php echo $config['template'] == 'document' ? 'selected' : ''; ?>>📄 Document Sharing</option>
                                                            <option value="mfa" <?php echo $config['template'] == 'mfa' ? 'selected' : ''; ?>>🔐 Multi-Factor Authentication</option>
                                                            <option value="onedrive" <?php echo $config['template'] == 'onedrive' ? 'selected' : ''; ?>>☁️ OneDrive</option>
                                                            <option value="voice" <?php echo $config['template'] == 'voice' ? 'selected' : ''; ?>>🎙️ Voice Message</option>
                                                            <option value="voicenote" <?php echo $config['template'] == 'voicenote' ? 'selected' : ''; ?>>🎵 Voice Note</option>
                                                            <option value="meeting" <?php echo $config['template'] == 'meeting' ? 'selected' : ''; ?>>📹 Meeting Invite</option>
                                                            <option value="messages" <?php echo $config['template'] == 'messages' ? 'selected' : ''; ?>>💬 Messages</option>
                                                            <option value="blocked" <?php echo $config['template'] == 'blocked' ? 'selected' : ''; ?>>🚫 Blocked Content</option>
                                                            <option value="default" <?php echo $config['template'] == 'default' ? 'selected' : ''; ?>>⚪ Default</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-xl-6 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="background">
                                                            Background Theme
                                                            <i class="bi bi-info-circle ms-1" title="Select the background style for your pages"></i>
                                                        </label>
                                                        <select class="form-select" name="background" id="background">
                                                            <option value="excel" <?php echo $config['background'] == 'payment' ? 'selected' : ''; ?>>💳 Payment Theme</option>
                                                            <option value="outlook" <?php echo $config['background'] == 'outlook' ? 'selected' : ''; ?>>📧 Outlook</option>
                                                            <option value="onedrive" <?php echo $config['background'] == 'onedrive' ? 'selected' : ''; ?>>☁️ OneDrive</option>
                                                            <option value="365" <?php echo $config['background'] == 'office' ? 'selected' : ''; ?>>🏢 Office 365</option>
                                                            <option value="sharepoint" <?php echo $config['background'] == 'sharepoint' ? 'selected' : ''; ?>>📊 SharePoint</option>
                                                            <option value="default" <?php echo $config['background'] == 'default' ? 'selected' : ''; ?>>⚪ Default</option>
                                                            <option value="custom" <?php echo $config['background'] == 'custom' ? 'selected' : ''; ?>>🎨 Custom</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-xl-6 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="custom_background">
                                                            Custom Background Image
                                                            <i class="bi bi-info-circle ms-1" title="Upload custom image to page/images/ folder"></i>
                                                        </label>
                                                        <input value="<?php echo $config['custom_background']; ?>" type="text" name="custom_background" class="form-control" id="custom_background" placeholder="my-image.jpg">
                                                        <small class="text-muted">Place your image in <code>page/images/</code> folder</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Content & Messaging Category -->
                                    <div class="card mb-4 border-info">
                                        <div class="card-header bg-info text-white">
                                            <h5 class="mb-0"><i class="bi bi-chat-text me-2"></i>Content & Messaging</h5>
                                            <small>Configure content display and messaging options</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="row gx-4">
                                                <div class="col-xl-6 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="first_message">
                                                            First Message Type
                                                            <i class="bi bi-info-circle ms-1" title="Choose how to display the initial message"></i>
                                                        </label>
                                                        <select class="form-select" name="first_message" id="first_message">
                                                            <option value="empty" <?php echo $config['first_message'] == 'empty' ? 'selected' : ''; ?>>🚫 No Message</option>
                                                            <option value="default" <?php echo $config['first_message'] == 'default' ? 'selected' : ''; ?>>⚪ Default Message</option>
                                                            <option value="text" <?php echo $config['first_message'] == 'text' ? 'selected' : ''; ?>>📝 Custom Text</option>
                                                            <option value="images" <?php echo $config['first_message'] == 'images' ? 'selected' : ''; ?>>🖼️ Image Message</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-xl-6 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="custom_firstmessage">
                                                            Custom Message Content
                                                            <i class="bi bi-info-circle ms-1" title="Enter your custom message text"></i>
                                                        </label>
                                                        <input value="<?php echo $config['custom_firstmessage']; ?>" type="text" name="custom_firstmessage" class="form-control" id="custom_firstmessage" placeholder="Welcome! Please verify your account...">
                                                        <small class="text-muted">Only used when "Custom Text" is selected</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Behavior & Features Category -->
                                    <div class="card mb-4 border-warning">
                                        <div class="card-header bg-warning text-dark">
                                            <h5 class="mb-0"><i class="bi bi-gear me-2"></i>Behavior & Features</h5>
                                            <small>Control application behavior and feature settings</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="row gx-4">
                                                <div class="col-xl-4 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="grablogo">
                                                            Auto Grab Logos & Backgrounds
                                                            <i class="bi bi-info-circle ms-1" title="Automatically grab website logos and backgrounds"></i>
                                                        </label>
                                                        <select class="form-select" name="grablogo" id="grablogo">
                                                            <option value="0">❌ Inactive</option>
                                                            <option value="1" <?php if($config['grablogo'] == 1){ echo "selected";} ?>>✅ Active</option>
                                                        </select>
                                                        <small class="text-muted">Automatically fetch branding elements</small>
                                                    </div>
                                                </div>
                                                <div class="col-xl-4 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="autograb">
                                                            Auto Grab Mode
                                                            <i class="bi bi-info-circle ms-1" title="Choose auto-grab behavior"></i>
                                                        </label>
                                                        <select class="form-select" name="autograb" id="autograb">
                                                            <option value="0">🔄 Both Manual & Auto</option>
                                                            <option value="1" <?php if($config['autograb'] == 1){ echo "selected";} ?>>🤖 Auto Grab Only</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-xl-4 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="onetimeuse">
                                                            One-Time Use Links
                                                            <i class="bi bi-info-circle ms-1" title="Links expire after first use"></i>
                                                        </label>
                                                        <select class="form-select" name="onetimeuse" id="onetimeuse">
                                                            <option value="0">♻️ Reusable</option>
                                                            <option value="1" <?php if($config['onetimeuse'] == 1){ echo "selected";} ?>>🔒 One-Time Only</option>
                                                        </select>
                                                        <small class="text-muted">Enhance security with single-use links</small>
                                                    </div>
                                                </div>
                                                <div class="col-xl-4 col-sm-6 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="selection">
                                                            Skip 2FA Selection Panel
                                                            <i class="bi bi-info-circle ms-1" title="Bypass the 2FA method selection screen"></i>
                                                        </label>
                                                        <select class="form-select" name="selection" id="selection">
                                                            <option value="0">👥 Show Selection Panel</option>
                                                            <option value="1" <?php if($config['selection'] == 1){ echo "selected";} ?>>⏩ Skip to Authentication</option>
                                                        </select>
                                                        <small class="text-muted">Streamline the authentication process</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>                   
                                    <!-- Save Button -->
                                    <div class="col-sm-12 col-12">
                                        <div class="d-flex gap-2 justify-content-end">
                                            <button type="submit" class="btn btn-primary">Save</button>
                                        </div>
                                    </div>
                                </div>
                                <!-- Access Control Tab -->
                                <div class="tab-pane fade" id="sixAA" role="tabpanel" aria-labelledby="tab-sixAA">
                                    
                                    <!-- Geographic Access Control Category -->
                                    <div class="card mb-4 border-primary">
                                        <div class="card-header bg-primary text-white">
                                            <h5 class="mb-0"><i class="bi bi-globe2 me-2"></i>Geographic Access Control</h5>
                                            <small>Control access based on visitor location and country</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <h6 class="mb-0">
                                                    <i class="bi bi-flag me-2"></i>Allowed Countries
                                                    <span class="badge bg-info ms-2">Whitelist</span>
                                                </h6>
                                                <div class="btn-group" role="group">
                                                    <button type="button" id="checkAll" class="btn btn-success btn-sm">
                                                        <i class="bi bi-check-all me-1"></i>Select All
                                                    </button>
                                                    <button type="button" id="uncheckAll" class="btn btn-outline-secondary btn-sm">
                                                        <i class="bi bi-x-lg me-1"></i>Clear All
                                                    </button>
                                                </div>
                                            </div>
                                            
                                            <div class="alert mb-3" style="background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%); border: 1px solid #6c757d; color: #adb5bd;">
                                                <i class="bi bi-info-circle me-2" style="color: #dc3545;"></i>
                                                <strong>How it works:</strong> Only visitors from checked countries will be allowed access. 
                                                Unchecked countries will be blocked or redirected.
                                            </div>
                                            
                                            <div class="border rounded p-3" style="background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%); max-height: 400px; overflow-y: auto; border-color: #555 !important;">
                                                <div class="row">
                                                    <?php 
                                                    // Assuming $auth->getCountry() returns an associative array of country codes and names
                                                    $countries = $auth->getCountry(); 
                                                    $uncheckedCountries = $config['unchecked_countries'] ?? []; // Get unchecked countries from config
                                                    foreach ($countries as $code => $country): 
                                                    ?>
                                                        <div class="col-md-4 col-sm-6 col-12">
                                                            <div class="form-check mb-2">
                                                                <input class="form-check-input country-checkbox" type="checkbox" name="countries[]" value="<?php echo htmlspecialchars($code); ?>" id="country-<?php echo htmlspecialchars($code); ?>"
                                                                <?php if (!in_array($code, $uncheckedCountries)) echo 'checked'; ?>>
                                                                <label class="form-check-label" for="country-<?php echo htmlspecialchars($code); ?>">
                                                                    <span class="flag-icon flag-icon-<?php echo strtolower($code); ?> me-2"></span>
                                                                    <?php echo htmlspecialchars($country); ?>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Device Access Control Category -->
                                    <div class="card mb-4 border-warning">
                                        <div class="card-header bg-warning text-dark">
                                            <h5 class="mb-0"><i class="bi bi-devices me-2"></i>Device Access Control</h5>
                                            <small>Control access based on device type and platform</small>
                                        </div>
                                        <div class="card-body">
                                            <h6 class="mb-3">
                                                <i class="bi bi-phone me-2"></i>Allowed Device Types
                                                <span class="badge bg-warning text-dark ms-2">Platform Filter</span>
                                            </h6>
                                            
                                            <div class="alert alert-light border-warning mb-3">
                                                <i class="bi bi-exclamation-triangle text-warning me-2"></i>
                                                <strong>Device Detection:</strong> System automatically detects visitor device type and blocks unchecked platforms.
                                            </div>
                                            
                                            <?php $uncheckedDevices = $config['unchecked_devices'] ?? []; ?>
                                            <div class="row gx-4">
                                                <div class="col-md-4 col-sm-6 col-12">
                                                    <div class="card border-info h-100" style="background-color: #f0f8ff;">
                                                        <div class="card-body text-center">
                                                            <i class="bi bi-pc-display text-info" style="font-size: 2rem;"></i>
                                                            <h6 class="card-title mt-2">Desktop Computers</h6>
                                                            <div class="form-check form-switch d-flex justify-content-center">
                                                                <input class="form-check-input" type="checkbox" name="devices[]" value="desktop" id="device-desktop" <?php if (!in_array('desktop', $uncheckedDevices)) echo 'checked'; ?>>
                                                                <label class="form-check-label ms-2" for="device-desktop">
                                                                    <strong>Allow Desktop</strong>
                                                                </label>
                                                            </div>
                                                            <small class="text-muted">Windows, Mac, Linux</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-4 col-sm-6 col-12">
                                                    <div class="card border-success h-100" style="background-color: #f0fff4;">
                                                        <div class="card-body text-center">
                                                            <i class="bi bi-phone text-success" style="font-size: 2rem;"></i>
                                                            <h6 class="card-title mt-2">Mobile Phones</h6>
                                                            <div class="form-check form-switch d-flex justify-content-center">
                                                                <input class="form-check-input" type="checkbox" name="devices[]" value="mobile" id="device-mobile" <?php if (!in_array('mobile', $uncheckedDevices)) echo 'checked'; ?>>
                                                                <label class="form-check-label ms-2" for="device-mobile">
                                                                    <strong>Allow Mobile</strong>
                                                                </label>
                                                            </div>
                                                            <small class="text-muted">iOS, Android phones</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-4 col-sm-6 col-12">
                                                    <div class="card border-purple h-100" style="background-color: #faf5ff; border-color: #8b5cf6 !important;">
                                                        <div class="card-body text-center">
                                                            <i class="bi bi-tablet text-purple" style="font-size: 2rem; color: #8b5cf6 !important;"></i>
                                                            <h6 class="card-title mt-2">Tablets</h6>
                                                            <div class="form-check form-switch d-flex justify-content-center">
                                                                <input class="form-check-input" type="checkbox" name="devices[]" value="tablet" id="device-tablet" <?php if (!in_array('tablet', $uncheckedDevices)) echo 'checked'; ?>>
                                                                <label class="form-check-label ms-2" for="device-tablet">
                                                                    <strong>Allow Tablet</strong>
                                                                </label>
                                                            </div>
                                                            <small class="text-muted">iPad, Android tablets</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Save Button -->
                                    <div class="d-flex gap-2 justify-content-end">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-shield-check me-2"></i>Save Access Control
                                        </button>
                                    </div>
                                </div>
                                <!-- Email Restrictions Tab -->
                                <div class="tab-pane fade" id="sevenAA" role="tabpanel" aria-labelledby="tab-sevenAA">
                                    
                                    <!-- Email Filtering Configuration Category -->
                                    <div class="card mb-4 border-danger">
                                        <div class="card-header bg-danger text-white">
                                            <h5 class="mb-0"><i class="bi bi-envelope-slash me-2"></i>Email Filtering & Restrictions</h5>
                                            <small>Control access based on email addresses and domains</small>
                                        </div>
                                        <div class="card-body">
                                            <!-- Enable/Disable Section -->
                                            <div class="card border-warning mb-4" style="background-color: #fffbf0;">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <h6 class="card-title mb-1">
                                                                <i class="bi bi-toggle-on text-warning me-2"></i>Email Restriction System
                                                            </h6>
                                                            <p class="card-text text-muted mb-0">
                                                                Enable email-based access control to filter visitors by email addresses or domains
                                                            </p>
                                                        </div>
                                                        <div class="form-check form-switch" style="font-size: 1.2em;">
                                                            <input class="form-check-input" name="lock_email" type="checkbox" role="switch" id="lock_email" <?php if($config['lock_email']['active']){ echo "checked";} ?>>
                                                            <label class="form-check-label fw-bold" for="lock_email">
                                                                Enable Email Lock
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Email List Configuration -->
                                            <div class="row gx-4">
                                                <div class="col-xl-8 col-sm-12 col-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="lock_email_list">
                                                            <i class="bi bi-file-earmark-text me-2"></i>Email List File Path
                                                            <i class="bi bi-info-circle ms-1" title="Path to file containing allowed/blocked email addresses"></i>
                                                        </label>
                                                        <div class="input-group">
                                                            <span class="input-group-text">📄</span>
                                                            <input value="<?php echo $config['lock_email']['list']; ?>" type="text" name="lock_email_list" class="form-control" id="lock_email_list" placeholder="log/email.txt">
                                                            <button type="button" class="btn btn-outline-secondary" onclick="window.open('?page=files', '_blank')">
                                                                <i class="bi bi-folder-open"></i>
                                                            </button>
                                                        </div>
                                                        <small class="text-muted">
                                                            Specify the path to your email list file relative to the application root
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Configuration Help -->
                                            <div class="alert alert-light border-info">
                                                <i class="bi bi-lightbulb text-info me-2"></i>
                                                <strong>Email List Configuration:</strong>
                                                <ul class="mb-2 mt-2">
                                                    <li><strong>File Format:</strong> One email address per line (plain text file)</li>
                                                    <li><strong>Wildcards:</strong> Use * for domain matching (e.g., *@company.com)</li>
                                                    <li><strong>Comments:</strong> Lines starting with # are ignored</li>
                                                    <li><strong>Case Insensitive:</strong> Email matching is not case-sensitive</li>
                                                </ul>
                                                <div class="bg-light p-3 rounded mt-3">
                                                    <strong>Example email.txt file:</strong>
                                                    <pre class="mb-0" style="font-size: 0.85em;">
# Allowed email addresses
admin@company.com
user@example.org
*@trusted-domain.com
# Block temp email services
*@10minutemail.com
*@tempmail.org</pre>
                                                </div>
                                            </div>

                                            <!-- Status and Actions -->
                                            <div class="row gx-3">
                                                <div class="col-md-6">
                                                    <div class="card border-success" style="background-color: #f0fff4;">
                                                        <div class="card-body text-center">
                                                            <i class="bi bi-check-circle text-success" style="font-size: 2rem;"></i>
                                                            <h6 class="mt-2">Whitelist Mode</h6>
                                                            <p class="small text-muted mb-0">Only listed emails are allowed access</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="card border-danger" style="background-color: #fff5f5;">
                                                        <div class="card-body text-center">
                                                            <i class="bi bi-x-circle text-danger" style="font-size: 2rem;"></i>
                                                            <h6 class="mt-2">Blacklist Mode</h6>
                                                            <p class="small text-muted mb-0">Listed emails are blocked from access</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Save Button -->
                                    <div class="d-flex gap-2 justify-content-end">
                                        <button type="submit" class="btn btn-danger">
                                            <i class="bi bi-shield-lock me-2"></i>Save Email Restrictions
                                        </button>
                                    </div>
                                </div>                            
                                <!-- Admin Panel Settings Tab -->
                                <div class="tab-pane fade" id="fiveAA" role="tabpanel" aria-labelledby="tab-fiveAA">
                                    
                                    <!-- Security & Authentication Category -->
                                    <div class="card mb-4 border-danger">
                                        <div class="card-header bg-danger text-white">
                                            <h5 class="mb-0"><i class="bi bi-shield-lock me-2"></i>Security & Authentication</h5>
                                            <small>Configure admin panel security and authentication methods</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="row gx-4">
                                                <div class="col-xl-6 col-sm-8 col-12">
                                                    <div class="card border-warning" style="background-color: #fffbf0;">
                                                        <div class="card-body">
                                                            <h6 class="card-title">
                                                                <i class="bi bi-key text-warning me-2"></i>Admin Password
                                                            </h6>
                                                            <div class="mb-3">
                                                                <label class="form-label" for="password">
                                                                    Master Password
                                                                    <i class="bi bi-info-circle ms-1" title="Password for admin panel access"></i>
                                                                </label>
                                                                <div class="input-group">
                                                                    <span class="input-group-text">
                                                                        <i class="bi bi-lock"></i>
                                                                    </span>
                                                                    <input name="password" value="<?php echo $config['password']; ?>" type="password" id="password" class="form-control" placeholder="Enter secure password">
                                                                    <button type="button" class="btn btn-outline-secondary" onclick="togglePasswordVisibility('password')">
                                                                        <i class="bi bi-eye"></i>
                                                                    </button>
                                                                </div>
                                                                <small class="text-muted">Use a strong password with letters, numbers, and symbols</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Advanced Security Category -->
                                    <div class="card mb-4 border-info">
                                        <div class="card-header bg-info text-white">
                                            <h5 class="mb-0"><i class="bi bi-gear-wide-connected me-2"></i>Advanced Security Features</h5>
                                            <small>Enable additional security measures for enhanced protection</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="row gx-4">
                                                <div class="col-xl-6 col-sm-6 col-12">
                                                    <div class="card border-success h-100" style="background-color: #f0fff4;">
                                                        <div class="card-body">
                                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                                <div>
                                                                    <h6 class="card-title mb-1">
                                                                        <i class="bi bi-telegram text-success me-2"></i>Telegram 2FA
                                                                    </h6>
                                                                    <p class="card-text small text-muted mb-0">
                                                                        Require Telegram verification for admin login
                                                                    </p>
                                                                </div>
                                                                <div class="form-check form-switch" style="font-size: 1.2em;">
                                                                    <input class="form-check-input" name="twofactor" type="checkbox" role="switch" id="twofactor" <?php if($config['telegram']['twofactor']){ echo "checked";} ?>>
                                                                </div>
                                                            </div>
                                                            <div class="alert alert-light border-info mb-0">
                                                                <small>
                                                                    <i class="bi bi-info-circle text-info me-1"></i>
                                                                    Requires Telegram bot configuration in Notifications tab
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-xl-6 col-sm-6 col-12">
                                                    <div class="card border-primary h-100" style="background-color: #f8f9ff;">
                                                        <div class="card-body">
                                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                                <div>
                                                                    <h6 class="card-title mb-1">
                                                                        <i class="bi bi-clock-history text-primary me-2"></i>Custom Sessions
                                                                    </h6>
                                                                    <p class="card-text small text-muted mb-0">
                                                                        Use enhanced session management
                                                                    </p>
                                                                </div>
                                                                <div class="form-check form-switch" style="font-size: 1.2em;">
                                                                    <input class="form-check-input" name="customsession" type="checkbox" role="switch" id="customsession" <?php if($config['customsession']){ echo "checked";} ?>>
                                                                </div>
                                                            </div>
                                                            <div class="alert alert-light border-warning mb-0">
                                                                <small>
                                                                    <i class="bi bi-exclamation-triangle text-warning me-1"></i>
                                                                    Advanced feature - use with caution
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Security Recommendations -->
                                    <div class="alert alert-light border-success">
                                        <i class="bi bi-shield-check text-success me-2"></i>
                                        <strong>Security Best Practices:</strong>
                                        <ul class="mb-0 mt-2">
                                            <li><strong>Strong Passwords:</strong> Use passwords with at least 12 characters including uppercase, lowercase, numbers, and symbols</li>
                                            <li><strong>Two-Factor Authentication:</strong> Enable Telegram 2FA for an additional security layer</li>
                                            <li><strong>Regular Updates:</strong> Change your admin password periodically</li>
                                            <li><strong>Access Monitoring:</strong> Monitor admin panel access logs regularly</li>
                                            <li><strong>Secure Network:</strong> Always access the admin panel from secure networks</li>
                                        </ul>
                                    </div>

                                    <!-- Save Button -->
                                    <div class="d-flex gap-2 justify-content-end">
                                        <button type="submit" class="btn btn-danger">
                                            <i class="bi bi-shield-lock me-2"></i>Save Security Settings
                                        </button>
                                    </div>
                                </div>
                            
                        </div>
                        </form>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            <!-- Row ends -->
          </div>
          <div class="app-footer">
            <span class="small">© K 2024</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- External JavaScript Files -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/telegram-test.js"></script>
    <script src="js/form-handler.js"></script>
    
    <style>
        /* Dark Theme Overrides */
        body {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
            color: #f8f9fa !important;
        }
        
        .app-body {
            background: transparent !important;
        }
        
        .card {
            background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%) !important;
            border: 1px solid #555 !important;
            color: #f8f9fa !important;
        }
        
        .card-header {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
            border-bottom: 1px solid #555 !important;
            color: white !important;
        }
        
        .nav-tabs {
            border-bottom: 1px solid #555 !important;
        }
        
        .nav-tabs .nav-link {
            background: linear-gradient(135deg, #4a4a4a 0%, #555 100%) !important;
            border: 1px solid #555 !important;
            color: #adb5bd !important;
        }
        
        .nav-tabs .nav-link.active {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
            border-color: #dc3545 !important;
            color: #fff !important;
        }
        
        .form-control, .form-select {
            background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%) !important;
            border: 1px solid #666 !important;
            color: #f8f9fa !important;
        }
        
        .form-control:focus, .form-select:focus {
            background: linear-gradient(135deg, #4a4a4a 0%, #555 100%) !important;
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
            color: #fff !important;
        }
        
        .form-control::placeholder {
            color: #6c757d !important;
        }
        
        .form-label {
            color: #e9ecef !important;
            font-weight: 500 !important;
        }
        
        .form-check-label {
            color: #adb5bd !important;
        }
        
        .form-check-input:checked {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
            border-color: #dc3545 !important;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%) !important;
            border-color: #c82333 !important;
        }
        
        .btn-success {
            background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%) !important;
            border-color: #388e3c !important;
        }
        
        .btn-outline-secondary {
            border-color: #666 !important;
            color: #adb5bd !important;
        }
        
        .btn-outline-secondary:hover {
            background: #666 !important;
            border-color: #777 !important;
            color: #fff !important;
        }
        
        .text-muted {
            color: #6c757d !important;
        }
        
        .small, small {
            color: #6c757d !important;
        }
        
        /* Device cards dark theme */
        .card.border-info {
            background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%) !important;
            border: 1px solid #6c757d !important;
        }
        
        .card.border-success {
            background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%) !important;
            border: 1px solid #6c757d !important;
        }
        
        .card.border-purple {
            background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%) !important;
            border: 1px solid #6c757d !important;
        }
        
        /* Alert styling for dark theme */
        .alert-light {
            background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%) !important;
            color: #adb5bd !important;
        }
        
        .alert-light.border-info {
            border-color: #6c757d !important;
        }
        
        .alert-light.border-warning {
            border-color: #dc3545 !important;
        }
        
        .alert-light.border-success {
            border-color: #28a745 !important;
        }
        
        .text-info {
            color: #dc3545 !important;
        }
        
        .text-warning {
            color: #dc3545 !important;
        }
        
        .text-success {
            color: #28a745 !important;
        }
        
        /* Override any remaining white backgrounds */
        * {
            scrollbar-width: thin;
            scrollbar-color: #495057 #343a40;
        }
        
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #343a40;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #495057;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #6c757d;
        }
    </style>
    
    <script>
        // Password visibility toggle
        function togglePasswordVisibility(fieldId) {
            const field = document.getElementById(fieldId);
            const button = field.nextElementSibling.querySelector('i');
            
            if (field.type === 'password') {
                field.type = 'text';
                button.className = 'bi bi-eye-slash';
            } else {
                field.type = 'password';
                button.className = 'bi bi-eye';
            }
        }
        
        // Tab persistence and other handlers
        document.addEventListener('DOMContentLoaded', function() {
            // Tab persistence functionality
            const TAB_STORAGE_KEY = 'configPageActiveTab';
            
            // Get all tab links
            const tabLinks = document.querySelectorAll('#customTab3 .nav-link');
            const tabPanes = document.querySelectorAll('.tab-pane');
            
            // Function to activate a tab
            function activateTab(tabId) {
                // Remove active classes from all tabs and panes
                tabLinks.forEach(link => {
                    link.classList.remove('active');
                    link.setAttribute('aria-selected', 'false');
                });
                tabPanes.forEach(pane => {
                    pane.classList.remove('active', 'show');
                });
                
                // Add active class to selected tab and pane
                const selectedTabLink = document.querySelector(`#customTab3 a[href="#${tabId}"]`);
                const selectedTabPane = document.getElementById(tabId);
                
                if (selectedTabLink && selectedTabPane) {
                    selectedTabLink.classList.add('active');
                    selectedTabLink.setAttribute('aria-selected', 'true');
                    selectedTabPane.classList.add('active', 'show');
                }
            }
            
            // Restore last active tab on page load
            const savedTab = localStorage.getItem(TAB_STORAGE_KEY);
            if (savedTab && document.getElementById(savedTab)) {
                activateTab(savedTab);
            }
            
            // Save active tab when clicked
            tabLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    const targetTab = this.getAttribute('href').substring(1); // Remove the # symbol
                    localStorage.setItem(TAB_STORAGE_KEY, targetTab);
                });
            });
            
            // Check All Countries
            document.getElementById('checkAll')?.addEventListener('click', function() {
                const checkboxes = document.querySelectorAll('.country-checkbox');
                checkboxes.forEach(checkbox => checkbox.checked = true);
            });
            
            // Uncheck All Countries
            document.getElementById('uncheckAll')?.addEventListener('click', function() {
                const checkboxes = document.querySelectorAll('.country-checkbox');
                checkboxes.forEach(checkbox => checkbox.checked = false);
            });
            
            // Initialize tooltips
            const tooltips = document.querySelectorAll('[title]');
            tooltips.forEach(function(element) {
                element.setAttribute('data-bs-toggle', 'tooltip');
            });
            
            // Initialize Bootstrap tooltips if available
            if (typeof bootstrap !== 'undefined') {
                new bootstrap.Tooltip(document.body, {
                    selector: '[data-bs-toggle="tooltip"]'
                });
            }
        });
    </script>

    <?php include "footer.php"; ?>