<script type="module">
    import permissionUtils from "./js/common.js";
    import { SIDEBAR_PERMISSIONS } from "./js/frontEndPermission.js";
  



    document.addEventListener("DOMContentLoaded", () => {
        // Assign sections to constants
        const basic = document.getElementById("basic");
       // const financialSection = document.getElementById("financial");
        const reportsSection = document.getElementById("report");
        // const bankSection = document.getElementById("bank");
        // const branchSection = document.getElementById("branch");
        const general = document.getElementById("general");
        const setting = document.getElementById("setting");
  
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_NEW_ORDER)) {
      basic.innerHTML += '<li><a href="/new-transaction"><i class="fas fa-plus-circle"></i> New Order</a></li>';}
      if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_CAFE_ORDER)) {
     
      basic.innerHTML += '<li><a href="/cafe-order"><i class="fas fa-plus-circle"></i> My Orders</a></li>';
      }
      if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_CAFE_TRANSFER)) {
     
      basic.innerHTML += '<li><a href="/cafeTransfer"><i class="fas fa-plus-circle"></i> View transfer</a></li>';
      
      }
      if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_VIEW_POST)) {
     
      basic.innerHTML += '<li><a href="/view-post"><i class="fas fa-plus-circle"></i> View Post</a></li>';
     
       }
       if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_POST_MESSAGE)) {
     
        basic.innerHTML += '<li><a href="/cafe-post"><i class="fas fa-plus-circle"></i> Post Message</a></li>';
       }
           
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_KITCHEN)) {
        
               basic.innerHTML += '<li><a href="/kitchen"><i class="fas fa-plus-circle"></i>Kitchen</a></li>';
      
               }
               if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_KITCHEN_ADMIN)) {
        
        basic.innerHTML += '<li><a href="/kitchen-admin"><i class="fas fa-plus-circle"></i>Kitchen Admin</a></li>';

        }
               if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_ATTACHMENT)) {
     
               basic.innerHTML += '<li><a href="/attachment"><i class="fas fa-plus-circle"></i> attachment</a></li>';
     
                         }
                         if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_CASHIER)) {
     
                          basic.innerHTML += '<li><a href="/cashier"><i class="fas fa-plus-circle"></i>cashier</a></li>';
                     //     basic.innerHTML += '<li><a href="/cafeTransferAdmin"><i class="fas fa-plus-circle"></i>Transfers Admin</a></li>';
                         }
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_CREATE_TRANSACTION)) {
     
     basic.innerHTML += '<li><a href="/new-transaction-cafe"><i class="fas fa-plus-circle"></i> New Transaction</a></li>';
     }

      reportsSection.innerHTML += '<li><a href="/cafe-sales"><i class="fas fa-plus-circle"></i> Daily Sales</a></li>';
      reportsSection.innerHTML += '<li><a href="/supervisor"><i class="fas fa-plus-circle"></i> Supervisor</a></li>';
      reportsSection.innerHTML += '<li><a href="/log-activity"><i class="fas fa-plus-circle"></i>Log Activity</a></li>';
    //  if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_SUMMARY)) {
            reportsSection.innerHTML += '<li><a href="/paymentHistory"><i class="fas fa-file-alt"></i> customer Payments</a></li>';
    //    }
    reportsSection.innerHTML += '<li><a href="/bono"><i class="fas fa-file-alt"></i>Bono Report</a></li>';
    reportsSection.innerHTML += '<li><a href="/printed-data"><i class="fas fa-file-alt"></i>Printed Data</a></li>';

        // Populate Transactions Section
        // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.CREATE_TRANSACTION)) {
        //     basic.innerHTML += '<li><a href="/new-transaction"><i class="fas fa-plus-circle"></i> New Transaction</a></li>';
        // }
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_TRANSACTION_DETAILS)) {
            basic.innerHTML += '<li><a href="/transaction-detail"><i class="fas fa-info-circle"></i> Transactions</a></li>';
        }

        //   if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.MANAGE_TRANSFER)) {
        //     basic.innerHTML += '<li><a href="/transfer"><i class="fas fa-exchange-alt"></i>view  Transfers</a></li>';
        // }
      
        // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_EXPENSE)) {
        //     basic.innerHTML += '<li><a href="/expense"><i class="fas fa-receipt"></i> Add Expense</a></li>';
        // }
        // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_DAILY_SALE)) {
        //     basic.innerHTML += '<li><a href="/daily-sale"><i class="fas fa-calendar-day"></i> Daily Sales</a></li>';
        // }
        // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_BANK_TRANSACTION)) {
        //     basic.innerHTML += '<li><a href="/bank-transaction"><i class="fas fa-exchange-alt"></i> Bank Transaction</a></li>';
        // }
        // basic.innerHTML += '<li><a href="/cashOut"><i class="fas fa-file-alt"></i>Cash Out</a></li>';

        // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_ORDER)) {
        //     basic.innerHTML += '<li><a href="/order"><i class="fas fa-exchange-alt"></i> New Order</a></li>';
        // }
    

    //   //  basic.innerHTML += '<li><a href="/cafe-order"><i class="fas fa-exchange-alt"></i> Cafe Order</a></li>';
    // //  basic.innerHTML += '<li><a href="/gps"><i class="fas fa-exchange-alt"></i> GPS</a></li>';
    //   basic.innerHTML += '<li><a href="/gps-user"><i class="fas fa-exchange-alt"></i> GPS User</a></li>';
     




    //   /////////////////////////////////////////////
    //     // Populate Financial Section
    //     // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_FINANCIAL_SUMMARY)) {
    //     //    reportsSection.innerHTML += '<li><a href="/financial-summary"><i class="fas fa-chart-pie"></i> Summary[ Branch]</a></li>';
    //     // }
      
    //     if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_MERGED_DATA)) {
    //         reportsSection.innerHTML += '<li><a href="/merged-data"><i class="fas fa-database"></i>  Summary [group]</a></li>';
    //   }
    //   if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_TOTAL_SUMMARY_ALL)) {
    //         reportsSection.innerHTML += '<li><a href="/total-summary-all"><i class="fas fa-clipboard-list"></i> Summary [Branch]</a></li>';
    //     }
      
    
    //     if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_TRANSACTIONS)) {
    //         reportsSection.innerHTML += '<li><a href="/transaction"><i class="fas fa-list-alt"></i> View Reciepts</a></li>';
    //     }
    //     // Populate Reports Section
    //     if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_SUMMARY)) {
    //         reportsSection.innerHTML += '<li><a href="/stock-summary"><i class="fas fa-file-alt"></i> Stock Overview</a></li>';
    //     }

    //     if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_TOTAL_SUMMARY_DAILY)) {
    //         reportsSection.innerHTML += '<li><a href="/total-summary-daily"><i class="fas fa-calendar-day"></i>  Daily Summary</a></li>';
    //     }
     
      
    //     if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_SUMMARY)) {
    //         reportsSection.innerHTML += '<li><a href="/stock"><i class="fas fa-file-alt"></i> Stock</a></li>';
    //     }
    //   //  if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_SUMMARY)) {
    //         reportsSection.innerHTML += '<li><a href="/paymentHistory"><i class="fas fa-file-alt"></i> customer Payments</a></li>';
    //   //  }
    //   reportsSection.innerHTML += '<li><a href="/salesDashBoard"><i class="fas fa-file-alt"></i>All Branch Sales</a></li>';

     

    //    ////////////////////////

    //////////////////////////////////////////////////////////////////
    if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_ITEM)) {
          general.innerHTML += '<li><a href="/item"><i class="fas fa-box"></i> Item</a></li>';
          basic.innerHTML += '<li><a href="/new-transaction-cafe"><i class="fas fa-box"></i> Stock In/Out </a></li>';
      }
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_CUSTOMER)) {
            general.innerHTML += '<li><a href="/customer"><i class="fas fa-user-friends"></i> Customer</a></li>';
      }
      if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_USERS)) {
        general.innerHTML += '<li><a href="/user"><i class="fas fa-users"></i> User</a></li>';
      }
     
      general.innerHTML += '<li><a href="/cafe-order-admin"><i class="fas fa-users"></i> Manage Orders</a></li>';
    
      general.innerHTML += '<li><a href="/special-need"><i class="fas fa-users"></i> Special Needs</a></li>';
    
      // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_MONTHLY_EXPENSE)) {
      //      general.innerHTML += '<li><a href="/monthly-expense"><i class="fas fa-calendar-alt"></i> Monthly Expense</a></li>';
      //   }
      

       ////////////////
     
     
      // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_COMPANY)) {
      //     setting.innerHTML += '<li><a href="/company"><i class="fas fa-building"></i> Company</a></li>';
      // }
        // Populate Branch Section
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.MANAGE_BRANCH)) {
            setting.innerHTML += '<li><a href="/branch"><i class="fas fa-building"></i> Branch</a></li>';
        }
        // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.MANAGE_BRANCH_GROUP)) {
        //     setting.innerHTML += '<li><a href="/branch-group"><i class="fas fa-layer-group"></i> Branch Group</a></li>';
        // }
        // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_EXPENSE_GROUP)) {
        //    setting.innerHTML += '<li><a href="/expense-group"><i class="fas fa-layer-group"></i> Expense Group</a></li>';
        // }
   
     
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_BANK_ACCOUNT)) {
          setting.innerHTML += '<li><a href="/bank-account"><i class="fas fa-exchange-alt"></i> Create Bank Account</a></li>';
        }

      if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS. CREATE_ROLE)) {
           setting.innerHTML += '<li><a href="/role"><i class="fas fa-layer-group"></i>Create Roles</a></li>';
        }
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS. EDIT_ROLES)) {
           setting.innerHTML += '<li><a href="/edit-role"><i class="fas fa-layer-group"></i>Edit Roles</a></li>';
        }
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS. VIEW_SETTING)) {
           setting.innerHTML += '<li><a href="/setting"><i class="fas fa-layer-group"></i>Settings</a></li>';
        }
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS. VIEW_SETTING)) {
           setting.innerHTML += '<li><a href="/registerForms"><i class="fas fa-layer-group"></i>Other Things</a></li>';
        }
     
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS. VIEW_SETTING)) {
           setting.innerHTML += '<li><a href="/device-list"><i class="fas fa-layer-group"></i>Device Lists</a></li>';
        }
        // if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_BRANCH_INVENTORY)) {
        //     branchSection.innerHTML += '<li><a href="/branch-inventory"><i class="fas fa-boxes"></i> Branch Inventory</a></li>';
        // }
  
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS. VIEW_REPORTING_ANALYSIS)) 
         { document.getElementById('report-menu').style.display = 'block';    }
        
        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS. MANAGE_GENERAL)) 
         { document.getElementById('general-menu').style.display = 'block';    }
        

        if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS. MANAGE_SETTING)) 
         { document.getElementById('setting-menu').style.display = 'block';    }
        



    

// Populate Miscellaneous Section
  
    //   if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_CUSTOMER)) {
    //       miscellaneousSection.innerHTML += '<li><a href="/customer"><i class="fas fa-user-friends"></i> Customer</a></li>';
    //   }
    //   if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_USERS)) {
    //       miscellaneousSection.innerHTML += '<li><a href="/user"><i class="fas fa-users"></i> User</a></li>';
    //   }
    //   if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_REGISTER)) {
    //       miscellaneousSection.innerHTML += '<li><a href="/register"><i class="fas fa-user-plus"></i> Register</a></li>';
    //   }
    //   if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_SETTING)) {
    //       miscellaneousSection.innerHTML += '<li><a href="/setting"><i class="fas fa-sliders-h"></i> Setting</a></li>';
    //   }
    //   if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_GENERAL)) {
    //       miscellaneousSection.innerHTML += '<li><a href="/general"><i class="fas fa-wrench"></i> General</a></li>';
    //   }
    //   if (permissionUtils.hasPermission(userPermissions, SIDEBAR_PERMISSIONS.VIEW_ITEM)) {
    //       miscellaneousSection.innerHTML += '<li><a href="/item"><i class="fas fa-box"></i> Item</a></li>';
    //   }
  



    // Toggle section visibility


   


    
        const sections = document.querySelectorAll('.section-content');
        sections.forEach(section => (section.style.display = 'none'));


        const currentPath = window.location.pathname;

function expandActiveSection() {
    
  
   let anyActive=false;
    document.querySelectorAll('.section-content').forEach(section => {
    const links = section.querySelectorAll('a');
    const isActive = [...links].some(link => link.href === window.location.href);



    
    if (isActive) {
       
      anyActive=true;
        section.style.display = 'block';
        section.querySelector('h3')?.classList.add('active');
        section.querySelector('h3')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        window.scrollBy(0, -50);
    }
}




);
console.log("path is",window.location.href)
if (!anyActive){
    
    const section = document.getElementById('basic');
   
    section.style.display = 'block';
    
}

}

// Call the function on page load


expandActiveSection();


  

   


  
  





   
    });
  </script>
  

<style>   




.catagory-section{
    background-color: rgb(24, 132, 247); /* Set background color */
    color: white; /* Text color for contrast */
    margin: 5px 0px; /* Add space around each list item */
    padding: 10px 25px; /* Add space inside the list item */
    border-radius: 0px; /* Round the corners */
    font-family: Arial, sans-serif; /* Set a clean font */
    font-size: 16px; /* Adjust font size */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow for depth */
    transition: transform 0.2s, background-color 0.2s; /* Add hover effects */
    cursor: pointer;
}



/* Fixed logout container inside the sidebar */
.logout-container {
  position: absolute; /* Positioned relative to the sidebar */
  bottom: 0; /* Stick to the bottom of the sidebar */
  width: 100%; /* Span the full width of the sidebar */
  text-align: center; /* Center-align the content */
  padding: 5px 0; /* Adjust padding for a balanced look */
  background-color: #ffffff; /* White background for contrast */
  border-top: 1px solid #ddd; /* Subtle border for separation */
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for elevation */
 }


/* Logout button styling */
.logout-button {
  display: inline-block;
  padding: 12px 32px; /* Comfortable size for easy interaction */
  font-size: 16px; /* Readable font size */
  font-weight: 600; /* Slightly bold for emphasis */
  color: #ffffff; /* White text for contrast */
  background-color: #0073e6; /* Professional blue color */
  border: none;
  border-radius: 8px; /* Subtle rounding for modern design */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

/* Hover effect for the button */
.logout-button:hover {
  background-color: #005bb5; /* Slightly darker blue for hover state */
  transform: translateY(-2px); /* Subtle lift effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Elevation on hover */
}

/* Active (click) state */
.logout-button:active {
  transform: translateY(0); /* Reset lift */
  background-color: #003f7d; /* Even darker blue */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Subtle shadow */
}

/* Responsive design for mobile */
@media (max-width: 600px) {
  .logout-button {
    width: 80%; /* Full-width button for smaller screens */
    padding: 12px; /* Adjust padding */
    font-size: 14px; /* Slightly smaller font */
  }
}



</style>

  <div id="sidebar" class="sidebar">


    
    <ul>

      
        <!-- Transactions Section -->
       <ul> 
            <li class="catagory-section" onclick="toggleSection('basic')">
                Cafe Basics
                
            </li>
           
        </ul>

        <ul class="section-content" id="basic">
         
     
        </ul>


        <ul> 
            <li class="catagory-section" style="display: none;"  id="report-menu" onclick="toggleSection('report')">
              
                Report and Analaysis
                
            </li>
           
        </ul>
       
        <ul class="section-content" id="report">

     
  
        </ul>


        <ul> 
            <li class="catagory-section"  style="display: none;"  id="general-menu"onclick="toggleSection('general')">
               General
                
            </li>
           
        </ul>

        <ul class="section-content" id="general">

 
        </ul>



        <ul> 
            <li class="catagory-section" id="setting-menu" style="display: none;" onclick="toggleSection('setting')">
            Settings
                
            </li>
           
        </ul>

        <ul class="section-content" id="setting">

 
        </ul>
  
       
   
        


    </ul>

    <div class="logout-container">
    <button onclick="logout()">Logout</button>
  </div>
      </div>
      <script>
     function logout() {
    // Clear all local storage data
    localStorage.clear();

    sessionStorage.clear();

    // Redirect to the login page
    window.location.href = '/login';
}

      </script>
      


  <script>


function toggleSection(sectionId) {




    const allSections = document.querySelectorAll('.section-content');

    // Loop through all sections and hide them
    allSections.forEach(section => {
        section.style.display = 'none';
    });

        const section = document.getElementById(sectionId);
   
        if (section.style.display === 'none' || section.style.display === '') {
            section.style.display = 'block';
        
        } else {
            section.style.display = 'none';
         
        }
    }
  




    async function logout() {
  try {
    // Notify the backend (optional)
    const response = await fetch('/api/auth/logout', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${sessionStorage.getItem('authToken')}`
      }
    });

    if (!response.ok) {
      throw new Error('Failed to log out');
    }

    // Clear session storage
    sessionStorage.clear();

    // Redirect to the login page
    window.location.href = '/login';
  } catch (error) {
    console.error('Error during logout:', error);
    alert('Error logging out. Please try again.');
  }
}


  </script>