PNG  IHDR pHYs   OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, !{kּ> H3Q5 B.@ $pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_F@8N ' p @8N@8}' p '#@8N@8N pQ9p!i~}|6-ӪG` VP.@*j>[ K^<֐Z]@8N'KQ<Q(`s" 'hgpKB`R@Dqj '  'P$a ( `D$Na L?u80e J,K˷NI'0eݷ(NI'؀ 2ipIIKp`:O'`ʤxB8Ѥx Ѥx $ $P6 :vRNb 'p,>NB 'P]-->P T+*^h& p '‰a ‰ (ĵt#u33;Nt̵'ޯ; [3W ~]0KH1q@8]O2]3*̧7# *p>us p _6]/}-4|t'|Smx= DoʾM×M_8!)6lq':l7!|4} '\ne t!=hnLn (~Dn\+‰_4k)0e@OhZ`F `.m1} 'vp{F`ON7Srx 'D˸nV`><;yMx!IS钦OM)Ե٥x 'DSD6bS8!" ODz#R >S8!7ّxEh0m$MIPHi$IvS8IN$I p$O8I,sk&I)$IN$Hi$I^Ah.p$MIN$IR8I·N "IF9Ah0m$MIN$IR8IN$I 3jIU;kO$ɳN$+ q.x* tEXtComment

Viewing File: /home/u456810272/domains/aviationdata.cloud/public_html/admin/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AviationData Admin Panel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: #1a237e;
            --secondary: #0d47a1;
            --accent: #e65100;
            --light: #e3f2fd;
            --dark: #0d1b2a;
            --success: #2ecc71;
            --warning: #f39c12;
            --danger: #e74c3c;
            --gray: #95a5a6;
            --purple: #9b59b6;
            --teal: #1abc9c;
            
            /* Aviation Colors */
            --sky-blue: #0288d1;
            --navy-blue: #1565c0;
            --cloud-white: #f5f5f5;
            --jet-black: #212121;
            --runway-gray: #546e7a;
            --warning-yellow: #ffb300;
            
            /* Neutrals */
            --white: #ffffff;
            --black: #000000;
            --gray-light: #cfd8dc;
            --gray-dark: #455a64;
            --off-white: #f7f7f7;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
        }
        
        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, var(--primary), var(--warning-yellow));
        }
        
        .login-form {
            background: white;
            padding: 2.5rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
        }
        
        .login-form h2 {
            text-align: center;
            margin-bottom: 1.5rem;
            color: var(--primary);
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        .login-btn {
            width: 100%;
            padding: 12px;
            background: var(--secondary);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
            margin-bottom: 1rem;
        }
        
        .login-btn:hover {
            background: #0b3d91;
        }
        
        .register-btn {
            width: 100%;
            padding: 12px;
            background: var(--teal);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 0.5rem;
        }
        
        .register-btn:hover {
            background: #16a085;
        }
        
        .form-footer {
            text-align: center;
            margin-top: 1rem;
            color: var(--gray);
        }
        
        .form-footer a {
            color: var(--secondary);
            text-decoration: none;
            cursor: pointer;
        }
        
        .form-footer a:hover {
            text-decoration: underline;
        }
        
        .admin-container {
            display: none;
            height: 100vh;
        }
        
        .sidebar {
            width: 250px;
            background: var(--primary);
            color: white;
            height: 100%;
            position: fixed;
            overflow-y: auto;
        }
        
        .logo {
            padding: 1.5rem;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .logo h1 {
            font-size: 1.5rem;
        }
        
        .nav-links {
            padding: 1rem 0;
        }
        
        .nav-links li {
            list-style: none;
        }
        
        .nav-links a {
            display: flex;
            align-items: center;
            padding: 0.8rem 1.5rem;
            color: white;
            text-decoration: none;
            transition: background 0.3s;
        }
        
        .nav-links a:hover, .nav-links a.active {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .nav-links i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        .main-content {
            margin-left: 250px;
            padding: 1.5rem;
            width: calc(100% - 250px);
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
            margin-bottom: 1.5rem;
        }
        
        .user-info {
            display: flex;
            align-items: center;
        }
        
        .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 1.5rem;
            color: white;
        }
        
        .stat-info h3 {
            font-size: 1.8rem;
            margin-bottom: 0.2rem;
        }
        
        .stat-info p {
            color: var(--gray);
        }
        
        .dashboard-content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 1.5rem;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #eee;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        table th, table td {
            padding: 0.8rem;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        table th {
            font-weight: 600;
            color: var(--dark);
        }
        
        .status {
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .status.active {
            background: rgba(46, 204, 113, 0.2);
            color: var(--success);
        }
        
        .status.pending {
            background: rgba(243, 156, 18, 0.2);
            color: var(--warning);
        }
        
        .status.closed {
            background: rgba(149, 165, 166, 0.2);
            color: var(--gray);
        }
        
        .status.expired {
            background: rgba(231, 76, 60, 0.2);
            color: var(--danger);
        }
        
        .status.processing {
            background: rgba(52, 152, 219, 0.2);
            color: var(--secondary);
        }
        
        .status.completed {
            background: rgba(46, 204, 113, 0.2);
            color: var(--success);
        }
        
        .status.cancelled {
            background: rgba(231, 76, 60, 0.2);
            color: var(--danger);
        }
        
        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: var(--secondary);
            color: white;
        }
        
        .btn-primary:hover {
            background: #0b3d91;
        }
        
        .btn-danger {
            background: var(--danger);
            color: white;
        }
        
        .btn-danger:hover {
            background: #c0392b;
        }
        
        .btn-success {
            background: var(--success);
            color: white;
        }
        
        .btn-success:hover {
            background: #27ae60;
        }
        
        .btn-warning {
            background: var(--warning);
            color: white;
        }
        
        .btn-warning:hover {
            background: #e67e22;
        }
        
        .btn-purple {
            background: var(--purple);
            color: white;
        }
        
        .btn-purple:hover {
            background: #8e44ad;
        }
        
        .recent-activity li {
            padding: 0.8rem 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        
        .recent-activity li:last-child {
            border-bottom: none;
        }
        
        .activity-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            color: white;
        }
        
        .footer {
            text-align: center;
            padding: 1rem;
            color: var(--gray);
            font-size: 0.9rem;
            margin-top: 2rem;
        }
        
        .section {
            display: none;
        }
        
        .section.active {
            display: block;
        }
        
        .search-bar {
            display: flex;
            margin-bottom: 1.5rem;
        }
        
        .search-bar input {
            flex: 1;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }
        
        .search-bar button {
            padding: 0 1.5rem;
            background: var(--secondary);
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--gray);
        }
        
        .chart-container {
            height: 300px;
            margin-bottom: 2rem;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }
        
        .form-row {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .form-row .form-group {
            flex: 1;
            margin-bottom: 0;
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: var(--success);
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .tab-container {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 1.5rem;
        }
        
        .tab {
            padding: 0.8rem 1.5rem;
            cursor: pointer;
            border-bottom: 3px solid transparent;
        }
        
        .tab.active {
            border-bottom: 3px solid var(--secondary);
            color: var(--secondary);
            font-weight: 500;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* Language grid layout */
        .languages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
            margin-top: 0.5rem;
        }
        
        .language-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            background: var(--off-white);
            border-radius: 4px;
            transition: background 0.3s;
        }
        
        .language-checkbox:hover {
            background: #e8e8e8;
        }
        
        .language-checkbox input[type="checkbox"] {
            width: auto;
        }
        
        .language-checkbox label {
            margin-bottom: 0;
            cursor: pointer;
            flex: 1;
        }
        
        @media (max-width: 992px) {
            .sidebar {
                width: 70px;
            }
            
            .sidebar .logo h1, .sidebar .nav-links span {
                display: none;
            }
            
            .main-content {
                margin-left: 70px;
                width: calc(100% - 70px);
            }
            
            .nav-links a {
                justify-content: center;
                padding: 1rem;
            }
            
            .nav-links i {
                margin-right: 0;
            }
        }
        
        @media (max-width: 768px) {
            .dashboard-content {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .languages-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Login Section -->
    <div class="login-container" id="loginSection">
        <div class="login-form" id="loginForm">
            <h2>AviationData Admin Login</h2>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Enter your email" value="admin@aviationdata.cloud">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter your password" value="@Abc123456">
            </div>
            <button class="login-btn" id="loginBtn">Login</button>
            <button class="register-btn" id="showRegisterBtn">Register</button>
            <div class="form-footer">
                <p>Don't have an account? <a id="switchToRegister">Register here</a></p>
            </div>
        </div>
        
        <!-- Register Form (Hidden by default) -->
        <div class="login-form" id="registerForm" style="display: none;">
            <h2>Create Account</h2>
            <div class="form-group">
                <label for="regName">Full Name</label>
                <input type="text" id="regName" placeholder="Enter your full name">
            </div>
            <div class="form-group">
                <label for="regEmail">Email</label>
                <input type="email" id="regEmail" placeholder="Enter your email">
            </div>
            <div class="form-group">
                <label for="regPassword">Password</label>
                <input type="password" id="regPassword" placeholder="Create a password">
            </div>
            <div class="form-group">
                <label for="regConfirmPassword">Confirm Password</label>
                <input type="password" id="regConfirmPassword" placeholder="Confirm your password">
            </div>
            <div class="form-group">
                <label for="regPhone">Phone Number</label>
                <input type="tel" id="regPhone" placeholder="Enter your phone number">
            </div>
            <button class="login-btn" id="registerBtn">Create Account</button>
            <div class="form-footer">
                <p>Already have an account? <a id="switchToLogin">Login here</a></p>
            </div>
        </div>
    </div>
    
    <!-- Admin Panel -->
    <div class="admin-container" id="adminPanel">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="logo">
                <h1>AviationData</h1>
            </div>
            <ul class="nav-links">
                <li><a href="#" class="nav-link active" data-section="dashboard"><i class="fas fa-tachometer-alt"></i> <span>Dashboard</span></a></li>
                <li><a href="#" class="nav-link" data-section="flight-data"><i class="fas fa-plane"></i> <span>Flight Data</span></a></li>
                <li><a href="#" class="nav-link" data-section="aircraft"><i class="fas fa-fighter-jet"></i> <span>Aircraft</span></a></li>
                <li><a href="#" class="nav-link" data-section="airports"><i class="fas fa-plane-departure"></i> <span>Airports</span></a></li>
                <li><a href="#" class="nav-link" data-section="airlines"><i class="fas fa-building"></i> <span>Airlines</span></a></li>
                <li><a href="#" class="nav-link" data-section="customers"><i class="fas fa-users"></i> <span>Customers</span></a></li>
                <li><a href="#" class="nav-link" data-section="orders"><i class="fas fa-shopping-cart"></i> <span>Orders</span></a></li>
                <li><a href="#" class="nav-link" data-section="payment-gateway"><i class="fas fa-credit-card"></i> <span>Payment Gateway</span></a></li>
                <li><a href="#" class="nav-link" data-section="hr-payroll"><i class="fas fa-user-tie"></i> <span>HR & Payroll</span></a></li>
                <li><a href="#" class="nav-link" data-section="accounts"><i class="fas fa-chart-line"></i> <span>Accounts</span></a></li>
                <li><a href="#" class="nav-link" data-section="subscription"><i class="fas fa-credit-card"></i> <span>Subscription</span></a></li>
                <li><a href="#" class="nav-link" data-section="user-data"><i class="fas fa-users"></i> <span>User Data</span></a></li>
                <li><a href="#" class="nav-link" data-section="subscriber"><i class="fas fa-user-check"></i> <span>Subscriber</span></a></li>
                <li><a href="#" class="nav-link" data-section="support-ticket"><i class="fas fa-ticket-alt"></i> <span>Support Ticket</span></a></li>
                <li><a href="#" class="nav-link" data-section="contact-messages"><i class="fas fa-envelope"></i> <span>Contact Messages</span></a></li>
                <li><a href="#" class="nav-link" data-section="seo"><i class="fas fa-search"></i> <span>SEO</span></a></li>
                <li><a href="#" class="nav-link" data-section="report"><i class="fas fa-chart-bar"></i> <span>Report</span></a></li>
                <li><a href="#" class="nav-link" data-section="language"><i class="fas fa-language"></i> <span>Language</span></a></li>
                <li><a href="#" class="nav-link" data-section="email-smtp"><i class="fas fa-envelope-open-text"></i> <span>Email SMTP</span></a></li>
                <li><a href="#" class="nav-link" data-section="settings"><i class="fas fa-cog"></i> <span>Settings</span></a></li>
                <li><a href="#" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> <span>Logout</span></a></li>
            </ul>
        </div>
        
        <!-- Main Content -->
        <div class="main-content">
            <div class="header">
                <h2 id="pageTitle">Dashboard</h2>
                <div class="user-info">
                    <img src="https://ui-avatars.com/api/?name=Admin&background=1565c0&color=fff" alt="Admin">
                    <div>
                        <h4>Admin</h4>
                        <p>admin@aviationdata.cloud</p>
                    </div>
                </div>
            </div>
            
            <!-- Dashboard Section -->
            <div id="dashboard" class="section active">
                <!-- Stats Cards -->
                <div class="dashboard-stats">
                    <div class="stat-card" data-section="flight-data">
                        <div class="stat-icon" style="background: var(--secondary);">
                            <i class="fas fa-plane"></i>
                        </div>
                        <div class="stat-info">
                            <h3>12,458</h3>
                            <p>Total Flights</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="aircraft">
                        <div class="stat-icon" style="background: var(--success);">
                            <i class="fas fa-fighter-jet"></i>
                        </div>
                        <div class="stat-info">
                            <h3>2,847</h3>
                            <p>Active Aircraft</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="airports">
                        <div class="stat-icon" style="background: var(--warning);">
                            <i class="fas fa-plane-departure"></i>
                        </div>
                        <div class="stat-info">
                            <h3>689</h3>
                            <p>Airports Tracked</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="payment-gateway">
                        <div class="stat-icon" style="background: var(--purple);">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <div class="stat-info">
                            <h3>$84,250</h3>
                            <p>Total Revenue</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="customers">
                        <div class="stat-icon" style="background: var(--teal);">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-info">
                            <h3>8,924</h3>
                            <p>Total Customers</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="subscription">
                        <div class="stat-icon" style="background: var(--danger);">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="stat-info">
                            <h3>$98,420</h3>
                            <p>Monthly Revenue</p>
                        </div>
                    </div>
                </div>
                
                <!-- Dashboard Content -->
                <div class="dashboard-content">
                    <div class="left-column">
                        <!-- Recent Orders -->
                        <div class="card">
                            <div class="card-header">
                                <h3>Recent Data Orders</h3>
                                <button class="btn btn-primary" id="viewAllOrders">View All</button>
                            </div>
                            <table>
                                <thead>
                                    <tr>
                                        <th>Order ID</th>
                                        <th>Customer</th>
                                        <th>Data Type</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="recentOrdersTable">
                                    <!-- Data will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Support Tickets -->
                        <div class="card">
                            <div class="card-header">
                                <h3>Recent Support Tickets</h3>
                                <button class="btn btn-primary" id="viewAllTickets">View All</button>
                            </div>
                            <table>
                                <thead>
                                    <tr>
                                        <th>Ticket ID</th>
                                        <th>Subject</th>
                                        <th>Priority</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="recentTicketsTable">
                                    <!-- Data will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="right-column">
                        <!-- Recent Activity -->
                        <div class="card">
                            <div class="card-header">
                                <h3>Recent Activity</h3>
                            </div>
                            <ul class="recent-activity" id="recentActivity">
                                <!-- Data will be populated by JavaScript -->
                            </ul>
                        </div>
                        
                        <!-- Quick Actions -->
                        <div class="card">
                            <div class="card-header">
                                <h3>Quick Actions</h3>
                            </div>
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1rem;">
                                <button class="btn btn-primary" id="addFlightDataBtn">Add Flight Data</button>
                                <button class="btn btn-primary" id="addAircraftBtn">Add Aircraft</button>
                                <button class="btn btn-primary" id="createOrderBtn">Create Order</button>
                                <button class="btn btn-primary" id="generateReportBtn">Generate Report</button>
                            </div>
                        </div>
                        
                        <!-- Revenue Chart -->
                        <div class="card">
                            <div class="card-header">
                                <h3>Revenue Overview</h3>
                            </div>
                            <div class="chart-container">
                                <canvas id="revenueChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Flight Data Section -->
            <div id="flight-data" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Flight Data Management</h3>
                        <button class="btn btn-primary" id="addFlightDataBtn2">Add Flight Data</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="flightSearch" placeholder="Search flights...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Flight ID</th>
                                <th>Flight Number</th>
                                <th>Aircraft</th>
                                <th>Origin</th>
                                <th>Destination</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="flightTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Aircraft Section -->
            <div id="aircraft" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Aircraft Management</h3>
                        <button class="btn btn-primary" id="addAircraftBtn2">Add Aircraft</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="aircraftSearch" placeholder="Search aircraft...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Registration</th>
                                <th>Model</th>
                                <th>Airline</th>
                                <th>Age</th>
                                <th>Status</th>
                                <th>Last Update</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="aircraftTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Airports Section -->
            <div id="airports" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Airport Management</h3>
                        <button class="btn btn-primary" id="addAirportBtn">Add Airport</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="airportSearch" placeholder="Search airports...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ICAO Code</th>
                                <th>IATA Code</th>
                                <th>Airport Name</th>
                                <th>City</th>
                                <th>Country</th>
                                <th>Flights/Day</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="airportTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Airlines Section -->
            <div id="airlines" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Airline Management</h3>
                        <button class="btn btn-primary" id="addAirlineBtn">Add Airline</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="airlineSearch" placeholder="Search airlines...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ICAO Code</th>
                                <th>IATA Code</th>
                                <th>Airline Name</th>
                                <th>Country</th>
                                <th>Fleet Size</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="airlineTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Customers Section -->
            <div id="customers" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Customer Management</h3>
                        <button class="btn btn-primary" id="addCustomerBtn2">Add Customer</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="customerSearch" placeholder="Search customers...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Company</th>
                                <th>Join Date</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="customerTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Orders Section -->
            <div id="orders" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Data Order Management</h3>
                        <button class="btn btn-primary" id="createOrderBtn2">Create Order</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="orderSearch" placeholder="Search orders...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Order ID</th>
                                <th>Customer</th>
                                <th>Data Type</th>
                                <th>Date</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="orderTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Payment Gateway Section -->
            <div id="payment-gateway" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Payment Gateway Settings</h3>
                    </div>
                    <div class="tab-container">
                        <div class="tab active" data-tab="stripe">Stripe</div>
                        <div class="tab" data-tab="paypal">PayPal</div>
                        <div class="tab" data-tab="other">Other Gateways</div>
                    </div>
                    
                    <div class="tab-content active" id="stripe-tab">
                        <h4>Stripe Payment Gateway</h4>
                        <p>Connect your Stripe account to accept payments from customers.</p>
                        
                        <div class="form-group">
                            <label>Connection Status</label>
                            <div style="display: flex; align-items: center; gap: 10px; margin-top: 0.5rem;">
                                <span class="status active">Connected</span>
                                <button class="btn btn-danger">Disconnect</button>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="stripePublishableKey">Publishable Key</label>
                            <input type="text" id="stripePublishableKey" value="pk_test_51JfV8pSG8w7b6fK8G9mN3oP2qR7sT9yX1zA4B6cV8dE0fG2h5">
                        </div>
                        
                        <div class="form-group">
                            <label for="stripeSecretKey">Secret Key</label>
                            <input type="password" id="stripeSecretKey" value="sk_test_51JfV8pSG8w7b6fK8N5oP2qR7sT9yX1zA4B6cV8dE0fG2h5">
                        </div>
                        
                        <div class="form-group">
                            <label for="stripeWebhookSecret">Webhook Secret</label>
                            <input type="password" id="stripeWebhookSecret" value="whsec_5f8d9e2a7b3c1d0e4f6a8b9c">
                        </div>
                        
                        <button class="btn btn-primary">Save Stripe Settings</button>
                    </div>
                    
                    <div class="tab-content" id="paypal-tab">
                        <h4>PayPal Payment Gateway</h4>
                        <p>Connect your PayPal account to accept payments from customers.</p>
                        
                        <div class="form-group">
                            <label>Connection Status</label>
                            <div style="display: flex; align-items: center; gap: 10px; margin-top: 0.5rem;">
                                <span class="status pending">Not Connected</span>
                                <button class="btn btn-primary">Connect PayPal</button>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="paypalClientId">Client ID</label>
                            <input type="text" id="paypalClientId" placeholder="Enter your PayPal Client ID">
                        </div>
                        
                        <div class="form-group">
                            <label for="paypalSecret">Secret Key</label>
                            <input type="password" id="paypalSecret" placeholder="Enter your PayPal Secret Key">
                        </div>
                        
                        <div class="form-group">
                            <label for="paypalMode">Mode</label>
                            <select id="paypalMode">
                                <option value="sandbox">Sandbox</option>
                                <option value="live">Live</option>
                            </select>
                        </div>
                        
                        <button class="btn btn-primary">Save PayPal Settings</button>
                    </div>
                    
                    <div class="tab-content" id="other-tab">
                        <h4>Other Payment Gateways</h4>
                        <p>Configure additional payment gateways for your store.</p>
                        
                        <div class="form-group">
                            <label for="gatewaySelect">Select Gateway</label>
                            <select id="gatewaySelect">
                                <option value="">Select a payment gateway</option>
                                <option value="razorpay">Razorpay</option>
                                <option value="square">Square</option>
                                <option value="authorize">Authorize.net</option>
                                <option value="2checkout">2Checkout</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="gatewayKey">API Key</label>
                            <input type="text" id="gatewayKey" placeholder="Enter your API Key">
                        </div>
                        
                        <div class="form-group">
                            <label for="gatewaySecret">API Secret</label>
                            <input type="password" id="gatewaySecret" placeholder="Enter your API Secret">
                        </div>
                        
                        <button class="btn btn-primary">Save Gateway Settings</button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Transaction History</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Transaction ID</th>
                                <th>Date</th>
                                <th>Customer</th>
                                <th>Amount</th>
                                <th>Gateway</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="transactionTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- HR & Payroll Section -->
            <div id="hr-payroll" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Employee Management</h3>
                        <button class="btn btn-primary" id="addEmployeeBtn">Add Employee</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="employeeSearch" placeholder="Search employees...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Department</th>
                                <th>Position</th>
                                <th>Salary</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="employeeTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Payroll Processing</h3>
                        <button class="btn btn-primary" id="processPayrollBtn">Process Payroll</button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Payroll ID</th>
                                <th>Period</th>
                                <th>Employees</th>
                                <th>Total Amount</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="payrollTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Accounts Section -->
            <div id="accounts" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Financial Overview</h3>
                    </div>
                    <div class="chart-container">
                        <canvas id="financialChart"></canvas>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Recent Transactions</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Description</th>
                                <th>Category</th>
                                <th>Amount</th>
                                <th>Balance</th>
                            </tr>
                        </thead>
                        <tbody id="financialTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Invoice Management</h3>
                        <button class="btn btn-primary" id="createInvoiceBtn">Create Invoice</button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Invoice #</th>
                                <th>Client</th>
                                <th>Date</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="invoiceTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Subscription Section -->
            <div id="subscription" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Subscription Management</h3>
                        <button class="btn btn-primary" id="addSubscriptionBtn">Add Subscription</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="subscriptionSearch" placeholder="Search subscriptions...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>User</th>
                                <th>Plan</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Expiry Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="subscriptionTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- User Data Section -->
            <div id="user-data" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>User Management</h3>
                        <button class="btn btn-primary" id="addUserBtn2">Add User</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="userSearch" placeholder="Search users...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Join Date</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="userTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Subscriber Section -->
            <div id="subscriber" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Subscriber Analytics</h3>
                    </div>
                    <div class="chart-container">
                        <canvas id="subscriberChart"></canvas>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Subscriber Details</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Subscription</th>
                                <th>Renewal Date</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="subscriberTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Support Ticket Section -->
            <div id="support-ticket" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Support Tickets</h3>
                        <button class="btn btn-primary" id="createTicketBtn">Create Ticket</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="ticketSearch" placeholder="Search tickets...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Ticket ID</th>
                                <th>Subject</th>
                                <th>User</th>
                                <th>Priority</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="ticketTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Contact Messages Section -->
            <div id="contact-messages" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Contact Messages</h3>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="messageSearch" placeholder="Search messages...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Subject</th>
                                <th>Date</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="messageTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- SEO Section -->
            <div id="seo" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>SEO Analytics</h3>
                    </div>
                    <div class="chart-container">
                        <canvas id="seoChart"></canvas>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>SEO Settings</h3>
                    </div>
                    <form id="seoSettingsForm">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="siteTitle">Site Title</label>
                                <input type="text" id="siteTitle" value="AviationData - Comprehensive Aviation Data Platform">
                            </div>
                            <div class="form-group">
                                <label for="metaDescription">Meta Description</label>
                                <input type="text" id="metaDescription" value="AviationData provides real-time flight tracking, aircraft databases, airport information and comprehensive aviation analytics">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="keywords">Keywords</label>
                                <input type="text" id="keywords" value="aviation, flight data, aircraft tracking, airport information, airline data">
                            </div>
                            <div class="form-group">
                                <label for="googleAnalytics">Google Analytics ID</label>
                                <input type="text" id="googleAnalytics" value="UA-123456789-1">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Save Settings</button>
                    </form>
                </div>
            </div>
            
            <!-- Report Section -->
            <div id="report" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Reports</h3>
                        <div class="action-buttons">
                            <button class="btn btn-primary" id="generateUserReport">User Report</button>
                            <button class="btn btn-primary" id="generateRevenueReport">Revenue Report</button>
                            <button class="btn btn-success" id="exportReport">Export</button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="reportChart"></canvas>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Report Data</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>New Users</th>
                                <th>API Calls</th>
                                <th>Revenue</th>
                                <th>Data Downloads</th>
                            </tr>
                        </thead>
                        <tbody id="reportTable">
                            <!-- Data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Language Settings Section -->
            <div id="language" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Language Settings</h3>
                    </div>
                    <div class="form-group">
                        <label for="defaultLanguage">Default Language</label>
                        <select id="defaultLanguage">
                            <option value="en" selected>English</option>
                            <option value="zh">Chinese</option>
                            <option value="fr">French</option>
                            <option value="de">German</option>
                            <option value="es">Spanish</option>
                            <option value="ar">Arabic</option>
                            <option value="pt">Portuguese</option>
                            <option value="ja">Japanese</option>
                            <option value="hi">Hindi</option>
                            <option value="it">Italian</option>
                            <option value="ru">Russian</option>
                            <option value="id">Indonesian</option>
                            <option value="vi">Vietnamese</option>
                            <option value="tr">Turkish</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="languageSwitcher">Enable Language Switcher</label>
                        <div style="margin-top: 0.5rem;">
                            <label class="toggle-switch">
                                <input type="checkbox" id="languageSwitcher" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>Available Languages</label>
                        <div class="languages-grid" id="availableLanguages">
                            <!-- Languages will be populated by JavaScript -->
                        </div>
                    </div>
                    
                    <button class="btn btn-primary" id="saveLanguageSettings">Save Language Settings</button>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Translation Management</h3>
                    </div>
                    <div class="form-group">
                        <label for="translationLanguage">Select Language to Translate</label>
                        <select id="translationLanguage">
                            <option value="zh">Chinese</option>
                            <option value="fr">French</option>
                            <option value="de">German</option>
                            <option value="es">Spanish</option>
                            <option value="ar">Arabic</option>
                            <option value="pt">Portuguese</option>
                            <option value="ja">Japanese</option>
                            <option value="hi">Hindi</option>
                            <option value="it">Italian</option>
                            <option value="ru">Russian</option>
                            <option value="id">Indonesian</option>
                            <option value="vi">Vietnamese</option>
                            <option value="tr">Turkish</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="translationKey">Translation Key</label>
                        <input type="text" id="translationKey" placeholder="Enter translation key">
                    </div>
                    
                    <div class="form-group">
                        <label for="translationValue">Translation Value</label>
                        <textarea id="translationValue" rows="3" placeholder="Enter translation value"></textarea>
                    </div>
                    
                    <button class="btn btn-primary" id="addTranslationBtn">Add Translation</button>
                    
                    <div style="margin-top: 1.5rem;">
                        <h4>Current Translations</h4>
                        <table>
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Value</th>
                                    <th>Language</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="translationTable">
                                <!-- Translations will be populated by JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- Email SMTP Section -->
            <div id="email-smtp" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Email SMTP Settings</h3>
                    </div>
                    <div class="form-group">
                        <label for="smtpHost">SMTP Host</label>
                        <input type="text" id="smtpHost" value="smtp.gmail.com">
                    </div>
                    
                    <div class="form-group">
                        <label for="smtpPort">SMTP Port</label>
                        <input type="number" id="smtpPort" value="587">
                    </div>
                    
                    <div class="form-group">
                        <label for="smtpUsername">SMTP Username</label>
                        <input type="text" id="smtpUsername" value="noreply@aviationdata.cloud">
                    </div>
                    
                    <div class="form-group">
                        <label for="smtpPassword">SMTP Password</label>
                        <input type="password" id="smtpPassword" value="********">
                    </div>
                    
                    <div class="form-group">
                        <label for="smtpEncryption">Encryption</label>
                        <select id="smtpEncryption">
                            <option value="tls">TLS</option>
                            <option value="ssl">SSL</option>
                            <option value="none">None</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="fromEmail">From Email</label>
                        <input type="email" id="fromEmail" value="noreply@aviationdata.cloud">
                    </div>
                    
                    <div class="form-group">
                        <label for="fromName">From Name</label>
                        <input type="text" id="fromName" value="AviationData">
                    </div>
                    
                    <div class="form-group">
                        <label for="testEmail">Test Email Address</label>
                        <input type="email" id="testEmail" placeholder="Enter email to test configuration">
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn btn-primary">Save SMTP Settings</button>
                        <button class="btn btn-success" id="testSmtpBtn">Test Configuration</button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Email Templates</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Template Name</th>
                                <th>Subject</th>
                                <th>Last Updated</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="emailTemplateTable">
                            <tr>
                                <td>Welcome Email</td>
                                <td>Welcome to AviationData!</td>
                                <td>2023-10-15</td>
                                <td><button class="btn btn-primary">Edit</button></td>
                            </tr>
                            <tr>
                                <td>Data Order Confirmation</td>
                                <td>Your AviationData Order Confirmation</td>
                                <td>2023-10-10</td>
                                <td><button class="btn btn-primary">Edit</button></td>
                            </tr>
                            <tr>
                                <td>Password Reset</td>
                                <td>Reset Your AviationData Password</td>
                                <td>2023-10-05</td>
                                <td><button class="btn btn-primary">Edit</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Settings Section -->
            <div id="settings" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>General Settings</h3>
                    </div>
                    <form id="generalSettingsForm">
                        <div class="form-group">
                            <label for="siteName">Site Name</label>
                            <input type="text" id="siteName" value="AviationData">
                        </div>
                        <div class="form-group">
                            <label for="adminEmail">Admin Email</label>
                            <input type="email" id="adminEmail" value="admin@aviationdata.cloud">
                        </div>
                        <div class="form-group">
                            <label for="timezone">Timezone</label>
                            <select id="timezone">
                                <option value="UTC-5">EST (UTC-5)</option>
                                <option value="UTC-8">PST (UTC-8)</option>
                                <option value="UTC+0" selected>GMT (UTC+0)</option>
                                <option value="UTC+1">CET (UTC+1)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="dateFormat">Date Format</label>
                            <select id="dateFormat">
                                <option value="MM/DD/YYYY">MM/DD/YYYY</option>
                                <option value="DD/MM/YYYY" selected>DD/MM/YYYY</option>
                                <option value="YYYY-MM-DD">YYYY-MM-DD</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Save Settings</button>
                    </form>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Security Settings</h3>
                    </div>
                    <form id="securitySettingsForm">
                        <div class="form-group">
                            <label for="currentPassword">Current Password</label>
                            <input type="password" id="currentPassword">
                        </div>
                        <div class="form-group">
                            <label for="newPassword">New Password</label>
                            <input type="password" id="newPassword">
                        </div>
                        <div class="form-group">
                            <label for="confirmPassword">Confirm Password</label>
                            <input type="password" id="confirmPassword">
                        </div>
                        <button type="submit" class="btn btn-primary">Update Password</button>
                    </form>
                </div>
            </div>
            
            <div class="footer">
                <p>AviationData Admin Panel &copy; 2023 | All Rights Reserved</p>
            </div>
        </div>
    </div>

    <!-- Add Flight Data Modal -->
    <div id="addFlightDataModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add Flight Data</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="addFlightDataForm">
                <div class="form-group">
                    <label for="flightNumber">Flight Number</label>
                    <input type="text" id="flightNumber" required>
                </div>
                <div class="form-group">
                    <label for="aircraftType">Aircraft Type</label>
                    <input type="text" id="aircraftType" required>
                </div>
                <div class="form-group">
                    <label for="origin">Origin Airport</label>
                    <input type="text" id="origin" required>
                </div>
                <div class="form-group">
                    <label for="destination">Destination Airport</label>
                    <input type="text" id="destination" required>
                </div>
                <div class="form-group">
                    <label for="flightStatus">Status</label>
                    <select id="flightStatus" required>
                        <option value="scheduled">Scheduled</option>
                        <option value="active">Active</option>
                        <option value="landed">Landed</option>
                        <option value="cancelled">Cancelled</option>
                    </select>
                </div>
                <div class="action-buttons" style="margin-top: 1.5rem;">
                    <button type="submit" class="btn btn-primary">Add Flight Data</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Customer Modal -->
    <div id="addCustomerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add New Customer</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="addCustomerForm">
                <div class="form-group">
                    <label for="customerName">Full Name</label>
                    <input type="text" id="customerName" required>
                </div>
                <div class="form-group">
                    <label for="customerEmail">Email</label>
                    <input type="email" id="customerEmail" required>
                </div>
                <div class="form-group">
                    <label for="customerCompany">Company</label>
                    <input type="text" id="customerCompany">
                </div>
                <div class="form-group">
                    <label for="customerPhone">Phone</label>
                    <input type="tel" id="customerPhone">
                </div>
                <div class="form-group">
                    <label for="customerAddress">Address</label>
                    <textarea id="customerAddress" rows="2"></textarea>
                </div>
                <div class="action-buttons" style="margin-top: 1.5rem;">
                    <button type="submit" class="btn btn-primary">Add Customer</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add User Modal -->
    <div id="addUserModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add New User</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="addUserForm">
                <div class="form-group">
                    <label for="userName">Full Name</label>
                    <input type="text" id="userName" required>
                </div>
                <div class="form-group">
                    <label for="userEmail">Email</label>
                    <input type="email" id="userEmail" required>
                </div>
                <div class="form-group">
                    <label for="userPassword">Password</label>
                    <input type="password" id="userPassword" required>
                </div>
                <div class="form-group">
                    <label for="userRole">Role</label>
                    <select id="userRole">
                        <option value="user">User</option>
                        <option value="data-analyst">Data Analyst</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="userStatus">Status</label>
                    <select id="userStatus">
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="suspended">Suspended</option>
                    </select>
                </div>
                <div class="action-buttons" style="margin-top: 1.5rem;">
                    <button type="submit" class="btn btn-primary">Add User</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <!-- View Ticket Modal -->
    <div id="viewTicketModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Support Ticket Details</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div id="ticketDetails">
                <!-- Ticket details will be populated by JavaScript -->
            </div>
            <div class="form-group" style="margin-top: 1.5rem;">
                <label for="ticketResponse">Response</label>
                <textarea id="ticketResponse" rows="4" style="width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 4px;"></textarea>
            </div>
            <div class="action-buttons" style="margin-top: 1.5rem;">
                <button class="btn btn-primary" id="sendResponseBtn">Send Response</button>
                <button class="btn btn-warning" id="closeTicketBtn">Close Ticket</button>
                <button class="btn btn-danger close-modal">Cancel</button>
            </div>
        </div>
    </div>

    <!-- View Message Modal -->
    <div id="viewMessageModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Message Details</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div id="messageDetails">
                <!-- Message details will be populated by JavaScript -->
            </div>
            <div class="form-group" style="margin-top: 1.5rem;">
                <label for="messageResponse">Response</label>
                <textarea id="messageResponse" rows="4" style="width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 4px;"></textarea>
            </div>
            <div class="action-buttons" style="margin-top: 1.5rem;">
                <button class="btn btn-primary" id="sendMessageResponseBtn">Send Response</button>
                <button class="btn btn-danger close-modal">Close</button>
            </div>
        </div>
    </div>

    <!-- Registration Modal -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>User Registration</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="registerModalForm">
                <div class="form-group">
                    <label for="regModalName">Full Name</label>
                    <input type="text" id="regModalName" placeholder="Enter your full name" required>
                </div>
                <div class="form-group">
                    <label for="regModalEmail">Email</label>
                    <input type="email" id="regModalEmail" placeholder="Enter your email" required>
                </div>
                <div class="form-group">
                    <label for="regModalPassword">Password</label>
                    <input type="password" id="regModalPassword" placeholder="Create a password" required>
                </div>
                <div class="form-group">
                    <label for="regModalConfirmPassword">Confirm Password</label>
                    <input type="password" id="regModalConfirmPassword" placeholder="Confirm your password" required>
                </div>
                <div class="form-group">
                    <label for="regModalPhone">Phone Number</label>
                    <input type="tel" id="regModalPhone" placeholder="Enter your phone number">
                </div>
                <div class="form-group">
                    <label for="regModalCompany">Company</label>
                    <input type="text" id="regModalCompany" placeholder="Enter your company">
                </div>
                <div class="form-group">
                    <label for="regModalUserType">User Type</label>
                    <select id="regModalUserType">
                        <option value="customer">Customer</option>
                        <option value="data-analyst">Data Analyst</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <div class="action-buttons" style="margin-top: 1.5rem;">
                    <button type="submit" class="btn btn-primary">Register</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Aviation-themed sample data for the admin panel
        const sampleData = {
            flights: [
                { id: "AA123", number: "AA123", aircraft: "Boeing 737-800", origin: "JFK", destination: "LAX", status: "active" },
                { id: "DL456", number: "DL456", aircraft: "Airbus A320", origin: "ATL", destination: "ORD", status: "scheduled" },
                { id: "UA789", number: "UA789", aircraft: "Boeing 777", origin: "SFO", destination: "LHR", status: "landed" },
                { id: "BA321", number: "BA321", aircraft: "Airbus A380", origin: "LHR", destination: "DXB", status: "active" },
                { id: "EK654", number: "EK654", aircraft: "Boeing 787", origin: "DXB", destination: "SYD", status: "cancelled" }
            ],
            aircraft: [
                { registration: "N123AA", model: "Boeing 737-800", airline: "American Airlines", age: 5, status: "active", lastUpdate: "2023-10-15" },
                { registration: "N456DL", model: "Airbus A320", airline: "Delta Air Lines", age: 3, status: "active", lastUpdate: "2023-10-14" },
                { registration: "N789UA", model: "Boeing 777-300ER", airline: "United Airlines", age: 8, status: "maintenance", lastUpdate: "2023-10-13" },
                { registration: "G-BAAC", model: "Airbus A380", airline: "British Airways", age: 10, status: "active", lastUpdate: "2023-10-12" },
                { registration: "A6-EMM", model: "Boeing 787-9", airline: "Emirates", age: 4, status: "active", lastUpdate: "2023-10-11" }
            ],
            airports: [
                { icao: "KJFK", iata: "JFK", name: "John F. Kennedy International", city: "New York", country: "USA", flightsPerDay: 1200 },
                { icao: "KLAX", iata: "LAX", name: "Los Angeles International", city: "Los Angeles", country: "USA", flightsPerDay: 950 },
                { icao: "EGLL", iata: "LHR", name: "Heathrow Airport", city: "London", country: "UK", flightsPerDay: 1300 },
                { icao: "OMDB", iata: "DXB", name: "Dubai International", city: "Dubai", country: "UAE", flightsPerDay: 1100 },
                { icao: "YSSY", iata: "SYD", name: "Sydney Kingsford Smith", city: "Sydney", country: "Australia", flightsPerDay: 850 }
            ],
            airlines: [
                { icao: "AAL", iata: "AA", name: "American Airlines", country: "USA", fleetSize: 957, status: "active" },
                { icao: "DAL", iata: "DL", name: "Delta Air Lines", country: "USA", fleetSize: 890, status: "active" },
                { icao: "UAL", iata: "UA", name: "United Airlines", country: "USA", fleetSize: 867, status: "active" },
                { icao: "BAW", iata: "BA", name: "British Airways", country: "UK", fleetSize: 281, status: "active" },
                { icao: "UAE", iata: "EK", name: "Emirates", country: "UAE", fleetSize: 269, status: "active" }
            ],
            customers: [
                { id: 1, name: "John Aviation", email: "john@example.com", company: "SkyAnalytics Inc.", joinDate: "2023-05-15", status: "active" },
                { id: 2, name: "Sarah Pilot", email: "sarah@example.com", company: "FlightData Corp", joinDate: "2023-06-22", status: "active" },
                { id: 3, name: "Michael Controller", email: "michael@example.com", company: "Air Traffic Solutions", joinDate: "2023-07-10", status: "inactive" },
                { id: 4, name: "Emily Engineer", email: "emily@example.com", company: "AeroTech Ltd", joinDate: "2023-08-05", status: "active" },
                { id: 5, name: "Robert Analyst", email: "robert@example.com", company: "DataWings Analytics", joinDate: "2023-09-12", status: "active" }
            ],
            orders: [
                { id: 1001, customer: "John Aviation", dataType: "Flight History", date: "2023-10-15", amount: 149.97, status: "completed" },
                { id: 1002, customer: "Sarah Pilot", dataType: "Real-time Tracking", date: "2023-10-14", amount: 299.99, status: "processing" },
                { id: 1003, customer: "Michael Controller", dataType: "Aircraft Database", date: "2023-10-13", amount: 499.99, status: "pending" },
                { id: 1004, customer: "Emily Engineer", dataType: "Airport Statistics", date: "2023-10-12", amount: 199.99, status: "completed" },
                { id: 1005, customer: "Robert Analyst", dataType: "API Access", date: "2023-10-11", amount: 999.99, status: "cancelled" }
            ],
            employees: [
                { id: 1, name: "James Manager", department: "Data Operations", position: "Manager", salary: 85000, status: "active" },
                { id: 2, name: "Lisa Analyst", department: "Data Analysis", position: "Senior Analyst", salary: 72000, status: "active" },
                { id: 3, name: "David Engineer", department: "IT", position: "Developer", salary: 95000, status: "active" },
                { id: 4, name: "Jennifer HR", department: "HR", position: "Coordinator", salary: 58000, status: "active" },
                { id: 5, name: "Thomas Support", department: "Customer Support", position: "Team Lead", salary: 65000, status: "on-leave" }
            ],
            transactions: [
                { id: "txn_1JfV8pSG8w7b6fK8G9mN3oP2", date: "2023-10-15", customer: "John Aviation", amount: 149.97, gateway: "Stripe", status: "succeeded" },
                { id: "txn_1JfV8pSG8w7b6fK8G9mN3oP3", date: "2023-10-14", customer: "Sarah Pilot", amount: 299.99, gateway: "Stripe", status: "succeeded" },
                { id: "txn_1JfV8pSG8w7b6fK8G9mN3oP4", date: "2023-10-13", customer: "Michael Controller", amount: 499.99, gateway: "PayPal", status: "pending" },
                { id: "txn_1JfV8pSG8w7b6fK8G9mN3oP5", date: "2023-10-12", customer: "Emily Engineer", amount: 199.99, gateway: "Stripe", status: "succeeded" },
                { id: "txn_1JfV8pSG8w7b6fK8G9mN3oP6", date: "2023-10-11", customer: "Robert Analyst", amount: 999.99, gateway: "Stripe", status: "failed" }
            ],
            activities: [
                { icon: "plane", color: "secondary", text: "New flight data added: AA123 JFK-LAX", time: "2 minutes ago" },
                { icon: "credit-card", color: "purple", text: "Payment received from John Aviation", time: "15 minutes ago" },
                { icon: "database", color: "warning", text: "Aircraft database updated with 25 new entries", time: "1 hour ago" },
                { icon: "user-plus", color: "success", text: "New customer registered: SkyAnalytics Inc.", time: "3 hours ago" },
                { icon: "chart-line", color: "teal", text: "Monthly aviation data report generated", time: "5 hours ago" }
            ],
            users: [
                { id: 1, name: "John Aviation", email: "john@example.com", role: "data-analyst", joinDate: "2023-05-15", status: "active" },
                { id: 2, name: "Sarah Pilot", email: "sarah@example.com", role: "admin", joinDate: "2023-06-22", status: "active" },
                { id: 3, name: "Michael Controller", email: "michael@example.com", role: "user", joinDate: "2023-07-10", status: "pending" },
                { id: 4, name: "Emily Engineer", email: "emily@example.com", role: "data-analyst", joinDate: "2023-08-05", status: "active" },
                { id: 5, name: "Robert Analyst", email: "robert@example.com", role: "user", joinDate: "2023-09-12", status: "suspended" }
            ],
            subscriptions: [
                { id: 1, user: "John Aviation", plan: "Enterprise", price: "$299.99", status: "active", expiry: "2024-05-15" },
                { id: 2, user: "Sarah Pilot", plan: "Professional", price: "$99.99", status: "active", expiry: "2024-06-22" },
                { id: 3, user: "Michael Controller", plan: "Enterprise", price: "$299.99", status: "pending", expiry: "2024-07-10" },
                { id: 4, user: "Emily Engineer", plan: "Business", price: "$199.99", status: "active", expiry: "2024-08-05" },
                { id: 5, user: "Robert Analyst", plan: "Basic", price: "$49.99", status: "expired", expiry: "2023-09-12" }
            ],
            tickets: [
                { id: 4582, subject: "API Connection Issue", user: "John Aviation", priority: "High", status: "pending", created: "2023-10-05" },
                { id: 4581, subject: "Data Accuracy Question", user: "Sarah Pilot", priority: "Medium", status: "active", created: "2023-10-04" },
                { id: 4580, subject: "Feature Request: Real-time Alerts", user: "Michael Controller", priority: "Low", status: "closed", created: "2023-10-03" },
                { id: 4579, subject: "Bug Report: Flight Delay Data", user: "Emily Engineer", priority: "High", status: "active", created: "2023-10-02" },
                { id: 4578, subject: "Subscription Upgrade Query", user: "Robert Analyst", priority: "Medium", status: "pending", created: "2023-10-01" }
            ],
            messages: [
                { id: 1, name: "Alex Wright", email: "alex@example.com", subject: "Partnership Inquiry", date: "2023-10-05", status: "unread" },
                { id: 2, name: "Maria Garcia", email: "maria@example.com", subject: "Custom Data Feed Request", date: "2023-10-04", status: "read" },
                { id: 3, name: "David Lee", email: "david@example.com", subject: "Technical Integration Issue", date: "2023-10-03", status: "unread" },
                { id: 4, name: "Sophie Martin", email: "sophie@example.com", subject: "Data Accuracy Feedback", date: "2023-10-02", status: "read" },
                { id: 5, name: "James Wilson", email: "james@example.com", subject: "Enterprise Plan Quote", date: "2023-10-01", status: "unread" }
            ],
            reports: [
                { date: "2023-10-01", newUsers: 24, apiCalls: 12500, revenue: 2450, dataDownloads: 1200 },
                { date: "2023-10-02", newUsers: 31, apiCalls: 14200, revenue: 2980, dataDownloads: 1500 },
                { date: "2023-10-03", newUsers: 19, apiCalls: 9800, revenue: 1870, dataDownloads: 950 },
                { date: "2023-10-04", newUsers: 27, apiCalls: 11500, revenue: 2650, dataDownloads: 1100 },
                { date: "2023-10-05", newUsers: 35, apiCalls: 15800, revenue: 3420, dataDownloads: 1400 }
            ]
        };

        // Language data
        const languageData = [
            { code: 'en', name: 'English', flag: '🇬🇧', enabled: true },
            { code: 'zh', name: 'Chinese', flag: '🇨🇳', enabled: true },
            { code: 'fr', name: 'French', flag: '🇫🇷', enabled: true },
            { code: 'de', name: 'German', flag: '🇩🇪', enabled: true },
            { code: 'es', name: 'Spanish', flag: '🇪🇸', enabled: true },
            { code: 'ar', name: 'Arabic', flag: '🇸🇦', enabled: true },
            { code: 'pt', name: 'Portuguese', flag: '🇵🇹', enabled: true },
            { code: 'ja', name: 'Japanese', flag: '🇯🇵', enabled: true },
            { code: 'hi', name: 'Hindi', flag: '🇮🇳', enabled: true },
            { code: 'it', name: 'Italian', flag: '🇮🇹', enabled: true },
            { code: 'ru', name: 'Russian', flag: '🇷🇺', enabled: true },
            { code: 'id', name: 'Indonesian', flag: '🇮🇩', enabled: true },
            { code: 'vi', name: 'Vietnamese', flag: '🇻🇳', enabled: true },
            { code: 'tr', name: 'Turkish', flag: '🇹🇷', enabled: true }
        ];

        // Sample translations
        const sampleTranslations = [
            { key: 'welcome_message', value: 'Bienvenido a AviationData', language: 'Spanish', langCode: 'es' },
            { key: 'login', value: 'Iniciar Sesión', language: 'Spanish', langCode: 'es' },
            { key: 'welcome_message', value: 'Bienvenue chez AviationData', language: 'French', langCode: 'fr' },
            { key: 'login', value: 'Connexion', language: 'French', langCode: 'fr' },
            { key: 'welcome_message', value: 'Willkommen bei AviationData', language: 'German', langCode: 'de' },
            { key: 'login', value: 'Anmeldung', language: 'German', langCode: 'de' }
        ];

        // Initialize the application
        document.addEventListener('DOMContentLoaded', function() {
            // DOM Elements
            const loginBtn = document.getElementById('loginBtn');
            const registerBtn = document.getElementById('registerBtn');
            const logoutBtn = document.getElementById('logoutBtn');
            const loginSection = document.getElementById('loginSection');
            const adminPanel = document.getElementById('adminPanel');
            const loginForm = document.getElementById('loginForm');
            const registerForm = document.getElementById('registerForm');
            const switchToRegister = document.getElementById('switchToRegister');
            const switchToLogin = document.getElementById('switchToLogin');
            const showRegisterBtn = document.getElementById('showRegisterBtn');
            const navLinks = document.querySelectorAll('.nav-link');
            const sections = document.querySelectorAll('.section');
            const pageTitle = document.getElementById('pageTitle');
            const statCards = document.querySelectorAll('.stat-card');
            const modals = document.querySelectorAll('.modal');
            const closeModalBtns = document.querySelectorAll('.close-modal');
            const tabs = document.querySelectorAll('.tab');
            const tabContents = document.querySelectorAll('.tab-content');
            const registerModal = document.getElementById('registerModal');
            const registerModalForm = document.getElementById('registerModalForm');
            
            // Login functionality
            loginBtn.addEventListener('click', function() {
                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;
                
                // Check credentials (hardcoded for demo)
                if (email === 'admin@aviationdata.cloud' && password === '@Abc123456') {
                    loginSection.style.display = 'none';
                    adminPanel.style.display = 'block';
                    initializeDashboard();
                } else {
                    alert('Invalid credentials! Please try again.');
                }
            });
            
            // Show registration form
            switchToRegister.addEventListener('click', function() {
                loginForm.style.display = 'none';
                registerForm.style.display = 'block';
            });
            
            // Show login form
            switchToLogin.addEventListener('click', function() {
                registerForm.style.display = 'none';
                loginForm.style.display = 'block';
            });
            
            // Show register form via button
            showRegisterBtn.addEventListener('click', function() {
                loginForm.style.display = 'none';
                registerForm.style.display = 'block';
            });
            
            // Register functionality
            registerBtn.addEventListener('click', function() {
                const name = document.getElementById('regName').value;
                const email = document.getElementById('regEmail').value;
                const password = document.getElementById('regPassword').value;
                const confirmPassword = document.getElementById('regConfirmPassword').value;
                
                // Basic validation
                if (!name || !email || !password || !confirmPassword) {
                    alert('Please fill in all required fields.');
                    return;
                }
                
                if (password !== confirmPassword) {
                    alert('Passwords do not match.');
                    return;
                }
                
                if (password.length < 6) {
                    alert('Password must be at least 6 characters long.');
                    return;
                }
                
                // Simulate registration (in a real app, this would make an API call)
                alert(`Registration successful! Welcome ${name}. You can now login with your credentials.`);
                
                // Switch back to login form
                registerForm.style.display = 'none';
                loginForm.style.display = 'block';
                
                // Clear registration form
                document.getElementById('regName').value = '';
                document.getElementById('regEmail').value = '';
                document.getElementById('regPassword').value = '';
                document.getElementById('regConfirmPassword').value = '';
                document.getElementById('regPhone').value = '';
                
                // Pre-fill login email
                document.getElementById('email').value = email;
            });
            
            // Register modal form submission
            registerModalForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const name = document.getElementById('regModalName').value;
                const email = document.getElementById('regModalEmail').value;
                const password = document.getElementById('regModalPassword').value;
                const confirmPassword = document.getElementById('regModalConfirmPassword').value;
                const userType = document.getElementById('regModalUserType').value;
                
                // Basic validation
                if (!name || !email || !password || !confirmPassword) {
                    alert('Please fill in all required fields.');
                    return;
                }
                
                if (password !== confirmPassword) {
                    alert('Passwords do not match.');
                    return;
                }
                
                if (password.length < 6) {
                    alert('Password must be at least 6 characters long.');
                    return;
                }
                
                // Simulate registration
                alert(`Registration successful! Welcome ${name} (${userType}). Your account has been created.`);
                
                // Close modal and reset form
                registerModal.style.display = 'none';
                this.reset();
                
                // Optionally switch to login form and pre-fill email
                registerForm.style.display = 'none';
                loginForm.style.display = 'block';
                document.getElementById('email').value = email;
            });
            
            // Logout functionality
            logoutBtn.addEventListener('click', function() {
                if (confirm('Are you sure you want to logout?')) {
                    adminPanel.style.display = 'none';
                    loginSection.style.display = 'flex';
                    document.getElementById('password').value = '';
                    // Show login form by default on logout
                    registerForm.style.display = 'none';
                    loginForm.style.display = 'block';
                }
            });
            
            // Simulate pressing login button on Enter key in password field
            document.getElementById('password').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    loginBtn.click();
                }
            });
            
            // Navigation functionality
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetSection = this.getAttribute('data-section');
                    
                    // Update active nav link
                    navLinks.forEach(nav => nav.classList.remove('active'));
                    this.classList.add('active');
                    
                    // Show target section
                    sections.forEach(section => section.classList.remove('active'));
                    document.getElementById(targetSection).classList.add('active');
                    
                    // Update page title
                    pageTitle.textContent = this.querySelector('span').textContent;
                    
                    // Initialize section-specific functionality
                    initializeSection(targetSection);
                });
            });
            
            // Tab functionality
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetTab = this.getAttribute('data-tab');
                    
                    // Update active tab
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // Show target tab content
                    tabContents.forEach(content => content.classList.remove('active'));
                    document.getElementById(`${targetTab}-tab`).classList.add('active');
                });
            });
            
            // Stat cards navigation
            statCards.forEach(card => {
                card.addEventListener('click', function() {
                    const targetSection = this.getAttribute('data-section');
                    const navLink = document.querySelector(`.nav-link[data-section="${targetSection}"]`);
                    if (navLink) {
                        navLink.click();
                    }
                });
            });
            
            // Modal functionality
            closeModalBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    modals.forEach(modal => modal.style.display = 'none');
                });
            });
            
            // Close modal when clicking outside
            window.addEventListener('click', function(e) {
                modals.forEach(modal => {
                    if (e.target === modal) {
                        modal.style.display = 'none';
                    }
                });
            });
            
            // Initialize section based on name
            function initializeSection(sectionName) {
                switch(sectionName) {
                    case 'dashboard':
                        initializeDashboard();
                        break;
                    case 'flight-data':
                        initializeFlightData();
                        break;
                    case 'aircraft':
                        initializeAircraft();
                        break;
                    case 'airports':
                        initializeAirports();
                        break;
                    case 'airlines':
                        initializeAirlines();
                        break;
                    case 'customers':
                        initializeCustomers();
                        break;
                    case 'orders':
                        initializeOrders();
                        break;
                    case 'payment-gateway':
                        initializePaymentGateway();
                        break;
                    case 'hr-payroll':
                        initializeHRPayroll();
                        break;
                    case 'accounts':
                        initializeAccounts();
                        break;
                    case 'subscription':
                        initializeSubscription();
                        break;
                    case 'user-data':
                        initializeUserData();
                        break;
                    case 'subscriber':
                        initializeSubscriber();
                        break;
                    case 'support-ticket':
                        initializeSupportTicket();
                        break;
                    case 'contact-messages':
                        initializeContactMessages();
                        break;
                    case 'seo':
                        initializeSEO();
                        break;
                    case 'report':
                        initializeReport();
                        break;
                    case 'language':
                        initializeLanguage();
                        break;
                    case 'email-smtp':
                        initializeEmailSMTP();
                        break;
                    case 'settings':
                        initializeSettings();
                        break;
                }
            }
            
            // Initialize dashboard when the page loads
            function initializeDashboard() {
                populateRecentOrders();
                populateRecentTickets();
                populateRecentActivity();
                createRevenueChart();
                
                // Add event listeners for dashboard buttons
                document.getElementById('viewAllOrders').addEventListener('click', function() {
                    document.querySelector('.nav-link[data-section="orders"]').click();
                });
                
                document.getElementById('viewAllTickets').addEventListener('click', function() {
                    document.querySelector('.nav-link[data-section="support-ticket"]').click();
                });
                
                document.getElementById('addFlightDataBtn').addEventListener('click', function() {
                    document.getElementById('addFlightDataModal').style.display = 'flex';
                });
                
                document.getElementById('addAircraftBtn').addEventListener('click', function() {
                    document.querySelector('.nav-link[data-section="aircraft"]').click();
                });
                
                document.getElementById('createOrderBtn').addEventListener('click', function() {
                    document.querySelector('.nav-link[data-section="orders"]').click();
                });
                
                document.getElementById('generateReportBtn').addEventListener('click', function() {
                    document.querySelector('.nav-link[data-section="report"]').click();
                });
            }
            
            function initializeFlightData() {
                populateFlightTable();
                
                document.getElementById('addFlightDataBtn2').addEventListener('click', function() {
                    document.getElementById('addFlightDataModal').style.display = 'flex';
                });
                
                document.getElementById('flightSearch').addEventListener('input', function() {
                    filterTable('flightTable', this.value);
                });
                
                // Add flight data form submission
                document.getElementById('addFlightDataForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    alert('Flight data added successfully!');
                    document.getElementById('addFlightDataModal').style.display = 'none';
                    this.reset();
                });
            }
            
            function initializeAircraft() {
                populateAircraftTable();
                
                document.getElementById('aircraftSearch').addEventListener('input', function() {
                    filterTable('aircraftTable', this.value);
                });
            }
            
            function initializeAirports() {
                populateAirportTable();
                
                document.getElementById('airportSearch').addEventListener('input', function() {
                    filterTable('airportTable', this.value);
                });
            }
            
            function initializeAirlines() {
                populateAirlineTable();
                
                document.getElementById('airlineSearch').addEventListener('input', function() {
                    filterTable('airlineTable', this.value);
                });
            }
            
            function initializeCustomers() {
                populateCustomerTable();
                
                document.getElementById('addCustomerBtn2').addEventListener('click', function() {
                    document.getElementById('addCustomerModal').style.display = 'flex';
                });
                
                document.getElementById('customerSearch').addEventListener('input', function() {
                    filterTable('customerTable', this.value);
                });
                
                // Add customer form submission
                document.getElementById('addCustomerForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    alert('Customer added successfully!');
                    document.getElementById('addCustomerModal').style.display = 'none';
                    this.reset();
                });
            }
            
            function initializeOrders() {
                populateOrderTable();
                
                document.getElementById('orderSearch').addEventListener('input', function() {
                    filterTable('orderTable', this.value);
                });
            }
            
            function initializePaymentGateway() {
                populateTransactionTable();
                
                // Save Stripe settings
                document.querySelector('#stripe-tab .btn-primary').addEventListener('click', function() {
                    alert('Stripe settings saved successfully!');
                });
                
                // Save PayPal settings
                document.querySelector('#paypal-tab .btn-primary').addEventListener('click', function() {
                    alert('PayPal settings saved successfully!');
                });
                
                // Save other gateway settings
                document.querySelector('#other-tab .btn-primary').addEventListener('click', function() {
                    alert('Gateway settings saved successfully!');
                });
            }
            
            function initializeHRPayroll() {
                populateEmployeeTable();
                populatePayrollTable();
                
                document.getElementById('employeeSearch').addEventListener('input', function() {
                    filterTable('employeeTable', this.value);
                });
            }
            
            function initializeAccounts() {
                createFinancialChart();
                populateFinancialTable();
                populateInvoiceTable();
            }
            
            function initializeSubscription() {
                populateSubscriptionTable();
                
                document.getElementById('subscriptionSearch').addEventListener('input', function() {
                    filterTable('subscriptionTable', this.value);
                });
            }
            
            function initializeUserData() {
                populateUserTable();
                
                document.getElementById('addUserBtn2').addEventListener('click', function() {
                    document.getElementById('addUserModal').style.display = 'flex';
                });
                
                document.getElementById('userSearch').addEventListener('input', function() {
                    filterTable('userTable', this.value);
                });
                
                // Add user form submission
                document.getElementById('addUserForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    alert('User added successfully!');
                    document.getElementById('addUserModal').style.display = 'none';
                    this.reset();
                });
            }
            
            function initializeSubscriber() {
                createSubscriberChart();
                populateSubscriberTable();
            }
            
            function initializeSupportTicket() {
                populateTicketTable();
                
                document.getElementById('ticketSearch').addEventListener('input', function() {
                    filterTable('ticketTable', this.value);
                });
                
                // Send response button
                document.getElementById('sendResponseBtn').addEventListener('click', function() {
                    const response = document.getElementById('ticketResponse').value;
                    if (response) {
                        alert('Response sent successfully!');
                        document.getElementById('ticketResponse').value = '';
                        document.getElementById('viewTicketModal').style.display = 'none';
                    } else {
                        alert('Please enter a response.');
                    }
                });
                
                // Close ticket button
                document.getElementById('closeTicketBtn').addEventListener('click', function() {
                    if (confirm('Are you sure you want to close this ticket?')) {
                        alert('Ticket closed successfully!');
                        document.getElementById('viewTicketModal').style.display = 'none';
                    }
                });
            }
            
            function initializeContactMessages() {
                populateMessageTable();
                
                document.getElementById('messageSearch').addEventListener('input', function() {
                    filterTable('messageTable', this.value);
                });
                
                // Send message response button
                document.getElementById('sendMessageResponseBtn').addEventListener('click', function() {
                    const response = document.getElementById('messageResponse').value;
                    if (response) {
                        alert('Response sent successfully!');
                        document.getElementById('messageResponse').value = '';
                        document.getElementById('viewMessageModal').style.display = 'none';
                    } else {
                        alert('Please enter a response.');
                    }
                });
            }
            
            function initializeSEO() {
                createSEOChart();
                
                document.getElementById('seoSettingsForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    alert('SEO settings saved successfully!');
                });
            }
            
            function initializeReport() {
                createReportChart();
                populateReportTable();
                
                document.getElementById('exportReport').addEventListener('click', function() {
                    alert('Report exported successfully!');
                });
            }
            
            function initializeLanguage() {
                populateLanguageSettings();
                populateTranslationTable();
                
                // Save language settings
                document.getElementById('saveLanguageSettings').addEventListener('click', function() {
                    saveLanguageSettings();
                });
                
                // Add translation
                document.getElementById('addTranslationBtn').addEventListener('click', function() {
                    addTranslation();
                });
            }
            
            function initializeEmailSMTP() {
                // Save SMTP settings
                document.querySelectorAll('#email-smtp .btn-primary')[0].addEventListener('click', function() {
                    alert('SMTP settings saved successfully!');
                });
                
                // Test SMTP configuration
                document.getElementById('testSmtpBtn').addEventListener('click', function() {
                    const testEmail = document.getElementById('testEmail').value;
                    if (testEmail) {
                        alert(`Test email sent to ${testEmail}`);
                    } else {
                        alert('Please enter a test email address.');
                    }
                });
            }
            
            function initializeSettings() {
                document.getElementById('generalSettingsForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    alert('General settings saved successfully!');
                });
                
                document.getElementById('securitySettingsForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const currentPassword = document.getElementById('currentPassword').value;
                    const newPassword = document.getElementById('newPassword').value;
                    const confirmPassword = document.getElementById('confirmPassword').value;
                    
                    if (newPassword !== confirmPassword) {
                        alert('New passwords do not match!');
                        return;
                    }
                    
                    alert('Password updated successfully!');
                    this.reset();
                });
            }
            
            // Language functions
            function populateLanguageSettings() {
                const languagesContainer = document.getElementById('availableLanguages');
                languagesContainer.innerHTML = '';
                
                languageData.forEach(language => {
                    const languageDiv = document.createElement('div');
                    languageDiv.className = 'language-checkbox';
                    languageDiv.innerHTML = `
                        <input type="checkbox" id="lang-${language.code}" ${language.enabled ? 'checked' : ''}>
                        <label for="lang-${language.code}">
                            ${language.flag} ${language.name}
                        </label>
                    `;
                    languagesContainer.appendChild(languageDiv);
                });
            }
            
            function saveLanguageSettings() {
                // Get selected default language
                const defaultLanguage = document.getElementById('defaultLanguage').value;
                
                // Get enabled languages
                const enabledLanguages = [];
                languageData.forEach(lang => {
                    const checkbox = document.getElementById(`lang-${lang.code}`);
                    if (checkbox && checkbox.checked) {
                        enabledLanguages.push(lang.name);
                    }
                });
                
                // Get language switcher status
                const languageSwitcher = document.getElementById('languageSwitcher').checked;
                
                alert(`Language settings saved!\n\nDefault Language: ${languageData.find(l => l.code === defaultLanguage).name}\nEnabled Languages: ${enabledLanguages.join(', ')}\nLanguage Switcher: ${languageSwitcher ? 'Enabled' : 'Disabled'}`);
            }
            
            function populateTranslationTable() {
                const tableBody = document.getElementById('translationTable');
                tableBody.innerHTML = '';
                
                sampleTranslations.forEach(translation => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${translation.key}</td>
                        <td>${translation.value}</td>
                        <td>${translation.language}</td>
                        <td>
                            <button class="btn btn-primary edit-translation" data-key="${translation.key}" data-lang="${translation.langCode}">Edit</button>
                            <button class="btn btn-danger delete-translation" data-key="${translation.key}" data-lang="${translation.langCode}">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // Add event listeners for translation buttons
                document.querySelectorAll('.edit-translation').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const key = this.getAttribute('data-key');
                        const lang = this.getAttribute('data-lang');
                        const translation = sampleTranslations.find(t => t.key === key && t.langCode === lang);
                        
                        if (translation) {
                            document.getElementById('translationKey').value = translation.key;
                            document.getElementById('translationValue').value = translation.value;
                            document.getElementById('translationLanguage').value = translation.langCode;
                            alert(`Editing translation for "${translation.key}" in ${translation.language}`);
                        }
                    });
                });
                
                document.querySelectorAll('.delete-translation').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const key = this.getAttribute('data-key');
                        const lang = this.getAttribute('data-lang');
                        if (confirm(`Are you sure you want to delete translation for "${key}"?`)) {
                            alert(`Translation for "${key}" in ${lang} deleted successfully!`);
                        }
                    });
                });
            }
            
            function addTranslation() {
                const key = document.getElementById('translationKey').value;
                const value = document.getElementById('translationValue').value;
                const langCode = document.getElementById('translationLanguage').value;
                
                if (!key || !value) {
                    alert('Please enter both key and value.');
                    return;
                }
                
                const language = languageData.find(l => l.code === langCode);
                if (!language) {
                    alert('Invalid language selected.');
                    return;
                }
                
                alert(`Translation added!\n\nKey: ${key}\nValue: ${value}\nLanguage: ${language.name}`);
                
                // Clear form
                document.getElementById('translationKey').value = '';
                document.getElementById('translationValue').value = '';
                
                // Refresh translation table
                populateTranslationTable();
            }
            
            // Helper functions to populate tables
            function populateRecentOrders() {
                const tableBody = document.getElementById('recentOrdersTable');
                tableBody.innerHTML = '';
                
                sampleData.orders.slice(0, 4).forEach(order => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>#${order.id}</td>
                        <td>${order.customer}</td>
                        <td>${order.dataType}</td>
                        <td>$${order.amount.toFixed(2)}</td>
                        <td><span class="status ${order.status}">${order.status}</span></td>
                        <td><button class="btn btn-primary">View</button></td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateRecentTickets() {
                const tableBody = document.getElementById('recentTicketsTable');
                tableBody.innerHTML = '';
                
                sampleData.tickets.slice(0, 4).forEach(ticket => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>#${ticket.id}</td>
                        <td>${ticket.subject}</td>
                        <td>${ticket.priority}</td>
                        <td><span class="status ${ticket.status}">${ticket.status}</span></td>
                        <td><button class="btn btn-primary view-ticket" data-id="${ticket.id}">View</button></td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // Add event listeners to view buttons
                document.querySelectorAll('.view-ticket').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const ticketId = this.getAttribute('data-id');
                        const ticket = sampleData.tickets.find(t => t.id == ticketId);
                        document.getElementById('ticketDetails').innerHTML = `
                            <p><strong>Ticket ID:</strong> #${ticket.id}</p>
                            <p><strong>Subject:</strong> ${ticket.subject}</p>
                            <p><strong>User:</strong> ${ticket.user}</p>
                            <p><strong>Priority:</strong> ${ticket.priority}</p>
                            <p><strong>Status:</strong> ${ticket.status}</p>
                            <p><strong>Created:</strong> ${ticket.created}</p>
                            <p><strong>Description:</strong> Aviation data API connection issue reported by customer.</p>
                        `;
                        document.getElementById('viewTicketModal').style.display = 'flex';
                    });
                });
            }
            
            function populateRecentActivity() {
                const activityList = document.getElementById('recentActivity');
                activityList.innerHTML = '';
                
                sampleData.activities.forEach(activity => {
                    const item = document.createElement('li');
                    item.innerHTML = `
                        <div class="activity-icon" style="background: var(--${activity.color});">
                            <i class="fas fa-${activity.icon}"></i>
                        </div>
                        <div>
                            <p>${activity.text}</p>
                            <small>${activity.time}</small>
                        </div>
                    `;
                    activityList.appendChild(item);
                });
            }
            
            function populateFlightTable() {
                const tableBody = document.getElementById('flightTable');
                tableBody.innerHTML = '';
                
                sampleData.flights.forEach(flight => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${flight.id}</td>
                        <td>${flight.number}</td>
                        <td>${flight.aircraft}</td>
                        <td>${flight.origin}</td>
                        <td>${flight.destination}</td>
                        <td><span class="status ${flight.status}">${flight.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">Edit</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateAircraftTable() {
                const tableBody = document.getElementById('aircraftTable');
                tableBody.innerHTML = '';
                
                sampleData.aircraft.forEach(aircraft => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${aircraft.registration}</td>
                        <td>${aircraft.model}</td>
                        <td>${aircraft.airline}</td>
                        <td>${aircraft.age} years</td>
                        <td><span class="status ${aircraft.status}">${aircraft.status}</span></td>
                        <td>${aircraft.lastUpdate}</td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">Edit</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateAirportTable() {
                const tableBody = document.getElementById('airportTable');
                tableBody.innerHTML = '';
                
                sampleData.airports.forEach(airport => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${airport.icao}</td>
                        <td>${airport.iata}</td>
                        <td>${airport.name}</td>
                        <td>${airport.city}</td>
                        <td>${airport.country}</td>
                        <td>${airport.flightsPerDay.toLocaleString()}</td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">Edit</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateAirlineTable() {
                const tableBody = document.getElementById('airlineTable');
                tableBody.innerHTML = '';
                
                sampleData.airlines.forEach(airline => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${airline.icao}</td>
                        <td>${airline.iata}</td>
                        <td>${airline.name}</td>
                        <td>${airline.country}</td>
                        <td>${airline.fleetSize}</td>
                        <td><span class="status ${airline.status}">${airline.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">Edit</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateCustomerTable() {
                const tableBody = document.getElementById('customerTable');
                tableBody.innerHTML = '';
                
                sampleData.customers.forEach(customer => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${customer.id}</td>
                        <td>${customer.name}</td>
                        <td>${customer.email}</td>
                        <td>${customer.company}</td>
                        <td>${customer.joinDate}</td>
                        <td><span class="status ${customer.status}">${customer.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">Edit</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateOrderTable() {
                const tableBody = document.getElementById('orderTable');
                tableBody.innerHTML = '';
                
                sampleData.orders.forEach(order => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>#${order.id}</td>
                        <td>${order.customer}</td>
                        <td>${order.dataType}</td>
                        <td>${order.date}</td>
                        <td>$${order.amount.toFixed(2)}</td>
                        <td><span class="status ${order.status}">${order.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">View</button>
                            <button class="btn btn-danger">Cancel</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateTransactionTable() {
                const tableBody = document.getElementById('transactionTable');
                tableBody.innerHTML = '';
                
                sampleData.transactions.forEach(transaction => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${transaction.id}</td>
                        <td>${transaction.date}</td>
                        <td>${transaction.customer}</td>
                        <td>$${transaction.amount.toFixed(2)}</td>
                        <td>${transaction.gateway}</td>
                        <td><span class="status ${transaction.status}">${transaction.status}</span></td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateEmployeeTable() {
                const tableBody = document.getElementById('employeeTable');
                tableBody.innerHTML = '';
                
                sampleData.employees.forEach(employee => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${employee.id}</td>
                        <td>${employee.name}</td>
                        <td>${employee.department}</td>
                        <td>${employee.position}</td>
                        <td>$${employee.salary.toLocaleString()}</td>
                        <td><span class="status ${employee.status}">${employee.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">Edit</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populatePayrollTable() {
                const tableBody = document.getElementById('payrollTable');
                tableBody.innerHTML = '';
                
                const payrolls = [
                    { id: "PR-2023-10", period: "October 2023", employees: 24, amount: 125000, status: "processed" },
                    { id: "PR-2023-09", period: "September 2023", employees: 23, amount: 118500, status: "processed" },
                    { id: "PR-2023-08", period: "August 2023", employees: 22, amount: 112000, status: "processed" },
                    { id: "PR-2023-07", period: "July 2023", employees: 21, amount: 105000, status: "processed" }
                ];
                
                payrolls.forEach(payroll => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${payroll.id}</td>
                        <td>${payroll.period}</td>
                        <td>${payroll.employees}</td>
                        <td>$${payroll.amount.toLocaleString()}</td>
                        <td><span class="status ${payroll.status}">${payroll.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">View</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateFinancialTable() {
                const tableBody = document.getElementById('financialTable');
                tableBody.innerHTML = '';
                
                const transactions = [
                    { date: "2023-10-15", description: "Data Subscription Sales", category: "Revenue", amount: 2450, balance: 15420 },
                    { date: "2023-10-14", description: "Server Hosting", category: "Expense", amount: -350, balance: 12970 },
                    { date: "2023-10-13", description: "Marketing Campaign", category: "Expense", amount: -1200, balance: 13320 },
                    { date: "2023-10-12", description: "API Subscription Sales", category: "Revenue", amount: 1890, balance: 14520 },
                    { date: "2023-10-11", description: "Employee Salaries", category: "Expense", amount: -8500, balance: 12630 }
                ];
                
                transactions.forEach(transaction => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${transaction.date}</td>
                        <td>${transaction.description}</td>
                        <td>${transaction.category}</td>
                        <td>${transaction.amount > 0 ? '+' : ''}$${transaction.amount.toLocaleString()}</td>
                        <td>$${transaction.balance.toLocaleString()}</td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateInvoiceTable() {
                const tableBody = document.getElementById('invoiceTable');
                tableBody.innerHTML = '';
                
                const invoices = [
                    { id: "INV-2023-1001", client: "SkyAnalytics Inc.", date: "2023-10-15", amount: 5200, status: "paid" },
                    { id: "INV-2023-1002", client: "FlightData Corp", date: "2023-10-14", amount: 3200, status: "pending" },
                    { id: "INV-2023-1003", client: "Air Traffic Solutions", date: "2023-10-13", amount: 4500, status: "paid" },
                    { id: "INV-2023-1004", client: "AeroTech Ltd", date: "2023-10-12", amount: 2800, status: "overdue" },
                    { id: "INV-2023-1005", client: "DataWings Analytics", date: "2023-10-11", amount: 3900, status: "paid" }
                ];
                
                invoices.forEach(invoice => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${invoice.id}</td>
                        <td>${invoice.client}</td>
                        <td>${invoice.date}</td>
                        <td>$${invoice.amount.toLocaleString()}</td>
                        <td><span class="status ${invoice.status}">${invoice.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">View</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateSubscriptionTable() {
                const tableBody = document.getElementById('subscriptionTable');
                tableBody.innerHTML = '';
                
                sampleData.subscriptions.forEach(sub => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${sub.id}</td>
                        <td>${sub.user}</td>
                        <td>${sub.plan}</td>
                        <td>${sub.price}</td>
                        <td><span class="status ${sub.status}">${sub.status}</span></td>
                        <td>${sub.expiry}</td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">Edit</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateUserTable() {
                const tableBody = document.getElementById('userTable');
                tableBody.innerHTML = '';
                
                sampleData.users.forEach(user => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${user.id}</td>
                        <td>${user.name}</td>
                        <td>${user.email}</td>
                        <td>${user.role}</td>
                        <td>${user.joinDate}</td>
                        <td><span class="status ${user.status}">${user.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">Edit</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateSubscriberTable() {
                const tableBody = document.getElementById('subscriberTable');
                tableBody.innerHTML = '';
                
                sampleData.subscriptions.forEach(sub => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${sub.id}</td>
                        <td>${sub.user}</td>
                        <td>${sub.plan}</td>
                        <td>${sub.expiry}</td>
                        <td><span class="status ${sub.status}">${sub.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary">Renew</button>
                            <button class="btn btn-danger">Cancel</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateTicketTable() {
                const tableBody = document.getElementById('ticketTable');
                tableBody.innerHTML = '';
                
                sampleData.tickets.forEach(ticket => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>#${ticket.id}</td>
                        <td>${ticket.subject}</td>
                        <td>${ticket.user}</td>
                        <td>${ticket.priority}</td>
                        <td><span class="status ${ticket.status}">${ticket.status}</span></td>
                        <td>${ticket.created}</td>
                        <td class="action-buttons">
                            <button class="btn btn-primary view-ticket-full" data-id="${ticket.id}">View</button>
                            <button class="btn btn-danger">Close</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // Add event listeners to view buttons
                document.querySelectorAll('.view-ticket-full').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const ticketId = this.getAttribute('data-id');
                        const ticket = sampleData.tickets.find(t => t.id == ticketId);
                        document.getElementById('ticketDetails').innerHTML = `
                            <p><strong>Ticket ID:</strong> #${ticket.id}</p>
                            <p><strong>Subject:</strong> ${ticket.subject}</p>
                            <p><strong>User:</strong> ${ticket.user}</p>
                            <p><strong>Priority:</strong> ${ticket.priority}</p>
                            <p><strong>Status:</strong> ${ticket.status}</p>
                            <p><strong>Created:</strong> ${ticket.created}</p>
                            <p><strong>Description:</strong> Aviation data API connection issue reported by customer. Need assistance with real-time flight tracking integration.</p>
                        `;
                        document.getElementById('viewTicketModal').style.display = 'flex';
                    });
                });
            }
            
            function populateMessageTable() {
                const tableBody = document.getElementById('messageTable');
                tableBody.innerHTML = '';
                
                sampleData.messages.forEach(message => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${message.id}</td>
                        <td>${message.name}</td>
                        <td>${message.email}</td>
                        <td>${message.subject}</td>
                        <td>${message.date}</td>
                        <td><span class="status ${message.status}">${message.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary view-message" data-id="${message.id}">View</button>
                            <button class="btn btn-danger">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // Add event listeners to view buttons
                document.querySelectorAll('.view-message').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const messageId = this.getAttribute('data-id');
                        const message = sampleData.messages.find(m => m.id == messageId);
                        document.getElementById('messageDetails').innerHTML = `
                            <p><strong>From:</strong> ${message.name} (${message.email})</p>
                            <p><strong>Subject:</strong> ${message.subject}</p>
                            <p><strong>Date:</strong> ${message.date}</p>
                            <p><strong>Message:</strong> Interested in partnering with AviationData for our aviation analytics platform. We need real-time flight data and historical trends for our enterprise clients.</p>
                        `;
                        document.getElementById('viewMessageModal').style.display = 'flex';
                    });
                });
            }
            
            function populateReportTable() {
                const tableBody = document.getElementById('reportTable');
                tableBody.innerHTML = '';
                
                sampleData.reports.forEach(report => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${report.date}</td>
                        <td>${report.newUsers}</td>
                        <td>${report.apiCalls.toLocaleString()}</td>
                        <td>$${report.revenue}</td>
                        <td>${report.dataDownloads.toLocaleString()}</td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function filterTable(tableId, searchText) {
                const table = document.getElementById(tableId);
                const rows = table.getElementsByTagName('tr');
                
                for (let i = 0; i < rows.length; i++) {
                    const row = rows[i];
                    const text = row.textContent || row.innerText;
                    
                    if (text.toLowerCase().indexOf(searchText.toLowerCase()) > -1) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                }
            }
            
            // Chart creation functions
            function createRevenueChart() {
                const ctx = document.getElementById('revenueChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
                        datasets: [{
                            label: 'Revenue',
                            data: [12500, 14200, 13800, 16100, 15800, 17200, 16800, 17900, 18500, 19200],
                            borderColor: '#1565c0',
                            backgroundColor: 'rgba(21, 101, 192, 0.1)',
                            borderWidth: 2,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                });
            }
            
            function createFinancialChart() {
                const ctx = document.getElementById('financialChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
                        datasets: [
                            {
                                label: 'Revenue',
                                data: [12500, 14200, 13800, 16100, 15800, 17200, 16800, 17900, 18500, 19200],
                                backgroundColor: 'rgba(46, 204, 113, 0.7)'
                            },
                            {
                                label: 'Expenses',
                                data: [8200, 9100, 8700, 10200, 9800, 10500, 10100, 10800, 11200, 11500],
                                backgroundColor: 'rgba(231, 76, 60, 0.7)'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                });
            }
            
            function createSubscriberChart() {
                const ctx = document.getElementById('subscriberChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
                        datasets: [{
                            label: 'Subscribers',
                            data: [1200, 1900, 1500, 2200, 1800, 2500, 2200, 2800, 3000, 3200],
                            borderColor: '#1565c0',
                            backgroundColor: 'rgba(21, 101, 192, 0.1)',
                            borderWidth: 2,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
            
            function createSEOChart() {
                const ctx = document.getElementById('seoChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
                        datasets: [{
                            label: 'Organic Traffic',
                            data: [4500, 5200, 4800, 6100, 5800, 7200, 6800, 7900, 8500, 9200],
                            backgroundColor: 'rgba(46, 204, 113, 0.7)',
                            borderColor: 'rgba(46, 204, 113, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
            
            function createReportChart() {
                const ctx = document.getElementById('reportChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: sampleData.reports.map(r => r.date),
                        datasets: [
                            {
                                label: 'New Users',
                                data: sampleData.reports.map(r => r.newUsers),
                                backgroundColor: 'rgba(52, 152, 219, 0.7)'
                            },
                            {
                                label: 'API Calls (in 1000s)',
                                data: sampleData.reports.map(r => r.apiCalls / 1000),
                                backgroundColor: 'rgba(46, 204, 113, 0.7)'
                            },
                            {
                                label: 'Revenue (in $1000s)',
                                data: sampleData.reports.map(r => r.revenue / 1000),
                                backgroundColor: 'rgba(155, 89, 182, 0.7)'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>
Back to Directory=ceiIENDB`