<?php
session_start();
include "config.php";
date_default_timezone_set('Asia/Kolkata');

// error_reporting(E_ALL);
// ini_set("display_errors",true);
// error_reporting(0);


if (isset($_SESSION['username'])) {
    $mobile = $_SESSION['username'];
    $user = "SELECT * FROM users WHERE mobile = '$mobile'";
    $uu = mysqli_query($conn, $user);
    $userdata = mysqli_fetch_array($uu);

    $tdate = date("Y-m-d");
    $todayallpayment = $conn->query("SELECT COUNT(`id`) as amt FROM `orders` WHERE `user_id` = '{$userdata["id"]}' AND `status` = 'SUCCESS' AND DATE(`create_date`) = '$tdate' ")->fetch_assoc();
    $todaysuccesspayment = $conn->query("SELECT SUM(`amount`) as amt FROM `orders` WHERE `user_id` = '{$userdata["id"]}' AND `status` = 'SUCCESS' AND DATE(`create_date`) = '$tdate' ")->fetch_assoc();
    $todaypendingpayment = $conn->query("SELECT SUM(`amount`) as amt FROM `orders` WHERE `user_id` = '{$userdata["id"]}' AND `status` = 'PENDING' AND DATE(`create_date`) = '$tdate' ")->fetch_assoc();

    $todayfail = $conn->query("SELECT SUM(`amount`) as amt FROM `orders` WHERE `user_id` = '{$userdata["id"]}' AND `status` = 'FAILURE' AND DATE(`create_date`) = '$tdate' ")->fetch_assoc();

    // $todaysettlement = $conn->query("SELECT SUM(`amount`) as amt FROM `settlement` WHERE `userid` = '{$userdata["id"]}' AND `status` = 'Success' AND DATE(`date`) = '$tdate'")->fetch_assoc();

    $fixednavbar = $userdata["fixed_navbar"];
    $fixedlayout = $userdata["fixed_layout"];
    $fixedsidebar = $userdata["sidebar_layout"];
    $boxstyle = $userdata["box_style"];
    $themecolor = $userdata["theme_color"];

    $class = '';
    if ($fixednavbar == 1) {
        $class .= 'fixed-navbar';
    }
    if ($fixedlayout == 1) {
        $class .= ' fixed-layout';
    }
    if ($fixedsidebar == 1) {
        $class .= ' sidebar-mini';
    }
    if ($boxstyle == 1) {
        $class .= ' boxed-layout';
    }

    $server = $_SERVER["SERVER_NAME"];

?>


<?php
} else {

    header("location:index");
}
?>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title><?php echo $site_settings['brand_name'] ?? ''; ?> | Dashboard</title>
    <!-- GLOBAL MAINLY STYLES-->

    <link href="./assets/new.css" rel="stylesheet">
    <link href="./assets/new2.css" rel="stylesheet" />
  <link rel="shortcut icon" href="../common/img/favicon.png" type="image/x-icon">

    <link href="./assets/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="./assets/vendors/themify-icons/css/themify-icons.css" rel="stylesheet" />
    <!-- PLUGINS STYLES-->
    <link href="./assets/vendors/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
    <!-- THEME STYLES-->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- PAGE LEVEL STYLES-->

    <script type="text/javascript">
        if (window.history.replaceState) {
            window.history.replaceState(null, null, window.location.href);
        }
    </script>
</head>



<style>
    body {
        line-height: 1.2;
    }

    a {
        text-decoration: none !important;
    }

.row {
    padding-top: 20px;
}
    .hand {
        cursor: pointer;
    }

    .table-sm td,
    .table th {
        font-size: 0.98458em;
        border-color: #ebedf2 !important;
        padding: 0.4375rem !important;
    }

    .bg-brown {
        background: brown !important;
    }

    .d-none {
        display: none;
    }

    .m-primary {
        background: #285d29 !important;
        color: white !important;
    }

    [type="checkbox"]:not(:checked),
    [type="checkbox"]:checked {
        position: unset !important;
        left: unset !important;
    }


    .form-check {
        display: block;
        min-height: 1.3125rem;
        padding-left: 1.8em;
        margin-bottom: 0.125rem;
    }

    .form-check .form-check-input {
        float: left;
        margin-left: -1.8em;
    }

    .form-check-input {
        width: 1em;
        height: 1em;
        margin-top: 0.1em;
        vertical-align: top;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 1px solid rgba(0, 0, 0, 0.25);
        appearance: none;
        color-adjust: exact;
    }

    .form-check-input[type=checkbox] {
        border-radius: 0.15em;
    }

    .form-check-input[type=radio] {
        border-radius: 50%;
    }

    .form-check-input:active {
        filter: brightness(90%);
    }

    .form-check-input:focus {
        border-color: #cbd1db;
        outline: 0;
        box-shadow: none;
    }

    .form-check-input:checked {
        background-color: #42bb37;
        border-color: #42bb37;
    }

    .form-check-input:checked[type=checkbox] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }

    .form-check-input:checked[type=radio] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    }

    .form-check-input[type=checkbox]:indeterminate {
        background-color: #42bb37;
        border-color: #42bb37;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    }

    .form-check-input:disabled {
        pointer-events: none;
        filter: none;
        opacity: 0.5;
    }

    .form-check-input[disabled]~.form-check-label,
    .form-check-input:disabled~.form-check-label {
        opacity: 0.5;
    }

    .form-switch {
        padding-left: 2.5em;
    }

    .form-switch .form-check-input {
        width: 2em;
        margin-left: -2.5em;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
        background-position: left center;
        border-radius: 2em;
        transition: background-position 0.15s ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .form-switch .form-check-input {
            transition: none;
        }
    }

    .form-switch .form-check-input:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cbd1db'/%3e%3c/svg%3e");
    }

    .form-switch .form-check-input:checked {
        background-position: right center;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

    .form-check-inline {
        display: inline-block;
        margin-right: 1rem;
    }

    .btn-check {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        pointer-events: none;
    }

    .btn-check[disabled]+.btn,
    .wizard>.actions .btn-check[disabled]+a,
    div.tox .btn-check[disabled]+.tox-button,
    .swal2-popup .swal2-actions .btn-check[disabled]+button,
    .fc .btn-check[disabled]+.fc-button-primary,
    .btn-check:disabled+.btn,
    .wizard>.actions .btn-check:disabled+a,
    div.tox .btn-check:disabled+.tox-button,
    .swal2-popup .swal2-actions .btn-check:disabled+button,
    .fc .btn-check:disabled+.fc-button-primary {
        pointer-events: none;
        filter: none;
        opacity: 0.65;
    }

    .card .card-category {
        font-size: 14px;
        font-weight: 600;
    }

    .card {
        border-radius: 5px !important;
    }

    .card .card-title {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.6;
    }

    .Success {
        color: #ffffff;
        background-color: #59d05d;
    }

    .Failed {
        color: #ffffff;
        background-color: #ff646d;
    }

    .Pending {
        color: #ffffff;
        background: #fbad4c;
    }

    .rl-loading-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    div#loading_ajax {

        background: rgba(0, 0, 0, 0.4);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9998;
    }

    .rl-loading-thumb {
        width: 10px;
        height: 40px;
        background-color: #41f3fd;
        margin: 4px;
        box-shadow: 0 0 12px 3px #0882ff;
        animation: rl-loading 1.5s ease-in-out infinite;
    }

    .rl-loading-thumb-1 {
        animation-delay: 0s;
    }

    .rl-loading-thumb-2 {
        animation-delay: 0.5s;
    }

    .rl-loading-thumb-3 {
        animation-delay: 1s;
    }

    @keyframes rl-loading {
        0% {}

        20% {
            background: white;
            transform: scale(1.5);
        }

        40% {
            background: #41f3fd;
            transform: scale(1);
        }
    }
</style>
<style>
    /* Light/Dark Theme Variables */
    :root {
        /* Light theme variables */
        --primary: #4F46E5;
        --primary-light: #6B7280;
        --secondary: #9333EA;
        --success: #10B981;
        --warning: #F59E0B;
        --danger: #EF4444;
        --white: #FFFFFF;
        --light-gray: #F3F4F6;
        --medium-gray: #E5E7EB;
        --dark-gray: #374151;
        --border-radius: 12px;
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
        --shadow-md: 0 4px 6px rgba(0,0,0,0.06);
        --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
        --transition: all 0.3s ease;
        
        /* Default theme colors */
        /*--bg-primary: #f5f7fa;*/
        /*--bg-panel: #ffffff;*/
        /*--bg-panel-header: rgba(255, 255, 255, 0.85);*/
        /*--text-primary: #374151;*/
        /*--text-secondary: #6B7280;*/
        /*--border-color: #E5E7EB;*/
        /*--neo-bg: #f0f4f8;*/
        /*--neo-shadow1: #d1d9e6;*/
        /*--neo-shadow2: #ffffff;*/
        /*--chart-grid: rgba(0,0,0,0.05);*/
        
        --bg-primary: #121212;
        --bg-panel: #1e1e1e;
        --bg-panel-header: rgba(30, 30, 30, 0.85);
        --text-primary: #E5E7EB;
        --text-secondary: #9CA3AF;
        --border-color: rgba(255, 255, 255, 0.1);
        --neo-bg: #202020;
        --neo-shadow1: #151515;
        --neo-shadow2: #252525;
        --chart-grid: rgba(255,255,255,0.05);
    }
    
    /* Dark theme variables - applied when .dark-mode class is added to body */
    .dark-mode {
        --bg-primary: #121212;
        --bg-panel: #1e1e1e;
        --bg-panel-header: rgba(30, 30, 30, 0.85);
        --text-primary: #E5E7EB;
        --text-secondary: #9CA3AF;
        --border-color: rgba(255, 255, 255, 0.1);
        --neo-bg: #202020;
        --neo-shadow1: #151515;
        --neo-shadow2: #252525;
        --chart-grid: rgba(255,255,255,0.05);
    }
    
    body {
        background-color: var(--bg-primary);
        color: var(--text-primary);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    a {
        text-decoration: none !important;
    }

    .hand {
        cursor: pointer;
    }

    .table-sm td,
    .table th {
        font-size: 0.98458em;
        border-color: #ebedf2 !important;
        padding: 0.4375rem !important;
    }

    .bg-brown {
        background: brown !important;
    }

    .d-none {
        display: none;
    }

    .m-primary {
        background: #285d29 !important;
        color: white !important;
    }

    [type="checkbox"]:not(:checked),
    [type="checkbox"]:checked {
        position: unset !important;
        left: unset !important;
    }


    .form-check {
        display: block;
        min-height: 1.3125rem;
        padding-left: 1.8em;
        margin-bottom: 0.125rem;
    }

    .form-check .form-check-input {
        float: left;
        margin-left: -1.8em;
    }

    .form-check-input {
        width: 1em;
        height: 1em;
        margin-top: 0.1em;
        vertical-align: top;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 1px solid rgba(0, 0, 0, 0.25);
        appearance: none;
        color-adjust: exact;
    }

    .form-check-input[type=checkbox] {
        border-radius: 0.15em;
    }

    .form-check-input[type=radio] {
        border-radius: 50%;
    }

    .form-check-input:active {
        filter: brightness(90%);
    }

    .form-check-input:focus {
        border-color: #cbd1db;
        outline: 0;
        box-shadow: none;
    }

    .form-check-input:checked {
        background-color: #42bb37;
        border-color: #42bb37;
    }

    .form-check-input:checked[type=checkbox] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }

    .form-check-input:checked[type=radio] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    }

    .form-check-input[type=checkbox]:indeterminate {
        background-color: #42bb37;
        border-color: #42bb37;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    }

    .form-check-input:disabled {
        pointer-events: none;
        filter: none;
        opacity: 0.5;
    }

    .form-check-input[disabled]~.form-check-label,
    .form-check-input:disabled~.form-check-label {
        opacity: 0.5;
    }

    .form-switch {
        padding-left: 2.5em;
    }

    .form-switch .form-check-input {
        width: 2em;
        margin-left: -2.5em;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
        background-position: left center;
        border-radius: 2em;
        transition: background-position 0.15s ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .form-switch .form-check-input {
            transition: none;
        }
    }

    .form-switch .form-check-input:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cbd1db'/%3e%3c/svg%3e");
    }

    .form-switch .form-check-input:checked {
        background-position: right center;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

    .form-check-inline {
        display: inline-block;
        margin-right: 1rem;
    }

    .btn-check {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        pointer-events: none;
    }

    .btn-check[disabled]+.btn,
    .wizard>.actions .btn-check[disabled]+a,
    div.tox .btn-check[disabled]+.tox-button,
    .swal2-popup .swal2-actions .btn-check[disabled]+button,
    .fc .btn-check[disabled]+.fc-button-primary,
    .btn-check:disabled+.btn,
    .wizard>.actions .btn-check:disabled+a,
    div.tox .btn-check:disabled+.tox-button,
    .swal2-popup .swal2-actions .btn-check:disabled+button,
    .fc .btn-check:disabled+.fc-button-primary {
        pointer-events: none;
        filter: none;
        opacity: 0.65;
    }

    .card .card-category {
        font-size: 14px;
        font-weight: 600;
    }

    .card {
        border-radius: 5px !important;
    }

    .card .card-title {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.6;
    }

    .Success {
        color: #ffffff;
        background-color: #59d05d;
    }

    .Failed {
        color: #ffffff;
        background-color: #ff646d;
    }

    .Pending {
        color: #ffffff;
        background: #fbad4c;
    }

    .rl-loading-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    div#loading_ajax {

        background: rgba(0, 0, 0, 0.4);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9998;
    }

    .rl-loading-thumb {
        width: 10px;
        height: 40px;
        background-color: #41f3fd;
        margin: 4px;
        box-shadow: 0 0 12px 3px #0882ff;
        animation: rl-loading 1.5s ease-in-out infinite;
    }

    .rl-loading-thumb-1 {
        animation-delay: 0s;
    }

    .rl-loading-thumb-2 {
        animation-delay: 0.5s;
    }

    .rl-loading-thumb-3 {
        animation-delay: 1s;
    }

    @keyframes rl-loading {
        0% {}

        20% {
            background: white;
            transform: scale(1.5);
        }

        40% {
            background: #41f3fd;
            transform: scale(1);
        }
    }

    /* Legal Information Sidebar - Exact Match with compact spacing */
    :root {
        --primary-color: #ff3e6c;
        --secondary-color: #ff0047;
        --dark-color: #0f1b42;
        --light-color: #f8f9fa;
        --success-color: #00c851;
        --accent-color: #ff4081;
        --dark-bg: #121212;
        --dark-card-bg: #1e1e1e;
        --dark-border: rgba(255, 255, 255, 0.05);
        --dark-text: #f8f9fa;
        --dark-text-muted: #adb5bd;
        --dark-shadow: rgba(0, 0, 0, 0.3);
    }
    
    /* Clean sidebar reset */
    .page-sidebar {
        background-color: #343a40 !important;
        color: white !important;
        border-right: none !important;
    }
    
    #sidebar-collapse {
        padding: 0 !important;
    }
    
    /* Admin Block - Match Legal Docs Header */
    .admin-block {
        display: flex !important;
        align-items: center !important;
        padding: 15px !important;
        background-color: rgba(0, 0, 0, 0.15) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    .admin-info {
        margin-left: 10px !important;
    }
    
    .admin-info .font-strong {
        color: white !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    .admin-info small {
        color: #adb5bd !important;
        font-size: 12px !important;
    }
    
    /* Menu styling to exactly match the Legal Information sidebar - COMPACTED */
    .side-menu.metismenu {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .side-menu .heading {
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        padding: 8px 20px !important; /* Reduced padding */
        color: #adb5bd !important;
        background-color: rgba(0, 0, 0, 0.2) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        margin: 0 !important;
    }
    
    .side-menu li {
        margin-bottom: 2px !important; /* Reduced from 15px to 2px */
        position: relative !important;
        border-bottom: none !important;
    }
    
    .side-menu li a {
        color: white !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        padding: 6px 10px !important; /* Reduced from 8px to 6px */
        border-radius: 4px !important;
        transition: all 0.3s ease !important;
        margin: 0 15px !important;
    }
    
    .side-menu li a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }
    
    .side-menu li.active a, 
    .side-menu li a.active {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        font-weight: 500 !important;
        border-left: 3px solid var(--primary-color) !important;
    }
    
    /* Override any MetisMenu specific styles */
    .metismenu a:hover, 
    .metismenu a:focus, 
    .metismenu a:active {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }
    
    .metismenu .active > a {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        font-weight: 500 !important;
        border-left: 3px solid var(--primary-color) !important;
    }
    
    /* Handle any dropdown styling - more compact */
    .metismenu .arrow {
        color: white !important;
        font-size: 14px !important;
    }
    
    .metismenu .collapse {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    .metismenu .collapse a {
        padding-left: 45px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    
    /* Support info box styling - more compact */
    .sidebar-info-box {
        margin: 10px 15px !important; /* Reduced margins */
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
        padding: 12px !important; /* Reduced padding */
        font-size: 12px !important; /* Reduced font size */
    }

    /* Enhanced Icons in Sidebar */
    .side-menu li a i,
    .side-menu li a .sidebar-item-icon {
        width: 22px !important;
        margin-right: 10px !important;
        font-size: 15px !important;
        text-align: center !important;
        color: var(--primary-color) !important; /* Use primary color for icons */
        transition: all 0.3s ease !important;
    }
    
    /* Icon hover effect */
    .side-menu li a:hover i,
    .side-menu li a:hover .sidebar-item-icon {
        transform: scale(1.1) !important; /* Slightly enlarge icon on hover */
        color: white !important; /* Change color on hover */
    }
    
    /* Active state icons */
    .side-menu li.active a i, 
    .side-menu li a.active i,
    .side-menu li.active a .sidebar-item-icon,
    .side-menu li a.active .sidebar-item-icon {
        color: white !important;
    }
    
    /* Add subtle shadow/glow effect to icons */
    .side-menu li a .sidebar-item-icon {
        text-shadow: 0 0 5px rgba(255, 62, 108, 0.3) !important;
    }

    /* Updated Header styling to match sidebar */
    .header {
        background-color: #252a2f !important; /* Slightly darker than sidebar */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    }

    /* Brand area styling */
    .page-brand {
        background-color: rgba(0, 0, 0, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .page-brand .link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 20px !important;
    }

    /* Navbar toolbar styling */
    .nav.navbar-toolbar {
        height: 100% !important;
        display: flex;
        align-items: center;
    }
    
    .nav.navbar-toolbar > li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    
    .nav.navbar-toolbar > li > a {
        color: #adb5bd !important;
        padding: 0 15px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        transition: all 0.3s ease !important;
    }
    
    .nav.navbar-toolbar > li > a:hover,
    .nav.navbar-toolbar > li > a:focus {
        color: white !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* User dropdown styling */
    .dropdown-user .nav-link {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        padding: 0 15px !important;
    }
    
    .dropdown-user .nav-link img {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        margin-right: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    .dropdown-user .nav-link span {
        color: white !important;
        font-weight: 500 !important;
        margin-right: 5px !important;
    }
    
    .dropdown-user .nav-link i {
        color: #adb5bd !important;
        transition: transform 0.3s !important;
    }
    
    .dropdown-user.show .nav-link i {
        transform: rotate(180deg) !important;
    }
    
    /* Dropdown menu styling - Fixed */
    .dropdown-menu {
        background-color: #2a2e33 !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
        padding: 0 !important;
        margin-top: 0 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        min-width: 180px !important;
    }
    
    .dropdown-menu .dropdown-item {
        color: #e9ecef !important;
        padding: 10px 20px !important;
        display: block !important;
        width: 100% !important;
        text-align: inherit !important;
        white-space: nowrap !important;
        background-color: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.2s ease !important;
    }
    
    .dropdown-menu .dropdown-item:last-child {
        border-bottom: none !important;
    }
    
    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }
    
    .dropdown-menu .dropdown-item i {
        margin-right: 10px !important;
        color: var(--primary-color) !important;
        width: 18px !important;
        text-align: center !important;
    }
    
    .dropdown-divider {
        height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Sidebar toggler styling */
    .sidebar-toggler {
        font-size: 20px !important;
        color: #adb5bd !important;
        transition: all 0.3s ease !important;
    }
    
    .sidebar-toggler:hover {
        color: white !important;
        transform: scale(1.1) !important;
    }

    /* Theme Toggle - Updated for better centering */
    .theme-toggle-wrapper {
        margin: 0 15px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        /* Add bottom padding to move it down */
        padding-bottom: 4px;
    }
    
    .theme-toggle {
        --toggle-size: 35px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Push down a bit more */
        top: 4px;
    }
    
    .theme-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .toggle-track {
        position: relative;
        display: inline-block;
        width: var(--toggle-size);
        height: calc(var(--toggle-size) / 2);
        border-radius: calc(var(--toggle-size) / 2);
        background: linear-gradient(to right, #F59E0B, #4F46E5);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .toggle-thumb {
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(var(--toggle-size) / 2 - 4px);
        height: calc(var(--toggle-size) / 2 - 4px);
        border-radius: 50%;
        background: #fff;
        transform: translateX(0);
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    input:checked + .toggle-track .toggle-thumb {
        transform: translateX(calc(var(--toggle-size) / 2));
        background: #1e1e1e;
    }
    
    .toggle-icon {
        font-size: 10px;
        position: absolute;
        transition: all 0.3s ease;
    }
    
    .toggle-icon.light {
        color: #F59E0B;
        opacity: 1;
    }
    
    .toggle-icon.dark {
        color: #E5E7EB;
        opacity: 0;
    }
    
    input:checked + .toggle-track .toggle-icon.light {
        opacity: 0;
    }
    
    input:checked + .toggle-track .toggle-icon.dark {
        opacity: 1;
    }
    
    /* Dark mode overrides for panels */
    .dark-mode .page-content,
    .dark-mode .content-wrapper {
        background-color: var(--bg-primary);
    }
    
    .dark-mode .card,
    .dark-mode .ibox,
    .dark-mode .page-content > div {
        background-color: var(--bg-panel);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    
    .dark-mode .card-header,
    .dark-mode .ibox-head {
        background-color: var(--bg-panel-header);
        border-color: var(--border-color);
    }
    
    .dark-mode .card-title,
    .dark-mode .ibox-title {
        color: var(--text-primary);
    }
    
    .dark-mode .table {
        color: var(--text-primary);
    }
    
    .dark-mode .table thead th {
        background-color: rgba(0, 0, 0, 0.2);
        color: var(--text-secondary);
        border-color: var(--border-color);
    }
    
    .dark-mode .table td, 
    .dark-mode .table th {
        border-color: var(--border-color);
    }
    
    .dark-mode .form-control {
        background-color: var(--bg-panel);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    
    .dark-mode .form-control:focus {
        border-color: var(--primary);
    }
    
    .dark-mode .header {
        background-color: #252a2f;
    }
    
    .dark-mode .page-footer {
        background-color: #1e1e1e;
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    /* Updated flexbox layout for the header - improved alignment */
    .flexbox.flex-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    /* Main navbar toolbar styling - better horizontal alignment */
    .nav.navbar-toolbar {
        height: 100% !important;
        display: flex;
        align-items: center;
    }

    /* Improved right-side toolbar styling for horizontal alignment */
    .navbar-toolbar:last-child {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
    }

    /* Fix top-right menu item alignment */
    .navbar-toolbar:last-child > li {
        display: inline-flex;
        align-items: center;
        height: 100%;
    }

    /* Theme toggler specific placement - adjusted to be lower vertically */
    .theme-toggle-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin: 0;
        padding: 0 10px;
        /* Add bottom padding to move it down */
        padding-bottom: 4px;
    }

    /* Make the toggle more compact and better aligned - pushed down slightly */
    .theme-toggle {
        --toggle-size: 35px;
        margin: 0;
        position: relative;
        /* Push down a bit more */
        top: 4px;
    }

    /* User dropdown styling - ensure perfect alignment with toggle */
    .dropdown-user {
        display: inline-flex;
        align-items: center;
        height: 100%;
        margin: 0;
    }

    /* Adjust padding/margins to ensure items are properly spaced */
    .dropdown-user .nav-link {
        padding: 0 15px !important;
        height: 100%;
        display: flex;
        align-items: center;
    }

    /* For smaller screens, make everything more compact */
    @media (max-width: 768px) {
        .theme-toggle {
            --toggle-size: 26px;
        }
        
        .dropdown-user .nav-link span {
            display: none;
        }
    }
</style>
    <style>
        /* Completely standalone dropdown styles - no dependencies */
        .standalone-dropdown {
            position: relative;
            display: inline-block;
        }
        
        .standalone-dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            min-width: 200px;
            background-color: #2a2e33;
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            border-radius: 4px;
            top: 100%;
        }
        
        .standalone-dropdown-content a {
            color: #e9ecef;
            padding: 12px 20px;
            text-decoration: none;
            display: block;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .standalone-dropdown-content a:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        .standalone-dropdown-content a i {
            margin-right: 10px;
            color: #ff3e6c;
            width: 18px;
            text-align: center;
        }
        
        .standalone-dropdown-content .dropdown-divider {
            height: 0;
            margin: 0;
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .show-dropdown {
            display: block;
        }
        
        /* Make our standalone dropdown adapt to dark mode */
        .dark-mode .standalone-dropdown-content {
            background-color: #1a1a1a;
            border-color: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .standalone-dropdown-content a {
            color: #f0f0f0;
            border-bottom-color: rgba(255, 255, 255, 0.08);
        }
        
        /* Fix for any dropdown toggle that needs to be clickable */
        [data-toggle="dropdown"] {
            cursor: pointer;
        }
    </style>

</head>

<body class="<?= $class ?> dark-mode">

    <div class="rl-loading-container" id="loading_ajax">
        <div class="rl-loading-thumb rl-loading-thumb-1"></div>
        <div class="rl-loading-thumb rl-loading-thumb-2"></div>
        <div class="rl-loading-thumb rl-loading-thumb-3"></div>
    </div>

    <div class="page-wrapper">
        <!-- START HEADER-->
        <header class="header">
            <div class="page-brand">
                <a class="link" href="dashboard">
                    <span class="brand"><?php echo $site_settings['brand_name'] ?? ''; ?></span>
                    </span>
                    <span class="brand-mini">AC</span>
                </a>
            </div>
            <div class="flexbox flex-1">
                <!-- START TOP-LEFT TOOLBAR-->
                <ul class="nav navbar-toolbar">
                    <li>
                        <a class="nav-link sidebar-toggler js-sidebar-toggler"><i class="ti-menu"></i></a>
                    </li>
                    <!-- <li>
                            <form class="navbar-search" action="javascript:;">
                                <div class="rel">
                                    <span class="search-icon"><i class="ti-search"></i></span>
                                    <input class="form-control" placeholder="Search here...">
                                </div>
                            </form>
                        </li> -->
                </ul>
                <!-- END TOP-LEFT TOOLBAR-->
                <!-- START TOP-RIGHT TOOLBAR-->
                <ul class="nav navbar-toolbar">
                                        <li class="theme-toggle-wrapper">
                        <label class="theme-toggle" for="theme-toggle">
                            <input type="checkbox" id="theme-toggle" checked>
                            <div class="toggle-track">
                                <div class="toggle-thumb">
                                    <i class="fa fa-sun-o toggle-icon light"></i>
                                    <i class="fa fa-moon-o toggle-icon dark"></i>
                                </div>
                            </div>
                        </label>
                    </li>
                    <li class="dropdown dropdown-user">
                        <a class="nav-link dropdown-toggle link" data-toggle="dropdown">
                            <img src="./common/img/review/u1.png" />
                            <span></span><?php echo $userdata['role']; ?><i class="fa fa-angle-down m-l-5"></i></a>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="profile"><i class="fa fa-user"></i>Profile</a>
                            <!-- <a class="dropdown-item" href="javascript:;"><i class="fa fa-cog"></i>Settings</a>
                                <a class="dropdown-item" href="javascript:;"><i class="fa fa-support"></i>Support</a> -->
                            <li class="dropdown-divider"></li>
                            <a class="dropdown-item" href="logout"><i class="fa fa-power-off"></i>Logout</a>
                        </ul>
                    </li>
                </ul>
                <!-- END TOP-RIGHT TOOLBAR-->
            </div>
        </header>
        <!-- END HEADER-->
        <!-- START SIDEBAR-->
        <nav class="page-sidebar" id="sidebar">
            <div id="sidebar-collapse">
                <div class="admin-block d-flex">
                    <div>
                        <img src="./common/img/review/u1.png" width="45px" />
                    </div>
                    <div class="admin-info">
                        <div class="font-strong"><?php echo $userdata['name']; ?></div><small>
                            <?php if ($userdata['role'] == 'Admin') {
                                echo "Admin";
                            } else {
                                echo "API Partner";
                            } ?>
                        </small>
                    </div>
                </div>
                <ul class="side-menu metismenu">
                    <li>
                        <a class="active" href="dashboard"><i class="sidebar-item-icon fa fa-th-large"></i>
                            <span class="nav-label">Dashboard</span>
                        </a>
                    </li>
                    <?php
                    if ($userdata['role'] == 'Admin') {
                    ?>

                        </li>

                        <li class="heading">Website Managment</li>
                        <li>

                        <li>
                            <a href="sitesetting"> <i class="sidebar-item-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                                        <path d="M9.405 1.05a1 1 0 0 0-2.81 0A1 1 0 0 0 5.674 2.8a5.56 5.56 0 0 0-1.046.445 1 1 0 0 0-.05 1.711l1.57.789a1 1 0 0 0 .946-.043l1.177-.885a1 1 0 0 0 0-1.61l-1.177-.885a1 1 0 0 0-1.553.494A4.57 4.57 0 0 0 6.173 3c.378 0 .753.052 1.118.147l1.105-.55a5.56 5.56 0 0 0 .176-2.547zM11.824 3.97c-.041.142-.082.283-.126.426l1.177.885a1 1 0 0 0 .946.043l1.57-.789a1 1 0 0 0 .05-1.711 5.56 5.56 0 0 0-1.046-.445A1 1 0 0 0 12.69 2.8a1 1 0 0 0-1.384-.689zM5.5 6.93a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-7.5 3.12a1 1 0 1 0 1 1 1 1 0 0 0-1-1zm9.5 0a1 1 0 1 0 1 1 1 1 0 0 0-1-1zM4.221 13.973a5.56 5.56 0 0 0 1.046-.445 1 1 0 0 0 .05-1.711l-1.57-.789a1 1 0 0 0-.946.043l-1.177.885a1 1 0 0 0 1.553.494 4.57 4.57 0 0 0 1.872-.648zM12.816 10.23a1 1 0 0 0 0-2 1 1 0 0 0 0 2zM12.333 13.72c.041-.142.082-.283.126-.426l-1.177-.885a1 1 0 0 0-.946-.043l-1.57.789a1 1 0 0 0-.05 1.711 5.56 5.56 0 0 0 1.046.445A1 1 0 0 0 11.58 14a1 1 0 0 0 .811-1.188z" />
                                    </svg>
                                </i>
                                <span class="nav-label">Site Settings</span>
                            </a>
                        </li>


                        <li>
                            <a href="add_api"> <i class="sidebar-item-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                                        <path d="M9.405 1.05a1 1 0 0 0-2.81 0A1 1 0 0 0 5.674 2.8a5.56 5.56 0 0 0-1.046.445 1 1 0 0 0-.05 1.711l1.57.789a1 1 0 0 0 .946-.043l1.177-.885a1 1 0 0 0 0-1.61l-1.177-.885a1 1 0 0 0-1.553.494A4.57 4.57 0 0 0 6.173 3c.378 0 .753.052 1.118.147l1.105-.55a5.56 5.56 0 0 0 .176-2.547zM11.824 3.97c-.041.142-.082.283-.126.426l1.177.885a1 1 0 0 0 .946.043l1.57-.789a1 1 0 0 0 .05-1.711 5.56 5.56 0 0 0-1.046-.445A1 1 0 0 0 12.69 2.8a1 1 0 0 0-1.384-.689zM5.5 6.93a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-7.5 3.12a1 1 0 1 0 1 1 1 1 0 0 0-1-1zm9.5 0a1 1 0 1 0 1 1 1 1 0 0 0-1-1zM4.221 13.973a5.56 5.56 0 0 0 1.046-.445 1 1 0 0 0 .05-1.711l-1.57-.789a1 1 0 0 0-.946.043l-1.177.885a1 1 0 0 0 1.553.494 4.57 4.57 0 0 0 1.872-.648zM12.816 10.23a1 1 0 0 0 0-2 1 1 0 0 0 0 2zM12.333 13.72c.041-.142.082-.283.126-.426l-1.177-.885a1 1 0 0 0-.946-.043l-1.57.789a1 1 0 0 0-.05 1.711 5.56 5.56 0 0 0 1.046.445A1 1 0 0 0 11.58 14a1 1 0 0 0 .811-1.188z" />
                                    </svg>
                                </i>
                                <span class="nav-label">API Settings</span>
                            </a>
                        </li>
                        <li>
                            <a href="manage_subscription"> <i class="sidebar-item-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                                        <path d="M9.405 1.05a1 1 0 0 0-2.81 0A1 1 0 0 0 5.674 2.8a5.56 5.56 0 0 0-1.046.445 1 1 0 0 0-.05 1.711l1.57.789a1 1 0 0 0 .946-.043l1.177-.885a1 1 0 0 0 0-1.61l-1.177-.885a1 1 0 0 0-1.553.494A4.57 4.57 0 0 0 6.173 3c.378 0 .753.052 1.118.147l1.105-.55a5.56 5.56 0 0 0 .176-2.547zM11.824 3.97c-.041.142-.082.283-.126.426l1.177.885a1 1 0 0 0 .946.043l1.57-.789a1 1 0 0 0 .05-1.711 5.56 5.56 0 0 0-1.046-.445A1 1 0 0 0 12.69 2.8a1 1 0 0 0-1.384-.689zM5.5 6.93a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-7.5 3.12a1 1 0 1 0 1 1 1 1 0 0 0-1-1zm9.5 0a1 1 0 1 0 1 1 1 1 0 0 0-1-1zM4.221 13.973a5.56 5.56 0 0 0 1.046-.445 1 1 0 0 0 .05-1.711l-1.57-.789a1 1 0 0 0-.946.043l-1.177.885a1 1 0 0 0 1.553.494 4.57 4.57 0 0 0 1.872-.648zM12.816 10.23a1 1 0 0 0 0-2 1 1 0 0 0 0 2zM12.333 13.72c.041-.142.082-.283.126-.426l-1.177-.885a1 1 0 0 0-.946-.043l-1.57.789a1 1 0 0 0-.05 1.711 5.56 5.56 0 0 0 1.046.445A1 1 0 0 0 11.58 14a1 1 0 0 0 .811-1.188z" />
                                    </svg>
                                </i>
                                <span class="nav-label">Manage Subscription</span>
                            </a>
                        </li>

                        <li class="heading">User Managment</li>
                        <li>
                            <a href="add_merchant"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-add" viewBox="0 0 16 16">
                                        <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0m-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
                                        <path d="M8.256 14a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z" />
                                    </svg></i>
                                <span class="nav-label">Add User</span>
                            </a>
                        </li>
                        <li>
                            <a href="merchant_list"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-check" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0" />
                                    </svg></i>
                                <span class="nav-label">User List</span>
                            </a>
                        </li>
                    <?php
                    }
                    ?>
                    <li class="heading">Merchant Setting</li>
                    <li>
                        <a href="connect_merchant"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
                                    <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
                                </svg></i>
                            <span class="nav-label">Connect Merchant</span>
                        </a>
                    </li>
                    <li>
                        <a href="payment_link"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16">
                                    <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" />
                                </svg></i>
                            <span class="nav-label">Payment Link</span>
                        </a>
                    </li>
                    <li>
                        <a href="transactions"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-check" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0" />
                                </svg></i>
                            <span class="nav-label">Transactions</span>
                        </a>
                    </li>
                    <li>
                        <a href="subscription"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-check" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0" />
                                    <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
                                </svg></i>
                            <span class="nav-label">Subscription</span>
                        </a>
                    </li>
                    </li>
                    <li class="heading">Account Setting</li>
                    <li>
                    <li>
                        <a href="profile"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
                                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1" />
                                </svg></i>
                            <span class="nav-label">Manage Profile</span>
                        </a>
                    </li>
                    <li>
                        <a href="change_password"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
                                    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2M5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1" />
                                </svg></i>
                            <span class="nav-label">Change Password</span>
                        </a>
                    </li>
                    </li>
                    <!-- <li class="heading">Developer Setting</li> -->
                    <li>
                    <li>
                        <a href="apidetails"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
                                    <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0m6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0" />
                                </svg></i>
                            <span class="nav-label">API Details</span>
                        </a>
                    </li>
                    <li>
                        <a href="simple_code"><i class="sidebar-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
                                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
                                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
                                </svg></i>
                            <span class="nav-label">Sample Code (SDK)</span>
                        </a>
                    </li>

                </ul>
            </div>
        </nav>
        <!-- END SIDEBAR-->
        <div class="content-wrapper">

            <!-- BEGIN THEME CONFIG PANEL-->
            <!-- END THEME CONFIG PANEL-->

            <script disable-devtool-auto="" src="https://<?php echo $_SERVER["SERVER_NAME"] ?>/common/disable-devtool.js" data-url="https://www.google.com/"></script>

            <script>
                // Show content when the page is fully loaded
                window.onload = function() {
                    document.getElementById("loading_ajax").style.display = "none";
                };
            </script>


            <script src="./assets/js/app.js" type="text/javascript" defer></script>
            <script src="./assets/js/app.min.js" type="text/javascript" defer></script>
            
                        <script>
                // Show content when the page is fully loaded
                window.onload = function() {
                    document.getElementById("loading_ajax").style.display = "none";
                    // Set active menu item based on current page
                    const currentPage = window.location.pathname.split('/').pop().split('.')[0];
                    const menuItems = document.querySelectorAll('.side-menu li a');
                    
                    menuItems.forEach(item => {
                        // Remove active class from all items first
                        item.classList.remove('active');
                        item.parentElement.classList.remove('active');
                        
                        // Get the href attribute and extract the page name
                        const href = item.getAttribute('href');
                        if (href && href === currentPage) {
                            item.classList.add('active');
                            item.parentElement.classList.add('active');
                        }
                    });
                    
                    // Apply mobile-first auto collapse
                    if (window.innerWidth <= 768) {
                        document.body.classList.add('sidebar-mini');
                    }
                    
                    // Setup sidebar toggle
                    setupSidebarToggle();

                    // Setup theme toggle
                    setupThemeToggle();
                };

                // Setup theme toggle functionality
                function setupThemeToggle() {
                    const themeToggle = document.getElementById('theme-toggle');
                    if (themeToggle) {
                        themeToggle.addEventListener('change', function() {
                            if (this.checked) {
                                enableDarkMode();
                            } else {
                                disableDarkMode();
                            }
                        });
                    }
                }

                // Enable dark mode and save preference
                function enableDarkMode() {
                    document.body.classList.add('dark-mode');
                    localStorage.setItem('theme', 'dark');
                    
                    // Update database via XHR
                    // updateThemeInDatabase('dark');
                }

                // Disable dark mode and save preference
                function disableDarkMode() {
                    document.body.classList.remove('dark-mode');
                    localStorage.setItem('theme', 'light');
                    
                    // Update database via XHR
                    // updateThemeInDatabase('light');
                }
                
                // Update theme in database
                // function updateThemeInDatabase(theme) {
                //     const xhr = new XMLHttpRequest();
                //     xhr.open('POST', window.location.pathname, true);
                //     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                //     xhr.onreadystatechange = function() {
                //         if (xhr.readyState === 4 && xhr.status === 200) {
                //             console.log('Theme updated:', theme);
                //         }
                //     };
                //     xhr.send('action=update_theme&theme=' + theme);
                // }
                
                // Super simple sidebar toggler setup
                function setupSidebarToggle() {
                    // Get all togglers
                    const toggleBtns = document.querySelectorAll('.sidebar-toggler, .js-sidebar-toggler');
                    
                    // Add direct click handler to each toggler
                    toggleBtns.forEach(function(btn) {
                        // First remove any existing click handlers
                        const newBtn = btn.cloneNode(true);
                        btn.parentNode.replaceChild(newBtn, btn);
                        
                        // Now add a clean click handler
                        newBtn.addEventListener('click', function(e) {
                            e.preventDefault();
                            document.body.classList.toggle('sidebar-mini');
                            return false;
                        });
                    });
                    
                    // Also handle checkbox toggle in settings
                    const checkToggler = document.getElementById('_fixedSidebar');
                    if (checkToggler) {
                        checkToggler.addEventListener('change', function() {
                            if (this.checked) {
                                document.body.classList.add('sidebar-mini');
                            } else {
                                document.body.classList.remove('sidebar-mini');
                            }
                        });
                    }
                }
                
                // Mobile response - auto-collapse on small screens
                window.addEventListener('resize', function() {
                    if (window.innerWidth <= 768) {
                        document.body.classList.add('sidebar-mini');
                    }
                });
                
                // Execute setup immediately and after a short delay to catch any late-loading togglers
                setTimeout(setupSidebarToggle, 0);
                setTimeout(setupSidebarToggle, 500);
            </script>
            
            <!-- END PAGE CONTENT-->
<footer class="page-footer">
    <div class="font-13">2025 © <b>PaglaUPI</b> - All rights reserved.</div>
    <div class="to-top"><i class="fa fa-angle-double-up"></i></div>
</footer>