@extends('layout.client')
<style>
    .coupon-all {
                                    display: flex;
                                    justify-content: flex-end; /* Aligns buttons to the right */
                                    align-items: center;
                                    gap: 10px; /* Adds space between buttons */
                                }

                                .tp-btn {
                                    padding: 10px 20px;
                                    font-size: 16px;
                                }

                                .continue-shopping {
                                    margin-left: 10px; /* Adds space between the buttons */
                                }
    .sub-tot {
        text-align: right;
        margin-right: 205px;
    }
</style>
@section('content')
    <div class="breadcrumb__area pt-5 pb-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="tp-breadcrumb__content">
                        <div class="tp-breadcrumb__list">
                            <span class="tp-breadcrumb__active"><a href="{{ route('homepage') }}">Home</a></span>
                            <span class="dvdr">/</span>
                            <span>Cart</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <section class="cart-area pb-80" style="min-height: 100vh">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="#">
                        <div class="table-content table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th class="product-thumbnail">Images</th>
                                        <th class="cart-product-name">Name</th>
                                        <th class="cart-product-size">Size</th>
                                        <th class="cart-product-size">Price</th>
                                        <th class="product-quantity">Quantity</th>
                                        <th class="product-subtotal">Total</th>
                                        <th class="product-remove">Remove</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $totalAmount = 0; // Initialize total amount variable
                                    @endphp
                                    @if (count($products) == 0)
                                        <tr>
                                            <td colspan="7">No data found</td>
                                            <!-- colspan to cover all table columns -->
                                        </tr>
                                    @else
                                        @foreach ($products as $item)
                                            @php
                                                // Add the subtotal for this item to the total amount
                                                $totalAmount += $item->productdetails->offerprize * $item->quantity;
                                            @endphp
                                            <tr>
                                                <td class="product-thumbnail">
                                                    <a
                                                        href="{{ route('descriptionpage', $item->productdetails->product->id) }}">
                                                        <img class="cart-image"
                                                            src="{{ URL::asset('storage/items/' . $item->productdetails->product->image1) }}">
                                                    </a>
                                                </td>
                                                <td class="product-name">
                                                    <a href="">{{ $item->productdetails->product->name }}</a>
                                                </td>
                                                <td class="product-size">
                                                    <p>{{ $item->productdetails->size }}</p>
                                                </td>
                                                <td class="product-price">
                                                    <span class="amount">₹ {{ $item->productdetails->offerprize }}</span>
                                                </td>
                                                <td class="product-quantity">
                                                    <p>{{ $item->quantity }}</p>
                                                </td>
                                                <td class="product-subtotal">
                                                    <span class="amount">₹
                                                        {{ $item->productdetails->offerprize * $item->quantity }}</span>
                                                </td>
                                                <td class="product-remove">
                                                    <a href="{{ route('removefromcart', $item->id) }}"><i
                                                            class="fa fa-times"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>

                            </table>
                        </div>
                        {{-- The payment section , minimum purshase should be equato or more than 349  --}}
                        <div class="row">
                            @if (count($products) > 0)
                                <div class="col-12">
                                    <div class="coupon-all sub-tot">
                                        <h6>Subtotal ({{ count($products) }}
                                            {{ count($products) > 1 ? 'Items' : 'Item' }}): ₹ {{ $totalAmount }}</h6>
                                    </div>
                                </div>
                            @endif

                            <div class="col-12">
                                <div class="coupon-all d-flex justify-content-end align-items-center">
                                    <div class="coupon2">
                                        <!-- Check if totalAmount is >= 349 to enable the button -->
                                        @if ($totalAmount >= 349)
                                            <a class="tp-btn tp-color-btn banner-animation"
                                                href="{{ route('client.checkout') }}">Proceed to checkout</a>
                                        @else
                                            <!-- If totalAmount is less than 349, show disabled button -->
                                            <a class="tp-btn tp-color-btn banner-animation disabled" href="javascript:void(0);"
                                                style="cursor: not-allowed; opacity: 0.6;">Proceed to checkout</a>
                                            <p style="color: red;">Minimum subtotal ₹349 required to proceed to checkout.</p>
                                        @endif
                                    </div>

                                    <div class="continue-shopping ml-2">
                                        <a class="tp-btn tp-color-btn banner-animation" href="{{route('indexpage')}}">Continue Shopping</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection