<?php

/**
 * Template Name: FAQ
 */

inoby_enqueue_parted_style("faq", "page_templates");
inoby_enqueue_parted_script("faq", "page_templates");

get_header();

$faq_page_heading = rwmb_meta("faq_page_heading");
$faq_page_subheading = rwmb_meta("faq_page_subheading");
$faq_page_tabs = rwmb_meta("faq_page_tabs");
$faq_tab_title = "faq_tab_title";
$faq_tab_slug = "faq_tab_slug";
$faq_tab_icon = "faq_tab_icon";
$faq_tabs = "faq_tabs";
$faq_tabs_question = "faq_tabs_question";
$faq_tabs_answer = "faq_tabs_answer";
?>
<main id="primary" class="site-main">
  <?php do_action("inoby_page_template_faq_before_faq_section"); ?>
  <section class="faq">
    <div class="container">
      <div class="row faq-hero">
        <div class="col-12">
          <?php get_template_part("template-parts/yoast-breadcrumbs", "yoast-breadcrumbs"); ?>
          <?php
          if (!empty($faq_page_subheading)) {
            echo "<h3>" . $faq_page_subheading . "</h3>";
          }
          if (!empty($faq_page_heading)) {
            echo "<h1>" . $faq_page_heading . "</h1>";
          }
          ?>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="faq-container">
            <?php
            $g = 1;
            foreach ($faq_page_tabs as $faq_page_tab) {
              $tab_slug = $faq_page_tab[$faq_tab_slug] ?? "";
              echo '<b id="' . $tab_slug . '" class="targets"></b>';
              echo "<style>#" . $tab_slug . ":not(:target)~.faq-content .list-group-" . $g . " {display: none;}</style>";
              $g++;
            }
            ?>
            <div class="faq-content">
              <?php if (!empty($tab_slug)): ?>
                <div class="switch-button-wrapper">
                  <?php
                  $h = 1;
                  foreach ($faq_page_tabs as $faq_page_tab) {
                    $tab_slug = $faq_page_tab[$faq_tab_slug] ?? "";
                    $tab_title = $faq_page_tab[$faq_tab_title] ?? "";
                    $tab_icon_id = $faq_page_tab[$faq_tab_icon][0] ?? "";

                    echo '<a href="#' .
                      $tab_slug .
                      '" class="switch-button button-group-' .
                      $h .
                      '"
                      role="tabpanel">' .
                      wp_get_attachment_image($tab_icon_id, "icon-box") .
                      "<span>" .
                      $tab_title .
                      "</span></a>";
                    $h++;
                  }
                  ?>
                </div>
              <?php endif; ?>
              <?php
              $i = 1;
              foreach ($faq_page_tabs as $faq_page_tab) {
                echo '<ul class="faq-list list-group-' . $i . '">';
                $j = 1;
                foreach ($faq_page_tab[$faq_tabs] as $faq) {
                  echo '<li class="faq-item">';
                  echo '<input id="set-' . $i . "question-" . $j . '" type="checkbox" class="visually-hidden" />';
                  echo '<label for="set-' . $i . "question-" . $j . '" class="faq-question">' . $faq[$faq_tabs_question] . "</label>";
                  echo '<span class="faq-answer">' . $faq[$faq_tabs_answer] . "</span>";
                  echo "</li>";
                  $j++;
                }
                echo "</ul>";
                $i++;
              }
              ?>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <?php do_action("inoby_page_template_faq_after_faq_section"); ?>
</main>

<?php get_footer();
