@extends('layouts.landing', ['title' => 'Checkout v.1 - Shopping Cart'])

@section('content')
    <!-- Authentication offcanvas -->



    <x-layout.header-grocery />

    <main class="content-wrapper">

        <!-- Breadcrumb -->
        <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-electronics']) }}'">Shop</a></li>
                <li class="breadcrumb-item active" aria-current="page">Cart</li>
            </ol>
        </nav>


        <!-- Items in the cart + Order summary -->
        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
            <h1 class="h3 mb-4">Shopping cart</h1>
            <div class="row">

                <!-- Items list -->
                <div class="col-lg-8">
                    <div class="pe-lg-2 pe-xl-3 me-xl-3">
                        {{-- <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$183</span> more to get <span
                                class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
                        <div class="progress w-100 overflow-visible mb-4" role="progressbar"
                            aria-label="Free shipping progress" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
                            style="height: 4px">
                            <div class="progress-bar bg-warning rounded-pill position-relative overflow-visible"
                                style="width: 75%; height: 4px">
                                <div class="position-absolute top-50 end-0 d-flex align-items-center justify-content-center translate-middle-y bg-body border border-warning rounded-circle me-n1"
                                    style="width: 1.5rem; height: 1.5rem">
                                    <i class="ci-star-filled text-warning"></i>
                                </div>
                            </div>
                        </div> --}}

                        <!-- Table of items -->
                        <table class="table position-relative z-2 mb-4">
                            <thead>
                                <tr>
                                    <th scope="col" class="fs-sm fw-normal py-3 ps-0"><span
                                            class="text-body">Product</span></th>
                                
                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
                                            class="text-body">Quantity</span></th>
                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
                                            class="text-body">Total</span></th>
                                    <th scope="col" class="py-0 px-0">
                                        <div class="nav justify-content-end">
                                            <button type="button"
                                                class="nav-link d-inline-block text-decoration-underline text-nowrap py-3 px-0"
                                                onclick="clearCart()">Clear
                                                cart</button>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="align-middle">
                                @if ($carts->count() == 0)
                                    <tr>
                                        <td colspan="5" class="text-center py-5">
                                            <div class="py-4">
                                                <i class="ci-shopping-bag text-muted" style="font-size: 3rem;"></i>
                                                <h5 class="mt-3 mb-2">Your cart is empty</h5>
                                                <p class="text-muted mb-4">Looks like you haven't added any items to your
                                                    cart yet.</p>
                                                <a href="{{ route('home') }}" class="btn btn-primary">
                                                    <i class="ci-shopping-bag me-2"></i>Start Shopping
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @else
                                    @foreach ($carts as $key => $cart)
                                        <tr data-cart-id="{{ $cart->id }}">
                                            <td class="py-3 ps-0">
                                                <div class="d-flex align-items-center">
                                                    <a class="flex-shrink-0"
                                                        href="{{ route('product.detail', $cart->itemVariant->item->slug) }}">
                                                        <img src="{{ $cart->itemReference->item->image_url ?? '' }}"
                                                            width="80" alt="{{ $cart->name ?? 'Product' }}">
                                                    </a>

                                                    
                                                    <div class="w-100 min-w-0 ps-2 ps-xl-3">
                                                        <h5 class="d-flex animate-underline mb-2">
                                                            <a class="d-block fs-sm fw-medium text-truncate animate-target"
                                                                href="{{ $cart->itemVariant->item->slug != null ? route('product.detail', [$cart->item->slug]) : '#' }}">{{ $cart->itemVariant->display_name ?? ($cart->itemVariant->description ?? 'Product Name') }}</a>
                                                        </h5>
                                                        {{-- <ul class="list-unstyled gap-1 fs-xs mb-0">
                                                        <li><span class="text-body-secondary">Color:</span> <span
                                                                class="text-dark-emphasis fw-medium">{{ $cart->color ?? 'N/A' }}</span></li>
                                                        <li><span class="text-body-secondary">Model:</span> <span
                                                                class="text-dark-emphasis fw-medium">{{ $cart->model ?? 'N/A' }}</span></li>
                                                        <li class="d-xl-none"><span
                                                                class="text-body-secondary">Price:</span>
                                                            <span class="text-dark-emphasis fw-medium">${{ number_format($cart->itemReference->display_price ?? 0, 2) }}</span>
                                                        </li>
                                                    </ul> --}}

                                                      <input type="hidden" id="price_{{ $cart->id }}"
                                                    value="{{ $cart->itemVariant->display_price ?? 0 }}">
                                                Rp {{ number_format($cart->itemVariant->display_price ?? 0, 0, ',', '.') }}

                                                        <div class="count-input rounded-2 d-md-none mt-3">
                                                            <button type="button" class="btn btn-sm btn-icon"
                                                                data-decrement aria-label="Decrement quantity">
                                                                <i class="ci-minus"></i>
                                                            </button>
                                                            <input type="number" class="form-control form-control-sm"
                                                                value="{{ $cart->qty ?? 1 }}" readonly>
                                                            <button type="button" class="btn btn-sm btn-icon"
                                                                data-increment aria-label="Increment quantity">
                                                                <i class="ci-plus"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                           
                                            <td class="py-3 d-none d-md-table-cell">
                                                <div class="count-input">
                                                    <button type="button" class="btn btn-icon" data-decrement
                                                        aria-label="Decrement quantity"
                                                        onclick="updateCartItem({{ $cart->id }}, 'decrement', this)">
                                                        <i class="ci-minus"></i>
                                                    </button>
                                                    <input type="number" class="form-control"
                                                        value="{{ $cart->qty ?? 1 }}" readonly>
                                                    <button type="button" class="btn btn-icon" data-increment
                                                        aria-label="Increment quantity"
                                                        onclick="updateCartItem({{ $cart->id }}, 'increment', this)">
                                                        <i class="ci-plus"></i>
                                                    </button>
                                                </div>
                                            </td>
                                            <td class="h6 py-3 d-none d-md-table-cell total-row">Rp
                                                {{ number_format(($cart->display_price ?? 0) * ($cart->qty ?? 1), 0, ',', '.') }}
                                            </td>
                                            <td class="text-end py-3 px-0">
                                                <form action="{{ route('cart.delete', $cart->id) }}" method="POST"
                                                    onsubmit="deleteCartItem(event, this, {{ $cart->id }})">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn-close fs-sm" data-bs-toggle="tooltip"
                                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
                                                        aria-label="Remove from cart"></button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif

                            </tbody>
                        </table>

                        <div class="nav position-relative z-2 mb-4 mb-lg-0">
                            <a class="nav-link animate-underline px-0" href="{{ route('home') }}">
                                <i class="ci-chevron-left fs-lg me-1"></i>
                                <span class="animate-target">Continue shopping</span>
                            </a>
                        </div>
                    </div>
                </div>


                <!-- Order summary (sticky sidebar) -->
                @if ($carts->count() > 0)
                    <aside class="col-lg-4" style="margin-top: -100px">
                        <div class="position-sticky top-0" style="padding-top: 100px">
                            <div class="bg-body-tertiary rounded-5 p-4 mb-3">
                                <div class="p-sm-2 p-lg-0 p-xl-2">
                                    <h5 class="border-bottom pb-4 mb-4">Order summary</h5>
                                    <ul class="list-unstyled fs-sm gap-3 mb-0">
                                        <li class="d-flex justify-content-between">
                                            <div>Subtotal (<span
                                                    class="cart-count">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span>
                                                items):</div>
                                            <span class="text-dark-emphasis fw-medium" id="cart-subtotal">Rp 0</span>
                                        </li>
                                        <li class="d-flex justify-content-between">
                                            Saving:
                                            <span class="text-danger fw-medium">Rp 0</span>
                                        </li>
                                        {{-- <li class="d-flex justify-content-between" id="tax-row" style="display: none;">
                                            Tax collected:
                                            <span class="text-dark-emphasis fw-medium">Rp 0</span>
                                        </li> --}}
                                        <li class="d-flex justify-content-between">
                                            Shipping:
                                            <span class="text-dark-emphasis fw-medium">Calculated at checkout</span>
                                        </li>
                                    </ul>
                                    <div class="border-top pt-4 mt-4">
                                        <div class="d-flex justify-content-between mb-3">
                                            <span class="fs-sm">Estimated total:</span>
                                            <span class="h5 mb-0" id="cart-estimated-total">$0.00</span>
                                        </div>
                                        <a class="btn btn-lg btn-primary w-100"
                                            href="{{ route('checkout.delivery') }}">
                                            Proceed to checkout
                                            <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
                                        </a>
                                        {{-- <div class="nav justify-content-center fs-sm mt-3">
                                        <a class="nav-link text-decoration-underline p-0 me-1" href="#authForm"
                                            data-bs-toggle="offcanvas" role="button">Create an account</a>
                                        and get
                                        <span class="text-dark-emphasis fw-medium ms-1">239 bonuses</span>
                                    </div> --}}
                                    </div>
                                </div>
                            </div>
                            <x-checkout.promo-code />
                        </div>
                    </aside>
                @endif
            </div>
        </section>


        <!-- Trending products (Carousel) -->
        {{-- <section class="container pb-4 pb-md-5 mb-2 mb-sm-0 mb-lg-2 mb-xl-4">
            <h2 class="h3 border-bottom pb-4 mb-0">Trending products</h2>

            <!-- Product carousel -->
            <div class="position-relative mx-md-1">

                <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
                <button type="button"
                    class="trending-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex"
                    aria-label="Prev">
                    <i class="ci-chevron-left fs-lg animate-target"></i>
                </button>
                <button type="button"
                    class="trending-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex"
                    aria-label="Next">
                    <i class="ci-chevron-right fs-lg animate-target"></i>
                </button>

                <!-- Slider -->
                <div class="swiper py-4 px-sm-3"
                    data-swiper='{
            "slidesPerView": 2,
            "spaceBetween": 24,
            "loop": true,
            "navigation": {
              "prevEl": ".trending-prev",
              "nextEl": ".trending-next"
            },
            "breakpoints": {
              "768": {
                "slidesPerView": 3
              },
              "992": {
                "slidesPerView": 4
              }
            }
          }'>
                    <div class="swiper-wrapper">

                        <!-- Item -->
                        <div class="swiper-slide">
                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
                                <div class="position-relative">
                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                                        <div class="d-flex flex-column gap-2">
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
                                                aria-label="Add to Wishlist">
                                                <i class="ci-heart fs-base animate-target"></i>
                                            </button>
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
                                                aria-label="Compare">
                                                <i class="ci-refresh-cw fs-base animate-target"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                                            <i class="ci-more-vertical fs-lg"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
                                                    Add to Wishlist
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                                                    Compare
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                        <span
                                            class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                                            <img src="/img/shop/electronics/01.png" alt="VR Glasses">
                                        </div>
                                    </a>
                                </div>
                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <div class="d-flex gap-1 fs-xs">
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star text-body-tertiary opacity-75"></i>
                                        </div>
                                        <span class="text-body-tertiary fs-xs">(123)</span>
                                    </div>
                                    <h3 class="pb-1 mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                            <span class="animate-target">VRB01 Virtual Reality Glasses</span>
                                        </a>
                                    </h3>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="h5 lh-1 mb-0">$340.99 <del
                                                class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
                                        <button type="button"
                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
                                            aria-label="Add to Cart">
                                            <i class="ci-shopping-cart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Item -->
                        <div class="swiper-slide">
                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
                                <div class="position-relative">
                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                                        <div class="d-flex flex-column gap-2">
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
                                                aria-label="Add to Wishlist">
                                                <i class="ci-heart fs-base animate-target"></i>
                                            </button>
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
                                                aria-label="Compare">
                                                <i class="ci-refresh-cw fs-base animate-target"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                                            <i class="ci-more-vertical fs-lg"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
                                                    Add to Wishlist
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                                                    Compare
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                                            <img src="/img/shop/electronics/14.png" alt="iPhone 14">
                                        </div>
                                    </a>
                                </div>
                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <div class="d-flex gap-1 fs-xs">
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-half text-warning"></i>
                                        </div>
                                        <span class="text-body-tertiary fs-xs">(142)</span>
                                    </div>
                                    <h3 class="pb-1 mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                            <span class="animate-target">Apple iPhone 14 128GB Blue</span>
                                        </a>
                                    </h3>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="h5 lh-1 mb-0">$899.00</div>
                                        <button type="button"
                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
                                            aria-label="Add to Cart">
                                            <i class="ci-shopping-cart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Item -->
                        <div class="swiper-slide">
                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
                                <div class="position-relative">
                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                                        <div class="d-flex flex-column gap-2">
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
                                                aria-label="Add to Wishlist">
                                                <i class="ci-heart fs-base animate-target"></i>
                                            </button>
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
                                                aria-label="Compare">
                                                <i class="ci-refresh-cw fs-base animate-target"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                                            <i class="ci-more-vertical fs-lg"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
                                                    Add to Wishlist
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                                                    Compare
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                                            <img src="/img/shop/electronics/13.png" alt="Dualsense Edge">
                                        </div>
                                    </a>
                                </div>
                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <div class="d-flex gap-1 fs-xs">
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                        </div>
                                        <span class="text-body-tertiary fs-xs">(187)</span>
                                    </div>
                                    <h3 class="pb-1 mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                            <span class="animate-target">Sony Dualsense Edge Controller</span>
                                        </a>
                                    </h3>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="h5 lh-1 mb-0">$200.00</div>
                                        <button type="button"
                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
                                            aria-label="Add to Cart">
                                            <i class="ci-shopping-cart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Item -->
                        <div class="swiper-slide">
                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
                                <div class="position-relative">
                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                                        <div class="d-flex flex-column gap-2">
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
                                                aria-label="Add to Wishlist">
                                                <i class="ci-heart fs-base animate-target"></i>
                                            </button>
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
                                                aria-label="Compare">
                                                <i class="ci-refresh-cw fs-base animate-target"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                                            <i class="ci-more-vertical fs-lg"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
                                                    Add to Wishlist
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                                                    Compare
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                        <span
                                            class="badge bg-info position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">New</span>
                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                                            <img src="/img/shop/electronics/04.png" alt="MacBook">
                                        </div>
                                    </a>
                                </div>
                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <div class="d-flex gap-1 fs-xs">
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-half text-warning"></i>
                                        </div>
                                        <span class="text-body-tertiary fs-xs">(51)</span>
                                    </div>
                                    <h3 class="pb-1 mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                            <span class="animate-target">Laptop Apple MacBook Pro 13 M2</span>
                                        </a>
                                    </h3>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="h5 lh-1 mb-0">$1,200.00</div>
                                        <button type="button"
                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
                                            aria-label="Add to Cart">
                                            <i class="ci-shopping-cart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Item -->
                        <div class="swiper-slide">
                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
                                <div class="posittion-relative">
                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                                        <div class="d-flex flex-column gap-2">
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
                                                aria-label="Add to Wishlist">
                                                <i class="ci-heart fs-base animate-target"></i>
                                            </button>
                                            <button type="button"
                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
                                                aria-label="Compare">
                                                <i class="ci-refresh-cw fs-base animate-target"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                                            <i class="ci-more-vertical fs-lg"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
                                                    Add to Wishlist
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="#!">
                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                                                    Compare
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                                            <img src="/img/shop/electronics/08.png" alt="Bluetooth Headphones">
                                        </div>
                                    </a>
                                </div>
                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <div class="d-flex gap-1 fs-xs">
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-filled text-warning"></i>
                                            <i class="ci-star-half text-warning"></i>
                                            <i class="ci-star text-body-tertiary opacity-75"></i>
                                        </div>
                                        <span class="text-body-tertiary fs-xs">(136)</span>
                                    </div>
                                    <h3 class="pb-1 mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                                            <span class="animate-target">Wireless Bluetooth Headphones Sony</span>
                                        </a>
                                    </h3>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="h5 lh-1 mb-0">$299.00</div>
                                        <button type="button"
                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
                                            aria-label="Add to Cart">
                                            <i class="ci-shopping-cart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
                <div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
                    <button type="button"
                        class="trending-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
                        aria-label="Prev">
                        <i class="ci-chevron-left fs-lg animate-target"></i>
                    </button>
                    <button type="button"
                        class="trending-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
                        aria-label="Next">
                        <i class="ci-chevron-right fs-lg animate-target"></i>
                    </button>
                </div>
            </div>
        </section> --}}


        <!-- Subscription form + Vlog -->
        {{-- <section class="bg-body-tertiary py-5">
            <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
                <div class="row">
                    <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
                        <h2 class="h4 mb-2">Sign up to our newsletter</h2>
                        <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions
                        </p>
                        <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
                            <div class="position-relative w-100 me-2">
                                <input type="email" class="form-control form-control-lg" placeholder="Your email"
                                    required>
                            </div>
                            <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
                        </form>
                        <div class="d-flex gap-3">
                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
                                <i class="ci-instagram fs-base"></i>
                            </a>
                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
                                <i class="ci-facebook fs-base"></i>
                            </a>
                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
                                <i class="ci-youtube fs-base"></i>
                            </a>
                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
                                <i class="ci-telegram fs-base"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
                        <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
                            <li class="nav flex-nowrap align-items-center position-relative">
                                <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140"
                                    alt="Video cover">
                                <div class="ps-3">
                                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
                                        New Cool Gadgets You Must See on AsiaGolf - Cheap Budget</a>
                                </div>
                            </li>
                            <li class="nav flex-nowrap align-items-center position-relative">
                                <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140"
                                    alt="Video cover">
                                <div class="ps-3">
                                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
                                        Super Useful Gadgets on AsiaGolf You Must Have in 2023</a>
                                </div>
                            </li>
                            <li class="nav flex-nowrap align-items-center position-relative">
                                <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140"
                                    alt="Video cover">
                                <div class="ps-3">
                                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">Top
                                        5 New Amazing Gadgets on AsiaGolf You Must See</a>
                                </div>
                            </li>
                        </ul>
                        <div class="nav ps-md-4 ps-lg-0">
                            <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
                                <span class="animate-target">View all</span>
                                <i class="ci-chevron-right fs-base ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section> --}}
    </main>

    <!-- Clear Cart Confirmation Modal -->
    <div class="modal fade" id="clearCartModal" tabindex="-1" aria-labelledby="clearCartModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title" id="clearCartModalLabel">Clear Cart</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <div class="mb-4">
                        <i class="ci-trash text-danger" style="font-size: 3rem;"></i>
                    </div>
                    <h6 class="mb-3">Are you sure you want to clear your entire cart?</h6>
                    <p class="text-muted mb-4">This action cannot be undone. All items will be removed from your cart.</p>
                </div>
                <div class="modal-footer border-0 justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmClearCart">Clear Cart</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Item Confirmation Modal -->
    <div class="modal fade" id="deleteItemModal" tabindex="-1" aria-labelledby="deleteItemModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title" id="deleteItemModalLabel">Remove Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <div class="mb-4">
                        <i class="ci-trash text-warning" style="font-size: 3rem;"></i>
                    </div>
                    <h6 class="mb-3">Are you sure you want to remove this item from cart?</h6>
                    <p class="text-muted mb-4">This action cannot be undone. The item will be removed from your cart.</p>
                </div>
                <div class="modal-footer border-0 justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning" id="confirmDeleteItem">Remove Item</button>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.partials/footer2')
@endsection

@section('scripts')
    <script>
        // JavaScript number formatting function
        function number_format(number, decimals, dec_point, thousands_sep) {
            number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
            var n = !isFinite(+number) ? 0 : +number;
            var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
            var sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep;
            var dec = (typeof dec_point === 'undefined') ? '.' : dec_point;

            var s = '';
            var toFixedFix = function(n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.round(n * k) / k;
            };

            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
            if (thousands_sep) {
                var re = /(-?\d+)(\d{3})/;
                while (re.test(s[0])) {
                    s[0] = s[0].replace(re, '$1' + sep + '$2');
                }
            }

            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }

            return s.join(dec);
        }

        async function updateCartItem(cartId, action, button) {
            const container = button.closest('.count-input');
            const input = container.querySelector('input[type="number"]');
            let currentQty = parseInt(input.value);

            if (action === 'increment') {
                currentQty++;
            } else if (action === 'decrement' && currentQty > 1) {
                currentQty--;
            }

            // input.value = currentQty;

            try {
                const response = await fetch(`cart/${cartId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content'),
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        qty: currentQty
                    })
                });

                if (response.ok) {
                    const result = await response.json();
                    if (result.success) {
                        // Update total price display
                        const row = button.closest('tr');
                        const totalCell = row.querySelector('.total-row');
                        const priceInput = document.getElementById(`price_${cartId}`);
                        const price = parseFloat(priceInput.value);
                        totalCell.innerHTML = `Rp ${number_format(price * currentQty, 0, ',', '.')}`;

                        // Update mobile quantity input
                        const mobileInput = row.querySelector('td:first-child .count-input input');
                        if (mobileInput) {
                            mobileInput.value = currentQty;
                        }

                        // Update cart count in header
                        updateCartCount();
                    }
                } else {
                    console.error('Error updating cart:', await response.json());
                }
            } catch (error) {
                console.error('Network error:', error);
            }
        }

        async function deleteCartItem(event, form, cartId) {
            event.preventDefault();

            // Store the cart ID and form for later use
            window.pendingDelete = {
                cartId,
                form
            };

            // Show Bootstrap modal instead of native confirm
            showDeleteItemModal();
        }

        // Function to show the delete item modal
        function showDeleteItemModal() {
            // Try to use Bootstrap Modal if available
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const modal = new bootstrap.Modal(document.getElementById('deleteItemModal'));
                modal.show();
            } else {
                // Fallback: manually show the modal
                const modalElement = document.getElementById('deleteItemModal');
                if (modalElement) {
                    modalElement.style.display = 'block';
                    modalElement.classList.add('show');
                    modalElement.setAttribute('aria-modal', 'true');
                    modalElement.setAttribute('role', 'dialog');

                    // Add backdrop
                    const backdrop = document.createElement('div');
                    backdrop.className = 'modal-backdrop fade show';
                    backdrop.id = 'deleteItemBackdrop';
                    document.body.appendChild(backdrop);

                    // Handle close buttons
                    const closeButtons = modalElement.querySelectorAll('[data-bs-dismiss="modal"]');
                    closeButtons.forEach(button => {
                        button.onclick = hideDeleteItemModal;
                    });

                    // Handle backdrop click
                    backdrop.onclick = hideDeleteItemModal;
                }
            }
        }

        // Function to hide the delete item modal
        function hideDeleteItemModal() {
            const modalElement = document.getElementById('deleteItemModal');
            const backdrop = document.getElementById('deleteItemBackdrop');

            if (modalElement) {
                modalElement.style.display = 'none';
                modalElement.classList.remove('show');
                modalElement.removeAttribute('aria-modal');
                modalElement.removeAttribute('role');
            }

            if (backdrop) {
                backdrop.remove();
            }
        }

        // Function to actually delete the item (called when confirm button is clicked)
        async function executeDeleteItem() {
            if (!window.pendingDelete) return;

            const {
                cartId,
                form
            } = window.pendingDelete;

            try {
                const response = await fetch(`cart/${cartId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content'),
                        'Accept': 'application/json'
                    }
                });

                if (response.ok) {
                    const result = await response.json();
                    if (result.success) {
                        // Hide modal first
                        hideDeleteItemModal();

                        // Remove the row from the table
                        const row = form.closest('tr');
                        row.remove();

                        // Update cart count in header
                        updateCartCount();

                        // Recalculate totals
                        calculateCartTotals();

                        // Clear pending delete
                        window.pendingDelete = null;
                    }
                } else {
                    console.error('Error deleting cart item:', await response.json());
                }
            } catch (error) {
                console.error('Network error:', error);
            }
        }
        async function updateCartCount() {
            try {
                const response = await fetch('cart/count', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                });

                if (response.ok) {
                    const result = await response.json();
                    const cartCountElements = document.querySelectorAll('.cart-count');
                    cartCountElements.forEach(element => {
                        element.textContent = result.count;
                    });


                }
            } catch (error) {
                console.error('Error updating cart count:', error);
            }
        }

        // Function to calculate and update cart totals
        function calculateCartTotals() {
            let subtotal = 0;
            let itemCount = 0;

            // Get all cart item rows
            const cartRows = document.querySelectorAll('tbody tr[data-cart-id]');

            console.log('Found cart rows:', cartRows.length);

            cartRows.forEach(row => {
                const cartId = row.dataset.cartId;
                const priceInput = document.getElementById(`price_${cartId}`);
                const quantityInput = row.querySelector('input[type="number"]');

                console.log('Processing cart ID:', cartId, 'Price input:', priceInput, 'Quantity input:',
                    quantityInput);

                if (priceInput && quantityInput) {
                    const price = parseFloat(priceInput.value);
                    const quantity = parseInt(quantityInput.value);
                    subtotal += price * quantity;
                    itemCount += quantity;

                    console.log('Price:', price, 'Quantity:', quantity, 'Running subtotal:', subtotal);
                }
            });

            console.log('Final subtotal:', subtotal, 'Item count:', itemCount);

            // Update subtotal display
            const subtotalElement = document.getElementById('cart-subtotal');
            if (subtotalElement) {
                subtotalElement.textContent = `Rp ${number_format(subtotal, 0, ',', '.')}`;
                console.log('Updated subtotal element:', subtotalElement.textContent);
            }

            // Calculate estimated total (subtotal - savings + tax)
            const savings = 0; // Fixed savings amount
            const tax = 0; // Fixed tax amount
            const estimatedTotal = subtotal - savings + tax;

            // Show/hide tax row based on tax amount
            const taxRow = document.getElementById('tax-row');
            if (taxRow) {
                if (tax > 0) {
                    taxRow.style.display = 'flex';
                    taxRow.querySelector('span').textContent = `Rp ${number_format(tax, 0, ',', '.')}`;
                } else {
                    taxRow.style.display = 'none';
                }
            }

            // Update estimated total display
            const estimatedTotalElement = document.getElementById('cart-estimated-total');
            if (estimatedTotalElement) {
                estimatedTotalElement.textContent = `Rp ${number_format(estimatedTotal, 0, ',', '.')}`;
                console.log('Updated estimated total element:', estimatedTotalElement.textContent);
            }

            // Update items count
            const cartCalcElement = document.getElementById('cart-calc');
            if (cartCalcElement) {
                cartCalcElement.textContent = itemCount;
                console.log('Updated item count:', cartCalcElement.textContent);
            }
        }

        // Initialize cart totals on page load
        document.addEventListener('DOMContentLoaded', function() {
            calculateCartTotals();

            // Add event listener for clear cart confirm button
            const confirmClearButton = document.getElementById('confirmClearCart');
            if (confirmClearButton) {
                confirmClearButton.addEventListener('click', executeClearCart);
            }

            // Add event listener for delete item confirm button
            const confirmDeleteButton = document.getElementById('confirmDeleteItem');
            if (confirmDeleteButton) {
                confirmDeleteButton.addEventListener('click', executeDeleteItem);
            }
        });

        // Update cart totals when cart items are updated
        const originalUpdateCartItem = updateCartItem;
        window.updateCartItem = async function(cartId, action, button) {
            await originalUpdateCartItem(cartId, action, button);

            // Recalculate totals after successful update
            setTimeout(() => {
                calculateCartTotals();
            }, 500);
        }

        // Update cart totals when cart items are deleted
        const originalDeleteCartItem = deleteCartItem;
        window.deleteCartItem = async function(event, form, cartId) {
            await originalDeleteCartItem(event, form, cartId);

            // Recalculate totals after successful deletion
            setTimeout(() => {
                calculateCartTotals();
            }, 500);
        }

        // Function to clear entire cart
        function clearCart() {
            // Show Bootstrap modal instead of native confirm
            showModal();
        }

        // Function to show the clear cart modal
        function showModal() {
            // Try to use Bootstrap Modal if available
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const modal = new bootstrap.Modal(document.getElementById('clearCartModal'));
                modal.show();
            } else {
                // Fallback: manually show the modal
                const modalElement = document.getElementById('clearCartModal');
                if (modalElement) {
                    modalElement.style.display = 'block';
                    modalElement.classList.add('show');
                    modalElement.setAttribute('aria-modal', 'true');
                    modalElement.setAttribute('role', 'dialog');

                    // Add backdrop
                    const backdrop = document.createElement('div');
                    backdrop.className = 'modal-backdrop fade show';
                    backdrop.id = 'clearCartBackdrop';
                    document.body.appendChild(backdrop);

                    // Handle close buttons
                    const closeButtons = modalElement.querySelectorAll('[data-bs-dismiss="modal"]');
                    closeButtons.forEach(button => {
                        button.onclick = hideModal;
                    });

                    // Handle backdrop click
                    backdrop.onclick = hideModal;
                }
            }
        }

        // Function to hide the clear cart modal
        function hideModal() {
            const modalElement = document.getElementById('clearCartModal');
            const backdrop = document.getElementById('clearCartBackdrop');

            if (modalElement) {
                modalElement.style.display = 'none';
                modalElement.classList.remove('show');
                modalElement.removeAttribute('aria-modal');
                modalElement.removeAttribute('role');
            }

            if (backdrop) {
                backdrop.remove();
            }
        }

        // Function to actually clear the cart (called when confirm button is clicked)
        async function executeClearCart() {
            try {
                const response = await fetch('cart/clear', {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content'),
                        'Accept': 'application/json'
                    }
                });

                if (response.ok) {
                    const result = await response.json();
                    if (result.success) {
                        // Hide modal first
                        hideModal();

                        // Remove all cart rows from the table
                        const cartRows = document.querySelectorAll('tbody tr[data-cart-id]');
                        cartRows.forEach(row => row.remove());

                        // Update cart count in header
                        updateCartCount();

                        // Recalculate totals (should be zero now)
                        calculateCartTotals();

                        // Optionally show a success message
                        console.log('Cart cleared successfully');
                    }
                } else {
                    console.error('Error clearing cart:', await response.json());
                }
            } catch (error) {
                console.error('Network error:', error);
            }
        }
    </script>
@endsection