/**
 * Shared Components for POS Front-End Theme
 * This file contains the header, sidebar, and footer HTML
 * Include this in all pages to maintain consistency
 */

// Get current page filename
const currentPage = window.location.pathname.split('/').pop() || 'index.html';

// Header HTML
const headerHTML = `
<header class="main-header">
  <a href="index.html" class="logo">
    <span class="logo-mini"><b>BN</b></span>
    <span class="logo-lg"><b>Bearing Ninja</b></span>
  </a>
  <nav class="navbar navbar-static-top">
    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
      <span class="sr-only">Toggle navigation</span>
    </a>
    <div class="btn-group hidden-xs">
      <a href="#" class="btn navbar-btn btn-success dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-plus"></i> 
      </a>
      <ul class="dropdown-menu">
        <li><a href="sales-new.html"><h4><i class="fa fa-plus text-green"></i> Sales</h4></a></li>
        <li><a href="purchase-demand-new.html"><h4><i class="fa fa-plus text-green"></i> Purchase</h4></a></li>
        <li><a href="customers-new.html"><h4><i class="fa fa-plus text-green"></i> Customer</h4></a></li>
        <li><a href="suppliers-new.html"><h4><i class="fa fa-plus text-green"></i> Supplier</h4></a></li>
        <li><a href="items-new.html"><h4><i class="fa fa-plus text-green"></i> Item</h4></a></li>
        <li><a href="expense-new.html"><h4><i class="fa fa-plus text-green"></i> Expense</h4></a></li>
      </ul>
    </div>
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        <li class="text-center"><a title="Bearing Ninja" href="pos.html"><i class="fa fa-plus-square"></i> Bearing Ninja</a></li>
        <li class="text-center hidden-xs"><a title="Dashboard" href="index.html"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="dropdown user user-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img src="images/user-default.png" class="user-image" alt="User Image">
            <span class="hidden-xs">Admin</span>
          </a>
          <ul class="dropdown-menu">
            <li class="user-header">
              <img src="images/user-default.png" class="img-circle" alt="User Image">
              <p>Admin<small>Year 2024</small></p>
            </li>
            <li class="user-footer">
              <div class="pull-left"><a href="#" class="btn btn-default btn-flat">Profile</a></div>
              <div class="pull-right"><a href="login.html" class="btn btn-default btn-flat">Sign out</a></div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>
`;

// Sidebar HTML (simple dropdown using details/summary)
const sidebarHTML = `
<aside class="main-sidebar">
  <section class="sidebar">
    <!-- User Panel -->
    <div class="user-panel">
      <div class="pull-left image">
        <img src="images/user-default.png" class="img-circle" alt="User Image">
      </div>
      <div class="pull-left info">
        <p>Admin <i class="fa fa-check-circle text-aqua" style="margin-left: 5px;"></i></p>
        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
      </div>
    </div>

    <ul class="sidebar-menu">
      <li data-page="index.html">
        <a href="index.html">
            <i class="fa fa-dashboard text-aqua"></i> <span>Dashboard</span>
        </a>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-shopping-cart text-aqua"></i> <span>Supplier</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu">
          <li data-page="suppliers-new.html"><a href="suppliers-new.html"><i class="fa fa-plus-square-o"></i> Add Supplier</a></li>
          <li data-page="suppliers-list.html"><a href="suppliers-list.html"><i class="fa fa-list"></i> List Supplier</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-user text-aqua"></i> <span>Agents</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu">
          <li data-page="agents-new.html"><a href="agents-new.html"><i class="fa fa-plus-square-o"></i> Add Agent</a></li>
          <li data-page="agents-list.html"><a href="agents-list.html"><i class="fa fa-list"></i> List Agent</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-cubes text-aqua"></i> <span>Inventory</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu">
          <li data-page="inventory-new.html"><a href="inventory-new.html"><i class="fa fa-plus-square-o"></i> Add Inventory</a></li>
          <li data-page="inventory-list.html"><a href="inventory-list.html"><i class="fa fa-list"></i> List Inventory</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-exchange text-aqua"></i> <span>TT Exchange</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu">
          <li data-page="tt-exchange-new.html"><a href="tt-exchange-new.html"><i class="fa fa-plus-square-o"></i> Add TT Exchange</a></li>
          <li data-page="tt-exchange-list.html"><a href="tt-exchange-list.html"><i class="fa fa-list"></i> List TT Exchange</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-shopping-bag text-aqua"></i> <span>Purchase</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu">
          <li data-page="purchase-demand-new.html"><a href="purchase-demand-new.html"><i class="fa fa-plus-square-o"></i> Add Purchase</a></li>
          <li data-page="purchase-list.html"><a href="purchase-list.html"><i class="fa fa-list"></i> List Purchase</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-file-text text-aqua"></i> <span>Invoice</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu">
          <li data-page="invoice-new.html"><a href="invoice-new.html"><i class="fa fa-plus-square-o"></i> Add Invoice</a></li>
          <li data-page="invoice-list.html"><a href="invoice-list.html"><i class="fa fa-list"></i> List Invoice</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-truck text-aqua"></i> <span>Shipment</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu">
          <li data-page="shipment-new.html"><a href="shipment-new.html"><i class="fa fa-plus-square-o"></i> Add Shipment</a></li>
          <li data-page="shipment-list.html"><a href="shipment-list.html"><i class="fa fa-list"></i> List Shipment</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-ship text-aqua"></i> <span>Shipper</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu">
          <li data-page="shipper-new.html"><a href="shipper-new.html"><i class="fa fa-plus-square-o"></i> Add Shipper</a></li>
          <li data-page="shipper-list.html"><a href="shipper-list.html"><i class="fa fa-list"></i> List Shipper</a></li>
        </ul>
      </li>
    </ul>
  </section>
</aside>
`;

// Footer HTML
const footerHTML = `
<footer class="main-footer">
  <div class="pull-right hidden-xs"><b>POS System -v1.0</b></div>
  <strong>Copyright &copy; 2024 All rights reserved.</strong>
</footer>
`;

// Function to load components
function loadComponents() {
  // Insert header
  const headerContainer = document.getElementById('header-container');
  if (headerContainer) {
    headerContainer.innerHTML = headerHTML;
  }

  // Insert sidebar
  const sidebarContainer = document.getElementById('sidebar-container');
  if (sidebarContainer) {
    sidebarContainer.innerHTML = sidebarHTML;
    highlightActiveMenu();
  }

  // Insert footer
  const footerContainer = document.getElementById('footer-container');
  if (footerContainer) {
    footerContainer.innerHTML = footerHTML;
  }

  // If sidebar loaded via fetch, highlightActiveMenu is called after injection
}

// Initialize AdminLTE sidebar tree if available, otherwise add a basic toggle
function initSidebarTree() {
  try {
    if (window.$ && typeof window.$.fn.tree === 'function') {
      window.$('.sidebar-menu').tree();
      return;
    }
  } catch (e) {}
  const toggles = document.querySelectorAll('.sidebar-menu .treeview > a');
  toggles.forEach(a => {
    a.addEventListener('click', function (e) {
      e.preventDefault();
      const li = this.parentElement;
      const submenu = li.querySelector('.treeview-menu');
      if (!submenu) return;
      const shown = submenu.style.display === 'block';
      submenu.style.display = shown ? 'none' : 'block';
      li.classList.toggle('active', !shown);
    });
  });
}

// Expand Supplier section by default so its sub-items are visible
function expandSupplierByDefault() {
  const groups = document.querySelectorAll('.sidebar-menu > li.treeview');
  for (let li of groups) {
    const label = li.querySelector('a span');
    if (label && label.textContent.trim().toLowerCase() === 'supplier') {
      li.classList.add('active');
      const submenu = li.querySelector('.treeview-menu');
      if (submenu) submenu.style.display = 'block';
      break;
    }
  }
}

// Function to highlight active menu
function highlightActiveMenu() {
  // Find and activate the current menu item
  const menuItems = document.querySelectorAll('.sidebar-menu li[data-page]');
  menuItems.forEach(item => {
    if (item.getAttribute('data-page') === currentPage) {
      item.classList.add('active');

      // If it's in a treeview, also show and activate the parent
      const parent = item.closest('.treeview');
      if (parent) {
        parent.classList.add('active');
        const submenu = parent.querySelector('.treeview-menu');
        if (submenu) {
          submenu.style.display = 'block';
        }
      }
    }
  });
}

// Load components when DOM is ready or immediately if already loaded
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', function () {
    loadComponents();
  });
} else {
  loadComponents();
}
