<?php
$datas = $args['data'];

$onglets = isset($datas['onglets']) ? $datas['onglets'] : '';

$unique_id = "tabs-" . uniqid();

?>

<div class="tab" id="<?php echo $unique_id ?>">
  <div class="">
    <ul class="nav-tabs " role="tablist">

      <?php
      $cpt = 0;
      foreach ($onglets as $onglet) {

        $menu = $onglet['menu'];
        $actif = $onglet['actif'] ? 'active' : '';
        $id = getIDFromString($menu);
      ?>
        <li class="nav-item" role="presentation">
          <button class="nav-link js-tab <?php echo $actif ?>" data-tab="<?php echo $unique_id ?>" data-number="<?php echo $cpt ?>" data-target="<?php echo $id ?>" type="button"><?php echo $menu ?></button>
        </li>
      <?php $cpt++;
      } ?>

    </ul>
  </div>


  <div class="tab-content slick-iterations" id="myTabContent">
    <?php
    foreach ($onglets as $onglet) {

      $actif = $onglet['actif'] ? 'active' : '';
      $menu = $onglet['menu'];
      $id = getIDFromString($menu);
      $titre = $onglet['titre'];
      $sous_titre = $onglet['sous_titre'];
      $image = $onglet['image'];
      $texte = $onglet['texte'];
      $specs = $onglet['specs'];

    ?>
      <div class="tab-pane  <?php echo $actif ?>" id="<?php echo $id ?>" role="tabpanel">
        <div class="container mx-auto">
          <div class="description flex flex-col-reverse md:flex-row md:gap-24 md:justify-between md:flex-nowrap">
            <div class="left basis-6/12">
              <h3 class="heading-text text-[19px] lg:text-2xl leading-[180%] lg:leading-loose mb-5 lg:mb-16"><?php echo $titre; ?></h3>
              <h4 class="heading-text leading-normal lg:leading-tight mb-6 lg:mb-8 tracking-[0.85px]"><?php echo $sous_titre; ?></h4>
              <div class="texte mb-8 lg:mb-12"><?php echo $texte; ?></div>
              <ul class="flex flex-col lg:flex-row gap-12">
                <?php if (is_array($specs) && count($specs) > 0) :
                  foreach ($specs as $item) { ?>
                    <li>
                      <h5 class="heading-text mb-6 "><?php echo $item['titre'] ?></h5>
                      <div class=""><?php echo $item['texte'] ?></div>
                    </li>
                <?php }
                endif
                ?>
              </ul>
            </div>
            <div class="right basis-6/12 max-w-[490px] flex justify-end items-start mb-10 md:mb-0">
              <img class="w-full h-auto object-contain object-center" <?php acf_responsive_image($image['id'], 'full', '100%') ?> />
            </div>
          </div>
        </div>
        <div class="caracteristiques relative  mt-10">
          <?php

          $a = array(
            'titre'  => $onglet['caracteristiques_titre'],
            'liste' => $onglet['caracteristiques_liste'],
            'couleur_texte' => $onglet['caracteristiques_couleur_texte']
          );

          get_template_part('partials/flexible', 'colonnes', ['data' => $a]);

          ?>
        </div>
        <div class="recpompenses relative mt-10">
          <?php

          $a = array(
            'titre'  => $onglet['recompenses_titre'],
            'recompenses' => $onglet['recompenses_recompenses'],
          );
          if (is_array($a['recompenses']) && count($a['recompenses']) > 0) {
            get_template_part('partials/flexible', 'recompenses', ['data' => $a]);
          }
          ?>

        </div>
        <div class="accord_parfait relative mt-10">
          <?php

          $a = array(
            'titre'  => $onglet['accord_parfait_titre'],
            'sous_titre' => $onglet['accord_parfait_sous_titre'],
            'specifications' => $onglet['accord_parfait_specifications'],
            'texte' => $onglet['accord_parfait_texte'],
            'image' => $onglet['accord_parfait_image'],
          );

          get_template_part('partials/flexible', 'produit_image_texte', ['data' => $a])
          ?>

        </div>

      </div>
    <?php } ?>
  </div>
</div>