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/huntbooking.org/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>Huntbooking 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>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: #2E7D32; /* Green for nature/conservation theme */
            --secondary: #D4A017; /* Gold/brown for hunting theme */
            --accent: #8B4513; /* Saddle brown */
            --light: #F5F8F2; /* Light greenish */
            --dark: #1B5E20; /* Dark green */
            --success: #388E3C; /* Green */
            --warning: #F57C00; /* Orange */
            --danger: #C62828; /* Red */
            --gray: #696969; /* Dim gray */
            --purple: #5D4037; /* Brown */
            --teal: #00695C; /* Teal green */
            --cyan: #0288D1; /* Blue */
            --white: #ffffff;
            --black: #000000;
            --gray-light: #F5F5F5;
            --gray-dark: #4A4A4A;
            --off-white: #FAF9F6;
            --blue-light: #2E7D32; /* Green */
            --blue-dark: #1B5E20; /* Dark green */
            --gradient-1: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #4CAF50 100%);
            --gradient-2: linear-gradient(135deg, #2E7D32 0%, #D4A017 50%, #8B4513 100%);
            --gradient-3: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #66BB6A 100%);
        }
        
        body {
            background-color: #f0f5f0;
            color: #333;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%232E7D32" fill-opacity="0.03" d="M50,0 Q75,25 100,50 L100,100 L0,100 L0,50 Q25,25 50,0 Z"/></svg>');
        }
        
        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: var(--blue-light);
            d="M40,40 Q100,20 160,40 L160,160 Q100,180 40,160 Z"/><circle cx="100" cy="100" r="30" fill="%232E7D32" fill-opacity="0.1"/></svg>');
        }
        
        .login-card {
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(10px);
            padding: 2.5rem;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(46, 125, 50, 0.3);
            width: 100%;
            max-width: 420px;
            transition: all 0.4s ease;
            border: 1px solid rgba(212, 160, 23, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .login-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--blue-light);
        }
        
        .login-logo {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .login-logo h1 {
            color: var(--dark);
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
            background: var(--blue-light);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }
        
        .login-logo p {
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--dark);
            font-size: 0.95rem;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 14px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
            background: #f8f9fa;
        }
        
        .form-group input:focus, .form-group select:focus {
            border-color: var(--blue-light);
            background: white;
            box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
            outline: none;
        }
        
        .form-group textarea {
            width: 100%;
            padding: 14px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
            background: #f8f9fa;
            resize: vertical;
            min-height: 80px;
        }
        
        .login-btn {
            width: 100%;
            padding: 16px;
            background: var(--blue-light);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 0.5rem;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
        }
        
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
        }
        
        .register-btn {
            width: 100%;
            padding: 16px;
            background: var(--blue-light);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 0.5rem;
            box-shadow: 0 4px 15px rgba(27, 94, 32, 0.3);
        }
        
        .register-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(27, 94, 32, 0.4);
        }
        
        .form-footer {
            text-align: center;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid #eee;
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .form-footer a {
            color: var(--secondary);
            text-decoration: none;
            cursor: pointer;
            font-weight: 600;
        }
        
        .form-footer a:hover {
            text-decoration: underline;
        }
        
        .admin-container {
            display: none;
            height: 100vh;
        }
        
        .sidebar {
            width: 260px;
            background: linear-gradient(180deg, var(--dark) 0%, #2E7D32 100%);
            color: white;
            height: 100%;
            position: fixed;
            overflow-y: auto;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            padding: 1.8rem 1.5rem;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .logo img {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            margin-bottom: 10px;
            object-fit: contain;
            background: white;
            padding: 5px;
        }
        
        .logo h1 {
            font-size: 1.6rem;
            letter-spacing: 1px;
            background: linear-gradient(45deg, #fff 0%, #C8E6C9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }
        
        .logo p {
            font-size: 0.85rem;
            opacity: 0.8;
            margin-top: 0.3rem;
        }
        
        .nav-links {
            padding: 1.5rem 0;
        }
        
        .nav-links li {
            list-style: none;
            margin: 0.2rem 1rem;
        }
        
        .nav-links a {
            display: flex;
            align-items: center;
            padding: 0.9rem 1.2rem;
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            transition: all 0.3s;
            border-radius: 8px;
            margin: 0.2rem 0;
        }
        
        .nav-links a:hover, .nav-links a.active {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            transform: translateX(5px);
        }
        
        .nav-links i {
            margin-right: 12px;
            width: 20px;
            text-align: center;
            font-size: 1.1rem;
        }
        
        .main-content {
            margin-left: 260px;
            padding: 1.5rem;
            width: calc(100% - 260px);
            background: #f0f5f0;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 1.5rem;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.05);
            margin-bottom: 1.5rem;
            border-left: 4px solid var(--blue-light);
        }
        
        .header-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo-img {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            object-fit: contain;
            background: white;
            padding: 5px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
        }
        
        .user-info img {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            margin-right: 12px;
            border: 3px solid var(--light);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: white;
            padding: 1.8rem;
            border-radius: 16px;
            box-shadow: 0 8px 25px rgba(46, 125, 50, 0.08);
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.4s;
            border: 1px solid rgba(46, 125, 50, 0.05);
            position: relative;
            overflow: hidden;
        }
        
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-2);
        }
        
        .stat-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(46, 125, 50, 0.15);
        }
        
        .stat-icon {
            width: 70px;
            height: 70px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1.2rem;
            font-size: 1.8rem;
            color: white;
            background: var(--gradient-3);
            box-shadow: 0 6px 15px rgba(46, 125, 50, 0.3);
        }
        
        .stat-info h3 {
            font-size: 2rem;
            margin-bottom: 0.3rem;
            color: var(--dark);
        }
        
        .stat-info p {
            color: var(--gray);
            font-size: 0.95rem;
            font-weight: 500;
        }
        
        .dashboard-content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 1.5rem;
        }
        
        .card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 25px rgba(46, 125, 50, 0.08);
            padding: 1.8rem;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(46, 125, 50, 0.05);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .card-header h3 {
            color: var(--dark);
            font-size: 1.3rem;
            font-weight: 600;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        table th, table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }
        
        table th {
            font-weight: 600;
            color: var(--dark);
            background: #f8f9fa;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        table tr:hover {
            background: #f8f9fa;
        }
        
        .status {
            padding: 0.4rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-block;
        }
        
        .status.active {
            background: rgba(56, 142, 60, 0.15);
            color: var(--success);
        }
        
        .status.pending {
            background: rgba(245, 124, 0, 0.15);
            color: var(--warning);
        }
        
        .status.closed {
            background: rgba(105, 105, 105, 0.15);
            color: var(--gray);
        }
        
        .status.expired {
            background: rgba(198, 40, 40, 0.15);
            color: var(--danger);
        }
        
        .status.processing {
            background: rgba(46, 125, 50, 0.15);
            color: var(--blue-light);
        }
        
        .status.completed {
            background: rgba(56, 142, 60, 0.15);
            color: var(--success);
        }
        
        .status.cancelled {
            background: rgba(198, 40, 40, 0.15);
            color: var(--danger);
        }
        
        .status.inactive {
            background: rgba(105, 105, 105, 0.15);
            color: var(--gray);
        }
        
        .status.read {
            background: rgba(46, 125, 50, 0.15);
            color: var(--blue-light);
        }
        
        .status.new {
            background: rgba(245, 124, 0, 0.15);
            color: var(--warning);
        }
        
        .status.replied {
            background: rgba(56, 142, 60, 0.15);
            color: var(--success);
        }
        
        .status.paid {
            background: rgba(56, 142, 60, 0.15);
            color: var(--success);
        }
        
        .status.unpaid {
            background: rgba(245, 124, 0, 0.15);
            color: var(--warning);
        }
        
        .status.open {
            background: rgba(46, 125, 50, 0.15);
            color: var(--blue-light);
        }
        
        .btn {
            padding: 0.7rem 1.5rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.95rem;
        }
        
        .btn-primary {
            background: var(--gradient-3);
            color: white;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(46, 125, 50, 0.4);
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #C62828 0%, #B71C1C 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(198, 40, 40, 0.3);
        }
        
        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(198, 40, 40, 0.4);
        }
        
        .btn-success {
            background: var(--gradient-2);
            color: white;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
        }
        
        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(46, 125, 50, 0.4);
        }
        
        .btn-warning {
            background: linear-gradient(135deg, #F57C00 0%, #E65100 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
        }
        
        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(245, 124, 0, 0.4);
        }
        
        .btn-purple {
            background: linear-gradient(135deg, #5D4037 0%, #3E2723 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
        }
        
        .btn-purple:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(93, 64, 55, 0.4);
        }
        
        .btn-small {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
            border-radius: 8px;
        }
        
        .recent-activity li {
            padding: 1rem 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        
        .recent-activity li:last-child {
            border-bottom: none;
        }
        
        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: white;
            background: var(--gradient-3);
            box-shadow: 0 4px 8px rgba(46, 125, 50, 0.2);
        }
        
        .footer {
            text-align: center;
            padding: 1.5rem;
            color: var(--gray);
            font-size: 0.9rem;
            margin-top: 2rem;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.05);
        }
        
        .section {
            display: none;
        }
        
        .section.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .search-bar {
            display: flex;
            margin-bottom: 1.5rem;
        }
        
        .search-bar input {
            flex: 1;
            padding: 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 10px 0 0 10px;
            font-size: 1rem;
            background: #f8f9fa;
        }
        
        .search-bar button {
            padding: 0 1.8rem;
            background: var(--gradient-3);
            color: white;
            border: none;
            border-radius: 0 10px 10px 0;
            cursor: pointer;
            font-weight: 600;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            padding: 2.5rem;
            border-radius: 20px;
            width: 90%;
            max-width: 650px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 60px rgba(46, 125, 50, 0.3);
            animation: modalFadeIn 0.4s ease;
            border: 1px solid rgba(46, 125, 50, 0.1);
        }
        
        @keyframes modalFadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.8rem;
            padding-bottom: 1.2rem;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 1.8rem;
            cursor: pointer;
            color: var(--gray);
            transition: all 0.3s;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .close-modal:hover {
            background: #f5f5f5;
            color: var(--danger);
        }
        
        .chart-container {
            height: 320px;
            margin-bottom: 2rem;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        
        .form-row {
            display: flex;
            gap: 1.2rem;
            margin-bottom: 1.2rem;
        }
        
        .form-row .form-group {
            flex: 1;
            margin-bottom: 0;
        }
        
        .form-group {
            margin-bottom: 1.2rem;
        }
        
        .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: 2px solid #f0f0f0;
            margin-bottom: 1.8rem;
            gap: 0.5rem;
        }
        
        .tab {
            padding: 0.9rem 1.8rem;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            font-weight: 500;
            color: var(--gray);
            transition: all 0.3s;
            border-radius: 8px 8px 0 0;
        }
        
        .tab.active {
            border-bottom: 3px solid var(--blue-light);
            color: var(--blue-light);
            font-weight: 600;
            background: rgba(46, 125, 50, 0.05);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .languages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
            margin-top: 0.5rem;
        }
        
        .language-checkbox {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: var(--off-white);
            border-radius: 10px;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .language-checkbox:hover {
            background: #f0f0f0;
            border-color: #e0e0e0;
        }
        
        .language-checkbox input[type="checkbox"] {
            width: auto;
            transform: scale(1.2);
        }
        
        .language-checkbox label {
            margin-bottom: 0;
            cursor: pointer;
            flex: 1;
            font-weight: 500;
        }
        
        .ai-chat-container {
            height: 500px;
            display: flex;
            flex-direction: column;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .ai-chat-messages {
            flex: 1;
            padding: 1.5rem;
            overflow-y: auto;
            background: #f8f9fa;
        }
        
        .ai-chat-input-container {
            display: flex;
            padding: 1.2rem;
            border-top: 1px solid #e0e0e0;
            background: white;
            gap: 10px;
        }
        
        .ai-chat-input {
            flex: 1;
            padding: 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1rem;
            background: #f8f9fa;
        }
        
        .chat-message {
            margin-bottom: 1.2rem;
            padding: 1rem 1.2rem;
            border-radius: 12px;
            max-width: 80%;
            word-wrap: break-word;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        .user-message {
            background: var(--gradient-3);
            color: white;
            margin-left: auto;
        }
        
        .bot-message {
            background: white;
            color: #333;
            border: 1px solid #e0e0e0;
        }
        
        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--blue-light);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .password-strength {
            height: 6px;
            margin-top: 8px;
            border-radius: 3px;
            transition: all 0.3s;
            background: #e0e0e0;
        }
        
        .strength-weak { background: #C62828; width: 25%; }
        .strength-medium { background: #F57C00; width: 50%; }
        .strength-strong { background: #388E3C; width: 75%; }
        .strength-very-strong { background: #1B5E20; width: 100%; }
        
        .chart-card {
            background: white;
            padding: 1.8rem;
            border-radius: 16px;
            box-shadow: 0 8px 25px rgba(46, 125, 50, 0.08);
            margin-bottom: 1.5rem;
        }
        
        .quick-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .quick-stat {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.05);
            transition: all 0.3s;
        }
        
        .quick-stat:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(46, 125, 50, 0.1);
        }
        
        .quick-stat h4 {
            font-size: 2.2rem;
            color: var(--blue-light);
            margin-bottom: 0.5rem;
        }
        
        .quick-stat p {
            color: var(--gray);
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .dashboard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .dashboard-widget {
            background: white;
            border-radius: 16px;
            padding: 1.8rem;
            box-shadow: 0 8px 25px rgba(46, 125, 50, 0.08);
        }
        
        .widget-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #f0f0f0;
        }
        
        @media (max-width: 1200px) {
            .dashboard-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        @media (max-width: 992px) {
            .sidebar {
                width: 80px;
            }
            
            .sidebar .logo h1, .sidebar .logo p, .sidebar .nav-links span {
                display: none;
            }
            
            .main-content {
                margin-left: 80px;
                width: calc(100% - 80px);
            }
            
            .nav-links a {
                justify-content: center;
                padding: 1rem;
            }
            
            .nav-links i {
                margin-right: 0;
                font-size: 1.3rem;
            }
            
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .dashboard-content {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .languages-grid {
                grid-template-columns: 1fr;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .action-buttons .btn {
                width: 100%;
                margin-bottom: 0.8rem;
            }
            
            .quick-stats {
                grid-template-columns: 1fr;
            }
            
            .dashboard-stats {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .login-card {
                padding: 2rem 1.5rem;
            }
            
            .main-content {
                padding: 1rem;
            }
            
            .modal-content {
                padding: 2rem 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- Login Section -->
    <div class="login-container" id="loginSection">
        <!-- Login Form -->
        <div class="login-card" id="loginForm">
            <div class="login-logo">
                <img src="huntbooking.png" alt="Huntfree Logo" style="width: 120px; height: auto; margin-bottom: 1rem;">
                <h1>Huntbooking</h1>
                <p>Join protect hunting for future generations</p>
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" placeholder="Enter your email" value="admin@huntfree.org">
            </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">
                <i class="fas fa-sign-in-alt"></i> Login to Dashboard
            </button>
            <button class="register-btn" id="switchToRegister">
                <i class="fas fa-user-plus"></i> Register New User
            </button>
            <div class="form-footer">
                <p>Don't have an account? <a id="switchToRegister">Register here</a></p>
            </div>
        </div>
        
        <!-- Registration Form -->
        <div class="login-card" id="registerForm" style="display: none;">
            <div class="login-logo">
                <img src="huntbooking.png" alt="Huntfree Logo" style="width: 100px; height: auto; margin-bottom: 1rem;">
                <h1>Huntfree</h1>
                <p>Create New Admin Account</p>
            </div>
            <div class="form-group">
                <label for="regName">Full Name *</label>
                <input type="text" id="regName" placeholder="Enter your full name" required>
            </div>
            <div class="form-group">
                <label for="regEmail">Email Address *</label>
                <input type="email" id="regEmail" placeholder="Enter your email" required>
            </div>
            <div class="form-group">
                <label for="regPassword">Password *</label>
                <input type="password" id="regPassword" placeholder="Create a password" required>
                <div id="passwordStrength" class="password-strength"></div>
            </div>
            <div class="form-group">
                <label for="regConfirmPassword">Confirm Password *</label>
                <input type="password" id="regConfirmPassword" placeholder="Confirm your password" required>
            </div>
            <div class="form-group">
                <label for="regPhone">Phone Number</label>
                <input type="tel" id="regPhone" placeholder="Enter your phone number">
            </div>
            <div class="form-group">
                <label for="regAddress">Address</label>
                <textarea id="regAddress" rows="2" placeholder="Enter your address"></textarea>
            </div>
            <div class="form-group">
                <label for="regRole">User Role *</label>
                <select id="regRole" required>
                    <option value="">Select Role</option>
                    <option value="hunter">Hunter</option>
                    <option value="conservationist">Conservationist</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <button class="login-btn" id="registerBtn">
                <i class="fas fa-user-plus"></i> 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">
        <div class="sidebar">
            <div class="logo">
                <img src="huntbooking.png" alt="Huntfree Logo">
                <h1>Huntbooking</h1>
                <p>Protect Hunting for Future Generations</p>
            </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="products"><i class="fas fa-tree"></i> <span>Hunting Packages</span></a></li>
                <li><a href="#" class="nav-link" data-section="customers"><i class="fas fa-users"></i> <span>Hunters</span></a></li>
                <li><a href="#" class="nav-link" data-section="orders"><i class="fas fa-shopping-cart"></i> <span>Bookings</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>Memberships</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="ai-chat"><i class="fas fa-robot"></i> <span>AI Chat</span></a></li>
                <li><a href="#" class="nav-link" data-section="subscriber"><i class="fas fa-user-check"></i> <span>Newsletter</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>Conservation Reports</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>
        
        <div class="main-content">
            <header class="header">
                <div class="header-container">
                    <img src="huntbooking.png" alt="Huntfree Logo" class="logo-img">
                    <div>
                        <h2 id="pageTitle">Dashboard</h2>
                        <p>Huntbooking - Protect Hunting for Future Generations</p>
                    </div>
                </div>
                <div class="user-info">
                    <img src="https://ui-avatars.com/api/?name=Admin&background=2E7D32&color=fff" alt="Admin">
                    <div>
                        <h4 id="adminName">Admin</h4>
                        <p id="adminEmail">admin@huntfree.org</p>
                    </div>
                </div>
            </header>
            
            <!-- Dashboard Section -->
            <div id="dashboard" class="section active">
                <div class="dashboard-stats">
                    <div class="stat-card" data-section="products">
                        <div class="stat-icon" style="background: var(--blue-light);">
                            <i class="fas fa-tree"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="totalProducts">0</h3>
                            <p>Hunting Packages</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="customers">
                        <div class="stat-icon" style="background: var(--success);">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="totalCustomers">0</h3>
                            <p>Registered Hunters</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="orders">
                        <div class="stat-icon" style="background: var(--warning);">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="totalOrders">0</h3>
                            <p>Total Bookings</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="hr-payroll">
                        <div class="stat-icon" style="background: var(--purple);">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="totalEmployees">0</h3>
                            <p>Conservation Staff</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="subscription">
                        <div class="stat-icon" style="background: var(--teal);">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="totalSubscriptions">0</h3>
                            <p>Active Memberships</p>
                        </div>
                    </div>
                    <div class="stat-card" data-section="user-data">
                        <div class="stat-icon" style="background: var(--cyan);">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="totalUsers">0</h3>
                            <p>Total Users</p>
                        </div>
                    </div>
                </div>
                
                <div class="dashboard-content">
                    <div class="left-column">
                        <div class="card">
                            <div class="card-header">
                                <h3>Recent Bookings</h3>
                                <button class="btn btn-primary" id="viewAllOrders">View All</button>
                            </div>
                            <table>
                                <thead>
                                    <tr>
                                        <th>Booking ID</th>
                                        <th>Hunter</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="recentOrdersTable">
                                    <tr><td colspan="5" style="text-align: center;">Loading...</td></tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <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>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="recentTicketsTable">
                                    <tr><td colspan="4" style="text-align: center;">Loading...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="right-column">
                        <div class="card">
                            <div class="card-header">
                                <h3>Conservation Revenue Overview</h3>
                            </div>
                            <div class="chart-container">
                                <canvas id="revenueChart"></canvas>
                            </div>
                        </div>
                        
                        <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="addProductBtn">Add Package</button>
                                <button class="btn btn-primary" id="addCustomerBtn">Add Hunter</button>
                                <button class="btn btn-primary" id="createOrderBtn">Create Booking</button>
                                <button class="btn btn-primary" id="generateReportBtn">Generate Report</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Products Section -->
            <div id="products" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Hunting Packages Management</h3>
                        <div class="action-buttons">
                            <button class="btn btn-primary" id="addProductBtn2">Add Package</button>
                            <button class="btn btn-success" id="exportProductsBtn">Export</button>
                        </div>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="productSearch" placeholder="Search packages...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <div class="table-responsive">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Package Name</th>
                                    <th>Category</th>
                                    <th>Price</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="productTable">
                                <tr><td colspan="6" style="text-align: center;">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- Customers Section -->
            <div id="customers" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Hunter Management</h3>
                        <button class="btn btn-primary" id="addCustomerBtn2">Add Hunter</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="customerSearch" placeholder="Search hunters...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="customerTable">
                            <tr><td colspan="6" style="text-align: center;">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Orders Section -->
            <div id="orders" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Booking Management</h3>
                        <button class="btn btn-primary" id="createOrderBtn2">Create Booking</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="orderSearch" placeholder="Search bookings...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Booking ID</th>
                                <th>Hunter</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="orderTable">
                            <tr><td colspan="6" style="text-align: center;">Loading...</td></tr>
                        </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>
                    
                    <div class="tab-content active" id="stripe-tab">
                        <h4>Stripe Payment Gateway</h4>
                        <div class="form-group">
                            <label for="stripePublishableKey">Publishable Key</label>
                            <input type="text" id="stripePublishableKey" placeholder="Enter Stripe publishable key">
                        </div>
                        <div class="form-group">
                            <label for="stripeSecretKey">Secret Key</label>
                            <input type="password" id="stripeSecretKey" placeholder="Enter Stripe secret key">
                        </div>
                        <button class="btn btn-primary" id="saveStripeSettings">Save Settings</button>
                    </div>
                    
                    <div class="tab-content" id="paypal-tab">
                        <h4>PayPal Payment Gateway</h4>
                        <div class="form-group">
                            <label for="paypalClientId">Client ID</label>
                            <input type="text" id="paypalClientId" placeholder="Enter PayPal Client ID">
                        </div>
                        <div class="form-group">
                            <label for="paypalSecret">Secret Key</label>
                            <input type="password" id="paypalSecret" placeholder="Enter PayPal Secret Key">
                        </div>
                        <button class="btn btn-primary" id="savePaypalSettings">Save Settings</button>
                    </div>
                </div>
            </div>
            
            <!-- HR & Payroll Section -->
            <div id="hr-payroll" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Conservation Staff Management</h3>
                        <button class="btn btn-primary" id="addEmployeeBtn">Add Staff</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="employeeSearch" placeholder="Search staff...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Department</th>
                                <th>Designation</th>
                                <th>Salary</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="employeeTable">
                            <tr><td colspan="7" style="text-align: center;">Loading...</td></tr>
                        </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>ID</th>
                                <th>Employee</th>
                                <th>Month</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="payrollTable">
                            <tr><td colspan="6" style="text-align: center;">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Accounts Section -->
            <div id="accounts" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Conservation 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>Type</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody id="financialTable">
                            <tr><td colspan="4" style="text-align: center;">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Subscription Section -->
            <div id="subscription" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Membership Management</h3>
                        <button class="btn btn-primary" id="addSubscriptionBtn">Add Membership</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="subscriptionSearch" placeholder="Search memberships...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Member</th>
                                <th>Plan</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Expiry Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="subscriptionTable">
                            <tr><td colspan="7" style="text-align: center;">Loading...</td></tr>
                        </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="addUserBtn">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>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="userTable">
                            <tr><td colspan="6" style="text-align: center;">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- AI Chat Section -->
            <div id="ai-chat" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Huntbooking Conservation AI Assistant</h3>
                        <button class="btn btn-danger" id="clearChatBtn">Clear Chat</button>
                    </div>
                    <div class="ai-chat-container">
                        <div class="ai-chat-messages" id="aiChatMessages">
                            <div class="chat-message bot-message">
                                Hello! I'm your Huntfree Conservation AI assistant. How can I help you with sustainable hunting practices, conservation efforts, and wildlife management today?
                            </div>
                        </div>
                        <div class="ai-chat-input-container">
                            <input type="text" class="ai-chat-input" id="aiChatInput" placeholder="Ask about sustainable hunting, conservation, or wildlife management...">
                            <button class="btn btn-primary" id="sendChatBtn">Send</button>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>Chat History</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Message</th>
                                <th>Bot Reply</th>
                                <th>Time</th>
                            </tr>
                        </thead>
                        <tbody id="chatHistoryTable">
                            <tr><td colspan="4" style="text-align: center;">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Subscriber Section -->
            <div id="subscriber" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Newsletter Subscribers</h3>
                        <button class="btn btn-primary" id="addSubscriberBtn">Add Subscriber</button>
                    </div>
                    <div class="search-bar">
                        <input type="text" id="subscriberSearch" placeholder="Search subscribers...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Email</th>
                                <th>Status</th>
                                <th>Subscribed Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="subscriberTable">
                            <tr><td colspan="5" style="text-align: center;">Loading...</td></tr>
                        </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">
                            <tr><td colspan="7" style="text-align: center;">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Contact Messages Section -->
            <div id="contact-messages" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Contact Messages</h3>
                        <button class="btn btn-primary" id="replyMessageBtn">Reply to Selected</button>
                    </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><input type="checkbox" id="selectAllMessages"></th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Subject</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="messageTable">
                            <tr><td colspan="7" style="text-align: center;">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- SEO Section -->
            <div id="seo" class="section">
                <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="Huntfree - Sustainable Hunting Conservation">
                            </div>
                            <div class="form-group">
                                <label for="metaDescription">Meta Description</label>
                                <input type="text" id="metaDescription" value="Huntfree promotes sustainable hunting practices and conservation efforts for future generations">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="keywords">Keywords</label>
                                <input type="text" id="keywords" value="sustainable hunting, conservation, wildlife management, hunting packages, hunting education, wildlife protection">
                            </div>
                            <div class="form-group">
                                <label for="googleAnalytics">Google Analytics ID</label>
                                <input type="text" id="googleAnalytics" value="UA-XXXXXX-X">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Save SEO Settings</button>
                    </form>
                </div>
            </div>
            
            <!-- Report Section -->
            <div id="report" class="section">
                <div class="card">
                    <div class="card-header">
                        <h3>Conservation Reports</h3>
                        <div class="action-buttons">
                            <button class="btn btn-primary" id="generateSalesReport">Revenue Report</button>
                            <button class="btn btn-primary" id="generateUserReport">Member 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>Conservation Data</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Revenue</th>
                                <th>New Members</th>
                                <th>Bookings</th>
                                <th>Wildlife Sightings</th>
                            </tr>
                        </thead>
                        <tbody id="reportTable">
                            <tr><td colspan="5" style="text-align: center;">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Language 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="es">Spanish</option>
                            <option value="fr">French</option>
                            <option value="de">German</option>
                            <option value="it">Italian</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label>Available Languages</label>
                        <div class="languages-grid" id="availableLanguages">
                            <div class="language-checkbox">
                                <input type="checkbox" id="lang-en" checked>
                                <label for="lang-en">English</label>
                            </div>
                            <div class="language-checkbox">
                                <input type="checkbox" id="lang-es" checked>
                                <label for="lang-es">Spanish</label>
                            </div>
                            <div class="language-checkbox">
                                <input type="checkbox" id="lang-fr">
                                <label for="lang-fr">French</label>
                            </div>
                            <div class="language-checkbox">
                                <input type="checkbox" id="lang-de">
                                <label for="lang-de">German</label>
                            </div>
                            <div class="language-checkbox">
                                <input type="checkbox" id="lang-it">
                                <label for="lang-it">Italian</label>
                            </div>
                        </div>
                    </div>
                    
                    <button class="btn btn-primary" id="saveLanguageSettings">Save Language Settings</button>
                </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="admin@huntfree.org">
                    </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" selected>TLS</option>
                            <option value="ssl">SSL</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="fromEmail">From Email</label>
                        <input type="email" id="fromEmail" value="noreply@huntfree.org">
                    </div>
                    
                    <div class="form-group">
                        <label for="fromName">From Name</label>
                        <input type="text" id="fromName" value="Huntfree Conservation">
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn btn-primary" id="saveSmtpSettings">Save SMTP Settings</button>
                        <button class="btn btn-success" id="testSmtpBtn">Test Configuration</button>
                    </div>
                </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="Huntfree">
                        </div>
                        <div class="form-group">
                            <label for="adminEmail">Admin Email</label>
                            <input type="email" id="adminEmail" value="admin@huntfree.org">
                        </div>
                        <div class="form-group">
                            <label for="timezone">Timezone</label>
                            <select id="timezone">
                                <option value="UTC" selected>UTC</option>
                                <option value="UTC-5">EST (UTC-5)</option>
                                <option value="UTC+0">GMT (UTC+0)</option>
                                <option value="UTC+1">CET (UTC+1)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="industryFocus">Conservation Focus</label>
                            <input type="text" id="industryFocus" value="Sustainable Hunting, Wildlife Conservation, Habitat Protection, Environmental Education">
                        </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>Huntfree Conservation Admin Panel &copy; 2023 | All Rights Reserved</p>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <div id="addProductModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add New Hunting Package</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="addProductForm">
                <div class="form-group">
                    <label for="productName">Package Name</label>
                    <input type="text" id="productName" required>
                </div>
                <div class="form-group">
                    <label for="productCategory">Category</label>
                    <select id="productCategory" required>
                        <option value="">Select Category</option>
                        <option value="Big Game Hunting">Big Game Hunting</option>
                        <option value="Bird Hunting">Bird Hunting</option>
                        <option value="Conservation Tours">Conservation Tours</option>
                        <option value="Training Programs">Training Programs</option>
                        <option value="Guided Hunts">Guided Hunts</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="productType">Type</label>
                    <select id="productType" required>
                        <option value="">Select Type</option>
                        <option value="Basic Package">Basic Package</option>
                        <option value="Premium Package">Premium Package</option>
                        <option value="VIP Experience">VIP Experience</option>
                        <option value="Family Package">Family Package</option>
                        <option value="Corporate Retreat">Corporate Retreat</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="productPrice">Price ($)</label>
                    <input type="number" id="productPrice" step="0.01" required>
                </div>
                <div class="form-group">
                    <label for="productDescription">Description</label>
                    <textarea id="productDescription" rows="3"></textarea>
                </div>
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary">Add Package</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <div id="addCustomerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add New Hunter</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="customerPhone">Phone</label>
                    <input type="tel" id="customerPhone">
                </div>
                <div class="form-group">
                    <label for="customerCompany">Organization</label>
                    <input type="text" id="customerCompany">
                </div>
                <div class="form-group">
                    <label for="customerIndustry">Hunter Type</label>
                    <select id="customerIndustry">
                        <option value="">Select Type</option>
                        <option value="Recreational Hunter">Recreational Hunter</option>
                        <option value="Professional Guide">Professional Guide</option>
                        <option value="Conservationist">Conservationist</option>
                        <option value="First-time Hunter">First-time Hunter</option>
                        <option value="Family Group">Family Group</option>
                        <option value="Corporate Client">Corporate Client</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="customerAddress">Address</label>
                    <textarea id="customerAddress" rows="2"></textarea>
                </div>
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary">Add Hunter</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <div id="addOrderModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Create New Booking</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="addOrderForm">
                <div class="form-group">
                    <label for="orderCustomer">Hunter</label>
                    <select id="orderCustomer" required>
                        <option value="">Select Hunter</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="orderProduct">Package</label>
                    <select id="orderProduct" required>
                        <option value="">Select Package</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="orderQuantity">Number of People</label>
                    <input type="number" id="orderQuantity" required min="1">
                </div>
                <div class="form-group">
                    <label for="orderAmount">Total Amount ($)</label>
                    <input type="number" id="orderAmount" step="0.01" required>
                </div>
                <div class="form-group">
                    <label for="orderStatus">Status</label>
                    <select id="orderStatus" required>
                        <option value="pending">Pending</option>
                        <option value="confirmed">Confirmed</option>
                        <option value="completed">Completed</option>
                        <option value="cancelled">Cancelled</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="orderNotes">Notes</label>
                    <textarea id="orderNotes" rows="2"></textarea>
                </div>
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary">Create Booking</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <div id="addEmployeeModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add New Conservation Staff</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="addEmployeeForm">
                <div class="form-group">
                    <label for="employeeName">Full Name</label>
                    <input type="text" id="employeeName" required>
                </div>
                <div class="form-group">
                    <label for="employeeEmail">Email</label>
                    <input type="email" id="employeeEmail" required>
                </div>
                <div class="form-group">
                    <label for="employeeDepartment">Department</label>
                    <select id="employeeDepartment" required>
                        <option value="">Select Department</option>
                        <option value="Wildlife Management">Wildlife Management</option>
                        <option value="Conservation Research">Conservation Research</option>
                        <option value="Guiding Services">Guiding Services</option>
                        <option value="Education">Education</option>
                        <option value="Operations">Operations</option>
                        <option value="Finance">Finance</option>
                        <option value="IT">IT</option>
                        <option value="Customer Support">Customer Support</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="employeePosition">Position</label>
                    <input type="text" id="employeePosition" required>
                </div>
                <div class="form-group">
                    <label for="employeeSalary">Salary ($)</label>
                    <input type="number" id="employeeSalary" step="0.01" required>
                </div>
                <div class="form-group">
                    <label for="employeePhone">Phone</label>
                    <input type="tel" id="employeePhone">
                </div>
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary">Add Staff</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <div id="addSubscriptionModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add New Membership</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="addSubscriptionForm">
                <div class="form-group">
                    <label for="subscriptionUser">Member</label>
                    <select id="subscriptionUser" required>
                        <option value="">Select Member</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="subscriptionPlan">Membership Plan</label>
                    <select id="subscriptionPlan" required>
                        <option value="">Select Plan</option>
                        <option value="Basic">Basic</option>
                        <option value="Premium">Premium</option>
                        <option value="Gold">Gold</option>
                        <option value="Lifetime">Lifetime</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="subscriptionPrice">Price ($)</label>
                    <input type="number" id="subscriptionPrice" step="0.01" required>
                </div>
                <div class="form-group">
                    <label for="subscriptionDuration">Duration (months)</label>
                    <input type="number" id="subscriptionDuration" min="1" required>
                </div>
                <div class="form-group">
                    <label for="subscriptionExpiry">Expiry Date</label>
                    <input type="date" id="subscriptionExpiry" required>
                </div>
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary">Add Membership</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <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" required>
                        <option value="">Select Role</option>
                        <option value="hunter">Hunter</option>
                        <option value="premium_hunter">Premium Hunter</option>
                        <option value="guide">Guide</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="userStatus">Status</label>
                    <select id="userStatus" required>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="suspended">Suspended</option>
                    </select>
                </div>
                <div class="action-buttons">
                    <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>

    <div id="addSubscriberModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add New Newsletter Subscriber</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="addSubscriberForm">
                <div class="form-group">
                    <label for="subscriberEmail">Email</label>
                    <input type="email" id="subscriberEmail" required>
                </div>
                <div class="form-group">
                    <label for="subscriberName">Name</label>
                    <input type="text" id="subscriberName">
                </div>
                <div class="form-group">
                    <label for="subscriberIndustry">Interest Area</label>
                    <select id="subscriberIndustry">
                        <option value="">Select Interest</option>
                        <option value="All">All Conservation Updates</option>
                        <option value="Hunting Packages">Hunting Packages</option>
                        <option value="Wildlife News">Wildlife News</option>
                        <option value="Conservation Events">Conservation Events</option>
                        <option value="Training Programs">Training Programs</option>
                        <option value="Research Updates">Research Updates</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="subscriberStatus">Status</label>
                    <select id="subscriberStatus" required>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary">Add Subscriber</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <div id="createTicketModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Create Support Ticket</h3>
                <button class="close-modal">&times;</button>
            </div>
            <form id="createTicketForm">
                <div class="form-group">
                    <label for="ticketSubject">Subject</label>
                    <input type="text" id="ticketSubject" required>
                </div>
                <div class="form-group">
                    <label for="ticketUser">User</label>
                    <select id="ticketUser" required>
                        <option value="">Select User</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="ticketCategory">Category</label>
                    <select id="ticketCategory" required>
                        <option value="">Select Category</option>
                        <option value="Booking">Booking</option>
                        <option value="Billing">Billing</option>
                        <option value="Account">Account</option>
                        <option value="Conservation">Conservation</option>
                        <option value="Equipment">Equipment</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="ticketPriority">Priority</label>
                    <select id="ticketPriority" required>
                        <option value="low">Low</option>
                        <option value="medium">Medium</option>
                        <option value="high">High</option>
                        <option value="urgent">Urgent</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="ticketDescription">Description</label>
                    <textarea id="ticketDescription" rows="4" required></textarea>
                </div>
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary">Create Ticket</button>
                    <button type="button" class="btn btn-danger close-modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <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">
                <p>Loading ticket details...</p>
            </div>
            <div class="form-group">
                <label for="ticketResponse">Response</label>
                <textarea id="ticketResponse" rows="4"></textarea>
            </div>
            <div class="action-buttons">
                <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>

    <script>
        // Database for Huntfree Conservation
        const huntfreeData = {
            products: [
                { id: 1, name: "Big Game Hunting Package", category: "Big Game Hunting", type: "Premium Package", price: 2999.99, status: "active", added: "2023-10-10" },
                { id: 2, name: "Bird Hunting Experience", category: "Bird Hunting", type: "Basic Package", price: 799.99, status: "active", added: "2023-10-12" },
                { id: 3, name: "Conservation Tour", category: "Conservation Tours", type: "Family Package", price: 499.99, status: "active", added: "2023-10-08" },
                { id: 4, name: "Guided Hunting Expedition", category: "Guided Hunts", type: "VIP Experience", price: 5999.99, status: "active", added: "2023-10-05" },
                { id: 5, name: "Hunter Training Program", category: "Training Programs", type: "Premium Package", price: 1299.99, status: "active", added: "2023-10-15" }
            ],
            customers: [
                { id: 1, name: "John Hunter", email: "john@hunter.com", phone: "+1-555-0101", company: "Wildlife Enthusiasts", industry: "Recreational Hunter", status: "active", created_at: "2023-10-15" },
                { id: 2, name: "Sarah Conservationist", email: "sarah@conservation.org", phone: "+1-555-0102", company: "Wildlife Protection", industry: "Conservationist", status: "active", created_at: "2023-10-14" },
                { id: 3, name: "Mike Guide", email: "mike@guide.com", phone: "+1-555-0103", company: "Professional Guides", industry: "Professional Guide", status: "active", created_at: "2023-10-13" },
                { id: 4, name: "Forest Corporation", email: "contact@forestcorp.com", phone: "+1-555-0104", company: "Forest Corp", industry: "Corporate Client", status: "active", created_at: "2023-10-12" },
                { id: 5, name: "Wildlife Family Group", email: "family@wildlife.com", phone: "+1-555-0105", company: "Family Adventures", industry: "Family Group", status: "active", created_at: "2023-10-11" }
            ],
            orders: [
                { id: 1001, customer_name: "John Hunter", product: "Big Game Hunting Package", quantity: 2, total: 5999.98, status: "completed", created_at: "2023-10-15" },
                { id: 1002, customer_name: "Sarah Conservationist", product: "Conservation Tour", quantity: 4, total: 1999.96, status: "confirmed", created_at: "2023-10-14" },
                { id: 1003, customer_name: "Mike Guide", product: "Guided Hunting Expedition", quantity: 1, total: 5999.99, status: "confirmed", created_at: "2023-10-13" },
                { id: 1004, customer_name: "Forest Corporation", product: "Corporate Hunting Retreat", quantity: 10, total: 29999.90, status: "pending", created_at: "2023-10-12" },
                { id: 1005, customer_name: "Wildlife Family Group", product: "Bird Hunting Experience", quantity: 3, total: 2399.97, status: "completed", created_at: "2023-10-11" }
            ],
            employees: [
                { id: 1, name: "Robert Wildlife", email: "robert@huntfree.org", department: "Wildlife Management", position: "Lead Conservationist", salary: 75000, status: "active", hired: "2023-01-15" },
                { id: 2, name: "Jennifer Guide", email: "jennifer@huntfree.org", department: "Guiding Services", position: "Senior Guide", salary: 65000, status: "active", hired: "2023-02-20" },
                { id: 3, name: "Thomas Educator", email: "thomas@huntfree.org", department: "Education", position: "Education Director", salary: 68000, status: "active", hired: "2023-03-10" }
            ],
            subscriptions: [
                { id: 1, user_name: "John Hunter", plan: "Gold", price: 499.99, status: "active", expiry_date: "2024-01-09", start_date: "2023-10-09" },
                { id: 2, user_name: "Sarah Conservationist", plan: "Premium", price: 299.99, status: "active", expiry_date: "2024-02-09", start_date: "2023-10-09" },
                { id: 3, user_name: "First-time Member", plan: "Basic", price: 99.99, status: "active", expiry_date: "2023-12-09", start_date: "2023-09-09" }
            ],
            tickets: [
                { id: 1, subject: "Booking Date Change", user: "John Hunter", category: "Booking", priority: "medium", status: "open", created_at: "2023-10-15" },
                { id: 2, subject: "Membership Upgrade", user: "Sarah Conservationist", category: "Account", priority: "low", status: "open", created_at: "2023-10-14" },
                { id: 3, subject: "Conservation Program Inquiry", user: "Wildlife Family Group", category: "Conservation", priority: "low", status: "closed", created_at: "2023-10-13" }
            ],
            messages: [
                { id: 1, name: "David Outdoors", email: "david@outdoors.com", subject: "Partnership Inquiry", status: "new", created_at: "2023-10-15", message: "Interested in partnership opportunities for our outdoor equipment company." },
                { id: 2, name: "Lisa Nature", email: "lisa@nature.com", subject: "Group Booking Request", status: "read", created_at: "2023-10-14", message: "Please provide details about group hunting packages for 15 people." },
                { id: 3, name: "Mark Conservation", email: "mark@conservation.com", subject: "Research Collaboration", status: "replied", created_at: "2023-10-13", message: "Interested in collaborating on wildlife conservation research projects." }
            ],
            subscribers: [
                { id: 1, email: "naturelover@email.com", name: "Emily Green", industry: "All Conservation Updates", status: "active", created_at: "2023-10-15" },
                { id: 2, email: "hunter@email.com", name: "Alex Bowman", industry: "Hunting Packages", status: "active", created_at: "2023-10-14" },
                { id: 3, email: "wildlife@email.com", name: "Chris Ranger", industry: "Wildlife News", status: "inactive", created_at: "2023-10-13" }
            ],
            users: [
                { id: 1, name: "John Hunter", email: "john@hunter.com", role: "premium_hunter", status: "active", joined: "2023-10-01" },
                { id: 2, name: "Sarah Conservationist", email: "sarah@conservation.org", role: "premium_hunter", status: "active", joined: "2023-10-05" },
                { id: 3, name: "First-time User", email: "beginner@hunter.com", role: "hunter", status: "active", joined: "2023-10-10" }
            ],
            chatHistory: [
                { user_name: "John Hunter", user_message: "What are the requirements for big game hunting?", bot_reply: "Big game hunting requires proper licensing, safety training, and understanding of conservation regulations. Check our training programs section for details.", created_at: "2023-10-15 10:30:00" },
                { user_name: "Sarah Conservationist", user_message: "How does Huntfree contribute to wildlife conservation?", bot_reply: "Huntfree reinvests 30% of profits into conservation projects, supports habitat restoration, and promotes sustainable hunting practices through education programs.", created_at: "2023-10-14 14:20:00" }
            ],
            payroll: [
                { id: 1, employee_name: "Robert Wildlife", month: "October 2023", amount: 6250, status: "paid", paid_date: "2023-10-05" },
                { id: 2, employee_name: "Jennifer Guide", month: "October 2023", amount: 5417, status: "paid", paid_date: "2023-10-05" },
                { id: 3, employee_name: "Thomas Educator", month: "October 2023", amount: 5667, status: "pending", paid_date: "" }
            ]
        };

        // Initialize the application
        document.addEventListener('DOMContentLoaded', function() {
            // DOM Elements
            const loginBtn = document.getElementById('loginBtn');
            const logoutBtn = document.getElementById('logoutBtn');
            const loginSection = document.getElementById('loginSection');
            const adminPanel = document.getElementById('adminPanel');
            const adminName = document.getElementById('adminName');
            const adminEmail = document.getElementById('adminEmail');
            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 registerBtn = document.getElementById('registerBtn');
            const switchToRegister = document.getElementById('switchToRegister');
            const switchToLogin = document.getElementById('switchToLogin');
            const loginForm = document.getElementById('loginForm');
            const registerForm = document.getElementById('registerForm');
            
            // Check if user is logged in
            const isLoggedIn = localStorage.getItem('adminLoggedIn') === 'true';
            const savedAdminName = localStorage.getItem('adminName') || 'Admin';
            const savedAdminEmail = localStorage.getItem('adminEmail') || 'admin@huntfree.org';
            
            if (isLoggedIn) {
                loginSection.style.display = 'none';
                adminPanel.style.display = 'block';
                adminName.textContent = savedAdminName;
                adminEmail.textContent = savedAdminEmail;
                initializeDashboard();
            }
            
            // Switch between login and registration forms
            switchToRegister.addEventListener('click', function() {
                loginForm.style.display = 'none';
                registerForm.style.display = 'block';
            });
            
            switchToLogin.addEventListener('click', function() {
                registerForm.style.display = 'none';
                loginForm.style.display = 'block';
            });
            
            // Login functionality
            loginBtn.addEventListener('click', async function() {
                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;
                
                if (email === 'admin@huntfree.org' && password === '@Abc123456') {
                    localStorage.setItem('adminLoggedIn', 'true');
                    localStorage.setItem('adminName', 'Admin');
                    localStorage.setItem('adminEmail', email);
                    
                    loginSection.style.display = 'none';
                    adminPanel.style.display = 'block';
                    adminName.textContent = 'Admin';
                    adminEmail.textContent = email;
                    
                    Swal.fire({
                        icon: 'success',
                        title: 'Login Successful!',
                        text: 'Welcome to Huntfree Conservation Admin Panel',
                        timer: 2000,
                        showConfirmButton: false
                    });
                    
                    initializeDashboard();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Login Failed',
                        text: 'Invalid email or password'
                    });
                }
            });
            
            // Registration functionality
            registerBtn.addEventListener('click', async 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;
                const phone = document.getElementById('regPhone').value;
                const address = document.getElementById('regAddress').value;
                const role = document.getElementById('regRole').value;
                
                if (!name || !email || !password || !confirmPassword || !role) {
                    Swal.fire('Error', 'Please fill in all required fields', 'error');
                    return;
                }
                
                if (password !== confirmPassword) {
                    Swal.fire('Error', 'Passwords do not match', 'error');
                    return;
                }
                
                if (password.length < 6) {
                    Swal.fire('Error', 'Password must be at least 6 characters long', 'error');
                    return;
                }
                
                // Add to users
                const newUserId = huntfreeData.users.length + 1;
                huntfreeData.users.push({
                    id: newUserId,
                    name: name,
                    email: email,
                    role: role,
                    status: 'active',
                    joined: new Date().toISOString().split('T')[0]
                });
                
                // If role is hunter, also add to customers
                if (role === 'hunter') {
                    const newCustomerId = huntfreeData.customers.length + 1;
                    huntfreeData.customers.push({
                        id: newCustomerId,
                        name: name,
                        email: email,
                        phone: phone,
                        address: address,
                        status: 'active',
                        created_at: new Date().toISOString().split('T')[0]
                    });
                }
                
                Swal.fire({
                    icon: 'success',
                    title: 'Registration Successful!',
                    text: `Account created for ${name}. You can now login.`,
                    timer: 3000,
                    showConfirmButton: false
                });
                
                registerForm.style.display = 'none';
                loginForm.style.display = 'block';
                document.getElementById('email').value = email;
                registerForm.reset();
            });
            
            // Password strength indicator
            document.getElementById('regPassword').addEventListener('input', function() {
                const password = this.value;
                const strengthBar = document.getElementById('passwordStrength');
                let strength = 'strength-weak';
                
                if (password.length >= 8) {
                    if (/[A-Z]/.test(password) && /[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password)) {
                        strength = 'strength-very-strong';
                    } else if (/[A-Z]/.test(password) && /[0-9]/.test(password)) {
                        strength = 'strength-strong';
                    } else if (password.length >= 10) {
                        strength = 'strength-medium';
                    }
                }
                
                strengthBar.className = 'password-strength ' + strength;
            });
            
            // Logout functionality
            logoutBtn.addEventListener('click', function() {
                Swal.fire({
                    title: 'Logout?',
                    text: 'Are you sure you want to logout?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, logout!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        localStorage.removeItem('adminLoggedIn');
                        localStorage.removeItem('adminName');
                        localStorage.removeItem('adminEmail');
                        
                        adminPanel.style.display = 'none';
                        loginSection.style.display = 'flex';
                        
                        Swal.fire({
                            icon: 'success',
                            title: 'Logged Out!',
                            text: 'You have been successfully logged out',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                });
            });
            
            // Navigation functionality
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetSection = this.getAttribute('data-section');
                    
                    navLinks.forEach(nav => nav.classList.remove('active'));
                    this.classList.add('active');
                    
                    sections.forEach(section => section.classList.remove('active'));
                    document.getElementById(targetSection).classList.add('active');
                    
                    pageTitle.textContent = this.querySelector('span').textContent;
                    
                    initializeSection(targetSection);
                });
            });
            
            // Tab functionality
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetTab = this.getAttribute('data-tab');
                    
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    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');
                });
            });
            
            window.addEventListener('click', function(e) {
                modals.forEach(modal => {
                    if (e.target === modal) {
                        modal.style.display = 'none';
                    }
                });
            });
            
            // Initialize dashboard
            function initializeDashboard() {
                updateDashboardStats();
                populateRecentOrders();
                populateRecentTickets();
                createRevenueChart();
                createFinancialChart();
                
                // Dashboard event listeners
                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('addProductBtn').addEventListener('click', function() {
                    document.getElementById('addProductModal').style.display = 'flex';
                });
                
                document.getElementById('addCustomerBtn').addEventListener('click', function() {
                    document.getElementById('addCustomerModal').style.display = 'flex';
                });
                
                document.getElementById('createOrderBtn').addEventListener('click', function() {
                    openCreateOrderModal();
                });
                
                document.getElementById('generateReportBtn').addEventListener('click', function() {
                    document.querySelector('.nav-link[data-section="report"]').click();
                });
            }
            
            function openCreateOrderModal() {
                const modal = document.getElementById('addOrderModal');
                const customerSelect = document.getElementById('orderCustomer');
                const productSelect = document.getElementById('orderProduct');
                
                customerSelect.innerHTML = '<option value="">Select Hunter</option>';
                productSelect.innerHTML = '<option value="">Select Package</option>';
                
                huntfreeData.customers.forEach(customer => {
                    const option = document.createElement('option');
                    option.value = customer.id;
                    option.textContent = `${customer.name} (${customer.company})`;
                    customerSelect.appendChild(option);
                });
                
                huntfreeData.products.forEach(product => {
                    const option = document.createElement('option');
                    option.value = product.id;
                    option.textContent = `${product.name} - $${product.price}`;
                    productSelect.appendChild(option);
                });
                
                modal.style.display = 'flex';
            }
            
            function initializeSection(sectionName) {
                switch(sectionName) {
                    case 'products':
                        initializeProducts();
                        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 'ai-chat':
                        initializeAIChat();
                        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;
                }
            }
            
            function updateDashboardStats() {
                document.getElementById('totalProducts').textContent = huntfreeData.products.length;
                document.getElementById('totalCustomers').textContent = huntfreeData.customers.length;
                document.getElementById('totalOrders').textContent = huntfreeData.orders.length;
                document.getElementById('totalEmployees').textContent = huntfreeData.employees.length;
                document.getElementById('totalSubscriptions').textContent = huntfreeData.subscriptions.length;
                document.getElementById('totalUsers').textContent = huntfreeData.users.length;
            }
            
            function populateRecentOrders() {
                const tableBody = document.getElementById('recentOrdersTable');
                tableBody.innerHTML = '';
                
                huntfreeData.orders.slice(0, 5).forEach(order => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>#${order.id}</td>
                        <td>${order.customer_name}</td>
                        <td>$${order.total.toFixed(2)}</td>
                        <td><span class="status ${order.status}">${order.status}</span></td>
                        <td><button class="btn btn-primary btn-small view-order-btn" data-id="${order.id}">View</button></td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populateRecentTickets() {
                const tableBody = document.getElementById('recentTicketsTable');
                tableBody.innerHTML = '';
                
                huntfreeData.tickets.slice(0, 5).forEach(ticket => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>#${ticket.id}</td>
                        <td>${ticket.subject}</td>
                        <td><span class="status ${ticket.status}">${ticket.status}</span></td>
                        <td><button class="btn btn-primary btn-small view-ticket-btn" data-id="${ticket.id}">View</button></td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // Add event listeners to view buttons
                document.querySelectorAll('.view-ticket-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const ticketId = this.getAttribute('data-id');
                        const ticket = huntfreeData.tickets.find(t => t.id == ticketId);
                        if (ticket) {
                            document.getElementById('ticketDetails').innerHTML = `
                                <div class="ticket-detail">
                                    <p><strong>Ticket ID:</strong> #${ticket.id}</p>
                                    <p><strong>Subject:</strong> ${ticket.subject}</p>
                                    <p><strong>User:</strong> ${ticket.user}</p>
                                    <p><strong>Category:</strong> ${ticket.category}</p>
                                    <p><strong>Priority:</strong> ${ticket.priority}</p>
                                    <p><strong>Status:</strong> ${ticket.status}</p>
                                    <p><strong>Created:</strong> ${ticket.created_at}</p>
                                    <p><strong>Description:</strong> This is a sample ticket description for Huntfree conservation platform.</p>
                                </div>
                            `;
                            document.getElementById('viewTicketModal').style.display = 'flex';
                        }
                    });
                });
            }
            
            function createRevenueChart() {
                const ctx = document.getElementById('revenueChart');
                if (!ctx) return;
                
                new Chart(ctx.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
                        datasets: [{
                            label: 'Conservation Revenue ($)',
                            data: [28500, 31200, 29800, 34100, 32800, 37200, 35800, 38900, 40500, 42200],
                            borderColor: '#2E7D32',
                            backgroundColor: 'rgba(46, 125, 50, 0.1)',
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                });
            }
            
            function createFinancialChart() {
                const ctx = document.getElementById('financialChart');
                if (!ctx) return;
                
                new Chart(ctx.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: ['Hunting Packages', 'Conservation Tours', 'Training Programs', 'Memberships', 'Donations'],
                        datasets: [
                            {
                                label: 'Revenue',
                                data: [65000, 28000, 32000, 25000, 18000],
                                backgroundColor: 'rgba(56, 142, 60, 0.7)'
                            },
                            {
                                label: 'Conservation Expenses',
                                data: [22000, 8000, 12000, 5000, 15000],
                                backgroundColor: 'rgba(198, 40, 40, 0.7)'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                });
            }
            
            // Products section
            function initializeProducts() {
                populateProductTable();
                
                document.getElementById('addProductBtn2').addEventListener('click', function() {
                    document.getElementById('addProductModal').style.display = 'flex';
                });
                
                document.getElementById('exportProductsBtn').addEventListener('click', function() {
                    exportData(huntfreeData.products, 'huntfree_packages.csv');
                });
                
                document.getElementById('productSearch').addEventListener('input', function() {
                    filterTable('productTable', this.value);
                });
                
                // Add product form
                document.getElementById('addProductForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const product = {
                        id: huntfreeData.products.length + 1,
                        name: document.getElementById('productName').value,
                        category: document.getElementById('productCategory').value,
                        type: document.getElementById('productType').value,
                        price: parseFloat(document.getElementById('productPrice').value),
                        description: document.getElementById('productDescription').value,
                        status: 'active',
                        added: new Date().toISOString().split('T')[0]
                    };
                    
                    huntfreeData.products.unshift(product);
                    
                    Swal.fire('Success!', 'Hunting package added successfully', 'success');
                    document.getElementById('addProductModal').style.display = 'none';
                    this.reset();
                    populateProductTable();
                    updateDashboardStats();
                });
            }
            
            function populateProductTable() {
                const tableBody = document.getElementById('productTable');
                tableBody.innerHTML = '';
                
                huntfreeData.products.forEach(product => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${product.id}</td>
                        <td>${product.name}</td>
                        <td>${product.category}</td>
                        <td>$${product.price.toFixed(2)}</td>
                        <td><span class="status ${product.status}">${product.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary btn-small edit-product-btn" data-id="${product.id}">Edit</button>
                            <button class="btn btn-danger btn-small delete-product-btn" data-id="${product.id}">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // Add event listeners for edit and delete
                document.querySelectorAll('.edit-product-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const productId = this.getAttribute('data-id');
                        const product = huntfreeData.products.find(p => p.id == productId);
                        if (product) {
                            Swal.fire({
                                title: 'Edit Package',
                                html: `
                                    <input type="text" id="editProductName" class="swal2-input" placeholder="Package Name" value="${product.name}">
                                    <input type="text" id="editProductPrice" class="swal2-input" placeholder="Price" value="${product.price}">
                                    <select id="editProductStatus" class="swal2-input">
                                        <option value="active" ${product.status === 'active' ? 'selected' : ''}>Active</option>
                                        <option value="inactive" ${product.status === 'inactive' ? 'selected' : ''}>Inactive</option>
                                    </select>
                                `,
                                focusConfirm: false,
                                preConfirm: () => {
                                    return {
                                        name: document.getElementById('editProductName').value,
                                        price: document.getElementById('editProductPrice').value,
                                        status: document.getElementById('editProductStatus').value
                                    };
                                }
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    product.name = result.value.name;
                                    product.price = parseFloat(result.value.price);
                                    product.status = result.value.status;
                                    populateProductTable();
                                    Swal.fire('Updated!', 'Package has been updated.', 'success');
                                }
                            });
                        }
                    });
                });
                
                document.querySelectorAll('.delete-product-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const productId = this.getAttribute('data-id');
                        Swal.fire({
                            title: 'Are you sure?',
                            text: "You won't be able to revert this!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Yes, delete it!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                const index = huntfreeData.products.findIndex(p => p.id == productId);
                                if (index !== -1) {
                                    huntfreeData.products.splice(index, 1);
                                    populateProductTable();
                                    updateDashboardStats();
                                    Swal.fire('Deleted!', 'Package has been deleted.', 'success');
                                }
                            }
                        });
                    });
                });
            }
            
            // Customers section
            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
                document.getElementById('addCustomerForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const customer = {
                        id: huntfreeData.customers.length + 1,
                        name: document.getElementById('customerName').value,
                        email: document.getElementById('customerEmail').value,
                        phone: document.getElementById('customerPhone').value,
                        company: document.getElementById('customerCompany').value,
                        industry: document.getElementById('customerIndustry').value,
                        status: 'active',
                        created_at: new Date().toISOString().split('T')[0]
                    };
                    
                    huntfreeData.customers.unshift(customer);
                    
                    // Also add to users if not exists
                    const userExists = huntfreeData.users.some(u => u.email === customer.email);
                    if (!userExists) {
                        huntfreeData.users.push({
                            id: huntfreeData.users.length + 1,
                            name: customer.name,
                            email: customer.email,
                            role: 'hunter',
                            status: 'active',
                            joined: new Date().toISOString().split('T')[0]
                        });
                    }
                    
                    Swal.fire('Success!', 'Hunter added successfully', 'success');
                    document.getElementById('addCustomerModal').style.display = 'none';
                    this.reset();
                    populateCustomerTable();
                    updateDashboardStats();
                });
            }
            
            function populateCustomerTable() {
                const tableBody = document.getElementById('customerTable');
                tableBody.innerHTML = '';
                
                huntfreeData.customers.forEach(customer => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${customer.id}</td>
                        <td>${customer.name}</td>
                        <td>${customer.email}</td>
                        <td>${customer.phone || 'N/A'}</td>
                        <td><span class="status ${customer.status}">${customer.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary btn-small">Edit</button>
                            <button class="btn btn-danger btn-small">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            // Orders section
            function initializeOrders() {
                populateOrderTable();
                
                document.getElementById('createOrderBtn2').addEventListener('click', function() {
                    openCreateOrderModal();
                });
                
                document.getElementById('orderSearch').addEventListener('input', function() {
                    filterTable('orderTable', this.value);
                });
                
                // Add order form
                document.getElementById('addOrderForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const customerId = document.getElementById('orderCustomer').value;
                    const productId = document.getElementById('orderProduct').value;
                    const customer = huntfreeData.customers.find(c => c.id == customerId);
                    const product = huntfreeData.products.find(p => p.id == productId);
                    
                    const order = {
                        id: huntfreeData.orders.length + 1,
                        customer_name: customer ? customer.name : 'Unknown Hunter',
                        product: product ? product.name : 'Unknown Package',
                        quantity: parseInt(document.getElementById('orderQuantity').value),
                        total: parseFloat(document.getElementById('orderAmount').value),
                        status: document.getElementById('orderStatus').value,
                        notes: document.getElementById('orderNotes').value,
                        created_at: new Date().toISOString().split('T')[0]
                    };
                    
                    huntfreeData.orders.unshift(order);
                    
                    Swal.fire('Success!', 'Booking created successfully', 'success');
                    document.getElementById('addOrderModal').style.display = 'none';
                    this.reset();
                    populateOrderTable();
                    updateDashboardStats();
                });
            }
            
            function populateOrderTable() {
                const tableBody = document.getElementById('orderTable');
                tableBody.innerHTML = '';
                
                huntfreeData.orders.forEach(order => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>#${order.id}</td>
                        <td>${order.customer_name}</td>
                        <td>$${order.total.toFixed(2)}</td>
                        <td><span class="status ${order.status}">${order.status}</span></td>
                        <td>${order.created_at}</td>
                        <td class="action-buttons">
                            <button class="btn btn-primary btn-small">View</button>
                            <button class="btn btn-danger btn-small">Cancel</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            // Payment Gateway section
            function initializePaymentGateway() {
                document.getElementById('saveStripeSettings').addEventListener('click', function() {
                    Swal.fire('Success!', 'Stripe settings saved successfully', 'success');
                });
                
                document.getElementById('savePaypalSettings').addEventListener('click', function() {
                    Swal.fire('Success!', 'PayPal settings saved successfully', 'success');
                });
            }
            
            // HR & Payroll section
            function initializeHRPayroll() {
                populateEmployeeTable();
                populatePayrollTable();
                
                document.getElementById('addEmployeeBtn').addEventListener('click', function() {
                    document.getElementById('addEmployeeModal').style.display = 'flex';
                });
                
                document.getElementById('processPayrollBtn').addEventListener('click', function() {
                    processPayroll();
                });
                
                document.getElementById('employeeSearch').addEventListener('input', function() {
                    filterTable('employeeTable', this.value);
                });
                
                // Add employee form
                document.getElementById('addEmployeeForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const employee = {
                        id: huntfreeData.employees.length + 1,
                        name: document.getElementById('employeeName').value,
                        email: document.getElementById('employeeEmail').value,
                        department: document.getElementById('employeeDepartment').value,
                        position: document.getElementById('employeePosition').value,
                        salary: parseFloat(document.getElementById('employeeSalary').value),
                        phone: document.getElementById('employeePhone').value,
                        status: 'active',
                        hired: new Date().toISOString().split('T')[0]
                    };
                    
                    huntfreeData.employees.unshift(employee);
                    
                    Swal.fire('Success!', 'Conservation staff added successfully', 'success');
                    document.getElementById('addEmployeeModal').style.display = 'none';
                    this.reset();
                    populateEmployeeTable();
                    updateDashboardStats();
                });
            }
            
            function populateEmployeeTable() {
                const tableBody = document.getElementById('employeeTable');
                tableBody.innerHTML = '';
                
                huntfreeData.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 btn-small">Edit</button>
                            <button class="btn btn-danger btn-small">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function populatePayrollTable() {
                const tableBody = document.getElementById('payrollTable');
                tableBody.innerHTML = '';
                
                huntfreeData.payroll.forEach(payroll => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${payroll.id}</td>
                        <td>${payroll.employee_name}</td>
                        <td>${payroll.month}</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 btn-small">View</button>
                            <button class="btn btn-success btn-small pay-btn" data-id="${payroll.id}">Pay</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // Add pay button listeners
                document.querySelectorAll('.pay-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const payrollId = this.getAttribute('data-id');
                        const payroll = huntfreeData.payroll.find(p => p.id == payrollId);
                        if (payroll && payroll.status === 'pending') {
                            payroll.status = 'paid';
                            payroll.paid_date = new Date().toISOString().split('T')[0];
                            populatePayrollTable();
                            Swal.fire('Paid!', `Payroll for ${payroll.employee_name} has been marked as paid.`, 'success');
                        }
                    });
                });
            }
            
            function processPayroll() {
                const currentMonth = new Date().toLocaleString('default', { month: 'long', year: 'numeric' });
                const pendingPayroll = huntfreeData.payroll.filter(p => p.status === 'pending');
                
                if (pendingPayroll.length === 0) {
                    Swal.fire('Info', 'No pending payroll to process.', 'info');
                    return;
                }
                
                let totalAmount = 0;
                pendingPayroll.forEach(p => totalAmount += p.amount);
                
                Swal.fire({
                    title: 'Process Payroll',
                    html: `Processing payroll for ${currentMonth}<br>Total: $${totalAmount.toLocaleString()}<br>Affecting ${pendingPayroll.length} staff members`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Process Now',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        pendingPayroll.forEach(p => {
                            p.status = 'paid';
                            p.paid_date = new Date().toISOString().split('T')[0];
                        });
                        populatePayrollTable();
                        Swal.fire('Processed!', `Payroll for ${currentMonth} has been processed.`, 'success');
                    }
                });
            }
            
            // Accounts section
            function initializeAccounts() {
                populateFinancialTable();
            }
            
            function populateFinancialTable() {
                const tableBody = document.getElementById('financialTable');
                tableBody.innerHTML = '';
                
                const transactions = [
                    { date: "2023-10-15", description: "Big Game Hunting Package Sales", type: "credit", amount: 8450 },
                    { date: "2023-10-14", description: "Conservation Equipment Costs", type: "debit", amount: -3200 },
                    { date: "2023-10-13", description: "Membership Revenue", type: "credit", amount: 8890 },
                    { date: "2023-10-12", description: "Wildlife Research Expenses", type: "debit", amount: -2500 },
                    { date: "2023-10-11", description: "Conservation Staff Salaries", type: "debit", amount: -17333 }
                ];
                
                transactions.forEach(transaction => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${transaction.date}</td>
                        <td>${transaction.description}</td>
                        <td>${transaction.type}</td>
                        <td style="color: ${transaction.amount > 0 ? 'var(--success)' : 'var(--danger)'}">
                            ${transaction.amount > 0 ? '+' : ''}$${Math.abs(transaction.amount).toLocaleString()}
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            // Subscription section
            function initializeSubscription() {
                populateSubscriptionTable();
                
                document.getElementById('addSubscriptionBtn').addEventListener('click', function() {
                    openAddSubscriptionModal();
                });
                
                document.getElementById('subscriptionSearch').addEventListener('input', function() {
                    filterTable('subscriptionTable', this.value);
                });
            }
            
            function openAddSubscriptionModal() {
                const modal = document.getElementById('addSubscriptionModal');
                const userSelect = document.getElementById('subscriptionUser');
                
                userSelect.innerHTML = '<option value="">Select Member</option>';
                huntfreeData.users.forEach(user => {
                    const option = document.createElement('option');
                    option.value = user.id;
                    option.textContent = `${user.name} (${user.email})`;
                    userSelect.appendChild(option);
                });
                
                modal.style.display = 'flex';
            }
            
            function populateSubscriptionTable() {
                const tableBody = document.getElementById('subscriptionTable');
                tableBody.innerHTML = '';
                
                huntfreeData.subscriptions.forEach(subscription => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${subscription.id}</td>
                        <td>${subscription.user_name}</td>
                        <td>${subscription.plan}</td>
                        <td>$${subscription.price}</td>
                        <td><span class="status ${subscription.status}">${subscription.status}</span></td>
                        <td>${subscription.expiry_date}</td>
                        <td class="action-buttons">
                            <button class="btn btn-primary btn-small">Edit</button>
                            <button class="btn btn-danger btn-small">Cancel</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            // Add subscription form
            document.getElementById('addSubscriptionForm').addEventListener('submit', function(e) {
                e.preventDefault();
                const userId = document.getElementById('subscriptionUser').value;
                const user = huntfreeData.users.find(u => u.id == userId);
                
                const subscription = {
                    id: huntfreeData.subscriptions.length + 1,
                    user_name: user ? user.name : 'Unknown Member',
                    plan: document.getElementById('subscriptionPlan').value,
                    price: parseFloat(document.getElementById('subscriptionPrice').value),
                    duration: parseInt(document.getElementById('subscriptionDuration').value),
                    expiry_date: document.getElementById('subscriptionExpiry').value,
                    status: 'active',
                    start_date: new Date().toISOString().split('T')[0]
                };
                
                huntfreeData.subscriptions.unshift(subscription);
                
                Swal.fire('Success!', 'Membership added successfully', 'success');
                document.getElementById('addSubscriptionModal').style.display = 'none';
                this.reset();
                populateSubscriptionTable();
                updateDashboardStats();
            });
            
            // User Data section
            function initializeUserData() {
                populateUserTable();
                
                document.getElementById('addUserBtn').addEventListener('click', function() {
                    document.getElementById('addUserModal').style.display = 'flex';
                });
                
                document.getElementById('userSearch').addEventListener('input', function() {
                    filterTable('userTable', this.value);
                });
                
                // Add user form
                document.getElementById('addUserForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const user = {
                        id: huntfreeData.users.length + 1,
                        name: document.getElementById('userName').value,
                        email: document.getElementById('userEmail').value,
                        password: document.getElementById('userPassword').value,
                        role: document.getElementById('userRole').value,
                        status: document.getElementById('userStatus').value,
                        joined: new Date().toISOString().split('T')[0]
                    };
                    
                    huntfreeData.users.unshift(user);
                    
                    Swal.fire('Success!', 'User added successfully', 'success');
                    document.getElementById('addUserModal').style.display = 'none';
                    this.reset();
                    populateUserTable();
                    updateDashboardStats();
                });
            }
            
            function populateUserTable() {
                const tableBody = document.getElementById('userTable');
                tableBody.innerHTML = '';
                
                huntfreeData.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><span class="status ${user.status}">${user.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn btn-primary btn-small">Edit</button>
                            <button class="btn btn-danger btn-small">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            // AI Chat section
            function initializeAIChat() {
                populateChatHistory();
                
                document.getElementById('sendChatBtn').addEventListener('click', sendChatMessage);
                document.getElementById('aiChatInput').addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        sendChatMessage();
                    }
                });
                
                document.getElementById('clearChatBtn').addEventListener('click', function() {
                    document.getElementById('aiChatMessages').innerHTML = `
                        <div class="chat-message bot-message">
                            Hello! I'm your Huntfree Conservation AI assistant. How can I help you with sustainable hunting practices, conservation efforts, and wildlife management today?
                        </div>
                    `;
                    Swal.fire('Chat Cleared', 'Chat history has been cleared', 'success');
                });
            }
            
            function sendChatMessage() {
                const input = document.getElementById('aiChatInput');
                const message = input.value.trim();
                
                if (!message) return;
                
                const chatMessages = document.getElementById('aiChatMessages');
                const userMessageDiv = document.createElement('div');
                userMessageDiv.className = 'chat-message user-message';
                userMessageDiv.textContent = message;
                chatMessages.appendChild(userMessageDiv);
                
                input.value = '';
                
                // Simulate AI response with hunting/conservation themed answers
                setTimeout(() => {
                    const responses = [
                        "I can help you with sustainable hunting practices, wildlife conservation, and habitat management. What specific information do you need about conservation efforts?",
                        "For sustainable hunting, we promote ethical practices, respect for wildlife, and habitat conservation. Would you like details on our conservation programs?",
                        "The hunting conservation movement focuses on sustainable populations, habitat protection, and education for future generations of hunters.",
                        "For wildlife management, typical practices include population monitoring, habitat restoration, and regulated hunting seasons to maintain ecological balance.",
                        "I can assist with hunting regulations, conservation initiatives, wildlife education, and sustainable outdoor recreation practices."
                    ];
                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                    
                    const botMessageDiv = document.createElement('div');
                    botMessageDiv.className = 'chat-message bot-message';
                    botMessageDiv.textContent = randomResponse;
                    chatMessages.appendChild(botMessageDiv);
                    
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                    
                    // Add to chat history
                    const newChat = {
                        user_name: "Admin",
                        user_message: message,
                        bot_reply: randomResponse,
                        created_at: new Date().toLocaleString()
                    };
                    huntfreeData.chatHistory.unshift(newChat);
                    populateChatHistory();
                }, 1000);
            }
            
            function populateChatHistory() {
                const tableBody = document.getElementById('chatHistoryTable');
                tableBody.innerHTML = '';
                
                huntfreeData.chatHistory.forEach(chat => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${chat.user_name}</td>
                        <td>${chat.user_message}</td>
                        <td>${chat.bot_reply}</td>
                        <td>${chat.created_at}</td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            // Subscriber section
            function initializeSubscriber() {
                populateSubscriberTable();
                
                document.getElementById('addSubscriberBtn').addEventListener('click', function() {
                    document.getElementById('addSubscriberModal').style.display = 'flex';
                });
                
                document.getElementById('subscriberSearch').addEventListener('input', function() {
                    filterTable('subscriberTable', this.value);
                });
                
                // Add subscriber form
                document.getElementById('addSubscriberForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const subscriber = {
                        id: huntfreeData.subscribers.length + 1,
                        email: document.getElementById('subscriberEmail').value,
                        name: document.getElementById('subscriberName').value,
                        industry: document.getElementById('subscriberIndustry').value,
                        status: document.getElementById('subscriberStatus').value,
                        created_at: new Date().toISOString().split('T')[0]
                    };
                    
                    huntfreeData.subscribers.unshift(subscriber);
                    
                    Swal.fire('Success!', 'Newsletter subscriber added successfully', 'success');
                    document.getElementById('addSubscriberModal').style.display = 'none';
                    this.reset();
                    populateSubscriberTable();
                });
            }
            
            function populateSubscriberTable() {
                const tableBody = document.getElementById('subscriberTable');
                tableBody.innerHTML = '';
                
                huntfreeData.subscribers.forEach(subscriber => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${subscriber.id}</td>
                        <td>${subscriber.email}</td>
                        <td><span class="status ${subscriber.status}">${subscriber.status}</span></td>
                        <td>${subscriber.created_at}</td>
                        <td class="action-buttons">
                            <button class="btn btn-primary btn-small">Edit</button>
                            <button class="btn btn-danger btn-small">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            // Support Ticket section
            function initializeSupportTicket() {
                populateTicketTable();
                
                document.getElementById('createTicketBtn').addEventListener('click', function() {
                    openCreateTicketModal();
                });
                
                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) {
                        Swal.fire('Response Sent', 'Your response has been sent to the user', 'success');
                        document.getElementById('ticketResponse').value = '';
                        document.getElementById('viewTicketModal').style.display = 'none';
                    } else {
                        Swal.fire('Error', 'Please enter a response', 'error');
                    }
                });
                
                // Close ticket button
                document.getElementById('closeTicketBtn').addEventListener('click', function() {
                    Swal.fire('Ticket Closed', 'The ticket has been closed successfully', 'success');
                    document.getElementById('viewTicketModal').style.display = 'none';
                });
            }
            
            function openCreateTicketModal() {
                const modal = document.getElementById('createTicketModal');
                const userSelect = document.getElementById('ticketUser');
                
                userSelect.innerHTML = '<option value="">Select User</option>';
                huntfreeData.users.forEach(user => {
                    const option = document.createElement('option');
                    option.value = user.id;
                    option.textContent = `${user.name} (${user.email})`;
                    userSelect.appendChild(option);
                });
                
                modal.style.display = 'flex';
            }
            
            function populateTicketTable() {
                const tableBody = document.getElementById('ticketTable');
                tableBody.innerHTML = '';
                
                huntfreeData.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_at}</td>
                        <td class="action-buttons">
                            <button class="btn btn-primary btn-small view-ticket-btn2" data-id="${ticket.id}">View</button>
                            <button class="btn btn-danger btn-small">Close</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // Add event listeners
                document.querySelectorAll('.view-ticket-btn2').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const ticketId = this.getAttribute('data-id');
                        const ticket = huntfreeData.tickets.find(t => t.id == ticketId);
                        if (ticket) {
                            document.getElementById('ticketDetails').innerHTML = `
                                <div class="ticket-detail">
                                    <p><strong>Ticket ID:</strong> #${ticket.id}</p>
                                    <p><strong>Subject:</strong> ${ticket.subject}</p>
                                    <p><strong>User:</strong> ${ticket.user}</p>
                                    <p><strong>Category:</strong> ${ticket.category}</p>
                                    <p><strong>Priority:</strong> ${ticket.priority}</p>
                                    <p><strong>Status:</strong> ${ticket.status}</p>
                                    <p><strong>Created:</strong> ${ticket.created_at}</p>
                                    <p><strong>Description:</strong> This is a sample ticket for the Huntfree conservation platform. Users can report issues with bookings, memberships, or conservation programs.</p>
                                </div>
                            `;
                            document.getElementById('viewTicketModal').style.display = 'flex';
                        }
                    });
                });
            }
            
            // Create ticket form
            document.getElementById('createTicketForm').addEventListener('submit', function(e) {
                e.preventDefault();
                const userId = document.getElementById('ticketUser').value;
                const user = huntfreeData.users.find(u => u.id == userId);
                
                const ticket = {
                    id: huntfreeData.tickets.length + 1,
                    subject: document.getElementById('ticketSubject').value,
                    user: user ? user.name : 'Unknown User',
                    category: document.getElementById('ticketCategory').value,
                    priority: document.getElementById('ticketPriority').value,
                    description: document.getElementById('ticketDescription').value,
                    status: 'open',
                    created_at: new Date().toISOString().split('T')[0]
                };
                
                huntfreeData.tickets.unshift(ticket);
                
                Swal.fire('Success!', 'Support ticket created successfully', 'success');
                document.getElementById('createTicketModal').style.display = 'none';
                this.reset();
                populateTicketTable();
            });
            
            // Contact Messages section
            function initializeContactMessages() {
                populateMessageTable();
                
                document.getElementById('replyMessageBtn').addEventListener('click', function() {
                    Swal.fire('Reply', 'Reply functionality is ready for implementation!', 'info');
                });
                
                document.getElementById('messageSearch').addEventListener('input', function() {
                    filterTable('messageTable', this.value);
                });
                
                // Select all messages
                document.getElementById('selectAllMessages').addEventListener('change', function() {
                    const checkboxes = document.querySelectorAll('#messageTable input[type="checkbox"]');
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = this.checked;
                    });
                });
            }
            
            function populateMessageTable() {
                const tableBody = document.getElementById('messageTable');
                tableBody.innerHTML = '';
                
                huntfreeData.messages.forEach(message => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td><input type="checkbox" class="message-checkbox" data-id="${message.id}"></td>
                        <td>${message.name}</td>
                        <td>${message.email}</td>
                        <td>${message.subject}</td>
                        <td><span class="status ${message.status}">${message.status}</span></td>
                        <td>${message.created_at}</td>
                        <td class="action-buttons">
                            <button class="btn btn-primary btn-small view-message-btn" data-id="${message.id}">View</button>
                            <button class="btn btn-danger btn-small">Delete</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // Add event listeners to view buttons
                document.querySelectorAll('.view-message-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const messageId = this.getAttribute('data-id');
                        const message = huntfreeData.messages.find(m => m.id == messageId);
                        if (message) {
                            Swal.fire({
                                title: message.subject,
                                html: `
                                    <p><strong>From:</strong> ${message.name} (${message.email})</p>
                                    <p><strong>Date:</strong> ${message.created_at}</p>
                                    <p><strong>Status:</strong> ${message.status}</p>
                                    <hr>
                                    <p><strong>Message:</strong></p>
                                    <p>${message.message}</p>
                                `,
                                icon: 'info',
                                showCancelButton: true,
                                confirmButtonText: 'Mark as Read',
                                cancelButtonText: 'Close'
                            }).then((result) => {
                                if (result.isConfirmed && message.status !== 'read') {
                                    message.status = 'read';
                                    populateMessageTable();
                                }
                            });
                        }
                    });
                });
            }
            
            // SEO section
            function initializeSEO() {
                document.getElementById('seoSettingsForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    Swal.fire('Success!', 'SEO settings saved successfully', 'success');
                });
            }
            
            // Report section
            function initializeReport() {
                createReportChart();
                populateReportTable();
                
                document.getElementById('generateSalesReport').addEventListener('click', function() {
                    generateSalesReport();
                });
                
                document.getElementById('generateUserReport').addEventListener('click', function() {
                    generateUserReport();
                });
                
                document.getElementById('exportReport').addEventListener('click', function() {
                    exportReportData();
                });
            }
            
            function createReportChart() {
                const ctx = document.getElementById('reportChart');
                if (!ctx) return;
                
                new Chart(ctx.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
                        datasets: [
                            {
                                label: 'Hunting Package Revenue',
                                data: [28500, 30200, 29800, 32100, 31800, 33200, 32800, 34900, 36500, 38200],
                                backgroundColor: 'rgba(46, 125, 50, 0.7)'
                            },
                            {
                                label: 'Conservation Tour Revenue',
                                data: [10000, 11000, 10000, 12000, 11000, 14000, 13000, 14000, 14000, 14000],
                                backgroundColor: 'rgba(212, 160, 23, 0.7)'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                });
            }
            
            function populateReportTable() {
                const tableBody = document.getElementById('reportTable');
                tableBody.innerHTML = '';
                
                const reports = [
                    { date: "2023-10-01", sales: 28500, users: 32, subscriptions: 18, tickets: 8 },
                    { date: "2023-10-02", sales: 31200, users: 41, subscriptions: 22, tickets: 12 },
                    { date: "2023-10-03", sales: 29800, users: 29, subscriptions: 15, tickets: 15 },
                    { date: "2023-10-04", sales: 34100, users: 37, subscriptions: 20, tickets: 5 },
                    { date: "2023-10-05", sales: 32800, users: 45, subscriptions: 28, tickets: 14 }
                ];
                
                reports.forEach(report => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${report.date}</td>
                        <td>$${report.sales.toLocaleString()}</td>
                        <td>${report.users}</td>
                        <td>${report.subscriptions}</td>
                        <td>${report.tickets}</td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            function generateSalesReport() {
                const totalSales = huntfreeData.orders.reduce((sum, order) => sum + order.total, 0);
                const avgOrderValue = totalSales / huntfreeData.orders.length;
                
                Swal.fire({
                    title: 'Huntfree Revenue Report',
                    html: `
                        <div style="text-align: left; padding: 10px;">
                            <p><strong>Total Bookings:</strong> ${huntfreeData.orders.length}</p>
                            <p><strong>Total Revenue:</strong> $${totalSales.toFixed(2)}</p>
                            <p><strong>Average Booking Value:</strong> $${avgOrderValue.toFixed(2)}</p>
                            <p><strong>Top Package Category:</strong> Big Game Hunting</p>
                            <p><strong>Active Hunters:</strong> ${huntfreeData.customers.filter(c => c.status === 'active').length}</p>
                            <p><strong>Conservation Contribution:</strong> $${(totalSales * 0.3).toFixed(2)} (30%)</p>
                            <p><strong>Report Date:</strong> ${new Date().toLocaleDateString()}</p>
                        </div>
                    `,
                    icon: 'info',
                    width: 600
                });
            }
            
            function generateUserReport() {
                const activeUsers = huntfreeData.users.filter(u => u.status === 'active').length;
                const premiumUsers = huntfreeData.users.filter(u => u.role === 'premium_hunter').length;
                const newUsersThisMonth = huntfreeData.users.filter(u => {
                    const joinDate = new Date(u.joined);
                    const now = new Date();
                    return joinDate.getMonth() === now.getMonth() && joinDate.getFullYear() === now.getFullYear();
                }).length;
                
                Swal.fire({
                    title: 'User Conservation Report',
                    html: `
                        <div style="text-align: left; padding: 10px;">
                            <p><strong>Total Users:</strong> ${huntfreeData.users.length}</p>
                            <p><strong>Active Users:</strong> ${activeUsers}</p>
                            <p><strong>Premium Hunters:</strong> ${premiumUsers}</p>
                            <p><strong>New Users This Month:</strong> ${newUsersThisMonth}</p>
                            <p><strong>User Growth Rate:</strong> ${((newUsersThisMonth / huntfreeData.users.length) * 100).toFixed(1)}%</p>
                            <p><strong>Conservation Members:</strong> ${huntfreeData.subscriptions.filter(s => s.status === 'active').length}</p>
                            <p><strong>Report Date:</strong> ${new Date().toLocaleDateString()}</p>
                        </div>
                    `,
                    icon: 'info',
                    width: 600
                });
            }
            
            function exportReportData() {
                const dataStr = JSON.stringify(huntfreeData, null, 2);
                const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
                const exportFileDefaultName = `huntfree_conservation_data_${new Date().toISOString().split('T')[0]}.json`;
                
                const linkElement = document.createElement('a');
                linkElement.setAttribute('href', dataUri);
                linkElement.setAttribute('download', exportFileDefaultName);
                linkElement.click();
                
                Swal.fire('Exported!', 'Conservation data exported successfully as JSON file.', 'success');
            }
            
            // Language section
            function initializeLanguage() {
                document.getElementById('saveLanguageSettings').addEventListener('click', function() {
                    const defaultLanguage = document.getElementById('defaultLanguage').value;
                    const enabledLanguages = [];
                    
                    document.querySelectorAll('#availableLanguages input[type="checkbox"]:checked').forEach(checkbox => {
                        enabledLanguages.push(checkbox.id.replace('lang-', ''));
                    });
                    
                    Swal.fire(
                        'Settings Saved!',
                        `Default language: ${defaultLanguage}<br>Enabled languages: ${enabledLanguages.join(', ')}`,
                        'success'
                    );
                });
            }
            
            // Email SMTP section
            function initializeEmailSMTP() {
                document.getElementById('saveSmtpSettings').addEventListener('click', function() {
                    Swal.fire('Success!', 'SMTP settings saved successfully', 'success');
                });
                
                document.getElementById('testSmtpBtn').addEventListener('click', function() {
                    const testEmail = prompt('Enter test email address:');
                    if (testEmail) {
                        Swal.fire('Test Email Sent', `Test email sent to ${testEmail}`, 'success');
                    }
                });
            }
            
            // Settings section
            function initializeSettings() {
                document.getElementById('generalSettingsForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    Swal.fire('Success!', 'General settings saved successfully', 'success');
                });
                
                document.getElementById('securitySettingsForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const newPassword = document.getElementById('newPassword').value;
                    const confirmPassword = document.getElementById('confirmPassword').value;
                    
                    if (newPassword !== confirmPassword) {
                        Swal.fire('Error', 'New passwords do not match!', 'error');
                        return;
                    }
                    
                    if (newPassword.length < 6) {
                        Swal.fire('Error', 'Password must be at least 6 characters long!', 'error');
                        return;
                    }
                    
                    Swal.fire('Success!', 'Password updated successfully', 'success');
                    this.reset();
                });
            }
            
            // Helper function to filter tables
            function filterTable(tableId, searchText) {
                const table = document.getElementById(tableId);
                if (!table) return;
                
                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().includes(searchText.toLowerCase())) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                }
            }
            
            // Helper function to export data
            function exportData(data, filename) {
                const csvContent = convertToCSV(data);
                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement("a");
                const url = URL.createObjectURL(blob);
                link.setAttribute("href", url);
                link.setAttribute("download", filename);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                Swal.fire('Exported!', 'Data exported successfully as CSV file.', 'success');
            }
            
            function convertToCSV(objArray) {
                const array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
                let str = '';
                let line = '';
                
                if (array.length === 0) return '';
                
                // Headers
                const headers = Object.keys(array[0]);
                for (let i = 0; i < headers.length; i++) {
                    line += headers[i] + ',';
                }
                line = line.slice(0, -1);
                str += line + '\r\n';
                
                // Data
                for (let i = 0; i < array.length; i++) {
                    let line = '';
                    for (let index in array[i]) {
                        if (line != '') line += ',';
                        line += array[i][index];
                    }
                    str += line + '\r\n';
                }
                return str;
            }
        });
    </script>
</body>
</html>
Back to Directory=ceiIENDB`