{% extends "base.html" %}

{% block title %}Admin Panel - MSVERIFY{% endblock %}

{% block extra_css %}
<style>
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    padding: 2rem 0;
    z-index: 1000;
    overflow-y: auto;
}

.modal-backdrop {
    z-index: 1055 !important;
    pointer-events: none !important;
}

.modal {
    z-index: 1056 !important;
    pointer-events: auto !important;
}

.modal * {
    pointer-events: auto !important;
}

body.modal-open {
    pointer-events: auto !important;
    overflow: hidden;
}

.admin-main {
    margin-left: 280px;
    padding: 2rem;
    min-height: 100vh;
    background: #0a0a0a;
}

.admin-menu-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.admin-menu-item:hover, .admin-menu-item.active {
    background: rgba(255,255,255,0.1);
    color: white;
    border-left-color: #fbbf24;
}

.admin-menu-item i {
    width: 30px;
    font-size: 1.2rem;
}

.stat-card {
    background: rgba(10, 10, 10, 0.9);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5), 0 0 30px rgba(139, 92, 246, 0.2);
    transition: all 0.3s ease;
    border: 1px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(20px);
    color: #ffffff;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 0 50px rgba(139, 92, 246, 0.4);
    border-color: rgba(139, 92, 246, 0.6);
}

.stat-card h3 {
    color: #ffffff !important;
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.stat-card p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.admin-header h2 {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.admin-header p {
    color: rgba(255, 255, 255, 0.7) !important;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.data-table {
    background: rgba(10, 10, 10, 0.9);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5), 0 0 30px rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(20px);
    color: #ffffff;
}

.table-modern {
    margin-bottom: 0;
    background: transparent !important;
}

.table-modern thead {
    background: rgba(26, 26, 26, 0.8) !important;
    color: #ffffff !important;
}

.table-modern thead tr {
    background: transparent !important;
}

.table-modern th {
    border: none;
    font-weight: 600;
    padding: 1rem;
    color: #ffffff !important;
    background: transparent !important;
}

.table-modern tbody {
    background: transparent !important;
}

.table-modern tbody tr {
    background: transparent !important;
}

.table-modern td {
    border: none;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
    padding: 1rem;
    vertical-align: middle;
    color: #ffffff !important;
    background: transparent !important;
}

.btn-action {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

.badge-status {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
}

.form-modern {
    background: rgba(10, 10, 10, 0.9);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5), 0 0 30px rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(20px);
    color: #ffffff;
}

.form-modern .form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff !important;
}

.form-modern .form-control, .form-modern .form-select {
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: 0.75rem 1rem;
    background: rgba(26, 26, 26, 0.8);
    color: #ffffff;
}

.form-modern .form-control:focus, .form-modern .form-select:focus {
    border-color: var(--neon-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2), 0 0 20px rgba(139, 92, 246, 0.3);
    background: rgba(26, 26, 26, 0.95);
    color: #ffffff;
}

/* Modal form styling */
.modal-modern .form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff !important;
}

.modal-modern .form-control, 
.modal-modern .form-select,
.modal-modern input.form-control,
.modal-modern select.form-select,
.modal-modern textarea.form-control,
.modal-modern input[type="email"],
.modal-modern input[type="text"],
.modal-modern input[type="password"],
.modal-modern input[type="number"] {
    border-radius: 10px !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    padding: 0.75rem 1rem !important;
    background: rgba(26, 26, 26, 0.8) !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
    user-select: text !important;
    cursor: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

.modal-modern .form-control:focus, 
.modal-modern .form-select:focus {
    border-color: var(--neon-purple) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2), 0 0 20px rgba(139, 92, 246, 0.3) !important;
    background: rgba(26, 26, 26, 0.95) !important;
    color: #ffffff !important;
}

.modal-modern option {
    background: #1a1a1a;
    color: #ffffff;
}

.text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

.text-center {
    color: #ffffff !important;
}

.table-responsive {
    background: transparent !important;
}

.table-responsive table {
    background: transparent !important;
}

.table tbody {
    background: transparent !important;
}

.modal-modern {
    z-index: 1060 !important;
    overflow-y: auto !important;
}

.modal-modern .modal-dialog {
    z-index: 1061 !important;
    margin: 1rem auto;
    max-height: calc(100vh - 2rem);
    display: flex;
    align-items: center;
}

.modal-modern .modal-content {
    border-radius: 20px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    background: rgba(10, 10, 10, 0.98) !important;
    backdrop-filter: blur(20px);
    color: #ffffff;
    position: relative;
    z-index: 1062 !important;
    pointer-events: auto !important;
    max-height: calc(100vh - 2rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-modern .modal-content * {
    pointer-events: auto !important;
}

.modal-modern .modal-header {
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    padding: 1.5rem 2rem;
    flex-shrink: 0;
    background: rgba(10, 10, 10, 0.98);
}

.modal-modern .modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.modal-modern .modal-header .btn-close:hover {
    opacity: 1;
}

.modal-modern .modal-body {
    padding: 2rem;
    color: #ffffff;
    pointer-events: auto !important;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-modern .modal-body form {
    pointer-events: auto !important;
}

.modal-modern .modal-body input,
.modal-modern .modal-body select,
.modal-modern .modal-body textarea,
.modal-modern .modal-body button {
    pointer-events: auto !important;
}

.modal-modern .modal-footer {
    border-top: 1px solid rgba(139, 92, 246, 0.3);
    pointer-events: auto !important;
    position: sticky;
    bottom: 0;
    background: rgba(10, 10, 10, 0.98) !important;
    z-index: 10 !important;
    padding: 1.5rem 2rem !important;
    display: flex !important;
    gap: 1rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

.modal-modern .modal-footer .btn {
    pointer-events: auto !important;
    min-width: 100px;
    font-weight: 600;
}

.modal-modern .modal-footer .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

.modal-modern .modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

.modal-modern .modal-footer .btn-secondary {
    background: rgba(108, 117, 125, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.modal-modern .modal-footer .btn-secondary:hover {
    background: rgba(108, 117, 125, 1) !important;
}

.search-box {
    position: relative;
}

.search-box input {
    padding-left: 3rem;
    border-radius: 50px;
    border: 2px solid #e5e7eb;
}

.search-box i {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.admin-header {
    background: rgba(10, 10, 10, 0.9);
    padding: 1.5rem 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5), 0 0 30px rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(20px);
}

@media (max-width: 992px) {
    .admin-sidebar {
        width: 250px;
        transform: translateX(-250px);
        transition: transform 0.3s ease;
    }
    
    .admin-sidebar.show {
        transform: translateX(0);
    }
    
    .admin-main {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .admin-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        transform: none;
    }
    
    .admin-main {
        margin-left: 0;
        padding: 1rem;
    }
    
    .stat-card {
        margin-bottom: 1rem;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .data-table {
        overflow-x: auto;
    }
    
    .table-modern {
        min-width: 600px;
    }
}

@media (max-width: 576px) {
    .admin-main {
        padding: 0.5rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .data-table {
        padding: 1rem;
    }
    
    .modal-modern .modal-dialog {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }
    
    .modal-modern .modal-content {
        max-height: calc(100vh - 1rem);
    }
    
    .modal-modern .modal-header {
        padding: 1rem;
    }
    
    .modal-modern .modal-body {
        padding: 1rem;
    }
    
    .modal-modern .modal-footer {
        padding: 1rem !important;
        flex-direction: column;
    }
    
    .modal-modern .modal-footer .btn {
        width: 100%;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="admin-container">
    <!-- Sidebar -->
    <aside class="admin-sidebar">
        <div class="px-4 mb-4">
            <h4 class="text-white fw-bold mb-0">MSVERIFY</h4>
            <small class="text-white-50">Admin Panel</small>
        </div>
        
        <nav>
            <a href="#dashboard" class="admin-menu-item active" data-section="dashboard">
                <i class="bi bi-speedometer2"></i>
                <span>Dashboard</span>
            </a>
            <a href="#users" class="admin-menu-item" data-section="users">
                <i class="bi bi-people"></i>
                <span>User Management</span>
            </a>
            <a href="#points" class="admin-menu-item" data-section="points">
                <i class="bi bi-coin"></i>
                <span>Points & Rewards</span>
            </a>
            <a href="#codes" class="admin-menu-item" data-section="codes">
                <i class="bi bi-ticket-perforated"></i>
                <span>Redemption Codes</span>
            </a>
            <a href="#verifications" class="admin-menu-item" data-section="verifications">
                <i class="bi bi-patch-check"></i>
                <span>Verifications</span>
            </a>
            <a href="#settings" class="admin-menu-item" data-section="settings">
                <i class="bi bi-gear"></i>
                <span>System Settings</span>
            </a>
            <a href="#broadcast" class="admin-menu-item" data-section="broadcast">
                <i class="bi bi-megaphone"></i>
                <span>Broadcast</span>
            </a>
        </nav>
        
        <div class="px-4 mt-5">
            <a href="/dashboard" class="btn btn-outline-light w-100">
                <i class="bi bi-box-arrow-left"></i> Back to User Panel
            </a>
        </div>
    </aside>
    
    <!-- Main Content -->
    <main class="admin-main">
        <!-- Dashboard Section -->
        <div id="section-dashboard" class="admin-section">
            <div class="admin-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="fw-bold mb-1">Dashboard Overview</h2>
                        <p class="text-muted mb-0">Welcome back, Admin!</p>
                    </div>
                    <div>
                        <span class="badge bg-success px-3 py-2">
                            <i class="bi bi-circle-fill" style="font-size: 0.5rem;"></i> System Online
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- Stats Cards -->
            <div class="row g-4 mb-4">
                <div class="col-md-6 col-lg-3">
                    <div class="stat-card">
                        <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                            <i class="bi bi-people-fill"></i>
                        </div>
                        <h3 class="fw-bold mb-1" id="stat-total-users">0</h3>
                        <p class="text-muted mb-0">Total Users</p>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-3">
                    <div class="stat-card">
                        <div class="stat-icon bg-success bg-opacity-10 text-success">
                            <i class="bi bi-patch-check-fill"></i>
                        </div>
                        <h3 class="fw-bold mb-1" id="stat-total-verifications">0</h3>
                        <p class="text-muted mb-0">Total Verifications</p>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-3">
                    <div class="stat-card">
                        <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                            <i class="bi bi-coin"></i>
                        </div>
                        <h3 class="fw-bold mb-1" id="stat-total-points">0</h3>
                        <p class="text-muted mb-0">Points Distributed</p>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-3">
                    <div class="stat-card">
                        <div class="stat-icon bg-info bg-opacity-10 text-info">
                            <i class="bi bi-graph-up"></i>
                        </div>
                        <h3 class="fw-bold mb-1" id="stat-success-rate">0%</h3>
                        <p class="text-muted mb-0">Success Rate</p>
                    </div>
                </div>
            </div>
            
            <!-- Charts Row -->
            <div class="row g-4 mb-4">
                <div class="col-lg-8">
                    <div class="data-table">
                        <h5 class="fw-bold mb-4">Recent Verifications</h5>
                        <div class="table-responsive">
                            <table class="table table-modern">
                                <thead>
                                    <tr>
                                        <th>User</th>
                                        <th>Service</th>
                                        <th>Status</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody id="recent-verifications">
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">
                                            <i class="bi bi-inbox fs-1"></i>
                                            <p class="mt-2">No recent verifications</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="data-table">
                        <h5 class="fw-bold mb-4">Quick Actions</h5>
                        <div class="d-grid gap-2">
                            <button class="btn btn-primary" onclick="showModal('addUserModal')">
                                <i class="bi bi-person-plus"></i> Add New User
                            </button>
                            <button class="btn btn-success" onclick="showModal('generateCodeModal')">
                                <i class="bi bi-ticket"></i> Generate Code
                            </button>
                            <button class="btn btn-warning" onclick="showModal('broadcastModal')">
                                <i class="bi bi-megaphone"></i> Send Broadcast
                            </button>
                            <button class="btn btn-info" onclick="refreshStats()">
                                <i class="bi bi-arrow-clockwise"></i> Refresh Stats
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Users Section -->
        <div id="section-users" class="admin-section" style="display: none;">
            <div class="admin-header">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h2 class="fw-bold mb-1">User Management</h2>
                        <p class="text-muted mb-0">Manage all registered users</p>
                    </div>
                    <button class="btn btn-primary" onclick="showModal('addUserModal')">
                        <i class="bi bi-person-plus"></i> Add User
                    </button>
                </div>
            </div>
            
            <div class="data-table">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="search-box">
                            <i class="bi bi-search"></i>
                            <input type="text" class="form-control" id="searchUsers" placeholder="Search users...">
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <select class="form-select d-inline-block w-auto" id="filterRole">
                            <option value="">All Users</option>
                            <option value="admin">Admins Only</option>
                            <option value="user">Regular Users</option>
                        </select>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-modern">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Email</th>
                                <th>Username</th>
                                <th>Points</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="users-table">
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="mt-2">Loading users...</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Points & Rewards Section -->
        <div id="section-points" class="admin-section" style="display: none;">
            <div class="admin-header">
                <h2 class="fw-bold mb-1">Points & Rewards Settings</h2>
                <p class="text-muted mb-0">Configure point rewards and pricing</p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="form-modern">
                        <h5 class="fw-bold mb-4">Point Rewards</h5>
                        
                        <div class="mb-3">
                            <label class="form-label">Daily Check-in Reward</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="checkin-points" value="1">
                                <span class="input-group-text">points</span>
                            </div>
                            <small class="text-muted">Points earned for daily check-in</small>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Referral Reward</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="referral-points" value="5">
                                <span class="input-group-text">points</span>
                            </div>
                            <small class="text-muted">Points earned for successful referral</small>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">New User Bonus</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="signup-points" value="2">
                                <span class="input-group-text">points</span>
                            </div>
                            <small class="text-muted">Starting points for new users</small>
                        </div>
                        
                        <button class="btn btn-primary" onclick="updatePointSettings()">
                            <i class="bi bi-save"></i> Save Settings
                        </button>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="form-modern">
                        <h5 class="fw-bold mb-4">Verification Pricing</h5>
                        
                        <div class="mb-3">
                            <label class="form-label">Gemini One Pro</label>
                            <div class="input-group">
                                <input type="number" class="form-control" value="1">
                                <span class="input-group-text">points</span>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">ChatGPT K12</label>
                            <div class="input-group">
                                <input type="number" class="form-control" value="1">
                                <span class="input-group-text">points</span>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Spotify Student</label>
                            <div class="input-group">
                                <input type="number" class="form-control" value="1">
                                <span class="input-group-text">points</span>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Bolt.new Teacher</label>
                            <div class="input-group">
                                <input type="number" class="form-control" value="1">
                                <span class="input-group-text">points</span>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">YouTube Premium</label>
                            <div class="input-group">
                                <input type="number" class="form-control" value="1">
                                <span class="input-group-text">points</span>
                            </div>
                        </div>
                        
                        <button class="btn btn-primary" onclick="updatePricing()">
                            <i class="bi bi-save"></i> Save Pricing
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Redemption Codes Section -->
        <div id="section-codes" class="admin-section" style="display: none;">
            <div class="admin-header">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h2 class="fw-bold mb-1">Redemption Codes</h2>
                        <p class="text-muted mb-0">Generate and manage redemption codes</p>
                    </div>
                    <button class="btn btn-primary" onclick="showModal('generateCodeModal')">
                        <i class="bi bi-plus-circle"></i> Generate Code
                    </button>
                </div>
            </div>
            
            <div class="row g-4 mb-4">
                <div class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                            <i class="bi bi-ticket"></i>
                        </div>
                        <h3 class="fw-bold mb-1" id="active-codes">0</h3>
                        <p class="text-muted mb-0">Active Codes</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-icon bg-success bg-opacity-10 text-success">
                            <i class="bi bi-check-circle"></i>
                        </div>
                        <h3 class="fw-bold mb-1" id="redeemed-codes">0</h3>
                        <p class="text-muted mb-0">Redeemed</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                            <i class="bi bi-x-circle"></i>
                        </div>
                        <h3 class="fw-bold mb-1" id="expired-codes">0</h3>
                        <p class="text-muted mb-0">Expired</p>
                    </div>
                </div>
            </div>
            
            <div class="data-table">
                <div class="table-responsive">
                    <table class="table table-modern">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Points</th>
                                <th>Max Uses</th>
                                <th>Used</th>
                                <th>Expires</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="codes-table">
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="mt-2">Loading codes...</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Verifications Section -->
        <div id="section-verifications" class="admin-section" style="display: none;">
            <div class="admin-header">
                <h2 class="fw-bold mb-1">Verification History</h2>
                <p class="text-muted mb-0">View all verification requests</p>
            </div>
            
            <div class="data-table">
                <div class="row mb-4">
                    <div class="col-md-4">
                        <select class="form-select" id="filter-service">
                            <option value="">All Services</option>
                            <option value="gemini">Gemini One Pro</option>
                            <option value="chatgpt">ChatGPT K12</option>
                            <option value="spotify">Spotify Student</option>
                            <option value="bolt">Bolt.new</option>
                            <option value="youtube">YouTube Premium</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select class="form-select" id="filter-status">
                            <option value="">All Statuses</option>
                            <option value="pending">Pending</option>
                            <option value="processing">Processing</option>
                            <option value="completed">Completed</option>
                            <option value="failed">Failed</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <input type="date" class="form-control" id="filter-date">
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-modern">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>User</th>
                                <th>Service</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="verifications-table">
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="mt-2">Loading verifications...</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Settings Section -->
        <div id="section-settings" class="admin-section" style="display: none;">
            <div class="admin-header">
                <h2 class="fw-bold mb-1">System Settings</h2>
                <p class="text-muted mb-0">Configure system-wide settings</p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="form-modern">
                        <h5 class="fw-bold mb-4">General Settings</h5>
                        
                        <div class="mb-3">
                            <label class="form-label">Site Name</label>
                            <input type="text" class="form-control" value="MSVERIFY">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Maintenance Mode</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="maintenance-mode">
                                <label class="form-check-label" for="maintenance-mode">
                                    Enable maintenance mode
                                </label>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Registration</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="allow-registration" checked>
                                <label class="form-check-label" for="allow-registration">
                                    Allow new user registration
                                </label>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Require Invite Code</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="require-invite">
                                <label class="form-check-label" for="require-invite">
                                    Require invite code to register
                                </label>
                            </div>
                        </div>
                        
                        <button class="btn btn-primary">
                            <i class="bi bi-save"></i> Save Settings
                        </button>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="form-modern">
                        <h5 class="fw-bold mb-4">Service Status</h5>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="form-label mb-0">Gemini One Pro</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" checked>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="form-label mb-0">ChatGPT K12</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" checked>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="form-label mb-0">Spotify Student</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" checked>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="form-label mb-0">Bolt.new Teacher</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" checked>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="form-label mb-0">YouTube Premium</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox">
                                </div>
                            </div>
                        </div>
                        
                        <button class="btn btn-primary">
                            <i class="bi bi-save"></i> Update Status
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Broadcast Section -->
        <div id="section-broadcast" class="admin-section" style="display: none;">
            <div class="admin-header">
                <h2 class="fw-bold mb-1">Broadcast Message</h2>
                <p class="text-muted mb-0">Send announcements to all users</p>
            </div>
            
            <div class="form-modern">
                <div class="mb-3">
                    <label class="form-label">Message Title</label>
                    <input type="text" class="form-control" id="broadcast-title" placeholder="Enter message title">
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Message Content</label>
                    <textarea class="form-control" id="broadcast-message" rows="6" placeholder="Enter your message here..."></textarea>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Message Type</label>
                    <select class="form-select" id="broadcast-type">
                        <option value="info">Information</option>
                        <option value="warning">Warning</option>
                        <option value="success">Success</option>
                        <option value="danger">Important</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="broadcast-email">
                        <label class="form-check-label" for="broadcast-email">
                            Also send via email
                        </label>
                    </div>
                </div>
                
                <button class="btn btn-primary btn-lg" onclick="sendBroadcast()">
                    <i class="bi bi-send"></i> Send Broadcast
                </button>
            </div>
        </div>
    </main>
</div>

<!-- Modals -->
<!-- Add User Modal -->
<div class="modal fade modal-modern" id="addUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Add New User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addUserForm">
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <input type="text" class="form-control" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <input type="password" class="form-control" name="password" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Initial Points</label>
                        <input type="number" class="form-control" name="points" value="2">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Role</label>
                        <select class="form-select" name="role">
                            <option value="user">User</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="addUser()">Add User</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit User Modal -->
<div class="modal fade modal-modern" id="editUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Edit User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editUserForm">
                    <input type="hidden" id="edit-user-id" name="user_id">
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" id="edit-email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <input type="text" class="form-control" id="edit-username" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Full Name</label>
                        <input type="text" class="form-control" id="edit-fullname" name="full_name">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Balance Points</label>
                        <input type="number" class="form-control" id="edit-balance" name="balance">
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="edit-is-admin" name="is_admin">
                            <label class="form-check-label" for="edit-is-admin">Admin Role</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="edit-is-blocked" name="is_blocked">
                            <label class="form-check-label" for="edit-is-blocked">Block User</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveUserChanges()">
                    <i class="bi bi-check-lg me-1"></i>Save Changes
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Generate Code Modal -->
<div class="modal fade modal-modern" id="generateCodeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Generate Redemption Code</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="generateCodeForm">
                    <div class="mb-3">
                        <label class="form-label">Code Prefix (Optional)</label>
                        <input type="text" class="form-control" name="prefix" placeholder="e.g., PROMO">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Points Value</label>
                        <input type="number" class="form-control" name="points" value="10" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Maximum Uses</label>
                        <input type="number" class="form-control" name="max_uses" value="100" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Expiry Date</label>
                        <input type="datetime-local" class="form-control" name="expiry">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="generateCode()">Generate</button>
            </div>
        </div>
    </div>
</div>

<!-- Broadcast Modal -->
<div class="modal fade modal-modern" id="broadcastModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Send Broadcast Message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> This message will be sent to all registered users
                </div>
                <form id="broadcastForm">
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" class="form-control" name="title" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Message</label>
                        <textarea class="form-control" name="message" rows="5" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="sendBroadcast()">Send</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// Section Navigation
document.querySelectorAll('.admin-menu-item').forEach(item => {
    item.addEventListener('click', function(e) {
        e.preventDefault();
        const section = this.getAttribute('data-section');
        
        // Update active menu
        document.querySelectorAll('.admin-menu-item').forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        
        // Show section
        document.querySelectorAll('.admin-section').forEach(s => s.style.display = 'none');
        document.getElementById(`section-${section}`).style.display = 'block';
        
        // Load section data
        loadSectionData(section);
    });
});

function loadSectionData(section) {
    switch(section) {
        case 'dashboard':
            loadDashboardStats();
            break;
        case 'users':
            loadUsers();
            break;
        case 'codes':
            loadCodes();
            break;
        case 'verifications':
            loadVerifications();
            break;
    }
}

// Dashboard
function loadDashboardStats() {
    fetch('/api/admin/stats')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('stat-total-users').textContent = data.total_users || 0;
                document.getElementById('stat-total-verifications').textContent = data.total_verifications || 0;
                document.getElementById('stat-total-points').textContent = data.total_points || 0;
                document.getElementById('stat-success-rate').textContent = (data.success_rate || 0) + '%';
                
                if (data.recent_verifications) {
                    displayRecentVerifications(data.recent_verifications);
                }
            }
        })
        .catch(error => {
            console.error('Error loading stats:', error);
            showToast('Failed to load statistics', 'danger');
        });
}

function displayRecentVerifications(verifications) {
    const tbody = document.getElementById('recent-verifications');
    if (!verifications || verifications.length === 0) {
        tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-4">No recent verifications</td></tr>';
        return;
    }
    
    tbody.innerHTML = verifications.map(v => {
        const statusClass = v.status === 'success' ? 'bg-success' : v.status === 'pending' ? 'bg-warning' : 'bg-danger';
        const statusText = v.status ? v.status.charAt(0).toUpperCase() + v.status.slice(1) : 'Unknown';
        const date = v.created_at ? new Date(v.created_at).toLocaleDateString() : 'N/A';
        
        return `
            <tr>
                <td>${v.user_email || 'Unknown'}</td>
                <td><span class="badge bg-info">${v.service || 'N/A'}</span></td>
                <td><span class="badge-status ${statusClass}">${statusText}</span></td>
                <td>${date}</td>
            </tr>
        `;
    }).join('');
}

// Users
function loadUsers() {
    fetch('/api/admin/users')
        .then(response => response.json())
        .then(data => {
            displayUsers(data.users);
        })
        .catch(error => console.error('Error loading users:', error));
}

function displayUsers(users) {
    const tbody = document.getElementById('users-table');
    if (!users || users.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">No users found</td></tr>';
        return;
    }
    
    tbody.innerHTML = users.map(user => `
        <tr>
            <td>${user.user_id || user.id}</td>
            <td>${user.email || ''}</td>
            <td>${user.username || ''}</td>
            <td><span class="badge bg-warning">${user.balance || 0} pts</span></td>
            <td><span class="badge ${user.is_admin ? 'bg-danger' : 'bg-primary'}">${user.is_admin ? 'Admin' : 'User'}</span></td>
            <td><span class="badge-status ${user.is_blocked ? 'bg-danger' : 'bg-success'}">${user.is_blocked ? 'Blocked' : 'Active'}</span></td>
            <td>
                <button class="btn btn-sm btn-primary btn-action" onclick="editUser(${user.user_id || user.id})">
                    <i class="bi bi-pencil"></i>
                </button>
                <button class="btn btn-sm btn-danger btn-action" onclick="deleteUser(${user.user_id || user.id})">
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        </tr>
    `).join('');
}

// Codes
function loadCodes() {
    fetch('/api/admin/codes')
        .then(response => response.json())
        .then(data => {
            displayCodes(data.codes);
            updateCodeStats(data.codes);
        })
        .catch(error => console.error('Error loading codes:', error));
}

function displayCodes(codes) {
    const tbody = document.getElementById('codes-table');
    if (!codes || codes.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">No codes generated</td></tr>';
        return;
    }
    
    tbody.innerHTML = codes.map(code => `
        <tr>
            <td><code>${code.code}</code></td>
            <td><span class="badge bg-warning">${code.points} pts</span></td>
            <td>${code.max_uses || 'Unlimited'}</td>
            <td>${code.used_count || 0}</td>
            <td>${code.expires_at ? new Date(code.expires_at).toLocaleDateString() : 'Never'}</td>
            <td><span class="badge-status ${code.is_active ? 'bg-success' : 'bg-danger'}">${code.is_active ? 'Active' : 'Expired'}</span></td>
            <td>
                <button class="btn btn-sm btn-danger btn-action" onclick="deleteCode('${code.code}')">
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        </tr>
    `).join('');
}

function updateCodeStats(codes) {
    const active = codes.filter(c => c.is_active).length;
    const redeemed = codes.reduce((sum, c) => sum + (c.used_count || 0), 0);
    const expired = codes.filter(c => !c.is_active).length;
    
    document.getElementById('active-codes').textContent = active;
    document.getElementById('redeemed-codes').textContent = redeemed;
    document.getElementById('expired-codes').textContent = expired;
}

// Modal Functions
function showModal(modalId) {
    const modalElement = document.getElementById(modalId);
    const modal = new bootstrap.Modal(modalElement);
    
    // Enable pointer events on modal and all children
    modalElement.style.pointerEvents = 'auto';
    modalElement.querySelectorAll('*').forEach(el => {
        el.style.pointerEvents = 'auto';
    });
    
    modal.show();
    
    // Force focus on first input after modal is shown
    modalElement.addEventListener('shown.bs.modal', function() {
        const firstInput = modalElement.querySelector('input:not([type="hidden"]), select, textarea');
        if (firstInput) {
            setTimeout(() => {
                firstInput.focus();
                firstInput.click();
            }, 100);
        }
    }, { once: true });
}

function showToast(message, type = 'info') {
    const toastHtml = `
        <div class="toast align-items-center text-white bg-${type} border-0 position-fixed top-0 end-0 m-3" role="alert" style="z-index: 9999;">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="bi bi-${type === 'success' ? 'check-circle' : type === 'danger' ? 'x-circle' : 'info-circle'} me-2"></i>
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `;
    const toastEl = document.createRange().createContextualFragment(toastHtml).firstElementChild;
    document.body.appendChild(toastEl);
    const toast = new bootstrap.Toast(toastEl, { autohide: true, delay: 3000 });
    toast.show();
    toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
}

// User Management Functions
function editUser(userId) {
    // Fetch user data
    fetch(`/api/admin/users/${userId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.user) {
                const user = data.user;
                document.getElementById('edit-user-id').value = user.user_id;
                document.getElementById('edit-email').value = user.email || '';
                document.getElementById('edit-username').value = user.username || '';
                document.getElementById('edit-fullname').value = user.full_name || '';
                document.getElementById('edit-balance').value = user.balance || 0;
                document.getElementById('edit-is-admin').checked = user.is_admin == 1;
                document.getElementById('edit-is-blocked').checked = user.is_blocked == 1;
                
                showModal('editUserModal');
            } else {
                showToast('Failed to load user data', 'danger');
            }
        })
        .catch(error => {
            console.error('Error loading user:', error);
            showToast('Error loading user data', 'danger');
        });
}

function saveUserChanges() {
    const userId = document.getElementById('edit-user-id').value;
    const formData = {
        email: document.getElementById('edit-email').value,
        username: document.getElementById('edit-username').value,
        full_name: document.getElementById('edit-fullname').value,
        balance: parseInt(document.getElementById('edit-balance').value) || 0,
        is_admin: document.getElementById('edit-is-admin').checked ? 1 : 0,
        is_blocked: document.getElementById('edit-is-blocked').checked ? 1 : 0
    };
    
    fetch(`/api/admin/users/${userId}`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('User updated successfully!', 'success');
            bootstrap.Modal.getInstance(document.getElementById('editUserModal')).hide();
            loadUsers();
        } else {
            showToast('Error: ' + (data.message || 'Failed to update user'), 'danger');
        }
    })
    .catch(error => {
        console.error('Error updating user:', error);
        showToast('Error updating user', 'danger');
    });
}

function deleteUser(userId) {
    if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
        return;
    }
    
    fetch(`/api/admin/users/${userId}`, {
        method: 'DELETE'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('User deleted successfully!', 'success');
            loadUsers();
        } else {
            showToast('Error: ' + (data.message || 'Failed to delete user'), 'danger');
        }
    })
    .catch(error => {
        console.error('Error deleting user:', error);
        showToast('Error deleting user', 'danger');
    });
}

function addUser() {
    const form = document.getElementById('addUserForm');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    
    // Convert role to is_admin
    data.is_admin = (data.role === 'admin') ? 1 : 0;
    data.balance = parseInt(data.points) || 2;
    delete data.role;
    delete data.points;
    
    fetch('/api/admin/users', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('User added successfully!', 'success');
            bootstrap.Modal.getInstance(document.getElementById('addUserModal')).hide();
            form.reset();
            loadUsers();
        } else {
            showToast('Error: ' + (data.message || 'Failed to add user'), 'danger');
        }
    })
    .catch(error => {
        console.error('Error adding user:', error);
        showToast('Error adding user', 'danger');
    });
}

function generateCode() {
    const form = document.getElementById('generateCodeForm');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    
    // Convert to proper field names
    data.points = parseInt(data.points) || 10;
    data.max_uses = parseInt(data.max_uses) || 100;
    
    fetch('/api/admin/codes/generate', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Code generated: ' + data.code, 'success');
            bootstrap.Modal.getInstance(document.getElementById('generateCodeModal')).hide();
            form.reset();
            loadCodes();
        } else {
            showToast('Error: ' + (data.message || 'Failed to generate code'), 'danger');
        }
    })
    .catch(error => {
        console.error('Error generating code:', error);
        showToast('Error generating code', 'danger');
    });
}

function refreshStats() {
    loadDashboardStats();
    showToast('Stats refreshed!', 'success');
}

// Verifications
function loadVerifications() {
    fetch('/api/admin/verifications')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayVerifications(data.verifications);
            }
        })
        .catch(error => console.error('Error loading verifications:', error));
}

function displayVerifications(verifications) {
    const tbody = document.getElementById('verifications-table');
    if (!verifications || verifications.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">No verifications found</td></tr>';
        return;
    }
    
    tbody.innerHTML = verifications.map(v => {
        const statusClass = v.status === 'success' ? 'bg-success' : v.status === 'pending' ? 'bg-warning' : 'bg-danger';
        const statusText = v.status ? v.status.charAt(0).toUpperCase() + v.status.slice(1) : 'Unknown';
        const date = v.created_at ? new Date(v.created_at).toLocaleDateString() : 'N/A';
        
        return `
            <tr>
                <td>${v.verification_id || 'N/A'}</td>
                <td>${v.user_id || 'N/A'}</td>
                <td><span class="badge bg-info">${v.service || 'N/A'}</span></td>
                <td><span class="badge-status ${statusClass}">${statusText}</span></td>
                <td>${v.url ? v.url.substring(0, 40) + '...' : 'N/A'}</td>
                <td>${date}</td>
                <td>
                    <button class="btn btn-sm btn-info btn-action" onclick="viewVerification('${v.verification_id}')">
                        <i class="bi bi-eye"></i>
                    </button>
                </td>
            </tr>
        `;
    }).join('');
}

function viewVerification(verificationId) {
    fetch(`/api/verify/status/${verificationId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const v = data.verification;
                alert(`Verification Details:\n\nID: ${v.verification_id}\nStatus: ${v.status}\nService: ${v.service}\nURL: ${v.url}\nCreated: ${v.created_at}`);
            }
        })
        .catch(error => console.error('Error viewing verification:', error));
}

// Points & Rewards
function loadPoints() {
    // Load points configuration and user statistics
    showToast('Points & Rewards page loaded', 'info');
}

// Settings
function loadSettings() {
    showToast('System Settings page loaded', 'info');
}

// Broadcast
function loadBroadcast() {
    showToast('Broadcast page loaded', 'info');
}

function sendBroadcast() {
    const form = document.getElementById('broadcastForm');
    const formData = new FormData(form);
    
    fetch('/api/admin/broadcast', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(Object.fromEntries(formData))
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Broadcast sent successfully!', 'success');
            bootstrap.Modal.getInstance(document.getElementById('broadcastModal')).hide();
            form.reset();
        } else {
            showToast('Error: ' + (data.message || 'Failed to send broadcast'), 'danger');
        }
    })
    .catch(error => {
        console.error('Error sending broadcast:', error);
        showToast('Error sending broadcast', 'danger');
    });
}

function deleteCode(code) {
    if (!confirm('Are you sure you want to delete this code?')) {
        return;
    }
    
    fetch(`/api/admin/codes/${code}`, {
        method: 'DELETE'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Code deleted successfully!', 'success');
            loadCodes();
        } else {
            showToast('Error: ' + (data.message || 'Failed to delete code'), 'danger');
        }
    })
    .catch(error => {
        console.error('Error deleting code:', error);
        showToast('Error deleting code', 'danger');
    });
}

// Load initial dashboard
document.addEventListener('DOMContentLoaded', function() {
    loadDashboardStats();
});
</script>
{% endblock %}