<?php
  
$terms = get_terms(
  [
    'taxonomy'   => 'product_cat',
    'hide_empty' => false,
    'exclude'    => [17], // uncategorized id 
    'parent'     => 0
  ]
);

foreach($terms as $idx=>$t) { // main categories
    
  $termsLvl1 = get_terms(
    [
      'taxonomy'   => 'product_cat',
      'hide_empty' => false,
      'exclude'    => [17],
      'parent'     => $t->term_id
    ]
  );
    
  echo '
    <div class="brxe-block tab-pane" role="tabpanel" tabindex="0">
      <div class="al_tab_content__title mobile">
        <button class="mobile go_back">
          <svg class="back_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
            <path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5" stroke="currentcolor"></path>
          </svg> Tillbaka
        </button>
      </div>
      <a href="' . get_term_link($t) . '"> Se alla ' . $t->name . '
          <svg class="arrow_se_alla" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
            <path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5" stroke="currentcolor"></path>
          </svg>
        </a>
        
      <div class="al_tab_content__subMenu mobile">
  ';        
		
  foreach($termsLvl1 as $t1){ // sub category lvl 1

    $termsLvl2 = get_terms(
      [
        'taxonomy'   => 'product_cat',
        'hide_empty' => false,
        'exclude'    => [17], // uncategorized id 
        'parent'     => $t1->term_id
      ]
    );

    echo '
      <div class="col mobile">
        <div class="cat_1_title mobile"> 
          <span class="sub_cats_1 mobile">' . $t1->name . '</span>
          <svg class="arrow_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
            <path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5" stroke="currentcolor"></path>
          </svg>
        </div>
        <div class="sub_cats_2 mobile">
          <a class="show_all" href="' . get_term_link($t1) . '">Visa alla inom ' . $t1->name . '</a>
    ';

    if(!empty($termsLvl2)){
      foreach($termsLvl2 as $t2){
        echo '<a href="' . get_term_link($t2) . '">' . $t2->name . '</a>';
      }
    }

    echo '
        </div>
      </div>        
    ';
  }    
    
  echo '</div></div>';
    
}

?>

<script defer>
  document.addEventListener("DOMContentLoaded", function () {
    // Accordion behavior
    const accordions = document.querySelectorAll('.col.mobile');

    accordions.forEach(acc => {
      acc.querySelector('.cat_1_title.mobile').addEventListener('click', function () {
        // close all others
        accordions.forEach(other => {
          if (other !== acc) {
            other.classList.remove('active');
          }
        });
        // toggle clicked
        acc.classList.toggle('active');
      });
    });

    // Toggle underline for .show_all when clicked
    document.querySelectorAll('.show_all').forEach(link => {
      link.addEventListener('click', function () {
        document.querySelectorAll('.show_all.active').forEach(other => {
          other.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
  });
</script>

.brxe-tabs-nested{
  transition: translate 350ms ease;
}

svg.arrow_se_alla{
  width: 1rem;
  rotate: -90deg;
  translate: 0 3px;
}

.al_tab_content__title.mobile{
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  
  button:hover{
    
      text-decoration-line: underline;
      -webkit-text-decoration-line: underline;
      text-decoration-color: black;
      -webkit-text-decoration-color: black;
  }
  
    
  & + a:hover{
      text-decoration-line: underline;
      -webkit-text-decoration-line: underline;
      text-decoration-color: black;
      -webkit-text-decoration-color: black;
  }
  
 
  button{
    background-color: transparent;
  	padding-bottom: 1.2rem;
    color: black;
    
    svg.back_arrow{
      translate: 0 1.5px;
      width: 1rem;
      rotate: 90deg;
    }
  }
}

.al_tab_content__subMenu.mobile{
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  border-top: 0.07rem solid rgba(0,0,0,1);
  padding-top: 1rem;
  
  .col.mobile{
    display: flex;
    flex-direction: column;
    padding-block: 0.7rem;
    cursor: pointer;
    
    .cat_1_title.mobile {
      display: flex;
      justify-content: space-between;
      
      span{
        font-weight: 900;
      }
      
    .sub_cats_1:hover {
        text-decoration-color: white;
      }

      
      .arrow_icon{
        display: inline-block;
        rotate: 0deg;
        transform-origin: center;
       	width: 1rem;
      }
    }
  
    
    .sub_cats_2.mobile{
      display: none;
      flex-direction: column;
    }
    
    &.active{
      .cat_1_title.mobile{
        .arrow_icon{
          rotate: 180deg;
        }
      }
      
      
      .sub_cats_2.mobile{
        display: flex;
        
        &:hover{
          text-decoration: none;
        }
        
        a:hover{
          text-decoration-line: underline;
          -webkit-text-decoration-line: underline;
          text-decoration-color: black;
          -webkit-text-decoration-color: black;
        }
    	}
    }
  }
}

.show_all {
  margin-top: 4px;
}

.show_all.active {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Remove blue tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Remove default focus outline */
.col.mobile:focus,
.col.mobile:active,
a:focus,
a:active,
button:focus,
button:active {
  outline: none !important;
  box-shadow: none !important;
}