@extends('layout.app')
@section('content')
    <!-- ========== Breadcrumb ========== -->
    <div class="container py-12">
        <div class="breadcrumb">
            <ul>
                <li>
                    <a href="{{ route('front.index') }}">
                    <span class="inline-flex items-center justify-center">
                        <i class="hgi hgi-stroke hgi-home-01 text-2xl leading-6"></i>
                    </span>
                        Home
                    </a>
                </li>
                <li class="text-light-disabled-text">&#8226;</li>
                <li><span class="text-sm leading-[22px]">Cart</span></li>
            </ul>
        </div>
    </div>

    <!-- ========== Cart Section ========== -->
    <div class="pb-[70px]">
        <div class="container">

            {{-- Top bar --}}
            <div class="grid grid-cols-12">
                <div class="xl:col-span-8 col-span-12">
                    <div class="flex items-center justify-between mb-6 xl:px-2 px-0">
                        <div class="flex items-center gap-x-1">
                            <h5>Cart</h5>
                            <p id="cart-page-count" class="text-light-secondary-text">({{ $count }}
                                item{{ $count !== 1 ? 's' : '' }})</p>
                        </div>
                        @if(count($cart) > 0)
                            <button
                                id="cart-clear-all-btn"
                                class="inline-flex gap-x-1 items-center justify-center font-semibold leading-[26px] text-error hover:opacity-80 transition-opacity"
                            >
                                <i class="hgi hgi-stroke hgi-cancel-01 text-xl leading-5"></i>
                                Remove All
                            </button>
                        @endif
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-12 gap-x-6 gap-y-6">

                {{-- ── Cart Table ── --}}
                <div class="xl:col-span-8 col-span-12">

                    {{-- Empty state --}}
                    <div id="cart-page-empty"
                         class="{{ count($cart) > 0 ? 'hidden' : '' }} flex flex-col items-center justify-center py-20 text-center ">

                        <h5 class="mb-2">Your cart is empty</h5>
                        <p class="text-light-secondary-text mb-6">Looks like you haven't added anything yet.</p>
                        <a href="{{ route('front.shop') }}" class="btn btn-primary rounded-full px-8 py-3">
                            Start Shopping
                        </a>
                    </div>

                    {{-- Table --}}
                    <div id="cart-page-table"
                         class="{{ count($cart) === 0 ? 'hidden' : '' }} wishlist-table-wrapper border-gray-300 rounded-2xl border overflow-x-auto">
                        <table class="w-full wishlist-table">
                            <thead class="bg-gray-200">
                            <tr>
                                <th class="text-left font-semibold pl-4 py-3">Product</th>
                                <th class="text-left font-semibold py-3">Price</th>
                                <th class="text-left font-semibold py-3">Quantity</th>
                                <th class="text-left font-semibold py-3">Total</th>
                                <th class="text-center font-semibold py-3 pr-4">Action</th>
                            </tr>
                            </thead>
                            <tbody id="cart-page-tbody">
                            @foreach($cart as $key => $item)
                                <tr class="cart-page-row" data-key="{{ $key }}">
                                    <td class="py-4 px-3 lg:px-4">
                                        <div class="flex items-end md:items-start gap-x-4 flex-col md:flex-row gap-y-4">
                                            <div
                                                class="product-thumbnail max-w-[120px] h-[120px] rounded-2xl bg-[#F4F3F5] overflow-hidden flex-none">
                                                <img
                                                    src="{{ $item['image'] ?? 'https://placehold.co/120x120/F4F6F8/9CA3AF?text=No+Image' }}"
                                                    alt="{{ $item['name'] }}"
                                                    class="rounded-2xl h-full w-full object-cover"/>
                                            </div>
                                            <div class="flex flex-col gap-y-2">
                                                <a href="{{ route('product.show', $item['product_id']) }}"
                                                   class="font-semibold text-light-primary-text hover:text-primary transition-colors">
                                                    {{ $item['name'] }}
                                                </a>
                                                @if($item['color'] || $item['size'])
                                                    <p class="text-sm text-light-secondary-text">
                                                        @if($item['color']) Color: {{ $item['color'] }} @endif
                                                        @if($item['color'] && $item['size']), @endif
                                                        @if($item['size']) Size: {{ $item['size'] }} @endif
                                                    </p>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4 px-3 lg:px-0">
                                        <span class="font-semibold text-light-primary-text">
                                            ${{ number_format($item['price'], 2) }}
                                        </span>
                                    </td>
                                    <td class="py-4 px-3 lg:px-0">
                                        <div
                                            class="border border-gray-300 inline-flex items-center justify-center rounded-[80px] py-2.5 px-4">
                                            <button
                                                class="cart-qty-btn inline-flex items-center justify-center hover:text-primary"
                                                data-action="dec" data-key="{{ $key }}">
                                                <i class="hgi hgi-stroke hgi-remove-circle text-xl leading-6"></i>
                                            </button>
                                            <input type="text" readonly value="{{ $item['qty'] }}"
                                                   class="border-0 w-10 text-center focus:outline-none font-semibold cart-qty-input"/>
                                            <button
                                                class="cart-qty-btn inline-flex items-center justify-center hover:text-primary"
                                                data-action="inc" data-key="{{ $key }}">
                                                <i class="hgi hgi-stroke hgi-add-circle text-xl leading-6"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="py-4 px-3 lg:px-0">
                                        <p class="font-semibold text-light-primary-text cart-item-total">
                                            ${{ number_format($item['price'] * $item['qty'], 2) }}
                                        </p>
                                    </td>
                                    <td class="py-4 px-3 lg:px-4">
                                        <div class="flex items-center justify-center gap-x-4">
                                            <button
                                                class="cart-remove-btn inline-flex items-center justify-center hover:text-error transition-colors"
                                                data-key="{{ $key }}">
                                                <i class="hgi hgi-stroke hgi-delete-01 text-2xl leading-6 text-light-primary-text"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- ── Order Summary ── --}}
                <div class="xl:col-span-4 col-span-12">
                    <div class="border border-gray-300 rounded-2xl md:px-6 md:py-6 px-3 py-4 flex flex-col gap-y-6">

                        {{-- Free shipping bar --}}
                        <a href="#"
                           class="w-full px-4 py-4 inline-flex items-center gap-x-2 bg-[rgba(0,171,85,0.08)] text-light-primary-text text-sm leading-[22px] font-bold rounded-[100px]">
                        <span class="inline-flex items-center justify-center text-primary">
                            <i class="hgi hgi-stroke hgi-car-03 text-2xl leading-6"></i>
                        </span>
                            Spend $60.00 for
                            <span class="text-base leading-6 font-semibold text-primary">Free Shipping</span>
                        </a>

                        <div class="border border-gray-300 md:p-6 p-3 rounded-2xl">
                            <div class="flex flex-col gap-y-6">
                                <h5>Order Summary</h5>

                                {{-- Coupon --}}
                                <div
                                    class="input-group relative large w-full mx-auto ps-3.5 pe-24 py-3 rounded-[100px]">
                                    <input type="text" class="form-control" placeholder="Coupon Code"
                                           id="coupon-input"/>
                                    <button
                                        class="btn btn-primary btn-large px-[22px] py-[11px] rounded-l-none rounded-r-[100px] absolute top-0 right-0 h-full w-auto">
                                        Apply
                                    </button>
                                </div>

                                {{-- Totals --}}
                                <div>
                                    <div class="flex flex-col gap-y-4 pb-4 border-b border-gray-300">
                                        <p class="flex items-center justify-between">
                                            Sub-Total
                                            <span class="text-gray-900 font-semibold" id="cart-page-subtotal">
                                            ${{ number_format($subtotal, 2) }}
                                        </span>
                                        </p>
                                        <p class="flex items-center justify-between">
                                            Shipping
                                            <span class="text-gray-900">Free</span>
                                        </p>
                                    </div>
                                    <h6 class="flex items-center justify-between text-light-primary-text pt-4">
                                        Total
                                        <span class="text-gray-900" id="cart-page-total">
                                        ${{ number_format($subtotal, 2) }}
                                    </span>
                                    </h6>
                                </div>
                            </div>
                        </div>

                        {{-- Buttons --}}
                        <div class="flex flex-col gap-y-4">
                            <a href="{{route('front.checkout')}}" class="btn btn-primary py-3 w-full rounded-[80px]">
                                Proceed to Checkout
                            </a>
                            <a href="{{ route('front.shop') }}"
                               class="btn btn-default outline shadow-none w-full py-[11px] rounded-[80px]">
                                Continue Shopping
                                <span class="inline-flex items-center justify-center">
                                <i class="hgi hgi-stroke hgi-arrow-right-02 text-[22px] leading-[22px]"></i>
                            </span>
                            </a>
                        </div>

                    </div>
                </div>

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


    <!-- ========== Quality Priority Section Start ========== -->
    <section class="mb-[70px]">
        <div
            class="lg:bg-white bg-[#A0E2E0] py-12 lg:pt-0 lg:pb-[23px] text-center lg:max-w-[704px] mx-auto lg:rounded-[164px] lg:-mb-[103px] relative z-10 lg:before:bg-[#A0E2E0] lg:after:bg-[#A0E2E0] lg:before:absolute lg:before:bottom-0 lg:before:left-0 lg:before:h-full lg:before:w-[145px] lg:before:bg-[url('../images/slider-left-shape.png')] lg:before:bg-no-repeat lg:before:z-11 lg:after:absolute lg:after:bottom-0 lg:after:right-0 lg:after:h-full lg:after:w-[145px] lg:after:bg-[url('../images/slider-right-shape.png')] lg:after:bg-no-repeat lg:after:z-11"
        >
            <h3
                class="mb-2 text-light-primary-text wow animate__animated animate__fadeInUp"
                data-wow-delay="0.2s"
            >
                Quality is our priority
            </h3>
            <p
                class="wow animate__animated animate__fadeInUp"
                data-wow-delay="0.3s"
            >
                Because you deserve nothing less than the best.
            </p>
        </div>
        <div
            class="xl:max-w-[1728px] w-full mx-auto relative bg-[#A0E2E0] xl:rounded-5xl pb-12 lg:pt-[172px]"
        >
            <div class="container">
                <div class="grid grid-cols-12 gap-6">
                    <div class="md:col-span-6 col-span-12 xl:col-span-3">
                        <div
                            class="p-6 rounded-2xl text-center bg-white wow animate__animated animate__fadeInUp"
                            data-wow-delay="0.2s"
                        >
                <span
                    class="inline-flex items-center justify-center size-14 bg-warning-lighter rounded-full"
                >
                  <i
                      class="hgi hgi-stroke hgi-container-truck text-3xl text-light-primary-text"
                  ></i>
                </span>
                            <h5 class="pt-3 pb-0.5">Free Shipping</h5>
                            <p>Enjoy the Convenience of Free Shipping on Every Order</p>
                        </div>
                    </div>
                    <div class="md:col-span-6 col-span-12 xl:col-span-3">
                        <div
                            class="p-6 rounded-2xl text-center bg-white wow animate__animated animate__fadeInUp"
                            data-wow-delay="0.3s"
                        >
                <span
                    class="inline-flex items-center justify-center size-14 bg-warning-lighter rounded-full"
                >
                  <i
                      class="hgi hgi-stroke hgi-customer-support text-3xl text-light-primary-text"
                  ></i>
                </span>
                            <h5 class="pt-3 pb-0.5">24x7 Support</h5>
                            <p>Round-the-Clock Assistance, Anytime You Need It</p>
                        </div>
                    </div>
                    <div class="md:col-span-6 col-span-12 xl:col-span-3">
                        <div
                            class="p-6 rounded-2xl text-center bg-white wow animate__animated animate__fadeInUp"
                            data-wow-delay="0.4s"
                        >
                <span
                    class="inline-flex items-center justify-center size-14 bg-warning-lighter rounded-full"
                >
                  <i
                      class="hgi hgi-stroke hgi-delivery-return-02 text-3xl text-light-primary-text"
                  ></i>
                </span>
                            <h5 class="pt-3 pb-0.5">30 Days Return</h5>
                            <p>
                                Your Satisfaction is Our Priority: Return Any Product Within
                                30 Days
                            </p>
                        </div>
                    </div>
                    <div class="md:col-span-6 col-span-12 xl:col-span-3">
                        <div
                            class="p-6 rounded-2xl text-center bg-white wow animate__animated animate__fadeInUp"
                            data-wow-delay="0.5s"
                        >
                <span
                    class="inline-flex items-center justify-center size-14 bg-warning-lighter rounded-full"
                >
                  <i
                      class="hgi hgi-stroke hgi-transaction text-3xl text-light-primary-text"
                  ></i>
                </span>
                            <h5 class="pt-3 pb-0.5">Secure Payment</h5>
                            <p>
                                Seamless Shopping Backed by Safe and Secure Payment Options
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ========== Quality Priority Section End ========== -->

@endsection
@push('scripts')
    <script>
        // Cart page specific — qty + remove
        document.addEventListener('DOMContentLoaded', function () {

            // ── Qty buttons ──
            document.addEventListener('click', function (e) {
                const btn = e.target.closest('.cart-qty-btn');
                if (!btn) return;

                const key = btn.dataset.key;
                const action = btn.dataset.action;
                const row = btn.closest('.cart-page-row');
                const input = row.querySelector('.cart-qty-input');
                let qty = parseInt(input.value);

                qty = action === 'inc' ? qty + 1 : Math.max(0, qty - 1);

                window.Cart.update(key, qty, function (data) {
                    if (qty === 0) {
                        row.remove();
                        checkEmptyState(data);
                    } else {
                        input.value = qty;
                        const itemTotal = data.items.find(i => i.key === key);
                        if (itemTotal) {
                            row.querySelector('.cart-item-total').textContent = '$' + (itemTotal.price * itemTotal.qty).toFixed(2);
                        }
                    }
                    updatePageSummary(data);
                });
            });

            // ── Remove button ──
            document.addEventListener('click', function (e) {
                const btn = e.target.closest('.cart-remove-btn');
                if (!btn) return;
                const key = btn.dataset.key;
                const row = btn.closest('.cart-page-row');
                window.Cart.remove(key, function (data) {
                    row.remove();
                    checkEmptyState(data);
                    updatePageSummary(data);
                });
            });

            // ── Clear all ──
            document.getElementById('cart-clear-all-btn')?.addEventListener('click', function () {
                window.Cart.clear(function (data) {
                    document.getElementById('cart-page-tbody').innerHTML = '';
                    checkEmptyState(data);
                    updatePageSummary(data);
                });
            });

            function updatePageSummary(data) {
                const el = document.getElementById('cart-page-subtotal');
                const el2 = document.getElementById('cart-page-total');
                const count = document.getElementById('cart-page-count');
                if (el) el.textContent = '$' + data.subtotal;
                if (el2) el2.textContent = '$' + data.subtotal;
                if (count) count.textContent = '(' + data.count + ' item' + (data.count !== 1 ? 's' : '') + ')';
            }

            function checkEmptyState(data) {
                const table = document.getElementById('cart-page-table');
                const empty = document.getElementById('cart-page-empty');
                if (data.count === 0) {
                    table?.classList.add('hidden');
                    empty?.classList.remove('hidden');
                    document.getElementById('cart-clear-all-btn')?.classList.add('hidden');
                }
            }
        });
    </script>
@endpush