<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="#">Purchase List</a></h1>
        </div> 
      </div>
    </nav>
    <div class="mb-0">
      <div id="cartContainer" class="px-8 md:px-0 container mx-auto"> 
      <div class="my-4"><?= $this->session->flashdata('message'); ?></div> 
        <!-- <h1 class="font-custom text-secondary text-5xl xs:text-center md:text-left">PROFILE</h1> -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <!-- Kolom 1 -->
          <div class="xs:px-0 md:px-16 grid grid-cols-1 md:grid-cols-2 gap-4  md:border-r-2 md:border-r-primary">
            <?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="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 <?= $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() . 'summary/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() . 'summary/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('summary/remove') . '/' . $item['rowid']; ?>">Delete</a></p>
                </div>
              </div>
            </div>
            <?php endforeach; ?> 
          </div>
          <!-- Kolom 2 (2 kolom tumpuk) -->
          <div class="bg-transparent items-start xs:px-0 md:px-16 w-full">
            <div class="w-full">
              <div class="hidden md:block">
                <p class="text-secondary font-custom text-3xl">SUBTOTAL</p>
                <p class="text-primary text-3xl font-custom">Rp <?= number_format($subtotals, 0, ',', '.') ; ?></p>
              </div>
              <!-- <div class=" border-b-2 border-primary mt-8">
                <input disabled type="text" placeholder="Coupon Code" class="font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px]y">
              </div>

              <button class="border border-white bg-secondary p-2 mt-4  w-full">
                <p class="font-custom text-white">Apply Coupon</p>
              </button> -->

              <!-- address -->
              <div class="my-8">

                <div class="flex justify-between items-center">
                  <p class="text-secondary font-custom text-xl">DELIVERY</p>
                  <a href="<?= base_url('shipping'); ?>" class="italic font-tinosItalic text-secondary">(edit address)</a>
                </div> 

                <p class="font-tinosRegular text-primary mt-2"><span class="font-bold"><?= ucwords($shipping->recipient_name); ?></span> <br>
                  <span class="text-">
                    <?= $shipping->shipping_phone; ?><br>
                    <?= $shipping->shipping_address; ?><br>
                    <?= ucwords($shipping->shipping_subdistrict); ?>, <?= ucwords($shipping->shipping_district); ?> - Indonesia <br>
                    <?= $shipping->shipping_postcode; ?>
                  </span>
                </p>
              </div>

              <!-- summary -->
              <div class=" border-y py-4 border-y-[#D2D2D2]"> 
                <div class="flex justify-between items-center">
                  <p class="text-primary font-custom text-xl font-light">SUB - TOTAL</p>
                  <span class="font-custom text-primary">Rp <?= number_format($subtotals, 0, ',', '.') ; ?></span>
                </div>
                <div class="flex justify-between items-center">
                  <p class="text-primary font-custom text-xl">SHIPPING COST
                    <br>
                    <span class="text" style="font-size:1rem;"><?= $carrier_name_text; ?></span>
                  </p>
                  <span class="font-custom text-primary">Rp <?= number_format($total_shipping_fee, 0, ',', '.') ; ?></span>
                </div>
              </div>
              <div class="flex justify-between items-center mt-4">
                <p class="text-primary font-custom text-xl">TOTAL</p>
                <span class="font-custom text-primary">Rp <?= number_format($grand_total, 0, ',', '.') ; ?></span>
              </div>
            </div>

            <div class="w-full mt-4">
              <a href="<?= base_url('payment'); ?>">
                <button class="bg-secondary p-2  mt-4 px-0 w-full">
                  <p class="font-custom text-white">Continue</p>
                </button>
              </a>
            </div>
          </div>
        </div>

      </div>