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

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="https://laravel.com/img/favicon/favicon-16x16.png" type='image/x-icon'>
        <title>{$_title} - {$_c['CompanyName']}</title>
        <link rel="stylesheet" href="ui/ui/assets/vendor/chartist/css/chartist.min.css">
        <link href="ui/ui/assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
        <link href="ui/ui/assets/css/style.css" rel="stylesheet">
        <link rel="stylesheet" href="ui/ui/fonts/ionicons/css/ionicons.min.css">
        <link rel="stylesheet" href="ui/ui/fonts/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="ui/ui/styles/select2.min.css" />
        <link rel="stylesheet" href="ui/ui/styles/select2-bootstrap.min.css" />
        <link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
        <link rel="stylesheet" href="ui/ui/styles/plugins/pace.css" />
        <link rel="stylesheet" href="ui/ui/summernote/summernote.min.css" />
        <link href="https://fonts.googleapis.com/css2?family=Mnter:wght@400;700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
        <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>

            <style>

.content-header {
            list-style-type: none;
            padding: 15px;
            background-color: #f6f9fcaf;

        }

        @media (max-width: 767px) {
            .content {
                padding: 0 15px !important;
                background-color: #f6f9fcaf;
            }
        }

        .content {
            padding: 25px !important;
            background-color: #f6f9fcaf;

        }

        .content-wrapper,
        .right-side {
            min-height: 100%;
            background-color: #d3dbe4;
            z-index: 800;
        }

        .panel-primary {
            border-color: #333;
        }

        .panel {
            margin-bottom: 20px;
            background-color: #ffffffa9;
            border: 2px solid;
            border-color: rgba(221, 224, 255, .54);
            border-radius: 25px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0px 4px 30px rgba(221, 224, 255, .54);
        }

        .panel-primary>.panel-heading {
            color: inherit;
            background-color: transparent;
            border-color: transparent;
            border-bottom-right-radius: 21px;
            border-bottom-left-radius: 21px;
        }

        .panel-success>.panel-heading {
            border-bottom-right-radius: 21px;
            border-bottom-left-radius: 21px;
        }

        .panel-cron-success>.panel-heading {
            border-bottom-right-radius: 21px;
            border-bottom-left-radius: 21px;
            color: #fff;
            background-color: #169210;
            border-color: #25e01c;

        }

        .panel-cron-warning>.panel-heading {
            border-bottom-right-radius: 21px;
            border-bottom-left-radius: 21px;
            color: #350808;
            background-color: #efeb0a;
            border-color: #efeb0a;
        }
        .panel-cron-danger>.panel-heading {
            border-bottom-right-radius: 21px;
            border-bottom-left-radius: 21px;
            color: #fff;
            background-color: #e61212;
            border-color: #df1335;
        }

        .panel-danger>.panel-heading {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

        .panel-heading {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
        }

        .content .row [class*=col-] .box {
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0px 4px 30px rgba(221, 224, 255, .54);
            -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            -ms-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            -webkit-border-radius: 1px !important;
            -moz-border-radius: 1px !important;
            -ms-border-radius: 1px !important;
            border-radius: 15px !important;
            border-color: rgba(221, 224, 255, .54);
        }

        .box.box-solid.box-primary>.box-header {
            color: inherit;
            background-color: transparent;
            border-color: transparent;
        }

        .box.box-solid.box-info>.box-header {
            color: inherit;
            background-color: transparent;
            border-color: transparent;
        }

        .box.box-solid.box-danger>.box-header {
            color: inherit;
            background-color: transparent;
            border-color: transparent;
        }

        .box.box-solid.box-warning>.box-header {
            color: inherit;
            background-color: transparent;
            border-color: transparent;
        }

        .box.box-solid.box-default>.box-header {
            color: inherit;
            background-color: transparent;
            border-color: transparent;
        }

        .box-footer {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 25px;
            border-bottom-left-radius: 25px;
            border-top: 1px solid transparent;
            padding: 10px;
            background-color: inherit;
            border-radius: 15px;
        }

        .panel-footer {
            padding: 10px 15px;
            background-color: inherit;
            border-top: 1px solid transparent;
            border-bottom-right-radius: 25px;
            border-bottom-left-radius: 25px;
        }

        .box {
            position: relative;
            border-radius: 25px;
            background: inherit;
            border-top: 3px solid #d2d6de;
            margin-bottom: 20px;
            width: 100%;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0px 4px 30px rgba(221, 224, 255, .54);
        }

        .panel-success>.panel-heading {
            color: #3c763d;
            background-color: transparent;
            border-color: #d6e9c6;
        }

        .content-header>h1 {
            font-weight: bold;
        }

         .box.box-solid.box-primary > .box-header .btn {
            color: inherit;
        }

        .box-header>.fa,
        .box-header>.glyphicon,
        .box-header>.ion,
        .box-header .box-title {
            font-weight: bold;
        }

        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li>a {
            font-weight: bold;
        }

        .main-header .logo .logo-lg {
            font-weight: bold;
        }

        
        .panel-heading {
            padding: 10px 15px;
            border-bottom: 0px solid transparent;
            border-top-right-radius: 21px;
            border-top-left-radius: 21px;
        }
        .mulish-font {
            font-family: 'Mulish', sans-serif;
        }
        .font-bold {
            font-weight: bold;
        }
        ::-moz-selection {
              
              color: red;
              background: yellow;
         }
 
 
 
 
 
         ::selection {
             color: red;
             background: yellow;
         }
 
         .select2-container .select2-selection--single .select2-selection__rendered {
             margin-top: 0px !important;
         }
 
         @media (min-width: 768px) {
             .outer {
                 height: 200px
                     /* Or whatever */
             }
         }
 
         th:first-child,
         td:first-child {
             position: sticky;
             left: 0px;
             background-color: #f9f9f9;
         }
 
 
         .text1line {
             display: block;
             /* or inline-block */
             text-overflow: ellipsis;
             word-wrap: break-word;
             overflow: hidden;
             max-height: 1em;
             line-height: 1em;
         }
 
 
         .loading {
             pointer-events: none;
             opacity: 0.7;
         }
 
         .loading::after {
             content: "";
             display: inline-block;
             width: 16px;
             height: 16px;
             vertical-align: middle;
             margin-left: 10px;
             border: 2px solid #fff;
             border-top-color: transparent;
             border-radius: 50%;
             animation: spin 0.8s infinite linear;
         }
 
         @keyframes spin {
             0% {
                 transform: rotate(0deg);
             }
 
             100% {
                 transform: rotate(360deg);
             }
         }
 
        /*
          * maintenance top-bar 
          */
 
          .notification-top-bar {
             position: fixed;
             top: 0;
             left: 0;
             height: 40px;
             line-height: 40px;
             width: 100%;
             background: #ec2106;
             text-align: center;
             color: #d10d34;
             font-family: serif;
             font-weight: bolder;
             font-size: 14px;
             z-index: 9999;
             box-sizing: border-box;
             padding: 0 10px;
         }
 
         .notification-top-bar p {
             padding: 0;
             margin: 0;
         }
 
         .notification-top-bar p a {
             padding: 5px 10px;
             border-radius: 3px;
             background: #FFF;
             color: #30fc52;
             font-weight: bold;
             text-decoration: none;
             display: inline;
             font-size: inherit;
         }
 
         @media (max-width: 600px) {
             .notification-top-bar {
                 font-size: 12px;
                 height: auto;
                 line-height: normal;
                 padding: 10px;
             }
 
             .notification-top-bar p a {
                 padding: 5px 10px;
                 margin: 5px 0;
                 font-size: 10px;
                 display: inline-block;
             }
         }
        .user-container {
    position: relative;
    display: inline-block;
}

.user-image {
    width: 50px; /* Adjust size as necessary */
    height: 50px;
    border-radius: 50%;
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: green; /* Green dot for online status */
    border: 2px solid white; /* White border around the dot */
}

.user-container.offline .online-indicator {
    background-color: gray; /* Gray dot for offline status */
}

/* Basic Search Bar Styles */
.wrap {
    width: 30%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
}

.search {
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid #fc5130;
    background-color: #fc5130;
    color: white;
    cursor: pointer;
    width: 50%;
    height: 50%;
}

.search:hover {
    background-color: #fc5130;
}

/* Translucent Search Overlay */
.search-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Translucent Search Container */
.search-container {
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Translucent Input Field */
.searchTerm {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.7); /* Translucent input */
}

/* Search Results Styles */
.search-results {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

.search-results li {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.search-results li:hover {
    background-color: rgba(245, 245, 245, 0.8); /* Translucent hover effect */
}

/* Cancel Button */
.cancelButton {
    padding: 10px 20px;
    background-color: rgba(244, 67, 54, 0.8); /* Semi-transparent red */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.cancelButton:hover {
    background-color: rgba(211, 47, 47, 0.8); /* Slightly darker red */
}
/* Container for user avatar and dropdown */
.header-profile {
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for floating effect */
}

/* Apply floating effect when hovering over the entire profile container */
.header-profile:hover .card-body {
    transform: translateY(-10px); /* Moves the card body up when hovered */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Adds a shadow for the floating feel */
}

/* Apply effect to the user-container and image as well */
.user-container {
    position: relative;
    display: inline-block;
}

.user-image {
    width: 50px; /* Adjust size as necessary */
    height: 50px;
    border-radius: 50%;
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: green; /* Green dot for online status */
    border: 2px solid white; /* White border around the dot */
}

.header-info {
    transition: color 0.3s ease; /* Transition for text color change */
}

/* Optional: Change the text color when hovering */
.header-profile:hover .header-info p {
    color: #007bff; /* Change text color on hover */
}

.card-body {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for floating effect */
    padding: 15px;
}

/* Optional: Adjust dropdown card shadow and behavior */
.dropdown-menu {
    box-shadow: none; /* Default state */
}

/* Adjust appearance of the profile name */
.header-info p {
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
}
.dashboard_bar {
    font-family: 'Dancing Script', cursive; /* Example of a handwritten font */
    font-size: 20px; /* Adjust size as needed */
    font-weight: bold; /* Optional, if you want it to be bold */
    color: #333; /* Adjust text color */
    letter-spacing: 0.2px; /* Optional, for better readability */
}
.delete-btn {
            background-color: #fc5130; /* Red background color */
            color: white; /* White text */
            border: none; /* Remove the border */
            padding: 10px 20px; /* Add some padding */
            font-size: 16px; /* Set font size */
            cursor: pointer; /* Change cursor to pointer */
            border-radius: 5px; /* Optional: rounded corners */
            transition: background-color 0.3s ease; /* Smooth transition effect */
        }

        .delete-btn:hover {
            background-color: #e04e1a; /* Darker red color on hover */
        }
 /* Ensuring the headers (h1, h2, etc.) are bold and centered */
 .content-header h1,
.content-header h2,
.content-header h3,
.content-header h4,
.content-header h5,
.content-header h6 {
    font-weight: bold; /* Make all headers bold */
    text-align: center; /* Center the headers */
}

/* Panel Header */
.panel-heading {
    padding: 10px 15px;
    border-bottom: 0px solid transparent;
    border-top-right-radius: 21px;
    border-top-left-radius: 21px;
    font-weight: bold; /* Make panel headers bold */
    text-align: center; /* Center the panel header */
}

/* Box Header */
.box-header {
    font-weight: bold; /* Make box headers bold */
    text-align: center; /* Center the box header */
}

/* Box Header for specific types */
.box.box-solid.box-primary > .box-header,
.box.box-solid.box-info > .box-header,
.box.box-solid.box-danger > .box-header,
.box.box-solid.box-warning > .box-header,
.box.box-solid.box-default > .box-header {
    font-weight: bold; /* Ensure these box headers are bold */
    text-align: center; /* Center the box header */
}

/* Additional styles for bold text in the card or box body */
.card-body,
.panel-body {
    font-weight: normal; /* Set normal font weight for card body text */
}
/* Card Header */
.card-header {
    font-weight: bold; /* Make the card header bold */
    text-align: center; /* Center the card header */
    padding: 15px; /* Adjust padding as needed */
    background-color: #f7f7f7; /* Optional: add a light background color */
    border-top-left-radius: 15px; /* Rounded top-left corner */
    border-top-right-radius: 15px; /* Rounded top-right corner */
    border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Light border below the header */
}

/* Card Title */
.card-header .card-title {
    font-weight: bold; /* Make the card title bold */
    text-align: center; /* Center the title */
    font-size: 18px; /* Set the desired font size */
    color: #333; /* Set the text color */
}

/* Optional: Hover effect for the card header */
.card-header:hover {
    background-color: #e0e0e0; /* Slight change in background color on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.021); /* Add subtle shadow effect */
}

/* Card body (content within the card) */
.card-body {
    padding: 20px; /* Padding for card body */
    font-size: 16px; /* Font size for content */
    border-bottom-left-radius: 15px; /* Rounded bottom-left corner */
    border-bottom-right-radius: 15px; /* Rounded bottom-right corner */
}
 /* Content Styles */
 .content-header {
                list-style-type: none;
                padding: 15px;
                background-color: #f6f9fcaf;
            }
        
            .content {
                padding: 25px !important;
                background-color: #f6f9fcaf;
            }
        
            @media (max-width: 767px) {
                .content {
                    padding: 0 15px !important;
                    background-color: #f6f9fcaf;
                }
            }
        
            .content-wrapper,
            .right-side {
                min-height: 100%;
                background-color: #d3dbe4;
                z-index: 800;
            }
        
            /* Panel Styles */
            .panel {
                margin-bottom: 20px;
                background-color: #ffffffa9;
                border: 2px solid rgba(221, 224, 255, .54);
                border-radius: 25px;
                box-shadow: 0px 4px 30px rgba(221, 224, 255, .54);
                transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for shadow */
            }
        
            .panel:hover {
                box-shadow: 0px 6px 40px rgba(221, 224, 255, .7); /* Darker shadow on hover */
                transform: translateY(-5px); /* Slight lift effect on hover */
            }
        
            .panel-heading {
                padding: 10px 15px;
                border-bottom: 1px solid transparent;
                background-color: transparent;
                border-radius: 21px;
            }
        
            .panel-footer {
                padding: 10px 15px;
                background-color: inherit;
                border-top: 1px solid transparent;
                border-radius: 25px;
            }
        
            /* Box Styles */
            .box {
                position: relative;
                background: inherit;
                margin-bottom: 20px;
                border-radius: 25px;
                border-top: 3px solid #d2d6de;
                box-shadow: 0px 4px 30px rgba(221, 224, 255, .54);
                transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for box-shadow */
            }
        
            .box:hover {
                box-shadow: 0px 6px 20px rgba(221, 224, 255, .7); /* Darker shadow on hover */
                transform: translateY(-5px); /* Lift effect */
            }
        
            .box-footer {
                padding: 10px;
                background-color: inherit;
                border-radius: 15px;
                border-top: 1px solid transparent;
            }
        
            /* Box Header Styles */
            .box-header {
                color: inherit;
                background-color: transparent;
                border-color: transparent;
            }
        
            /* Custom Panel Header Styles (success, danger, etc.) */
            .panel-cron-success>.panel-heading {
                color: #fff;
                background-color: #169210;
                border-color: #25e01c;
            }
        
            .panel-cron-warning>.panel-heading {
                color: #350808;
                background-color: #efeb0a;
                border-color: #efeb0a;
            }
        
            .panel-cron-danger>.panel-heading {
                color: #fff;
                background-color: #e61212;
                border-color: #df1335;
            }
        
            /* Panel Primary Header */
            .panel-primary>.panel-heading {
                color: inherit;
                background-color: transparent;
                border-color: transparent;
                border-radius: 21px;
            }
        
            /* Box Solid Header Styles */
            .box.box-solid.box-primary>.box-header,
            .box.box-solid.box-info>.box-header,
            .box.box-solid.box-danger>.box-header,
            .box.box-solid.box-warning>.box-header,
            .box.box-solid.box-default>.box-header {
                color: inherit;
                background-color: transparent;
                border-color: transparent;
            }
        
            /* Content Header Styling */
            .content-header>h1 {
                font-weight: bold;
            }
        
            /* User Image and Status Styles */
            .user-container {
                position: relative;
                display: inline-block;
            }
        
            .user-image {
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        
            .online-indicator {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: green;
                border: 2px solid white;
            }
        
            .user-container.offline .online-indicator {
                background-color: gray;
            }
        
            /* Floating Effect on Profile Container */
            .header-profile {
                position: relative;
                display: inline-block;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
        
            .header-profile:hover .card-body {
                transform: translateY(-10px); /* Moves the card body up when hovered */
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Adds a shadow for floating feel */
            }
        
            .card-body {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                padding: 15px;
            }
           /* Preloader styles */
    #preloader {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* Full screen */
        background-color: #eef5f8f6; /* Background color */
    }

    /* Waviy animation styles */
    .waviy {
        display: flex;
        font-size: 5em;
        font-weight: bold;
        color: #fc5130; /* Handwriting color */
        font-family: 'Dancing Script', cursive; /* Handwriting font */
    }

    .waviy span {
        position: relative;
        display: inline-block;
        animation: hover 1.5s infinite ease-in-out;
        animation-delay: calc(0.1s * var(--i)); /* Delay based on order */
    }

    @keyframes hover {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px); /* Hover effect */
        }
    }
     /* Example styling for the welcome message */
     #welcome-message {
            padding: 15px;
            background-color: #fc5130;
            color: white;
            font-size: 1.5em;
            font-family: 'Arial', sans-serif;
            margin: 20px 0;
            border-radius: 8px;
            display: none; /* Hidden by default */
        }
    </style>
        {if isset($xheader)}
        {$xheader}
        {/if}
    </head>

    <body>
           <!-- Preloader start -->
    <div id="preloader">
        <div class="waviy">
            <span style="--i:1">X</span>
            <span style="--i:2">t</span>
            <span style="--i:3">r</span>
            <span style="--i:4">e</span>
            <span style="--i:5">m</span>
            <span style="--i:6">e</span>
            <span style="--i:7">B</span>
            <span style="--i:8">i</span>
            <span style="--i:9">l</span>
            <span style="--i:10">l</span>
            <span style="--i:11">i</span>
            <span style="--i:12">n</span>
            <span style="--i:13">g</span>
        </div>
    </div>
    <!-- Preloader end -->

        <!--**********************************
            Main wrapper start
                ***********************************-->
        <div id="main-wrapper">

            <!--**********************************
                    Nav header start
                ***********************************-->
                <!-- Include Google Font link for Dancing Script -->
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">

<div class="nav-header">
    <a href="#" class="brand-logo">
        <i class="fa-brands fa-atlassian fa-rotate-180" style="color: #fc5130;"></i>
        <p class="brand-title" style="font-family: 'Roboto Mono', cursive; font-size: 24px; width: 100px; height: 33px;">XtremeBilling</p>
    </a>
    <div class="nav-control">
        <div class="hamburger">
            <span class="line"></span><span class="line"></span><span class="line"></span>
        </div>
    </div>
</div>

                
            <!--**********************************
                    Nav header end
                ***********************************-->



            <!--**********************************
                    Header start
                ***********************************-->
            <div class="header">
                <div class="header-content">
                    <nav class="navbar navbar-expand">
                        <div class="collapse navbar-collapse justify-content-between">
                            <div class="header-left">
                                <div class="dashboard_bar">
                                    {$_c['CompanyName']}
                                </div>
                            </div>
                            <ul class="navbar-nav header-right">
                                <li class="nav-item">
                                   
                                </li>
                                <!-- Search Button and Overlay -->
                        <div class="wrap" style="margin-right: 15px;">
                            <div>
                                <button id="openSearch" class="search" style="margin-top: 8px;"><i class="fa fa-search x2"></i></button>
                            </div>
                        </div>
        
                        <div id="searchOverlay" class="search-overlay" style="padding: 10px;">
                            <div class="search-container">
                                <input type="text" id="searchTerm" class="searchTerm" placeholder="{Lang::T('Search Users')}" autocomplete="off" style="padding: 10px; margin-bottom: 10px;">
                                <div id="searchResults" class="search-results">
                                    <!-- Search results will be displayed here -->
                                </div>
                                <button type="button" id="closeSearch" class="cancelButton" style="margin-top: 10px;">{Lang::T('Cancel')}</button>
                            </div>
                        </div>

                       
                                <li class="nav-item dropdown header-profile">
                                    <a class="nav-link" href="javascript:void(0);" role="button" data-bs-toggle="dropdown">
                                        <div class="user-container">
                                            <img src="{$UPLOAD_PATH}{$_admin['photo']}.thumb.jpg" 
                                                onerror="this.src='{$UPLOAD_PATH}/admin.default.png'" class="user-image" alt="Avatar">
                                            <span class="online-indicator"></span> <!-- Online Indicator -->
                                        </div>
                                
                                        <div class="header-info">
                                            <p>
                                                {$_admin['fullname']}
                                                <small>{Lang::T($_admin['user_type'])}</small>
                                            </p>
                                        </div>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-end card-body"> <!-- Added card-body class -->
                                        <a class="dropdown-item ai-icon" href="{$_url}settings/change-password"><i class="fa fa-settings"></i>
                                            {Lang::T('Change Password')}</a>
                                        <a class="dropdown-item ai-icon" href="{$_url}settings/users-view/{$_admin['id']}">
                                            <i class="fa fa-person"></i> {Lang::T('My Account')}</a>
                                        <a href="{$_url}logout" class="dropdown-item ai-icon btn btn-primary btn-flat"><i
                                            class="fa fa-power"></i> {Lang::T('Logout')}</a>
                                    </div>
                                </li>
                                
                                
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
            <!--**********************************
                    Header end ti-comment-alt
                ***********************************-->

            <!--**********************************
                    Sidebar start
                ***********************************-->
            <div class="deznav">
                <div class="deznav-scroll dz-demo-content">
                    <ul class="metismenu" id="menu" data-widget="tree">
                        <li {if $_system_menu eq 'dashboard' }class="active" {/if}>
                            <a href="{$_url}dashboard">
                                <i class="ion ion-monitor"></i> <span class="nav-text">{Lang::T('Dashboard')}</span>
                            </a>
                        </li>
                        {$_MENU_AFTER_DASHBOARD}
                        {if !in_array($_admin['user_type'],['Report'])}
                        <li class="{if $_system_menu eq 'services'}active{/if} treeview">
                            <a href="#">
                                <i class="ion ion-cube"></i> <span>{Lang::T('Clients')}</span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-right pull-right"></i>
                                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li {if $_routes[1] eq 'all' }class="active" {/if}><a
                                        href="{$_url}customers">All Clients</a></li>
                                <li {if $_routes[1] eq 'hotspot' }class="active" {/if}><a
                                        href="{$_url}customers/hotspot">Hotspot Clients</a></li>
                                <li {if $_routes[1] eq 'pppoe' }class="active" {/if}><a
                                        href="{$_url}customers/pppoe">PPPOE Clients</a></li>
                                
                                        {$_MENU_PLANS}
                            </ul>
                        </li>
                        {$_MENU_AFTER_CUSTOMERS}
                        <li class="{if $_system_menu eq 'onlineusers'}active{/if} treeview">
                            <a href="#">
                                <i class="fa fa-signal"></i> <span class="nav-text">{Lang::T('Online Clients')}</span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-down pull-right"></i>
                                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li {if $_routes[1] eq 'hotspot' }class="active" {/if}><a
                                        href="{$_url}onlineusers/hotspot">{Lang::T('Hotspot Client')}</a></li>
                                <li {if $_routes[1] eq 'pppoe' }class="active" {/if}><a
                                    href="{$_url}plugin/pppoe">{Lang::T('Pppoe Clients')}</a></li>
                                {$_MENU_ONLINEUSERS}
                            </ul>
                        </li>
                        <li class="{if $_system_menu eq 'plan'}active{/if} treeview">
                            <a href="#">
                                <i class="flaticon-381-layer"></i> <span class="nav-text">{Lang::T('Services')}</span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-down pull-right"></i>
                                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li {if $_routes[1] eq 'list' }class="active" {/if}><a
                                        href="{$_url}plan/list">{Lang::T('Active Clients')}</a></li>
                                {if $_c['disable_voucher'] != 'yes'}
                                    <li {if $_routes[1] eq 'voucher' }class="active" {/if}><a
                                            href="{$_url}plan/voucher">{Lang::T('Vouchers')}</a></li>
                                    <li {if $_routes[1] eq 'refill' }class="active" {/if}><a
                                            href="{$_url}plan/refill">{Lang::T('Refill Client')}</a></li>
                                {/if}
                                <li {if $_routes[1] eq 'recharge' }class="active" {/if}><a
                                        href="{$_url}plan/recharge">{Lang::T('Recharge Client')}</a></li>
                                {if $_c['enable_balance'] == 'yes'}
                                    <li {if $_routes[1] eq 'deposit' }class="active" {/if}><a
                                            href="{$_url}plan/deposit">{Lang::T('Refill Balance')}</a></li>
                                {/if}
                                {$_MENU_SERVICES}
                            </ul>
                        </li>
                    {/if}
                    {$_MENU_AFTER_SERVICES}
                    {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
                        <li class="{if $_system_menu eq 'services'}active{/if} treeview">
                            <a href="#">
                                <i class="flaticon-381-network-3"></i> <span class="nav-text">{Lang::T('Packages')}</span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-down pull-right"></i>
                                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li {if $_routes[1] eq 'hotspot' }class="active" {/if}><a
                                        href="{$_url}services/hotspot">{Lang::T('Hotspot')}</a></li>
                                <li {if $_routes[1] eq 'pppoe' }class="active" {/if}><a
                                        href="{$_url}services/pppoe">{Lang::T('PPPOE')}</a></li>
                                <li {if $_routes[1] eq 'list' }class="active" {/if}><a
                                        href="{$_url}bandwidth/list">{Lang::T('Bandwidth')}</a></li>
                                {if $_c['enable_balance'] == 'yes'}
                                    <li {if $_routes[1] eq 'balance' }class="active" {/if}><a
                                            href="{$_url}services/balance">{Lang::T('Balance')}</a></li>
                                {/if}
                                {$_MENU_PLANS}
                            </ul>
                        </li>
                    {/if}
                    

                    {$_MENU_AFTER_PLANS}
                    <li class="{if $_system_menu eq 'reports'}active{/if} treeview">
                        <a href="#">
                            <i class="flaticon-381-bookmark"></i> <span class="nav-text">{Lang::T('Reports')}</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-down pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li {if $_routes[1] eq 'daily-report' }class="active" {/if}><a
                                    href="{$_url}reports/daily-report">{Lang::T('Daily Reports')}</a></li>
                            <li {if $_routes[1] eq 'by-period' }class="active" {/if}><a
                                    href="{$_url}reports/by-period">{Lang::T('Period Reports')}</a></li>
                            <li {if $_routes[1] eq 'activation' }class="active" {/if}><a
                                    href="{$_url}reports/activation">{Lang::T('Activation History')}</a></li>
                            {$_MENU_REPORTS}
                        </ul>
                    </li>
                    {$_MENU_AFTER_REPORTS}
                    <li class="{if $_system_menu eq 'message'}active{/if} treeview">
                        <a href="#">
                            <i class="flaticon-381-send-1"></i> <span class="nav-text">{Lang::T('Send Message')}</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-down pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li {if $_routes[1] eq 'send' }class="active" {/if}><a
                                    href="{$_url}message/send">{Lang::T('Single Customer')}</a></li>
                            <li {if $_routes[1] eq 'send_bulk' }class="active" {/if}><a
                                    href="{$_url}message/send_bulk">{Lang::T('Bulk Customers')}</a></li>
                            <li {if $_routes[1] eq 'messages' }class="active" {/if}><a
                            href="{$_url}messages">{Lang::T('Sent Messages')}</a></li>
                            {$_MENU_MESSAGE}
                        </ul>
                    </li>
                    {$_MENU_AFTER_MESSAGE}
                    {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
                        <li class="{if $_system_menu eq 'network'}active{/if} treeview">
                            <a href="#">
                                <i class="flaticon-381-internet"></i> <span class="nav-text">{Lang::T('Network')}</span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-down pull-right"></i>
                                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li {if $_routes[0] eq 'routers' and $_routes[1] eq 'list' }class="active" {/if}><a
                                        href="{$_url}routers/list">{Lang::T('Routers')}</a></li>
                                <li {if $_routes[0] eq 'pool' and $_routes[1] eq 'list' }class="active" {/if}><a
                                        href="{$_url}pool/list">{Lang::T('IP Pool')}</a></li>
                                {$_MENU_NETWORK}
                            </ul>
                        </li>
                        {$_MENU_AFTER_NETWORKS}
                        {if $_c['radius_enable']}
                            <li class="{if $_system_menu eq 'radius'}active{/if} treeview">
                                <a href="#">
                                    <i class="flaticon-381-network"></i> <span class="nav-text">{Lang::T('Radius')}</span>
                                    <span class="pull-right-container">
                                        <i class="fa fa-angle-down pull-right"></i>
                                    </span>
                                </a>
                                <ul class="treeview-menu">
                                    <li {if $_routes[0] eq 'radius' and $_routes[1] eq 'nas-list' }class="active" {/if}><a
                                            href="{$_url}radius/nas-list">{Lang::T('Radius NAS')}</a></li>
                                    {$_MENU_RADIUS}
                                </ul>
                            </li>
                        {/if}
                        {$_MENU_AFTER_RADIUS}
                        
                    {/if}
                    {$_MENU_AFTER_PAGES}
                    <li
                        class="{if $_system_menu eq 'settings' || $_system_menu eq 'paymentgateway' }active{/if} treeview">
                        <a href="#">
                            <i class="flaticon-381-settings-1"></i> <span class="nav-text">{Lang::T('Settings')}</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-down pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
                                <li {if $_routes[1] eq 'app' }class="active" {/if}><a
                                        href="{$_url}settings/app">{Lang::T('General Settings')}</a></li>
                            
                               
                                <li {if $_routes[1] eq 'notifications' }class="active" {/if}><a
                                        href="{$_url}settings/notifications">{Lang::T('User Notification')}</a></li>
                            {/if}
                            {if in_array($_admin['user_type'],['SuperAdmin','Admin','Agent'])}
                                <li {if $_routes[1] eq 'users' }class="active" {/if}><a
                                        href="{$_url}settings/users">{Lang::T('Admin Users')}</a></li>
                            {/if}
                            <li {if $_routes[0] eq 'customfield' }class="active" {/if}><a
                                href="{$_url}customfield">{Lang::T('Custom Fields')}</a></li>
                            {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
                               
                                <li {if $_system_menu eq 'paymentgateway' }class="active" {/if}>
                                    <a href="{$_url}paymentgateway">
                                        <span class="text">{Lang::T('Payment Setup')}</span>
                                    </a>
                                </li>
                                {$_MENU_SETTINGS}
                            {/if}
                        </ul>
                    </li>
                    {$_MENU_AFTER_SETTINGS}
                    {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
                        <li class="{if $_system_menu eq 'logs' }active{/if} treeview">
                            <a href="#">
                                <i class="flaticon-381-clock"></i> <span class="nav-text">{Lang::T('Logs')}</span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-down pull-right"></i>
                                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li {if $_routes[1] eq 'list' }class="active" {/if}><a
                                        href="{$_url}logs/XtremeBilling">XtremeBilling</a></li>
                                {if $_c['radius_enable']}
                                    <li {if $_routes[1] eq 'radius' }class="active" {/if}><a
                                            href="{$_url}logs/radius">Radius</a>
                                    </li>
                                {/if}
                            </ul>
                            {$_MENU_LOGS}
                        </li>
                    {/if}
                    {$_MENU_AFTER_LOGS}
                    </ul>
                </div>
            </div>
            <!--**********************************
                    Sidebar end
                ***********************************-->
            {if $_c['maintenance_mode'] == 1}
                <div class="notification-top-bar">
                    <p>{Lang::T('The website is currently in maintenance mode, this means that some or all functionality may be
                        unavailable to regular users during this time.')}<small> &nbsp;&nbsp;<a
                                href="{$_url}settings/maintenance">{Lang::T('Turn Off')}</a></small></p>
                </div>
            {/if}
            <!--**********************************
                    Content body start
                ***********************************-->
                
            <div class="content-body">
                    {if isset($notify)}
                        <script>
                            // Display SweetAlert toast notification
                            Swal.fire({
                                icon: '{if $notify_t == "s"}success{else}error{/if}',
                                title: '{$notify}',
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 5000,
                                timerProgressBar: true,
                                didOpen: (toast) => {
                                    toast.addEventListener('mouseenter', Swal.stopTimer)
                                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                                }
                            });
                        </script>
                    {/if}
<div class="container-fluid">