<div class="row">
  <!-- Left navigation -->
  <div class="col-md-3 col-sm-12">
    <div class="card">
      <div class="card-body text-center">
       <img src="<?= base_url('uploads/settings/default-logo.svg');?>" alt="Munshi logo image"
             class="img-fluid mb-3" style="width:100%;"/>
      </div>
      <ul class="nav flex-column nav-pills" id="settingsTab" role="tablist" aria-orientation="vertical">
        <li class="nav-item">
          <a class="nav-link active" id="identity-tab" data-bs-toggle="pill"
             data-bs-target="#identityTab" role="tab" aria-controls="identityTab">Organization Identity</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="expense-tab" data-bs-toggle="pill"
             data-bs-target="#expenseTab" role="tab" aria-controls="expenseTab">Expense Settings</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="permissions-tab" data-bs-toggle="pill"
             data-bs-target="#permissionsTab" role="tab" aria-controls="permissionsTab">User Role Permissions</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="departments-tab" data-bs-toggle="pill"
             data-bs-target="#departmentsTab" role="tab" aria-controls="departmentsTab">Departments</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="consultants-tab" data-bs-toggle="pill"
             data-bs-target="#consultantsTab" role="tab" aria-controls="consultantsTab">Consultants</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="shifts-tab" data-bs-toggle="pill"
             data-bs-target="#shiftsTab" role="tab" aria-controls="shiftsTab">Timings & Shifts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="pos-printer-tab" data-bs-toggle="pill"
             data-bs-target="#posprinterTab" role="tab" aria-controls="posprinterTab">POS Printer Settings</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Right content -->
  <div class="col-md-9 col-sm-12">
    <div class="tab-content" id="settingsTabContent">
      <!-- Identity tab -->
      <div class="tab-pane fade show active" id="identityTab" role="tabpanel" aria-labelledby="identity-tab">
        <?php $this->load->view('admin/settings/tabs/organization/index'); ?>
      </div>
      <!-- POS Printer tab -->
      <div class="tab-pane fade" id="posprinterTab" role="tabpanel" aria-labelledby="pos-printer-tab">
        <?php $this->load->view('admin/settings/tabs/pos-printer/index'); ?>
      </div>
      <!-- Expense tab -->
      <div class="tab-pane fade" id="expenseTab" role="tabpanel" aria-labelledby="expense-tab">
        <?php $this->load->view('admin/settings/tabs/expense/index'); ?>
      </div>
      <!-- Permissions tab -->
      <div class="tab-pane fade" id="permissionsTab" role="tabpanel" aria-labelledby="permissions-tab">
        <?php $this->load->view('admin/rolepermissions/index'); ?>
      </div>
      <!-- Departments tab -->
      <div class="tab-pane fade" id="departmentsTab" role="tabpanel" aria-labelledby="departments-tab">
        <?php $this->load->view('admin/settings/tabs/departments/index'); ?>
      </div>
      <!-- Consultants tab -->
      <div class="tab-pane fade" id="consultantsTab" role="tabpanel" aria-labelledby="consultants-tab">
        <?php $this->load->view('admin/settings/tabs/consultants/index'); ?>
      </div>
      <!-- Shifts tab -->
      <div class="tab-pane fade" id="shiftsTab" role="tabpanel" aria-labelledby="shifts-tab">
        <?php $this->load->view('admin/settings/tabs/shifts/index'); ?>
      </div>
      
    </div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  // If URL has a hash, activate that tab
  var hash = window.location.hash;
  if (hash) {
    var triggerEl = document.querySelector('#settingsTab .nav-link[data-bs-target="' + hash + '"]');
    if (triggerEl) {
      new bootstrap.Tab(triggerEl).show();
    }
  }

  // Stop browser scroll and handle tab switching manually
  document.querySelectorAll('#settingsTab .nav-link').forEach(function (link) {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      new bootstrap.Tab(link).show();
      // update hash in URL without scrolling
      history.replaceState(null, null, link.getAttribute('data-bs-target'));
    });
  });
});
</script>
