<div class=" w-full relative">
  <!-- hero -->
  <div class="mb-0">

    <div class="px-8 md:px-0 container mx-auto my-2">
      <div class="py-4">
        <a href="<?= base_url() . 'category/collection'; ?>" class="font-custom text-secondary">Shop /</a>
        <a href="#" class="font-custom text-primary"> Shop Detail</a>
      </div>
    </div>  

    <!-- mobile carousel -->
    <div id="default-carousel" class="relative w-full block md:hidden" data-carousel="slide">
      <!-- Carousel wrapper -->
      <div class="relative">
        <div class="relative h-96b md:h-[50vh] overflow-hidden">
          <?php if (!empty($product['image1'])) : ?>
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
              <img src="<?= base_url() . 'uploads/product/' . $product['image1']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
            </div>
          <?php endif; ?>
          <?php if (!empty($product['image2'])) : ?>
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
              <img src="<?= base_url() . 'uploads/product/' . $product['image2']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
            </div>
          <?php endif; ?>
          <?php if (!empty($product['image3'])) : ?>
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
              <img src="<?= base_url() . 'uploads/product/' . $product['image3']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
            </div>
          <?php endif; ?>
          <?php if (!empty($product['image4'])) : ?>
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
              <img src="<?= base_url() . 'uploads/product/' . $product['image4']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
            </div>
          <?php endif; ?>
          <?php if (!empty($product['image5'])) : ?>
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
              <img src="<?= base_url() . 'uploads/product/' . $product['image5']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
            </div>
          <?php endif; ?>
        </div>

        <!-- carousel navigation -->
        <div class="relative flex space-x-3  top-5 justify-center mt-[-60px]" style="z-index: 999;">
          <?php if (!empty($product['image1'])) : ?>
            <button type="button" class="w-10 h-2" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
          <?php endif; ?>
          <?php if (!empty($product['image2'])) : ?>
            <button type="button" class="w-10 h-2" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
          <?php endif; ?>
          <?php if (!empty($product['image3'])) : ?>
            <button type="button" class="w-10 h-2" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
          <?php endif; ?>
          <?php if (!empty($product['image4'])) : ?>
            <button type="button" class="w-10 h-2" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
          <?php endif; ?>
          <?php if (!empty($product['image5'])) : ?>
            <button type="button" class="w-10 h-2" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
          <?php endif; ?>
        </div>
      </div>
    </div>
    
    <div class="px-8 md:px-0 container mx-auto my-4">  
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Kolom 1 -->
        <div class="text-center md:pr-4">
          <div class="hidden md:block">
            <?php if (!empty($product['image1'])) : ?>
              <img src="<?= base_url() . 'uploads/product/' . $product['image1']; ?>" class="xs:h-96b md:h-[800px] w-full xs:object-cover" id="mainImage">
            <?php endif; ?>
          </div>
        </div>
        <!-- Kolom 2 (2 kolom tumpuk) -->
        <div class="flex md:space-x-4 border-l-0 md:border-l md:border-l-primary/90 xs:pl-0 md:pl-4 xs:mt-24 md:mt-0">
          <div class="hidden md:block mx-4">
            <?php if (!empty($product['image1'])) : ?>
              <img id="thumbnail1" src="<?= base_url() . 'uploads/product/' . $product['image1']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
            <?php endif; ?>
            <?php if (!empty($product['image2'])) : ?>
              <img id="thumbnail2" src="<?= base_url() . 'uploads/product/' . $product['image2']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
            <?php endif; ?>
            <?php if (!empty($product['image3'])) : ?>
              <img id="thumbnail3" src="<?= base_url() . 'uploads/product/' . $product['image3']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
            <?php endif; ?>
            <?php if (!empty($product['image4'])) : ?>
              <img id="thumbnail4" src="<?= base_url() . 'uploads/product/' . $product['image4']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
            <?php endif; ?>
            <?php if (!empty($product['image5'])) : ?>
              <img id="thumbnail5" src="<?= base_url() . 'uploads/product/' . $product['image5']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
            <?php endif; ?>
          </div>
          <div class="w-full" id="productDetailDesc" style="margin-top:3rem"> 
            <h1 class="font-custom text-primary class text-3xl"><?= strtoupper($product['title']); ?></h1> 
            <div id="pricing_block">
              <?php if (isset($product_detail['price'])) : ?>
                <?php if ($product_detail['discounted_price'] != 0) : ?>
                  <p class="font-custom text-primary text-lg">Rp <?= number_format($product_detail['discounted_price']); ?> <span style="font-size:15px"><span style="text-decoration: line-through">Rp <?= number_format($product_detail['price']); ?></span></span></p>
                <?php else : ?>
                  <p class="font-custom text-primary text-lg">Rp <?= number_format($product_detail['price']); ?></p>
                <?php endif; ?>
              <?php endif; ?>
            </div>
            <!-- descriptions -->
            <div class="mb-4">
              <div class="flex items-center justify-between py-2 cursor-pointer border-b border-b-primary" onclick="toggleAccordion('accordion_desc', 'arrow1')">
                <span class="text-lg text-primary font-custom">Descriptions</span>
                <svg class="w-6 h-6 transition-transform transform" id="arrow1" fill="none" stroke="#514A45" 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="accordion_desc" class="hidden mt-2">
                <div class="font-custom text-primary text-left">
                  <?= ucfirst($product['description']); ?>
                </div>
              </div>
            </div>
            <!-- Detail -->
            <div class="mb-4">
              <div class="flex items-center justify-between py-2 cursor-pointer border-b border-b-primary" onclick="toggleAccordion('accordion_detail', 'arrow2')">
                <span class="text-lg text-primary font-custom">Details</span>
                <svg class="w-6 h-6 transition-transform transform" id="arrow2" fill="none" stroke="#514A45" 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="accordion_detail" class="hidden mt-2">
                <div class="font-custom text-primary text-left">
                  <?= ucfirst($product['long_description']); ?>
                </div>
              </div>
            </div>
            <!-- variations -->
            <div class="grid grid-cols-2 gap-4 mt-10">
              <div class="mb-4">
                <div class="flex items-center justify-between py-2 cursor-pointer border-b border-b-primary" onclick="toggleAccordion('accordion_color', 'arrow3')">
                  <span class="text-lg text-primary font-custom">Color</span>
                  <div class="flex">
                    <div class="flex items-center mr-2">
                      <div id="initial_colorcode" class="w-3 h-3 rounded-full mr-1" style="background-color:<?= $initial_colorcode; ?>"></div>
                      <p id="initial_colorname" class="text-sm font-custom"><?= $initial_colorname; ?></p>
                    </div>
                    <svg class="w-6 h-6 transition-transform transform" id="arrow3" fill="none" stroke="#514A45" 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>
                <div id="accordion_color" class="hidden mt-2">
                  <div style="width:200px">
                    <?php foreach ($available_colors as $color) : ?>
                      <a class="colorIcon" data-colortext="<?= $color['color_text']; ?>" href="#" title="<?= $color['color_text']; ?>">
                        <div class="color-icon" style="background:<?= $color['color_code']; ?>"></div>
                      </a>
                    <?php endforeach; ?>
                  </div>
                </div>
              </div>
              <!-- height -->
            </div>
            <!-- size -->
            <div>
              <div class="flex justify-between items-center">
                <p>Size</p>
                <div id="sizing_block" class=" flex items-center space-x-2">
                  <?php foreach ($all_sizes as $size) : ?>
                    <?php if (in_array($size, $available_sizes)) : ?>
                      <a href="#" class="sizeIcon" data-size="<?= $size; ?>">
                        <p class="p-2 font-custom border 
                      <?php if ($size == $initial_size) : ?>
                        border-primary
                      <?php else : ?>
                        border-secondary
                      <?php endif; ?>  
                      mt-2 w-6 h-6 flex justify-center items-center chosenSize"><span><?= $size; ?></span></p>
                      </a>
                    <?php else : ?>
                      <div class="w-6 h-6 relative overflow-hidden bg-transparent mt-2">
                        <div class="w-10 h-10 absolute top-0 bottom-0 left-0 right-2 transform -rotate-45 origin-top-left border border-secondary">
                        </div>
                        <p class="font-custom border border-secondary w-6 h-6 flex justify-center items-center"><span><?= $size; ?></span></p>
                      </div>
                    <?php endif; ?>
                  <?php endforeach; ?>
                </div>
              </div>
              <a href="<?= base_url() . 'uploads/size-chart.jpg'; ?>" data-lightbox="size-chart"><small class="text-secondary text-xs font-tinosItalic italic float-right mt-1"><u>Size Guide</u></small></a>
            </div>

            <!-- text area -->
            <div class=" mt-8">
              <div class="flex justify-between items-center">
                <p class="font-custom">+<?= number_format($greetingcard_price, 0, ',', '.'); ?> IDR for greeting card</p>
                <div id="greetingcardBtn" class="w-3 h-3 rounded-full mr-1" style="border:1px solid rgb(194 181 150); cursor:pointer"></div>
              </div>
              <textarea maxlength="100" id="greetingcardText" name="" cols="30" rows="3" placeholder="Max. 100 characters" class="italic font-tinosItalic bg-transparent border border-primary w-full displayOff"></textarea>
            </div>
            <p style="display:none" class=" font-custom text-secondary text-right text-sm "><a href="#"><u>I need something more personal</u></a></p>
            <!-- button -->
            <button id="addToCart" class="flex justify-center items-center bg-secondary p-2 mt-4 w-full">
              <p class="font-custom text-white">Add to Bag</p>
            </button>
            <p id="errorMessage2" class="font-custom"></p>
          </div>
        </div>
      </div>

      <!-- recomendation -->
      <div class="mt-8">
        <p class="text-secondary font-custom">YOU MAY ALSO LIKE</p>
        <div class="grid grid-cols-3 gap-4 mt-4">
          <?php foreach ($similar_products as $similar) : ?>
            <div>
              <a href="<?= base_url() . 'product/' . strtolower(remove_accents($similar['alias'])); ?>"> 
                <img src="<?= base_url() . 'uploads/product/' . $similar['image1']; ?>" class="xs:w-40 md:h-100 w-full">
              </a>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
    <!-- sidebar -->
    <div id="sidebar" class="xs:w-full md:w-1/4 h-full right-0 
    transition-transform duration-300 -mt-16 hidden" style="z-index: 999;">
      <div class="flex justify-center">
        <div class="my-4 relative">
          <img src="<?= base_url() . 'uploads/chart.svg'; ?>" alt="">
          <div class="w-4 h-4 flex justify-center items-center bg-secondary rounded-full absolute bottom-0">
            <span class="text-white text-xs">2</span>
          </div>
        </div>
        <div>
          <i id="cartCloseIcon" class="fas fa-times absolute left-8
          text-secondary cursor-pointer block md:hidden" style="top:2.5rem"></i>
        </div>
      </div>
      <div class="bg-primary/90 h-full px-8">
        <p id="cartMessage" class="font-custom text-white text-center pt-8"></p>
        <div class="grid grid-cols-2 gap-4 mt-8">
          <div id="cartImage"></div>
          <div class="w-full">
            <h1 class="font-custom text-white" id="cartTitle"></h1>
            <p class="font-custom text-white" id="cartPrice"></p>

            <h1 class="font-custom text-white" id="cartGreeting"></h1>
            <p class="font-custom text-white" id="cartGreetingPrice"></p>

            <div class="border-b-2 border-b-secondary my-4"></div>

            <div class="flex justify-between items-center ">
              <p class="font-custom text-white" id="cartColor"></p>
              <p class="font-custom text-white" id="cartSize"></p>
            </div>

            <div id="cartQtyDelete" class="flex justify-between items-center mt-8">
              <div class="flex items-center">
                <button id="buttonRemove" class="text-white font-custom" style="font-size:30px">-</button>
                <span id="qtyInput" class="px-2 text-white font-custom" style="border-bottom:1px solid white">1</span>
                <button id="buttonAdd" class="text-white font-custom">+</button>
              </div>
              <p class="font-custom text-secondary italic
              font-tinosItalic" id="removeFromCart" style="cursor:pointer">Delete</p>
            </div>
            <p id="errorMessage" class="font-custom text-white"></p>
          </div>
        </div>
        <!-- action -->
        <a href="<?= base_url('cart'); ?>">
          <button class="flex justify-center items-center bg-secondary p-2 mt-4 w-full">
            <p class="font-custom text-white">Check Out</p>
          </button>
        </a>
        <a href="#">
          <button id="btnContinueShopping" class="flex justify-center items-center bg-secondary p-2 mt-4 w-full">
            <p class="font-custom text-white">Continue Shopping</p>
          </button>
        </a>
      </div>
    </div>
    <!-- end sidebar -->
    <script>
      var productId = <?= $product['id_products']; ?>;
      var chosenColor = '<?= $initial_colorname; ?>';
      var chosenSize = <?= $initial_size; ?>;
      var greetingText;

      $(document).ready(function() {
        //get product details based on color
        $('a.colorIcon').on('click', function(e) {
          e.preventDefault();
          ajaxGetProductDetailByColor($(this).data('colortext'));
        });

        //get product detail based on size
        $('a.sizeIcon').on('click', function(e) {
          e.preventDefault();
          ajaxGetProductDetailBySize($(this).data('size'), chosenColor);
        });

        //change thumbnails
        for (let i = 1; i <= 5; i++) {
          $(`#thumbnail${i}`).on('click', function(e) {
            e.preventDefault();

            let imageUrl;

            switch (i) {
              case 1:
                imageUrl = '<?= base_url() . 'uploads/product/' . $product['image1']; ?>';
                break;
              case 2:
                imageUrl = '<?= base_url() . 'uploads/product/' . $product['image2']; ?>';
                break;
              case 3:
                imageUrl = '<?= base_url() . 'uploads/product/' . $product['image3']; ?>';
                break;
              case 4:
                imageUrl = '<?= base_url() . 'uploads/product/' . $product['image4']; ?>';
                break;
              case 5:
                imageUrl = '<?= base_url() . 'uploads/product/' . $product['image5']; ?>';
                break;
              default:
                break;
            }
            $('#mainImage').attr('src', imageUrl);
          });
        }

        //toggle greeting card button
        $('#greetingcardBtn').on('click', function() {
          $(this).toggleClass("bg-secondary");
          $('#greetingcardText').toggle();
        });

        //choose a size
        $('.chosenSize').on('click', function(e) {
          e.preventDefault();
          chosenSize = $(this).data('size');
        });

        //add to cart
        $('#addToCart').on('click', function() {
          if (!chosenSize) {
            alert('Please choose size');
            return;
          }
          const cartData = {
            chosenSize,
            chosenColor,
            productId
          };
          ajaxAddToCart(cartData);
        });

        //remove from cart
        $('#removeFromCart').on('click', function() {
          const cartData = {
            productId
          };
          ajaxRemoveFromCart(cartData);
        });

        //close cart
        $('#btnContinueShopping').on('click', function(e) {
          e.preventDefault();
          $('#sidebar').hide();
        })

        $('#cartCloseIcon').on('click', function(e) {
          e.preventDefault();
          $('#sidebar').hide();
        })

        //cart add quantity
        $('#buttonAdd').on('click', function(e) {
          e.preventDefault();
          ajaxAddQuantity();
        })

        //cart remove quantity
        $('#buttonRemove').on('click', function(e) {
          e.preventDefault();
          ajaxRemoveQuantity();
        })
      });

      function ajaxGetProductDetailByColor(color_text) {
        $.ajax({
          'url': '<?= base_url('product/ajax_get_productdetailbycolor'); ?>',
          'type': 'POST',
          'data': {
            '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
            'color_text': color_text,
            'product_id': <?= $product['id_products']; ?>,
          },
          'success': function(data) {
            $('#initial_colorcode').css("background", data.initial_colorcode);
            $('#initial_colorname').text(data.initial_colorname);
            $('#pricing_block').html(data.product_prices_html);
            $('#sizing_block').html(data.product_sizes_html);
            chosenSize = data.initial_size;
            chosenColor = data.initial_colorname;
            $('#mainImage').attr('src', data.chosen_image);
            $('#errorMessage2').text(``);
          }
        });
      }

      function ajaxGetProductDetailBySize(size, color_text) {
        $.ajax({
          'url': '<?= base_url('product/ajax_get_productdetailbysize'); ?>',
          'type': 'POST',
          'data': {
            '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
            'size': size,
            'color_text': color_text,
            'product_id': <?= $product['id_products']; ?>,
          },
          'success': function(data) {
            $('#initial_colorcode').css("background", data.initial_colorcode);
            $('#initial_colorname').text(data.initial_colorname);
            $('#pricing_block').html(data.product_prices_html);
            $('#sizing_block').html(data.product_sizes_html);
            $('#errorMessage2').text(``);
            chosenSize = data.initial_size;
            chosenColor = data.initial_colorname;
          }
        });
      }

      function ajaxAddToCart(cartData) {
        $.ajax({
          'url': '<?= base_url('cart/ajax_addtocart'); ?>',
          'type': 'POST',
          'data': {
            '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
            'chosen_color': chosenColor,
            'chosen_size': chosenSize,
            'product_id': productId,
            'greetingcard_text': $('textarea#greetingcardText').val()
          },
          'success': function(data) {
            //open cart sidebar
            $('#cartMessage').text(`${data.data_cart.name} added to your shopping bag`);
            $('#cartTitle').text(`${data.data_cart.name}`);
            $('#cartPrice').text(`Rp ${Intl.NumberFormat('id-ID').format(data.data_cart.price)}`);
            $('#cartColor').text(`${data.data_cart.options.color}`);
            $('#cartSize').text(`Size ${data.data_cart.options.size}`);
            $('#cartImage').html(`<img src="${data.data_cart.options.image}" alt="">`);
            if (data.data_cart.options.greetingcard_text) {
              $('#cartGreeting').text(`Greeting card:\n${data.data_cart.options.greetingcard_text}`);
              $('#cartGreetingPrice').text(`${data.data_cart.options.greetingcard_price}`);
            }
            $('#removeFromCart').attr('data-rowId', data.data_cart.cart_rowid);
            $('#qtyInput').text(data.data_cart.qty);
            $('#errorMessage2').text(``);

            //show sidebar
            $('#sidebar').show();
          },
          'error': function(data) {
            $('#errorMessage2').text(data.responseJSON.error);
          }
        });
      }

      function ajaxRemoveFromCart(cartData) {
        $.ajax({
          'url': '<?= base_url('cart/ajax_removefromcart'); ?>',
          'type': 'POST',
          'data': {
            '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
            'cart_rowid': $('#removeFromCart').data('rowid')
          },
          'success': function(data) {
            $('#cartMessage').text(`Product removed from your shopping bag`);
            $('#cartTitle').text(``);
            $('#cartPrice').text(``);
            $('#cartColor').text(``);
            $('#cartSize').text(``);
            $('#cartImage').html(``);
            $('#cartQtyDelete').html(``);

            //show sidebar
            $('#sidebar').show();
          }
        });
      }

      function ajaxAddQuantity() {
        $.ajax({
          'url': '<?= base_url('cart/ajax_addquantity'); ?>',
          'type': 'POST',
          'data': {
            '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
            'cart_rowid': $('#removeFromCart').data('rowid')
          },
          'success': function(data) {
            $('#qtyInput').text(data.qty);
          },
          'error': function(data) {
            $('#errorMessage').text(data.responseJSON.error);
          }
        });
      }

      function ajaxRemoveQuantity() {
        $.ajax({
          'url': '<?= base_url('cart/ajax_removequantity'); ?>',
          'type': 'POST',
          'data': {
            '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
            'cart_rowid': $('#removeFromCart').data('rowid')
          },
          'success': function(data) {
            if (data.qty == 0) {
              $('#cartMessage').text(`Product removed from your shopping bag`);
              $('#cartTitle').text(``);
              $('#cartPrice').text(``);
              $('#cartColor').text(``);
              $('#cartSize').text(``);
              $('#cartImage').html(``);
              $('#cartQtyDelete').html(``);
              $('#cartGreeting').text(``);
              $('#cartGreetingPrice').text(``);
            } else {
              $('#qtyInput').text(data.qty);
            }
            $('#errorMessage').text(``);
          }
        });
      }
    </script>