@extends('layouts.webLayoutMaster')

@section('meta')
<meta name="description"
    content="Our easy-to-navigate cart for a seamless wine shopping experience. Secure checkout and personalized recommendations await at Vino Tasting.">
<meta name="keywords"
    content="Wine cart, Secure checkout, Wine shopping, Online wine shop, Wine selection, Wine recommendations, Wine purchase, Buy wine online, Wine shopping cart, Easy checkout">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@endsection

@section('canonical')
<link rel="canonical" href="https://www.vino-tasting.com/cart" />
@endsection

@section('title')
- Cart
@endsection

@section('css')
@endsection

@section('content')

<!-- banner of the page -->

{{-- <section class="">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-center  py-5">
                <h1 class="heading text-uppercase">Cart</h1>
                <ul class="list-unstyled breadcrumbs text-dark">
                    <li><a class="text-dark" href="{{ route('home') }}">Home</a></li>
                    <li>/</li>
                    <li>Cart</li>
                </ul>
            </div>
        </div>
    </div>
</section> --}}

{{-- <section class="cart-top-space">
    <!-- Shopping cart of the page -->
    <div class="shopping-cart container">
        <div class="row">
            <div class="col-xs-12">
                <div class="table-responsive">
                    <!-- cart table of the page -->
                    <table class="cart-table">
                        <thead>
                            <tr class="text-uppercase">
                                <th>image</th>
                                <th>product name</th>
                                <th>price</th>
                                <th>quantity</th>
                                <th class="wrap">
                                    <span class="pull-left">total</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>

                            @if(empty($products) || count($products)==0)
                            <tr>
                                <td colspan="5" class="text-center">No cart data found.</td>
                            </tr>
                            @else
                            @foreach ($products as $cartItem )
                            <tr>
                                <td>
                                    <div class="product-img">
                                        @if($cartItem->product->image->name)
                                        <img src="{{ asset('upload/product/' . $cartItem->product->id . '/' . $cartItem->product->image->name) }}"
                                            alt="{{ $cartItem->product->name }}" class="img-responsive">
                                        @else
                                        <img src="https://via.placeholder.com/100x130" alt="image-description"
                                            class="img-responsive">
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div class="content-holder">
                                        <h3><a
                                                href="{{ route('product', ['slug' => $cartItem->product->slug]) }}">{{ $cartItem->product->name }}</a>
                                        </h3>
                                    </div>
                                </td>
                                <td class="price fwBold">€{{ number_format($cartItem->product->price,2) }}
                                </td>
                                <td>
                                    <form id="cart-update-form-{{ $cartItem->product->id }}"
                                        action="{{ route('update-item-cart') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $cartItem->product->id }}">
                                        <input type="number" name="quantity" placeholder="1" style="cursor: pointer;"
                                            value="{{ $cartItem->quantity }}" min="1"
                                            max="{{ $cartItem->product->quantity }}" onchange="submitForm(this)"
                                            onkeydown="return false;">
                                    </form>
                                </td>
                                <td class="wrap">
                                    <form id="cart-item-remove-form-{{ $cartItem->product->id }}"
                                        action="{{ route('remove-item-cart') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $cartItem->product->id }}">
                                        <span
                                            class="price pull-left
                                        fwBold">€{{ number_format($cartItem->product->price * $cartItem->quantity, 2) }}</span>
                                        <button type="submit" class="fa fa-close pull-right text-center" /></span>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
        <div class="row justify-content-end">
            <!-- Cart Widget of the page -->
            <div class="col-xs-12 col-sm-4 cart-widget text-center ">
                <h3 class="heading3 text-uppercase">Order Details</h3>
                <ul class="list-unstyled cart-totel text-uppercase">
                    <li>sub total: <strong class="heading2">€{{ number_format($sub_total,2) }}</strong></li>
                    <li>Discount Amount: <strong class="heading2">€{{ number_format($net_discount,2) }}</strong></li>
                    <li>Net Total: <strong class="heading2">€{{ number_format($net_total,2) }}</strong></li>
                </ul>
                {{-- <span class="txt fontjosefin">Checkout with multiple address</span> --}}
                {{-- @if(empty($products) || count($products)==0)
                <button disabled type="button" class="btn-primary active text-center text-uppercase lg-round"
                    style="cursor: not-allowed;">proceed
                    to checkout</button>
                @else
                <a href="{{ route('checkout') }}" class="btn-primary active text-center text-uppercase lg-round">proceed
                    to checkout</a>
                @endif
            </div>
        </div>
    </div>
</section> --}}


{{-- =========================
     CART PAGE HEADER
========================= --}}
<section class="vt-cart-header">
    <div class="container">
        <div class="vt-cart-header-inner">

            <h1 class="vt-cart-title">
                Your Cart ({{ !empty($products) ? count($products) : 0 }})
            </h1>

            <ul class="vt-cart-breadcrumbs">
                <li>
                    <a href="{{ route('home') }}">Home</a>
                </li>
                <li>/</li>
                <li>Cart</li>
            </ul>

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


{{-- =========================
     CART CONTENT
========================= --}}
<section class="vt-cart-section">
    <div class="container">

        <div class="vt-cart-layout">

            {{-- =========================
                 CART PRODUCTS
            ========================= --}}
            <div class="vt-cart-products">

                <div class="vt-cart-table-wrapper">

                    <table class="vt-cart-table">

                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Product</th>
                                <th>Price</th>
                                <th>Qty</th>
                                <th>Total</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>

                            @if(empty($products) || count($products) == 0)

                                <tr>
                                    <td colspan="6" class="vt-cart-empty">
                                        No cart data found.
                                    </td>
                                </tr>

                            @else

                                @foreach ($products as $cartItem)

                                    <tr>

                                        {{-- PRODUCT IMAGE --}}
                                        <td class="vt-cart-image-cell" data-label="Image">

                                            <div class="vt-cart-product-image">

                                                @if($cartItem->product->image->name)

                                                    <img
                                                        src="{{ asset('upload/product/' . $cartItem->product->id . '/' . $cartItem->product->image->name) }}"
                                                        alt="{{ $cartItem->product->name }}"
                                                    >

                                                @else

                                                    <img
                                                        src="https://via.placeholder.com/100x130"
                                                        alt="image-description"
                                                    >

                                                @endif

                                            </div>

                                        </td>


                                        {{-- PRODUCT NAME --}}
                                        <td class="vt-cart-product-cell" data-label="Product">

                                            <a
                                                href="{{ route('product', ['slug' => $cartItem->product->slug]) }}"
                                                class="vt-cart-product-name"
                                            >
                                                {{ $cartItem->product->name }}
                                            </a>

                                        </td>


                                        {{-- PRICE --}}
                                        <td class="vt-cart-price" data-label="Price">

                                            €{{ number_format($cartItem->product->price, 2) }}

                                        </td>


                                        {{-- QUANTITY --}}
                                        <td class="vt-cart-quantity-cell" data-label="Qty">
                                            <form
                                                id="cart-update-form-{{ $cartItem->product->id }}"
                                                action="{{ route('update-item-cart') }}"
                                                method="POST"
                                            >
                                                @csrf
                                                <input
                                                    type="hidden"
                                                    name="product_id"
                                                    value="{{ $cartItem->product->id }}"
                                                >

                                                <input
                                                    type="number"
                                                    name="quantity"
                                                    class="vt-quantity-input"
                                                    value="{{ $cartItem->quantity }}"
                                                    min="1"
                                                    max="{{ $cartItem->product->quantity }}"
                                                    onchange="submitForm(this)"
                                                >
                                            </form>
                                        </td>


                                        {{-- TOTAL --}}
                                        <td class="vt-cart-total" data-label="Total">

                                            €{{ number_format($cartItem->product->price * $cartItem->quantity, 2) }}

                                        </td>


                                        {{-- REMOVE --}}
                                        <td class="vt-cart-remove-cell" data-label="Remove">

                                            <form
                                                id="cart-item-remove-form-{{ $cartItem->product->id }}"
                                                action="{{ route('remove-item-cart') }}"
                                                method="POST"
                                            >

                                                @csrf

                                                <input
                                                    type="hidden"
                                                    name="product_id"
                                                    value="{{ $cartItem->product->id }}"
                                                >

                                                <button
                                                    type="submit"
                                                    class="vt-cart-remove"
                                                    aria-label="Remove product"
                                                >
                                                    ×
                                                </button>

                                            </form>

                                        </td>

                                    </tr>

                                @endforeach

                            @endif

                        </tbody>

                    </table>

                </div>

            </div>


            {{-- =========================
                 CART SUMMARY
            ========================= --}}
            <aside class="vt-cart-summary">

                <h2 class="vt-cart-summary-title">
                    Cart Summary
                </h2>


                <div class="vt-summary-row">

                    <span>Subtotal:</span>

                    <strong>
                        €{{ number_format($sub_total, 2) }}
                    </strong>

                </div>

                <div class="vt-summary-row">

                    <span>Shipping:</span>

                    <strong>
                        €0.00
                    </strong>

                </div>


                {{-- Keep existing discount logic --}}
                @if($net_discount > 0)

                    <div class="vt-summary-row">

                        <span>Discount:</span>

                        <strong>
                            €{{ number_format($net_discount, 2) }}
                        </strong>

                    </div>

                @endif


                <div class="vt-summary-total">

                    <span>Total:</span>

                    <strong>
                        €{{ number_format($net_total, 2) }}
                    </strong>

                </div>


                {{-- KEEP EXISTING CHECKOUT PROCESS --}}
                @if(empty($products) || count($products) == 0)

                    <button
                        disabled
                        type="button"
                        class="vt-checkout-btn vt-checkout-disabled"
                    >
                        Proceed to Checkout
                    </button>

                @else

                    <a
                        href="{{ route('checkout') }}"
                        class="vt-checkout-btn"
                    >
                        Proceed to Checkout
                    </a>

                @endif

            </aside>

        </div>

    </div>
</section>


<script>

    function decreaseQuantity(button) {

        const input = button
            .closest('.vt-quantity-box')
            .querySelector('input');

        const min = parseInt(input.min) || 1;
        const currentValue = parseInt(input.value) || min;

        if (currentValue > min) {
            input.value = currentValue - 1;

            input.dispatchEvent(new Event('change', {
                bubbles: true
            }));
        }
    }


    function increaseQuantity(button) {

        const input = button
            .closest('.vt-quantity-box')
            .querySelector('input');

        const max = parseInt(input.max);
        const currentValue = parseInt(input.value) || 1;

        if (!isNaN(max) && currentValue < max) {

            input.value = currentValue + 1;

            input.dispatchEvent(new Event('change', {
                bubbles: true
            }));
        }
    }

</script>

@endsection

@section('js')
<script>
    function submitForm(element) {
        // Get the form element
        const form = element.closest('form');
        // Submit the form
        form.submit();
    }
</script>
@endsection