@extends('front.layout.app')
@section('title', 'Cart Page')
@section('content')
    <section class="inner-banner">
        <img src="{{ $data->cmsImages('banner_image') }}" alt="image" class="img-fluid w-100 h-100">
        <div class="container">
            <div class="inner-banner__content">
                <h1>{{ $data->content['banner_heading'] ?? '' }}</h1>
            </div>
        </div>
    </section>

    <section class="check-out-section">
        <div class="container">
            <div class="check-out-form check-out-2">
                <h2 class="primary-heading">{{ $data->content['heading'] ?? '' }}</h2>

                <div class="col-12 offset-lg-1 col-lg-10">
                    @php
                        $cartItems = session('cart', []);
                        $productIds = collect($cartItems)->pluck('product_id')->toArray();
                        $products = \App\Models\Product::whereIn('id', $productIds)->get()->keyBy('id');
                    @endphp

                    @if (!empty($cartItems))
                        @foreach ($cartItems as $id => $product)
                            @php
                                $productData = $products[$product['product_id']] ?? null;
                            @endphp
                            @if ($productData)
                                <div class="row card-row">
                                    <div class="col-md-2">
                                        <a href="{{ route('front.product.detail', $product['product_id']) }}" class="card-hover">
                                            <figure>
                                                <img src="{{ $productData->getFirstMediaUrl('product_image') }}" alt="image">
                                            </figure>
                                        </a>
                                    </div>
                                    <div class="col-md-5">
                                        <a href="{{ route('front.product.detail', $product['product_id']) }}">
                                            <h4 class="red">{{ $product['name'] }}</h4>
                                        </a>
                                        <ul class="stckst " style="text-align: justify">
                                            <li>Color Name: {{ $product['colour_name'] }}</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-2">
                                        <span class="price red">USD {{ number_format($product['price']) }}</span>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="shop-details">
                                            <div class="numberone">
                                                <span class="minus" onclick="changeQuantity('{{ $id }}', 'minus')">-</span>
                                                <input type="text" id="quantity-{{ $id }}" name="quantity" class="in-num"
                                                       value="{{ $product['quantity'] ?? 1 }}">
                                                <span class="plus" onclick="changeQuantity('{{ $id }}', 'add')">+</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <form action="{{ route('cart.remove', $id) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="bg-transparent border-0 delete-btn">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @endif

                    <div class="row">
                        <div class="offset-1 col-lg-10 offset-1">
                            <div class="row fields-row mt-60">
                                @if (empty($cartItems))
                                    <div class="col-12">
                                        <a href="{{ route('front.index') }}" class="btn d-btn w-100">Continue Shopping</a>
                                    </div>
                                @else
                                    <div class="col-12">
                                        <button class="btn d-btn w-100" onclick="window.location.href='{{ route('checkout') }}'">
                                            PROCEED To Pay
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')

    <script>
        function changeQuantity(productId, action) {
            var inputElement = document.getElementById('quantity-' + productId);
            var minusButton = inputElement.closest('.shop-details').querySelector('.minus');
            var currentValue = parseInt(inputElement.value);

            if (action === 'add') {
                $('#loader-container').show();
                inputElement.value = currentValue + 1;
            } else if (action === 'minus' && currentValue > 1) {
                $('#loader-container').show();
                inputElement.value = currentValue - 1;
            }

            // Disable the minus button if value is 1
            if (parseInt(inputElement.value) <= 1) {
                minusButton.classList.add('disabled');
                minusButton.style.pointerEvents = 'none';
                minusButton.style.opacity = '0.5';
            } else {
                minusButton.classList.remove('disabled');
                minusButton.style.pointerEvents = 'auto';
                minusButton.style.opacity = '1';
            }

            // Send an AJAX request to update the cart
            $.ajax({
                url: "{{ route('update.to.cart') }}", // Laravel route for cart update
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}", // CSRF protection
                    product_id: productId,
                    quantity: inputElement.value
                },
                success: function(response) {
                    $('#loader-container').hide();
                    toastr.success('Cart updated successfully');
                },
                error: function(xhr, status, error) {
                    $('#loader-container').hide();
                    console.error("AJAX Error:", xhr.responseText); // Log full response
                    console.error("Status:", status);
                    console.error("Error:", error);

                    // Show error details in toastr
                    toastr.error('Failed to update cart: ' + (xhr.responseJSON?.message || error));
                }

            });
        }

        // Ensure minus button is disabled on page load if the value is 1
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.in-num').forEach(function (inputElement) {
                var minusButton = inputElement.closest('.shop-details').querySelector('.minus');

                if (parseInt(inputElement.value) <= 1) {
                    minusButton.classList.add('disabled');
                    minusButton.style.pointerEvents = 'none';
                    minusButton.style.opacity = '0.5';
                }
            });
        });

    </script>


@endsection