<%- include('../layouts/header'); -%>
<style>
  /* Style the chevron icon */
  .chevron {
    display: inline-block;
    width: 0; /* Adjust as needed */
    height: 0; /* Adjust as needed */
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #000 transparent transparent transparent;
    transform: rotate(0); /* Initial rotation (no rotation) */
    transition: transform 0.3s ease; /* Smooth transition on rotation */
  }

  /* Rotate the chevron icon when the accordion is open */
  .accordion-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }
</style>
<section
  class="hero-wrap hero-wrap-2 ftco-degree-bg js-fullheight"
  style="background-image: url('<%- baseUrl %>/images/bg_1.jpg')"
  data-stellar-background-ratio="0.5"
>
  <div class="overlay"></div>
  <div class="overlay-2"></div>
  <div class="container">
    <div
      class="row no-gutters slider-text js-fullheight align-items-end justify-content-center"
    >
      <div class="col-md-9 ftco-animate pb-5 mb-5 text-center">
        <h1 class="mb-3 bread">FAQ</h1>
        <p class="breadcrumbs">
          <span class="mr-2"
            ><a href="/">Home <i class="ion-ios-arrow-forward"></i></a
          ></span>
          <span>FAQ <i class="ion-ios-arrow-forward"></i></span>
        </p>
      </div>
    </div>
  </div>
</section>

<section class="ftco-section goto-here">
  <div class="container">
    <div class="row">
      <div
        id="accordion"
        style="width: 100%; height: 100%; margin: 0% 10% 0% 10%"
      >
        <% faqs?.forEach((faq,index)=>{ %>
        <div class="card" style="margin: 4px">
          <div
            class="card-header"
            id="heading<%- index %>"
            style="cursor: pointer"
          >
            <h5 class="mb-0">
              <button
                class="btn accordion-toggle"
                data-toggle="collapse"
                data-target="#collapse<%- index %>"
                aria-expanded="false"
                aria-controls="collapse<%- index %>"
                style="
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <p style="margin: 0"><%- faq?.title %></p>
                <span class="chevron"></span>
              </button>
            </h5>
          </div>
          <div
            id="collapse<%- index %>"
            class="collapse"
            aria-labelledby="heading<%- index %>"
            data-parent="#accordion"
          >
            <div class="card-body"><%- faq?.description %></div>
          </div>
        </div>
        <% }) %>
      </div>
    </div>
  </div>
</section>

<%- include('../layouts/footer'); -%>
<script>
  $(document).ready(() => {
    $(".card-header").click(function () {
      var $collapse = $(this).closest(".card").find(".collapse");
      $collapse.collapse("toggle");
    });
  });
</script>
