@section('title')
    Carts - Eat Your Favorite Foods
@stop

@section('keywords')
    Food Store, Eat Your Favorite Foods
@stop

@section('description')
    Food Store - Eat Your Favorite Foods
@stop

@section('image')
    {{ asset('images/logo.png') }}
@stop

<div>

    <div class="container">
        <div class="row justify-content-center" style="margin-bottom:280px;">
            <div class="col-md-6">

                <!-- HEADER -->
                <div class="bg-white rounded-bottom-custom shadow-sm px-3 py-3 sticky-top mb-4">
                    <x-buttons.back />
                </div>

                <!-- CART LIST -->
                <div class="row">

                    @forelse ($carts as $cart)
                        <div class="col-12 mb-3">
                            <div class="card border-0 shadow-sm rounded-4"
                                 style="height:150px;overflow:hidden;">

                                <div class="row g-0 h-100">

                                    <!-- IMAGE -->
                                    <div class="col-4"
                                         style="height:150px;overflow:hidden;">
                                        <img
                                            src="{{ asset('/storage/' . $cart->product->image) }}"
                                            alt="{{ $cart->product->title }}"
                                            style="width:100%;height:100%;object-fit:cover;"
                                            class="rounded-start">
                                    </div>

                                    <!-- CONTENT -->
                                    <div class="col-8 h-100">
                                        <div class="card-body d-flex flex-column h-100 py-3">

                                            <!-- TITLE + DELETE -->
                                            <div class="d-flex justify-content-between align-items-start">
                                                <h6 class="fw-semibold mb-1 text-truncate">
                                                    {{ $cart->product->title }}
                                                </h6>
                                                <livewire:web.cart.btn-delete :cart_id="$cart->id" />
                                            </div>

                                            <!-- PRICE -->
                                            <span class="fw-bold mt-1"
                                                  style="color:#16a34a;">
                                                Rp {{ number_format($cart->product->price) }}
                                            </span>

                                            <!-- QTY -->
                                            <div class="d-flex justify-content-end mt-auto">
                                                <div class="input-group align-items-center"
                                                     style="width:120px;">

                                                    <livewire:web.cart.btn-decrement
                                                        :cart_id="$cart->id"
                                                        :product_id="$cart->product_id"
                                                        :disabled="$cart->qty" />

                                                    <input
                                                        type="number"
                                                        value="{{ $cart->qty }}"
                                                        class="border-0 text-center"
                                                        style="width:40px;background:transparent;font-size:14px;"
                                                        readonly>

                                                    <livewire:web.cart.btn-increment
                                                        :cart_id="$cart->id"
                                                        :product_id="$cart->product_id" />
                                                </div>
                                            </div>

                                        </div>
                                    </div>

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

                    @empty
                        <div class="col-12">
                            <div class="card border-0 shadow-sm rounded-4">
                                <div class="card-body text-center py-5">
                                    <span class="fw-semibold text-muted">
                                        You don't have any items in the cart.
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforelse

                </div>

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

    <!-- TOTAL & CHECKOUT -->
    @if (count($carts) > 0)
        <div class="position-sticky">
            <div class="container py-3">
                <div class="row justify-content-center">
                    <div class="col-md-6">

                        <div class="card border-0 rounded-4 shadow-sm">
                            <div class="card-body">

                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="fw-semibold text-muted">
                                        Total Payment
                                    </span>
                                    <span class="fw-bold fs-5" style="color:#f43f5e;">
                                        Rp {{ number_format($totalPrice) }}
                                    </span>
                                </div>

                                <a href="/checkout"
                                   wire:navigate
                                   class="btn w-100 rounded-pill fw-semibold mt-2"
                                   style="background:#f43f5e;color:#fff;padding:12px 0;">
                                    Process to Checkout
                                </a>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    @endif

</div>