
        <!-- [ breadcrumb ] start -->
        <div class="page-header mb-3">
          <h4 class="fw-bold py-3 mb-n3"><i class='bx bx-arrow-back' onclick="window.location.href=`<?= base_url() ?>`"></i> <?= $title ?>  </h4>
          <span class="ps-4 d-md-none" style="font-size: 14px;">Terdapat <b id="label_count_product_cart">-</b> produk pada keranjang kamu</span>
        </div>
        <!-- [ breadcrumb ] end -->


        <!-- [ Main Content ] start -->
        <div class="row">
          <!-- [ sample-page ] start -->
          <div class="col-12 col-md-7 col-lg-8">
            <div class="w-100">
              <div class="w-100">
                <div class="w-100 d-flex justify-content-end">
                    <div class="search-filter-wrapper">
                      <i class='bx bx-search search-icon'></i>
                      <input type="text" class="search-box" id="searching" placeholder="Search..." />
                      <!-- <button class="filter-btn">
                        <i class='bx bx-slider-alt'></i>
                      </button> -->
                    </div>
                </div>
              </div>
              <div class="w-100">
                  <div class="category-scroll">
                    <?php if(count($category)>0): ?>
                      <?php foreach($category AS $row): ?>
                        <button data-value="<?= $row->id ?>" data-type="CATEGORY" class="category-btn"><?=  $row->name ?></button>
                      <?php endforeach; ?>
                    <?php endif; ?>

                    <button data-value="POPULER" data-type="OTHER" class="category-btn">Terpopuler</button>
                    <button data-value="CHEAP" data-type="OTHER" class="category-btn">Termurah</button>
                    <button data-value="EXPENSIVE" data-type="OTHER" class="category-btn">Termurah</button>
                    <button data-value="DISCOUNT" data-type="OTHER" class="category-btn">Sedang Diskon</button>
                  </div>
                <div class="w-100 py-3 px-1">
                  <div class="row g-2 g-md-4" id="container_product">
                                    
                    <?php for($i = 1; $i <= 12; $i++): ?>
                      <div class="col-lg-4 col-sm-4 col-md-6 col-6">
                        <div class="card-skeleton">
                          <div class="skeleton skeleton-img"></div>
                          <div class="skeleton skeleton-line long mt-3"></div>
                          <div class="skeleton skeleton-line medium"></div>
                        </div>
                      </div>

                    <?php endfor; ?>


                  </div>

                  <div class="d-flex mt-5 justify-content-end pe-2">
                    <nav aria-label="Page navigation">
                      <ul class="pagination pagination-sm">
                        <li class="page-item prev btn-prev">
                          <a class="page-link" href="javascript:void(0);"
                            ><i class="tf-icon bx bx-chevrons-left"></i
                          ></a>
                        </li>
                        <li class="page-item active">
                          <a class="page-link page-link-text" href="javascript:void(0);">1</a>
                        </li>
                        <li class="page-item next btn-next">
                          <a class="page-link" href="javascript:void(0);"
                            ><i class="tf-icon bx bx-chevrons-right"></i
                          ></a>
                        </li>
                      </ul>
                    </nav>
                  </div>


                  <div class="w-100 d-flex d-md-none">
                    <button style="width: 100%;" class="btn btn-primary mt-1" id="go_to_cart">Lanjutkan</button>  
                  </div>

                </div>
              </div>
            </div>
          </div>

          <!-- left content -->
          <div class="d-none d-md-block col-md-5 col-lg-4 mt-3 mt-md-0">
            <div class="card h-100 " style="display: flex; flex-direction: column; justify-content: space-between;">
              <div>

              <div style="margin-bottom: 12px;">
                <div class="px-3 py-3">
                  <h5 class="card-title mb-1 " style="color:#697a8d;">Keranjang Kamu</h5>
                  <span style="font-size: 14px;">Terdapat <b id="label_count_product_cart">-</b> produk pada keranjang kamu</span>
                  <div class="mt-2" style="width: 99%; margin: auto; height: 1px; background-color: #ccc; border: none;"></div>
                </div>
                <div class="d-flex ps-3 mt-n1">
                  <div style="margin-right: 10px;">
                    <img src="https://media.istockphoto.com/id/1682296067/photo/happy-studio-portrait-or-professional-man-real-estate-agent-or-asian-businessman-smile-for.jpg?s=612x612&w=0&k=20&c=9zbG2-9fl741fbTWw5fNgcEEe4ll-JegrGlQQ6m54rg=" style="width: 40px; border-radius: 50%;">
                  </div>
                  <div class="d-flex flex-column">
                    <span class=""><?= session()->get('name') ?></span>
                    <span class="text-muted mt-n1"><?= session()->get('role_name') ?></span>
                  </div>
                </div>

              </div>

              <div class="pt-4 pb-2 px-3 " style="height: 100%; max-height: 650px; overflow-y: hidden;">
                <div class=" overflow-auto w-100 " id="container_cart" style="max-height: 100%; height: 100%;">

                  



            <?php for($i = 1; $i <= 8; $i++): ?>
            
            <!-- Skeleton loading card -->
            <div class="item-card mb-2 d-flex align-items-center p-2 rounded" style="gap: 12px;">
              <!-- Gambar Placeholder -->
              <div class="rounded" style="
                width: 60px;
                height: 60px;
                background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
                background-size: 200% 100%;
                animation: shimmer 1.2s infinite;
              "></div>

              <!-- Info Text Placeholder -->
              <div class="flex-grow-1">
                <div style="
                  width: 70%;
                  height: 14px;
                  margin-bottom: 8px;
                  border-radius: 4px;
                  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
                  background-size: 200% 100%;
                  animation: shimmer 1.2s infinite;
                "></div>
                <div style="
                  width: 40%;
                  height: 14px;
                  border-radius: 4px;
                  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
                  background-size: 200% 100%;
                  animation: shimmer 1.2s infinite;
                "></div>
              </div>

              <!-- Qty Placeholder -->
              <div class="d-flex align-items-center" style="gap: 6px;">
                <div style="
                  width: 24px;
                  height: 24px;
                  border-radius: 50%;
                  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
                  background-size: 200% 100%;
                  animation: shimmer 1.2s infinite;
                "></div>
                <div style="
                  width: 16px;
                  height: 14px;
                  border-radius: 4px;
                  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
                  background-size: 200% 100%;
                  animation: shimmer 1.2s infinite;
                "></div>
                <div style="
                  width: 24px;
                  height: 24px;
                  border-radius: 50%;
                  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
                  background-size: 200% 100%;
                  animation: shimmer 1.2s infinite;
                "></div>
              </div>
            </div>

            <?php endfor; ?>



                </div>
              </div>

              </div>

              <div class="">
                  
                <div class="w-100 px-3 my-3">

                  <div class="receipt-box">
                    <div class="row">
                      <div class="col label-normal-text">Subtotal</div>
                      <div class="col text-end label-normal-value pe-4" id="label_sub_total">-</div>
                    </div>
                    <div class="row" id="set_discount" >
                      <div class="col label-normal-text d-flex align-items-center"> 
                        <span class="me-2">Discount</span>
                        <i class='bx bx-pencil' style="font-size: 14px;"></i>
                      </div>
                      <div class="col text-end label-normal-value pe-4" id="label_discount">-</div>
                    </div>
                    <div class="row">
                      <div class="col label-normal-text">Total</div>
                      <div class="col text-end label-normal-value pe-4" id="label_grand_total">-</div>
                    </div>
                    <div class=" d-flex justify-content-between mb-n2" id="set_money_pay" style="padding-top: 4px; padding-bottom: 4px;">
                      <div class="label-normal-text d-flex align-items-center"><span class="me-2">Uang Dibayarkan</span>
                        <i class='bx bx-pencil' style="font-size: 14px;"></i> 
                      </div>
                      <span class="label-normal-value" style="padding-right: 10px;" id="label_money_pay">-</span>
                    </div>
                    <div class="row total-row">
                      <div class="col">Kembalian</div>
                      <div class="col text-end total-value" id="label_change_money">-</div>
                    </div>
                  </div>

                  <div class="w-100 d-flex">
                    <button onclick="resetForm()" style="width: 15%;" class="btn btn-outline-primary d-flex justify-content-center align-items-center mt-3 me-2"><i class='bx bx-refresh bx-rotate-90 mt-n1 ps-1' style="font-size: 30px;"></i></button>  
                    <button style="width: 85%;" class="btn btn-primary mt-3" id="btn_checkout">Checkout</button>  
                  </div>

                </div>
              </div>



            </div>
          </div>
        </div>





      <!-- Modal -->
      <div class="modal fade" id="modal_discount" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">

            <form id="form_discount" autocomplete="off">
              <div class="modal-header">
                <h1 class="modal-title fs-4">Opsi Tambah Diskon</h1>
              </div>
              <div class="modal-body">
                  <div class="col-12 mb-3 mb-md-4 px-2 ">
                    <label for="discount" class="ps-1 mb-1">Diskon</label>
                    <input type="text" class="form-control" id="discount" placeholder="Masukan diskon disini" name="discount" />
                    <div class="alert alert-danger mt-3 py-2 px2" role="alert">
                      <div class="d-flex align-items-center">
                        <i class='bx bx-error-circle me-2'></i>
                        <span><strong>Petunjuk Pengisian!</strong></span>
                      </div>
                      <div>
                        <span style="font-size: 14px;"> Masukkan nominal diskon dalam bentuk angka rupiah (contoh: 5.000 untuk diskon Rp 5.000).</span>
                        <div>
                          <ul class="mb-0 px-3">
                            <li>Jangan pakai simbol <i>Rp</i> atau tanda titik <i>(.)</i></li>
                            <li>Diskon tidak boleh lebih besar dari total belanja</li>
                            <li>Hanya masukkan angka saja, tanpa huruf atau karakter lain</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="submit" class="btn btn-primary">Simpan</button>
              </div>
            </form>

            

          </div>
        </div>
      </div>



      <!-- Modal -->
      <div class="modal fade" id="modal_money_pay" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">

            <form id="form_money_pay" autocomplete="off">
              <div class="modal-header">
                <h1 class="modal-title fs-4">Tambah Uang Dibayarakan</h1>
              </div>
              <div class="modal-body">
                  <div class="col-12 mb-3 mb-md-4 px-2 ">
                    <label for="money_pay" class="ps-1 mb-1">Uang Dibayarakan</label>
                    <input type="text" class="form-control" id="money_pay" placeholder="Masukan diskon disini" name="money_pay" />
                    <div class="alert alert-danger mt-3 py-2 px2" role="alert">
                      <div class="d-flex align-items-center">
                        <i class='bx bx-error-circle me-2'></i>
                        <span><strong>Petunjuk Pengisian!</strong></span>
                      </div>
                      <div>
                        <span style="font-size: 14px;"> Masukkan jumlah uang dalam bentuk angka rupiah (contoh: 50.000 untuk diskon Rp 50.000).</span>
                        <div>
                          <ul class="mb-0 px-3">
                            <li>Jangan pakai simbol <i>Rp</i> atau tanda titik <i>(.)</i></li>
                            <li>Pastikan nominal pembayaran tidak kurang dari total belanja</li>
                            <li>Hanya masukkan angka saja, tanpa huruf atau karakter lain</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="submit" class="btn btn-primary">Simpan</button>
              </div>
            </form>


          </div>
        </div>
      </div>


      <!-- Modal -->
      <div class="modal fade" id="modal_struck" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">

            <form id="form_money_pay" autocomplete="off">
              <div class="modal-header">
                <h1 class="modal-title fs-4">Struk Belanja</h1>
              </div>
              <div class="modal-body px-0">
                  
                  <!-- nota -->

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="submit" class="btn btn-primary" id="btnPrintStruk"><i class='bx bx-printer'></i> Cetak</button>
              </div>
            </form>


          </div>
        </div>
      </div>


