<div class=" w-full">
    <!-- hero -->
    <?php if(!empty($banner_image)) : ?>
      <div class="mb-0  hidden md:block">
        <div class=" duration-700 ease-in-out">
          <img src="<?= base_url() . 'uploads/category/' . $banner_image; ?>" class="hidden w-full md:block" alt="">
          <div class="absolute top-80 left-36 text-center">
            <h1 class="font-custom text-primary text-5xl"><?= ucwords($banner_title); ?></h1>
            <div class="font-custom text-lg text-primary max-w-xl mx-auto mt-4">
              <?= ucfirst($banner_description); ?>
            </div>
          </div>
        </div>
      </div>
    <?php endif; ?>
    <!-- section filter -->
    <section class="  mx-auto"> 
      <div class="bg-secondary md:bg-primary p-8">
        <div class="flex justify-between items-center">
          <h1 class="text-secondary font-custom md:text-secondary text-xl
          mdtext-3xl hidden md:block"><?= ucwords($category_name); ?></h1>
          <h1 class="font-custom text-white md:text-secondary text-xl mdtext-3xl flex items-center md:hidden ">
            <span class="mr-3"><?= ucwords($category_name); ?></span>
          </h1>
          <div class="flex items-center">
            <button id="toggleBtnFilter" style="display:none">
              <span class="text-white md:text-secondary font-custom text-xl text-3xl mr-8">Filter +</span>
            </button>
            <button id="toggleBtnSort">
              <span class="text-white md:text-secondary font-custom text-xl text-3xl">Sort +</span>
            </button>
          </div>
        </div>
      </div>
      <!-- mega menu filter -->
      <div id="megaMenuFilter" class="bg-primary/90  shadow-lg hidden absolute w-full" style="z-index: 999;">
        <div class="grid grid-cols-5 gap-4 hidden md:grid  p-6">
          <!-- Column 1 -->
          <div class="col-span-1" style="">
            <!-- <h2 class="text-lg font-semibold mb-4 text-secondary font-custom">Product Type</h2>
            <a data-producttype="Mules" href="#"
            class="block mb-2  text-white font-custom productType">Mules</a>
            <a data-producttype="Sandals" href="#"
            class="block mb-2  text-white font-custom productType">Sandals</a>
            <a data-producttype="Block Heels" href="#"
            class="block mb-2  text-white font-custom productType">Block Heels</a>
            <a data-producttype="Pump Heels" href="#"
            class="block mb-2  text-white font-custom productType">Pump Heels</a> -->
          </div>
          <!-- Column 2 -->
          <div class="col-span-1">
            <h2 class="text-lg font-semibold mb-4 text-secondary font-custom">Size</h2>
            <div class="flex items-center">
              <div>
                <a data-productsize="35" href="#" class="block mb-2  text-white font-custom productSize">35</a>
                <a data-productsize="36" href="#" class="block mb-2  text-white font-custom productSize">36</a>
                <a data-productsize="37" href="#" class="block mb-2  text-white font-custom productSize">37</a>
                <a data-productsize="38" href="#" class="block mb-2  text-white font-custom productSize">38</a>
              </div>
              <div class="ml-8">
                <a data-productsize="39" href="#" class="block mb-2  text-white font-custom productSize">39</a>
                <a data-productsize="40" href="#" class="block mb-2  text-white font-custom productSize">40</a>
                <a data-productsize="41" href="#" class="block mb-2  text-white font-custom productSize">41</a>
                <a data-productsize="42" href="#" class="block mb-2  text-white font-custom productSize">42</a>
              </div>
            </div>
          </div>
          <!-- Column 3 -->
          <div class="col-span-1">
            <h2 class="text-lg font-semibold mb-4 text-secondary font-custom">Color</h2>
            <div class="flex items-center" style="flex-wrap: wrap">
                <?php foreach($colors as $color) : ?>
                  <a class="productColor" title="<?= ucwords($color['product_attributes']); ?>"
                  href="#" data-productcolorid="<?= $color['id_product_attributes']; ?>">
                    <div class="w-8 h-8 rounded-full ml-2 m-2 productColorBox"
                    style="background-color:<?= $color['color_code']; ?>"></div>
                  </a>
                <?php endforeach; ?>
            </div>
          </div>
          <!-- Column 4 -->
          <div class="col-span-1">
            <h2 class="text-lg font-semibold mb-4 text-secondary font-custom">Price (Rp)</h2>
            <div class="flex items-center">
              <input type="text" name="" id="priceFrom" value="500000"
              class="w-28 bg-black text-white font-custom"
              style="background-color: rgba(250, 250, 250,0.5);">
              <img src="./Images/icon/divider.svg" alt="" class="p-2">
              <input type="text" name="" id="priceTo" value="2000000"
              class="w-28 bg-black text-white font-custom"
              style="background-color: rgba(250, 250, 250,0.5);">
            </div>
          </div>
          <!-- Column 5 -->
          <div class="col-span-1">
            <a href="#" id="applyFilter">
              <div class="border border-white w-40 px-3 mx-auto text-center mt-8">
                <span class="text-white text-center font-custom">APPLY</span>
              </div>
            </a>
            <a href="<?= base_url() . 'category/' . $alias_level1 . '/' . $alias_level2; ?>">
              <div class="border border-white w-40 px-3 mx-auto text-center mt-2">
                <span class="text-white text-center font-custom">RESET</span>
              </div>
            </a>
          </div>
        </div>
        <!-- menu mobile -->
        <div class="block md:hidden text-center">
          <div class=" ">
            <div class="flex items-center  py-2 cursor-pointer justify-center " onclick="toggleAccordion('accordion1')">
              <span class="text-lg  text-secondary font-custom">Product Type</span>
              <svg class="w-6 h-6 transition-transform transform mt-1"
              id="arrow1" fill="none" stroke="#fff" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </div>
            <div id="accordion1" class="hidden">
              <div class="flex flex-col items-center justify-center">
                <a href="#" class="block mb-2  text-white font-custom">Mules</a>
                <a href="#" class="block mb-2  text-secondary font-custom flex items-center"> <span>Block Heels</span>
                  <div class="w-2 h-2 bg-secondary rounded-full ml-2"></div>
                </a>
                <a href="#" class="block mb-2  text-white font-custom">Sandals</a>
                <a href="#" class="block mb-2  text-white font-custom">Pump Heels</a>
              </div>
            </div>
          </div>
          <!-- item 2 -->
          <div class="">
            <div class="flex items-center justify-center py-2 cursor-pointer" onclick="toggleAccordion('accordion2')">
              <span class="text-lg  text-secondary font-custom">Size</span>
              <svg class="w-6 h-6 transition-transform transform mt-1"
              id="arrow1" fill="none" stroke="#fff" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round"
                strokeWidth="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </div>
            <div id="accordion2" class="hidden">
              <div class="flex items-center justify-center">
                <div>
                  <a href="#" class="block mb-2  text-white font-custom">35</a>
                  <a href="#" class="block mb-2  text-secondary font-custom flex items-center"> <span>36</span>
                    <div class="w-2 h-2 bg-secondary rounded-full ml-2"></div>
                  </a>
                  <a href="#" class="block mb-2  text-white font-custom">37</a>
                  <a href="#" class="block mb-2  text-white font-custom">38</a>
                </div>
                <div class="ml-8">
                  <a href="#" class="block mb-2  text-white font-custom">39</a>
                  <a href="#" class="block mb-2  text-white font-custom">40</a>
                  <a href="#" class="block mb-2  text-white font-custom">41</a>
                  <a href="#" class="block mb-2  text-white font-custom">42</a>
                </div>
              </div>
            </div>
          </div>
          <!-- item 3 -->
          <div class="">
            <div class="flex items-center justify-center py-2 cursor-pointer" onclick="toggleAccordion('accordion3')">
              <span class="text-lg  text-secondary font-custom">Color</span>
              <svg class="w-6 h-6 transition-transform transform mt-1"
              id="arrow1" fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </div>
            <div id="accordion3" class="hidden">
              <div class="flex items-center justify-center">
                <div>
                  <div class="w-8 h-8 bg-blue-300 rounded-full ml-2 m-2"></div>
                  <div class="w-8 h-8 bg-red-300 rounded-full ml-2 m-2"></div>
                  <div class="w-8 h-8 bg-yellow-300 rounded-full ml-2 m-2"></div>
                </div>
                <div>
                  <div class="w-8 h-8 bg-red-300 rounded-full ml-2 m-2"></div>
                  <div class="w-8 h-8 bg-blue-300 rounded-full ml-2 m-2"></div>
                  <div class="w-8 h-8 bg-green-300 rounded-full ml-2 m-2"></div>
                </div>
                <div>
                  <div class="w-8 h-8 bg-yellow-300 rounded-full ml-2 m-2"></div>
                  <div class="w-8 h-8 bg-secondary rounded-full ml-2 m-2"></div>
                  <div class="w-8 h-8 bg-red-300 rounded-full ml-2 m-2"></div>
                </div>
              </div>
            </div>
          </div>
          <!-- item 4 -->
          <div class="">
            <div class="flex items-center justify-center py-2 cursor-pointer" onclick="toggleAccordion('accordion4')">
              <span class="text-lg  text-secondary font-custom">Price</span>
              <svg class="w-6 h-6 transition-transform transform mt-1"
              id="arrow1" fill="none" stroke="#fff" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </div>
            <div id="accordion4" class="hidden py-4 mx-auto">
              <div class="flex items-center">
                <input type="text" name="" id="" value="Rp. 0"
                class="w-1/2 bg-black text-white font-custom"
                style="background-color: rgba(250, 250, 250,0.5);">
                <img src="./Images/icon/divider.svg" alt="" class="p-2">
                <input type="text" name="" id="" value="Rp. 1"
                class="w-1/2 bg-black text-white font-custom"
                style="background-color: rgba(250, 250, 250,0.5);">
              </div>
              <!-- <input type="range" min="0" max="100" value="10" step="1" class="slider appearance-none w-64 h-3 bg-secondary rounded-full focus:outline-none mr-4 mt-8" id="rangeSlider"> -->
              <div class="two-range-slider js-two-range-slider mt-4 w-full mx-auto">
                <input type="range" value="80" min="10" max="100" step="1"
                class=" ml-8 two-range-slider__input js-two-range-slider-input" id="rangeSlider">
                <input type="range" value="30" min="10" max="100"
                step="1" class="two-range-slider__input js-two-range-slider-input"
                id="rangeSlider">
              </div>
            </div>
          </div>
          <!-- action -->
          <div class="grid grid-cols-2 gap-0 ">
            <!-- <div class="border border-secondary bg-secondary w-full p-3 mx-auto text-center mt-2">
              <span class="text-white text-center font-custom">APPLY</span>
            </div>
            <div class="border border-primary bg-primary w-full p-3 mx-auto text-center mt-2">
              <span class="text-white text-center font-custom">RESET</span>
            </div> -->
          </div>
        </div>
      </div>
      <!-- mega menu sort -->
      <div id="megaMenuSort" class="bg-primary/90  shadow-lg hidden absolute w-full" style="z-index: 999;">
        <div class="grid grid-cols-4 gap-4 hidden md:grid  py-6 pt-8">
          <!-- Column 1 -->
          <div class="col-span-1 ">
            <!-- <h2 class="text-lg md:text-xl  text-secondary font-custom ml-8">Most Favourites</h2> -->
          </div>
          <!-- Column 2 -->
          <div class="col-span-1">
            <h2 class="text-xl font-semibold text-secondary font-custom">Price</h2>
            <div class="flex items-center">
              <div class="sortButtonsHome border border-secondary w-40 px-3 mx-auto text-center mt-2 mr-2">
                <?= form_open('category/' . $alias_level1 . '/' . $alias_level2); ?>
                  <input type="hidden" name="sort_product" value="price-asc" />
                  <input style="cursor:pointer" type="submit"
                  value="Low To Hight" class="text-white text-center font-custom" />
                <?= form_close(); ?>
              </div>
              <div class="sortButtonsHome ml-8 border border-secondary w-40 px-3 mx-auto text-center mt-2 ">
                <?= form_open('category/' . $alias_level1 . '/' . $alias_level2); ?>
                  <input type="hidden" name="sort_product" value="price-desc" />
                  <input style="cursor:pointer" type="submit"
                  value="Hight To Low" class="text-white text-center font-custom" />
                <?= form_close(); ?>
              </div>
            </div>
          </div>
          <!-- Column 3 -->
          <div class="col-span-1">
            <h2 class="text-xl font-semibold text-secondary font-custom">Product Name</h2>
            <div class="flex items-center">
              <div class="sortButtonsHome ml-8 border border-secondary w-40 px-3 mx-auto text-center mt-2 mr-2">
              <?= form_open('category/' . $alias_level1 . '/' . $alias_level2); ?>
                <input type="hidden" name="sort_product" value="name-asc" />
                <input style="cursor:pointer" type="submit"
                value="A - Z" class="text-white text-center font-custom" />
              <?= form_close(); ?>
              </div>
              <div class="sortButtonsHome ml-8 border border-secondary w-40 px-3 mx-auto text-center mt-2">
              <?= form_open('category/' . $alias_level1 . '/' . $alias_level2); ?>
                <input type="hidden" name="sort_product" value="name-desc" />
                <input style="cursor:pointer" type="submit"
                value="Z - A" class="text-white text-center font-custom" />
              <?= form_close(); ?>
              </div>
            </div>
          </div>
          <!-- Column 4 -->
          <div class="col-span-1">
            <!-- <div class="border border-secondary w-40 px-3 mx-auto text-center mt-8 bg-secondary">
              <span class="text-white text-center font-custom">APPLY</span>
            </div>
            <div class="border border-white w-40 px-3 mx-auto text-center mt-2">
              <span class="text-white text-center font-custom">RESET</span>
            </div> -->
          </div>
        </div>
        <!-- menu mobile -->
        <div class="block md:hidden">
          <div class="px-8  mt-8 md:mt-2">
            <!-- <h2 class="text-xl font-semibold mb-4 text-secondary font-custom">Most Favourites</h2> -->
          </div>
          <!-- Column 2 -->
          <div class="px-8">
            <h2 class="text-xl font-semibold mb-2 text-secondary font-custom">Price</h2>
            <div class="flex items-center">
              <div class="border border-secondary p-1 px-2 text-center">
                <?= form_open('category/' . $alias_level1 . '/' . $alias_level2); ?>
                  <input type="hidden" name="sort_product" value="price-asc" />
                  <input style="cursor:pointer" type="submit" 
                  value="Low To Hight" class="text-white text-center font-custom" />
                <?= form_close(); ?>
              </div>
              <div class="ml-2 border border-secondary p-1 px-2 text-center">
                <?= form_open('category/' . $alias_level1 . '/' . $alias_level2); ?>
                  <input type="hidden" name="sort_product" value="price-desc" />
                  <input style="cursor:pointer" type="submit"
                  value="Hight To Low" class="text-white text-center font-custom" />
                <?= form_close(); ?>
              </div>
            </div>
          </div>
          <!-- Column 3 -->
          <div class="px-8 mt-8 mb-4">
            <h2 class="text-xl font-semibold mb-2 text-secondary font-custom">Product Name</h2>
            <div class="flex items-center">
              <div class="border border-secondary w-40 p-1 px-2 text-center ">
                <?= form_open('category/' . $alias_level1 . '/' . $alias_level2); ?>
                  <input type="hidden" name="sort_product" value="name-asc" />
                  <input style="cursor:pointer" type="submit"
                  value="A - Z" class="text-white text-center font-custom" />
              <?= form_close(); ?>
              </div>
              <div class="ml-2 border border-secondary w-40 p-1 px-2 text-center">
                <?= form_open('category/' . $alias_level1 . '/' . $alias_level2); ?>
                  <input type="hidden" name="sort_product" value="name-desc" />
                  <input style="cursor:pointer" type="submit"
                  value="Z - A" class="text-white text-center font-custom" />
                <?= form_close(); ?>
              </div>
            </div>
          </div>
          <!-- action -->
          <div class="grid grid-cols-2 gap-0 ">
            <!-- <div class="border border-secondary bg-secondary w-full p-3 mx-auto text-center mt-2">
              <span class="text-white text-center font-custom">APPLY</span>
            </div>
            <div class="border border-primary bg-primary w-full p-3 mx-auto text-center mt-2">
              <span class="text-white text-center font-custom">RESET</span>
            </div> -->
          </div>
        </div>
      </div>
    </section>
    <!-- section 2 -->
    <section class="bg-[#F4F4F1] mx-auto px-8">
      <!-- product -->
      <div class="max-w-4xl mx-auto mt-6 md:mt-24">
        <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
          <?php foreach($products as $product) : ?>
            <a href="<?= base_url() . 'product/' . strtolower(remove_accents($product->alias)); ?>">
              <div class="py-4 text-center relative">
                <!--alert min stock-->
                <!-- <div class="absolute ml-2">
                  <div class="w-12 py-1 md:py-4 px-4 bg-secondary flex justify-center items-center px-">
                    <span class="text-white font-custom text-sm flex flex-col -4">
                      <span class="span text-lg md:text-xl">2</span>
                      <span class="text-xs md:text-sm px-2">
                        Pieces left
                      </span>
                    </span>
                  </div>
                </div> -->
                <?php if($product->new_arrival == 'yes') : ?>
                  <!-- new arrival -->
                  <div class="absolute top-0 right-0 -mt-1 -mr-1 hidden md:block">
                    <div class="w-12  h-12 rounded-full bg-primary flex justify-center items-center">
                      <span class="text-secondary font-custom text-xs">New Arrival</span>
                    </div> 
                  </div>
                <?php endif; ?>
                <img src="<?= base_url() . 'uploads/product/' . 
                $product->image1; ?>" alt="" class="xs:h-60 md:h-80 w-full mx-auto">
                <div class="text-center mt-3">
                  <p class="text-secondary text-lg font-custom">
                    <?= strtoupper($product->title); ?>
                  </p>
                  <p class="text-primary font-custom">
                  <?php
                    //get product details
                    $details = $this->db->select('price, discounted_price')
                    ->from('product_details')
                    ->where('product_id', $product->id_products)
                    ->get()->row_array();
                  ?>
                  <?php if($details) : ?>
                    <?php if ($details['discounted_price'] != 0): ?>
                      Rp <?= number_format($details['discounted_price']); ?><br>
                        <span style="color:grey; font-size:15px; text-decoration:line-through">
                        Rp <?= number_format($details['price']); ?> 
                        </span>
                      
                    <?php else : ?>
                      Rp <?= number_format($details['price']); ?>
                    <?php endif; ?>
                  <?php endif; ?>
                  </p>
                  <?php if(!empty($product->preorder_message)) : ?>
                    <p class="text-[#C4C4C4] italic font-tinosItalic"><?= ucwords($product->preorder_message); ?></p>
                  <?php endif; ?>
                </div>
              </div>
            </a>
          <?php endforeach; ?>
        </div>
        <?php
        //create pagination...
        echo '<div class="flex items-center justify-center space-x-2 mb-8
        font-custom txt-2xl" style="text-align:center;">' . $this->pagination->create_links() . '</div>';
        ?>
      </div>
    </section>
<script>
$(document).ready(() => {
  let chosenProductType;
  let chosenProductSize;
  let chosenProductColor;
  let chosenPriceFrom = $('#priceFrom').val();
  let chosenPriceTo = $('#priceTo').val();

  //get chosen product type
  $('a.productType').on('click', function(e) {
    e.preventDefault();
    const index = $('a.productType').index(this);
    chosenProductType = $(this).data('producttype');
    $(`a.productType:eq(${index})`).css('color', 'rgb(194 181 150)');
    $('a.productType').not(`:eq(${index})`).css('color', 'white');
  });

  //get chosen size
  $('a.productSize').on('click', function(e) {
    e.preventDefault();
    const index = $('a.productSize').index(this);
    chosenProductSize = $(this).data('productsize');
    $(`a.productSize:eq(${index})`).css('color', 'rgb(194 181 150)');
    $('a.productSize').not(`:eq(${index})`).css('color', 'white');
  });

  //get chosen solor
  $('a.productColor').on('click', function(e) {
    e.preventDefault();
    const index = $('a.productColor').index(this);
    chosenProductColor = $(this).data('productcolorid');
    $(`.productColorBox:eq(${index})`).css('border', '2px solid white');
    $('.productColorBox').not(`:eq(${index})`).css('border', 'none');
  });

  //get chosen prices
  $("#priceFrom").keyup(function(e) {
    chosenPriceFrom = $(this).val();
  });

  $("#priceTo").keyup(function(e) {
    chosenPriceTo = $(this).val();
  });

  $('#applyFilter').click(function(e) {
    e.preventDefault();

    //check all filter parameters must complete
    /* if(!chosenProductType || !chosenProductSize || !chosenProductColor || !chosenPriceFrom || !chosenPriceTo) {
      alert('Please choose all filters');
      return;
    } */

    if(!chosenProductSize || !chosenProductColor || !chosenPriceFrom || !chosenPriceTo) {
      alert('Please choose all filters');
      return;
    }
    
    $.ajax({
        url: '<?= base_url('category/ajax_categoryfilter'); ?>',
        type: 'POST',
        data: {
          '<?= $this->security->get_csrf_token_name(); ?>': '<?=  $this->security->get_csrf_hash(); ?>',
          // chosenProductType,
          chosenProductSize,
          chosenProductColor,
          chosenPriceFrom,
          chosenPriceTo,
        },
        success: function (result) {
          if(result.filter_success) {
            window.location = '<?= base_url() . 'category/filter/' . $alias_level1 . '/' . $alias_level2; ?>';
          }
        }
    });
  });
});
</script>