fsib_product.php
__________________________________

<?php include 'header.php' ?>

<!-- For page Hero -->
<?php
$page = 'Fsib Products';
$title = "First Security Islami Bank Products";
include 'page-hero.php';
?>

<!-- NAV TABS -->
<div class="flex justify-center gap-4 py-6">

  <button onclick="showTab(event, 'deposit')"
  class="tab-btn bg-teal-700 text-white px-6 py-2 rounded shadow">
  Deposit Products
</button>

<button onclick="showTab(event, 'investment')"
  class="tab-btn bg-white text-gray-700 border px-6 py-2 rounded">
  Investment Products
</button>

<button onclick="showTab(event, 'scheme')"
  class="tab-btn bg-white text-gray-700 border px-6 py-2 rounded">
  Investment Scheme
</button>

</div>

<!-- TAB CONTENT -->

<!-- Deposit -->
<div id="deposit" class="tab-content max-w-6xl mx-auto space-y-4">

  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>Deposit Product - Mudaraba Savings</span>
      <span>+</span>
    </button>

    <div class="hidden px-5 py-4 bg-white border-t text-gray-600">
      This is Deposit Product details.
    </div>
  </div>

  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>Deposit Product - Mudaraba Savings</span>
      <span>+</span>
    </button>

    <div class="hidden px-5 py-4 bg-white border-t text-gray-600">
      This is Deposit Product details.
    </div>
  </div>

</div>

<!-- Investment -->
<div id="investment" class="tab-content hidden max-w-6xl mx-auto space-y-4">

  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">

      <span>Investment Product - Bai Murabaha</span>
      <span>+</span>
    </button>

    <div class="hidden px-5 py-4 bg-white border-t text-gray-600">
      This is Investment Product details.
    </div>
  </div>
  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">

      <span>Investment Product - Bai Murabaha</span>
      <span>+</span>
    </button>

    <div class="hidden px-5 py-4 bg-white border-t text-gray-600">
      This is Investment Product details.
    </div>
  </div>

</div>

<!-- Scheme -->
<div id="scheme" class="tab-content hidden max-w-6xl mx-auto space-y-4">

  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">

      <span>Investment Scheme - Hajj Scheme</span>
      <span>+</span>
    </button>

    <div class="hidden px-5 py-4 bg-white border-t text-gray-600">
      This is Investment Scheme details.
    </div>
  </div>

  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">

      <span>Investment Scheme - Hajj Scheme</span>
      <span>+</span>
    </button>

    <div class="hidden px-5 py-4 bg-white border-t text-gray-600">
      This is Investment Scheme details.
    </div>
  </div>

</div></br></br>

<!-- JS -->
<script>
function showTab(e, tabId) {

  // hide all content
  document.querySelectorAll('.tab-content').forEach(el => {
    el.classList.add('hidden');
  });

  // show selected content
  document.getElementById(tabId).classList.remove('hidden');

  // reset all buttons (white state)
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.classList.remove('bg-teal-700','text-white');
    btn.classList.add('bg-white','text-gray-700','border');
  });

  // active button (teal)
  e.target.classList.remove('bg-white','text-gray-700','border');
  e.target.classList.add('bg-teal-700','text-white');
}

// accordion toggle
function toggleAccordion(btn) {
  const content = btn.nextElementSibling;

  content.classList.toggle('hidden');

  // change + / -
  btn.querySelector('span:last-child').textContent =
    content.classList.contains('hidden') ? '+' : '-';
}
</script>


<?php include 'footer.php' ?>