EVOLUTION-NINJA

Edit File: headerSidebar.php

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Green Palace Heritage</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     
</head>
<style>

/* Dark Mode */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

#modeToggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#modeToggle i {
    font-size: 1.5rem;
    color:white;
    border:none;
    
}

.main_nav {

justify-content: end
    }

.main_user>p {
        margin: 0;
        color: rgb(90 89 89);
        font-weight: 500;

}

.main_user>p:nth-child(2) {
        font-size: 14px;
    }

.main_nav>.navbar-nav a {
        color: #213555 !important;
        font-weight: 500;
        font-size: 16px;
    }

.main_nav>.navbar-nav a:hover {

background-color: aliceblue;

}

.user_drop {
        left: -163px !important;
    }

@media only screen and (max-width:628px) {
        .main_nav {
            margin-top: 10px;
            display: flex;
            justify-content: start
        }

.user_drop {
            left: 0px !important;
        }
    }

:root {
        --primary-color: #4a90e2;
        --bg-color: #f4f7fa;
        --text-color: #333;
        --sidebar-bg: #ffffff;
        --sidebar-hover: #e6f0ff;
    }

body {
        font-family: 'Poppins', sans-serif;
        margin: 0;
        padding: 0;
        background-color: var(--bg-color);
        color: var(--text-color);
    }

.sidebar {
        height: 100vh;
        width: 250px;
        position: sticky;
        z-index: 1;
        top: 0;
        left: 0;
        /*background-color: #151c28;*/
        background-color:#008400;
        overflow-x: hidden;
        transition: 0.3s;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        white-space: nowrap;
    }

.sidebar-header {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e0e0e0;
    }

.sidebar-header h3 {
        margin: 0;
        font-size: 1.2em;
        color: var(--primary-color);
    }

.toggle-btn {
        background: none;
        border: none;
        color: var(--text-color);
        font-size: 20px;
        cursor: pointer;
        transition: 0.2s;
    }

.toggle-btn:hover {
        color: var(--primary-color);
    }

.sidebar a {
        padding: 15px 25px;
        text-decoration: none;
        font-size: 16px;
       
        display: flex;
        align-items: center;
        transition: 0.2s;
    }
    .sidebar>a{
     
        font-weight: 500 !important;
    }
    .sidebar a:hover {
        background-color: var(--sidebar-hover);
        color: var(--primary-color);
    }

.sidebar a i {
        min-width: 30px;
        font-size: 20px;
    }

#main {
        transition: margin-left .3s;
        padding: 20px;
        /* margin-left: 250px; */
    }

.sidebar.closed {
        width: 70px;
    }

.sidebar.closed .sidebar-header h3 {
        display: none;
    }

.sidebar.closed a span {
        display: none;
    }

.sidebar.closed~#main {
        /* margin-left: 70px; */
    }

/* Style for submenu */
    .sub-menu {
        display: none;
        padding-left: 20px;
       
    }
    .sidebar a{
        font-size: 15px;
        color:white
    }
    .sub-menu li {
        list-style-type: none;

}
.sub-menu li>a{
    color:#edcbcb !important
}
    @media screen and (max-width: 768px) {
        .sidebar {
            width: 70px;
        }

.sidebar .sidebar-header h3 {
            display: none;
        }

.sidebar a span {
            display: none;
        }

#main {
            /* margin-left: 70px; */
        }

.sidebar.open {
            width: 250px;
        }

.sidebar.open .sidebar-header h3 {
            display: block;
        }

.sidebar.open a span {
            display: inline;
        }

.sidebar.open~#main {
            /* margin-left: 250px; */
        }
    }
</style>

<body>

<div class="container-fluid  "
        style="box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;background-color:  #008400;border: 1px solid #3e3e3e">
        <nav class=" navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand " href="#">
                <img src="<?php echo base_url('public/assets/images/final smart.svg');?>" alt="Logo" width="230px"  style="background-color:white;padding:5px 10px;border:1px solid lightgrey;box-shadow:2px 2px 10px lightgrey;">
                
            </a>

<span id="notificationCount" class="badge badge-danger" 
        style="position: absolute; top: 0; right: 0; transform: translate(50%, -50%); display: none;">
        0
    </span>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Notifications</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul id="notificationList" class="list-group">
                    <li class="list-group-item text-muted">Loading...</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="markAsReadBtn">Mark All as Read</button>
            </div>
        </div>
    </div>
</div>

<div class="btn-group mr-5 ml-5">
                    <a data-toggle="dropdown" aria-expanded="false">
                        <img src='<?php echo base_url("public/assets/images/Rectangle 4141 (1).png")?>' alt="user image"
                            class="rounded-circle" width="50px">
                    </a>

<div class="dropdown-menu user_drop">
                        <div class="d-flex align-items-center p-2"> <img
                                src='<?php echo base_url("public/assets/images/Rectangle 4141 (1).png")?>'
                                alt="user image" class=" rounded-circle" width="50px">
                            <div class="main_user ml-2 ">
                                <p style="width:150px"> <?php echo session()->get('username');?></p>
                                 <p> <?php echo session()->get('promoter_id');?></p>
                            </div>

</div>
                        <hr>
                        <a class="dropdown-item" href="<?php echo base_url('home'); ?>"> <i class="bi bi-x-diamond-fill"
                                style="color: rgb(104 82 82 / 41%);"></i> Dashboard</a>
                                
                            <?php if(session()->get("role") == 1): ?>
                                <a class="dropdown-item" href="<?php echo base_url('profile-page') ?>"> <i class="bi bi-x-diamond-fill"
                                style="color: rgb(104 82 82 / 41%);"></i> Profile</a>
                               
                               <?php endif; ?>
                                
                        
                        <div class="dropdown-divider"></div>
                        <div class="dropdown-item"><a class="btn btn-danger" href="<?php echo base_url('logout'); ?>"><i class="bi bi-box-arrow-right"></i>
                                Log Out</a></div>

</div>
                </div>

</div>
        </nav>
    </div>

<div>
        <nav id="sidebar" style=" display: grid;
    grid-template-columns: auto 1fr;">

<div id="mySidebar" class="sidebar">
                <div class="sidebar-header">
                    <h3></h3>
                    <button class="toggle-btn" onclick="toggleNav()">
                        <i class="fas fa-bars " style="color:white"></i>
                    </button>
                </div>
                
                 <?php if (session()->get('role') == 2): ?>
                <a href="<?php echo base_url('user-homepage');?>" onclick="toggleSubMenu(this)">
                          <i class="bi bi-house-door"></i><span>Home</span>
                 
                </a>
      
       <?php endif;?>
             <?php if (session()->get('role') == 0): ?>
                <a href="<?php echo base_url('admin-homepage');?>" onclick="toggleSubMenu(this)">
                          <i class="bi bi-house-door"></i><span>Home</span>
                 
                </a>

<a href="<?php echo base_url('Create-Scheme');?>" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Master</span>
                </a>
                <ul class="sub-menu">
                    <div>
                        <li><a href="<?php echo base_url('Create-Scheme');?>">Create Scheme</a></li>
                        
                        
                    </div>
                </ul>
                 <a href="<?php echo base_url('Create-Promoter');?>"><i class="bi bi-person-vcard"></i> <span>Create Partners</span></a>
                 
                 
              <a href="" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Initial Pins</span> </a>
                <ul class="sub-menu">
                    <div>
                        <li> <a href="<?php echo base_url('Admin-Approval-Panel');?>"><i class="fas fa-user"></i> <span>Initial Pins Request <br> Approval </span></a></li>
                         <li> <a href="<?php echo base_url('Admin-Approved-Pins');?>"><i class="fas fa-user"></i> <span>Approved Initial Pins</span></a></li>
                    </div>
                </ul>
           
                  <a href="" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Repayment Pins</span> </a>
                <ul class="sub-menu">
                    <div>
                        <li>   <a href="<?php echo base_url('Repayment-Approval-Panel');?>"><i class="fas fa-user"></i> <span>Repayment Pin <br> Approval </span></a></li>
                         <li> <a href="<?php echo base_url('Admin-Approved-RepaymentPins');?>"><i class="fas fa-user"></i> <span>Approved Repayment  <br> Pins</span></a></li>
                    </div>
                </ul>
           
            
               
                
                  <a href="<?php echo base_url('withdraw-request-approval');?>"><i class="fas fa-user"></i> <span>Withdraw Approval</span></a>
                  
               <a href="<?php echo base_url('');?>" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Reports</span>
                </a>
                <ul class="sub-menu">
                    <div>
                        <li><a href="<?php echo base_url('Customer-report');?>">Customers report</a></li>
                         <li><a href="<?php echo base_url('Initial-pins-report');?>">Initial pins report</a></li>
                        <li><a href="<?php echo base_url('repayment-pins-report');?>">Repayment pins report</a></li>
                        <li><a href="<?php echo base_url('Withdraw-report'); ?>">Withdraw Report</a></li>
                        <li><a href="<?php echo base_url('payment-report'); ?>">Payment Report</a></li>
                        <li><a href="<?php echo base_url('promoter-report'); ?>">Promoter Report</a></li>
                    </div>
                </ul>
                  
                 <?php endif;?>
              
                <?php if (session()->get('role') == 1): ?>
                
                 <a href="<?php echo base_url('home');?>" onclick="toggleSubMenu(this)">
                    <i class="bi bi-house-door"></i><span>Home</span>
                 
                </a>
                 <a href="<?php echo base_url('my-pin-requests'); ?>"><i class="bi bi-person-vcard"></i> <span>My pin requests</span></a>
                 
                 <a href="<?php echo base_url('Repayment-Pins-Request'); ?>"><i class="bi bi-person-vcard"></i> <span>Repayment Pins Request</span></a>
                 
                <a href="<?php echo base_url('Customer-register'); ?>" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Customers</span>
                </a>
                <ul class="sub-menu">
                    <div>
                        <li><a href="<?php echo base_url('Customer-register'); ?>">Customer Registration</a></li>
                        <li><a href="<?php echo base_url('Customer-details'); ?>">Customer Details</a></li>
                        <li><a href="<?php echo base_url('Customer-payments'); ?>">Customer Payments</a></li>
                            
                    </div>
                </ul>
                <?php endif;?>
                
                 <?php if (session()->get('role') == 0): ?>
                       <a href="<?php echo base_url("instructions");?>"><i class="fas fa-cog"></i> <span>Instructions</span></a>
                       
              <?php endif;?>
            </div>

<!-- <div id="main">
                <h2>Modern Sidebar with Internal Toggle</h2>
                <p>The toggle button is inside the sidebar at the top. Click it to expand or collapse the sidebar.</p>
            </div>

</div>
</body> -->

// Toggle the sidebar open/closed
        sidebar.classList.toggle("closed");
        if (window.innerWidth <= 768) {
            sidebar.classList.toggle("open");
        }

// Close all submenus when the sidebar is toggled
        closeAllSubMenus();
    }

// Toggle the visibility of the submenu
    function toggleSubMenu(link) {
        const subMenu = link.nextElementSibling;

// If the submenu is already visible, hide it
        if (subMenu && subMenu.style.display === "block") {
            subMenu.style.display = "none";
        } else {
            // Otherwise, show the submenu
            subMenu.style.display = "block";

// Close other open submenus when a new submenu is toggled
            const allSubMenus = document.querySelectorAll('.sub-menu');
            allSubMenus.forEach(function (menu) {
                if (menu !== subMenu) {
                    menu.style.display = 'none';
                }
            });
        }
    }

// Function to close all submenus
    function closeAllSubMenus() {
        const subMenus = document.querySelectorAll('.sub-menu');
        subMenus.forEach(function (submenu) {
            submenu.style.display = 'none';
        });
    }

// Function to ensure sidebar opens when a link in the sidebar is clicked
    function openSidebarOnLinkClick() {
        const sidebar = document.getElementById("mySidebar");
        const main = document.getElementById("main");

// Open sidebar if it is closed
        if (sidebar.classList.contains("closed")) {
            sidebar.classList.remove("closed");
            if (window.innerWidth <= 768) {
                sidebar.classList.add("open");
            }
        }

// Close all submenus when a link is clicked
        closeAllSubMenus();
    }

// Add event listeners to sidebar links
    const sidebarLinks = document.querySelectorAll('#mySidebar a');
    sidebarLinks.forEach(link => {
        link.addEventListener('click', function (event) {
            // Ensure sidebar opens if it was closed
            openSidebarOnLinkClick();

// Check if the clicked link has a submenu (not the link that just navigates)
            if (link.nextElementSibling && link.nextElementSibling.classList.contains('sub-menu')) {
                // Prevent the link's default behavior so the submenu can toggle
                event.preventDefault();
                toggleSubMenu(link);
            }
        });
    });

</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const modeToggle = document.getElementById('modeToggle');
    const toggleIcon = document.getElementById('toggleIcon');
    const body = document.body;

if (localStorage.getItem('mode') === 'dark') {
        body.classList.add('dark-mode');
        toggleIcon.classList.remove('fa-moon');
        toggleIcon.classList.add('fa-sun');
        
    }

modeToggle.addEventListener('click', function () {
        body.classList.toggle('dark-mode');

if (body.classList.contains('dark-mode')) {
            localStorage.setItem('mode', 'dark');
            toggleIcon.classList.remove('fa-moon');
            toggleIcon.classList.add('fa-sun');
       
        } else {
            localStorage.setItem('mode', 'day');
            toggleIcon.classList.remove('fa-sun');
            toggleIcon.classList.add('fa-moon');
           
        }
    });
});

</script>
<script>
$(document).ready(function () {
    fetchNotifications();

$('.bi-bell, #notificationCount').on('click', function () {
        $('#exampleModal').modal('show');
    });

$('#markAsReadBtn').on('click', function () {
        markNotificationsAsRead();
    });

function fetchNotifications() {
        $.ajax({
            url: '<?= base_url('notifications');?>',
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                console.log('Fetched Notifications:', data);

if (data.notifications.length > 0) {
                    $('#notificationCount').text(data.unreadCount).show();

var notificationHTML = '';
                    $.each(data.notifications, function (index, notification) {
                        notificationHTML += '<li class="list-group-item">' + notification.message + '</li>';
                    });

$('#notificationList').html(notificationHTML);
                } else {
                    $('#notificationCount').hide(); 
                    $('#notificationList').html('<li class="list-group-item text-muted">No new notifications.</li>');
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error('Error fetching notifications:', textStatus, errorThrown);
            }
        });
    }