<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<div class=" w-full ">
<!-- header mobile -->
<nav class="sticky top-0 left-0 right-0 md:hidden" style="z-index: 9999;">
  <div class="bg-secondary md:bg-primary p-8">
    <div class="flex justify-around items-center">
      <h1 class="font-custom text-white md:text-secondary text-xl md:text-3xl"><a href="<?= base_url('cart'); ?>">My Bag</a></h1>
      <div class="border border-white h-8"></div>
      <h1 class="font-custom text-white md:text-secondary text-xl md:text-3xl"><a href="<?= base_url('account/order_history'); ?>">Purchase List</a></h1>
    </div>
  </div>
</nav>
<div class="mb-0">
  <div id="cartContainer" class="px-8 md:px-0 container mx-auto cartContainer2">
    <!-- <h1 class="font-custom text-secondary text-5xl xs:text-center md:text-left">PROFILE</h1> --> 
    <?php
    // var_dump($this->cart->contents()); 
    ?>
    <?php if(count($this->cart->contents()) == 0) : ?>
      <p class="text-[#514A45]/80 font-tinosRegular text-lg" style="margin-top:2rem">Your cart is empty.</p>
    <?php endif; ?>  
    <div style="margin-top:2rem"><?= $this->session->flashdata('message'); ?></div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <!-- Kolom 1 -->
      <div class="grid grid-cols-1 md:grid-cols-3 md:col-span-2 gap-4">
        <?php foreach($this->cart->contents() as $item) : ?>
          <?php
            //get subtotals
            $subtotal = 0;

            $subtotal += $item['subtotal'];

						if(isset($item['options']['greetingcard_price_int']))
						{
							$subtotal += $item['options']['greetingcard_price_int'];
						}

						if(isset($item['options']['chosenHeelsTypePrice']))
						{
							$subtotal += ($item['qty'] * $item['options']['chosenHeelsTypePrice']);
						}

						if(isset($item['options']['chosenHeelsHeightPrice']))
						{
							$subtotal += ($item['qty'] * $item['options']['chosenHeelsHeightPrice']);
						}

						if(isset($item['options']['chosenPlatformStylePrice']))
						{
							$subtotal += ($item['qty'] * $item['options']['chosenPlatformStylePrice']);
						}

						if(isset($item['options']['chosenPlatformHeightPrice']))
						{
							$subtotal += ($item['qty'] * $item['options']['chosenPlatformHeightPrice']);
						}

						if(isset($item['options']['chosenInitialEngravedPrice']))
						{
							$subtotal += ($item['qty'] * $item['options']['chosenInitialEngravedPrice']); 
						}
          ?>
          <div class="mt-8 flex md:flex-col space-x-4 md:space-x-0">
            <div>
              <?php if(isset($item['options']['image'])) : ?>
                <img src="<?= $item['options']['image']; ?>" alt="<?= $item['name']; ?>">
               <?php else : ?>
                <img src="<?= base_url() . 'uploads/image-not-available.jpg'; ?>" alt="<?= $item['name']; ?>">
               <?php endif; ?> 
            </div>
            <div class="w-full mt-4">
              <h1 class="font-custom text-primary"><?= $item['name']; ?></h1>
              <p class="font-custom text-primary">Rp <?= number_format($subtotal, 0, ',', '.') ; ?></p>
              <div class="border-b-2 border-b-secondary my-4"></div>
              <div class="flex justify-between items-center ">
                <p class="font-custom text-primary"><?= $item['options']['color']; ?></p>
                <p class="font-custom text-primary">Size <?= $item['options']['size']; ?></p>
              </div>
              <?php if(isset($item['options']['chosenHeelsType'])) : ?>
                <p class="font-custom text-primary">Customized<br>
                  Heels Type <?= $item['options']['chosenHeelsType']; ?>, Heels Height <?= $item['options']['chosenHeelsHeight']; ?>
                  <?php if(isset($item['options']['chosenPlatformStyle'])) : ?>
                  , Platform Style <?= $item['options']['chosenPlatformStyle']; ?>, Platform Height <?= $item['options']['chosenPlatformHeight']; ?>
                  <?php endif; ?> 
                  <?php if(isset($item['options']['chosenInitialEngraved'])) : ?>
                  , Initial Letter <?= $item['options']['chosenInitialEngraved']; ?>, Design <?= $item['options']['chosenInitialEngravedImage']; ?>
                  <?php endif; ?> 
                </p>
              <?php endif; ?>  
              <?php if(isset($item['options']['greetingcard_text'])) : ?>
                <div class="flex justify-between items-center ">
                  <p class="font-custom text-primary">Greeting Card</p>
                </div>
                <p class="font-custom text-primary" style="font-style: italic;"><?= $item['options']['greetingcard_text']; ?></p>
              <?php endif; ?>  
              <div class="flex flex-col md:flex-row justify-between items-start md:items-center mt-4">
                <div class="flex items-center">
                  <a href="<?= base_url() . 'cart/remove_quantity/' . $item['rowid']; ?>"><button class="text-primary font-custom" style="font-size:30px;">-</button></a>
                  <span class="px-2 text-primary font-custom"><?= $item['qty']; ?></span>
                  <a href="<?= base_url() . 'cart/add_quantity/' . $item['rowid']; ?>"><button class="text-primary font-custom">+</button></a>
                </div>
                <p class="font-custom text-secondary italic font-tinosItalic"><a href="<?= base_url('cart/remove') . '/' . $item['rowid']; ?>">Delete</a></p>
              </div>
            </div>
          </div>
        <?php endforeach; ?>  
      </div>
      <!-- Kolom 2 (2 kolom tumpuk) -->
      <?php if(count($this->cart->contents()) > 0) : ?>
        <div id="cartRightColumn" class="xs:bg-secondary md:bg-transparent xs:items-center md:items-start xs:p-4 md:p-0 w-full" style="padding-top:20px;">
          <div>
            <p class="xs:text-white md:text-secondary font-custom xs:text-sm md:text-3xl">SUB-TOTAL</p>
            <p class="xs:text-white md:text-primary/60 xs:text-sm md:text-3xl font-custom">Rp <?= number_format($subtotals, 0, ',', '.') ; ?></p>
            <p class="xs:text-white md:text-secondary font-custom xs:text-sm md:text-3xl mt-10">NOTES</p>    
            <textarea id="purchaseNotes" name="purchaseNotes" rows="5" placeholder="Max. 50 words" class="italic font-tinosItalic bg-transparent border border-primary w-full" style="width:100%"><?= $this->session->userdata('purchase_notes') ?></textarea> 
          </div>
          <div class="xs:w-1/2 md:w-full mt-6">
            <button class="xs:border xs:border-white bg-secondary p-2 xs:mt-0 md:mt-4 md:px-0 w-full">
              <p class="font-custom text-white"><a href="<?= base_url('shipping'); ?>" style="display:block">Continue</a></p>
            </button>
          </div>
        </div>
      <?php endif; ?>
    </div>
  </div>
  <?php if(count($this->cart->contents()) > 0) : ?>
    <div class="flex flex-row justify-between bg-secondary items-center md:items-start p-4   fixed  bottom-20 w-full md:hidden">
      <div>
        <p class="text-white  font-custom text-sm ">SUB-TOTAL</p>
        <p class="text-white  text-sm  font-custom">Rp <?= number_format($subtotals, 0, ',', '.') ; ?></p>
      </div>
      <div class="w-1/2">
        <button class="border border-white bg-secondary p-2 mt-0  w-full">
          <p class="font-custom text-white"><a style="display:block" href="<?= base_url('shipping'); ?>">Continue</a></p>
        </button>
      </div> 
    </div>
  <?php endif; ?>

  <script> 
  function delay(callback, ms) {
    var timer = 0;
    return function() {
      var context = this, args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        callback.apply(context, args);
      }, ms || 0);
    };
  }

  $(document).ready(function() {  
    $('#purchaseNotes').keyup(delay(function (e) {
      $.ajax({
        'url': '<?= base_url('cart/ajax_update_purchasenote'); ?>',
        'type': 'POST',
        'data': {
          '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
          'purchase_notes': $(this).val(),
        },
        'success': function(data) {
         console.log('purchase notes', data.purchase_notes);
        }
      });
    }, 2000));
  });
  </script>