@extends('front.layout.app')
@section('content')
    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>
    <section class="customization customization-cart">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('home.front')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Cart</li>
            </ol>
            <h2 class="heading heading--sm heading--border text-center mb-5">MY CART</h2>
            <div class="row justify-content-between">
                <div class="col-md-6">
                    <ul class="customization-cartDetails accordion" id="accordionExample">
                        @if(session('cart') && count(session('cart')) > 0)
                            @foreach(session('cart') as $cart)
                                <li class="check-cart" id="cartItemsContainer">
                                    <figure class="customization-cartDetails__img expanded">
                                        <img src="{{asset('data/product_images/'.($cart['image'] ?? ''))}}"
                                             class="img-fluid" alt="img">
                                    </figure>
                                    <div class="cart-wrapper">
                                        <div class="text-wrapper">
                                            <div class="customization-cartDetails__text">
                                                <h4 class="subText">{{$cart['name'] ?? ''}}</h4>
                                                <div class="d-flex">
                                                    <h5 class="price">
                                                        <span  class="savedMoney">₦{{number_format($cart['old_price'] * $cart['quantity'],2) ?? ''}}</span>
                                                        <span style="color: black" class="singlePrice">₦{{number_format($cart['price'] * $cart['quantity'],2) ?? ''}}</span>

                                                    </h5>
                                                    <select>
                                                        <option>Size: <strong>M</strong></option>
                                                    </select>
                                                    <div class="quantity cart-counter" data-product-id="{{ $cart['product_id'] }}"
                                                         data-product-quantity="{{ $cart['quantity'] }}" data-single-price="{{$cart['price']}}" data-save-money="{{$cart['old_price']}}">
                                                        <a href="#" class="delete"><i class="fal fa-trash decrease-quantity"></i></a>
                                                        <div class="number">
                                                            <input type="text" class="quantity-input" value="{{$cart['quantity']}}">
                                                            <i class="fas fa-plus-circle increase-quantity"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="save-later">
                                            <a href="#" class="sav">
                                                <i class="fal fa-heart"></i>
                                                <span>Save for later</span>
                                            </a>
                                            <a href="#" class="delet">Delete</a>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        @else
                            <li class="check-cart1" id="cartItemsContainer1">
                                <div class="cart-wrapper">
                                    <div class="text-wrapper">
                                        <div class="customization-cartDetails__text">
                                            <h4 class="subText">Your Cart is Empty! </h4>
                                        </div>
                                        <div class="save-later">
                                            <a href="#" class="btn btn-warning">Let's Shop Something?</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endif
                    </ul>
                </div>
                @php
                    $total = 0;
                    // Check if the cart exists and is not empty
                    if (session()->has('cart') && count(session('cart')) > 0) {
                        // Calculate the total price only if the cart is not empty
                        foreach (session('cart') as $item) {
                            $total += $item['price'] * $item['quantity'];
                        }
                    }
                @endphp
                <div class="col-md-5">
                    <form action="" class="customization-cartForm">
                        <label>Have a promo code?</label>
                        <div>
                            <input type="text" placeholder="Enter promo code:*">
                            <button type="submit" class="themeBtn">APPLY CODE</button>
                        </div>
                    </form>
                    <div class="customization-cartAmount">
                        <div class="item">
                            <span id="cartItemCount">@if(isset(\Illuminate\Support\Facades\Session::all()['cart']) && count(\Illuminate\Support\Facades\Session::all()['cart']) > 0){{ count(session('cart')) }}@else 0 @endif Items</span>
                            <span id="totalCartPrice">₦{{ number_format($total, 2) }}</span>
                        </div>
                        <div class="item">
                            <span>Shipping</span>
                            <span>₦0.0</span>
                        </div>
                        <h5 class="subTotal">Subtotal: <span id="totalCartPrice">₦{{ number_format($total, 2) }}</span></h5>
                        <a href="{{route('checkout.front')}}" class="themeBtn w-100">PROCEED TO CHECKOUT</a>
                    </div>
                    <div class="customization-cartPayment">
                        <p>Express payment options we accept at checkout</p>
                        <ul>
                            <li><a href=""></a></li>
                            <li><a href=""></a></li>
                            <li><a href=""></a></li>
                            <li><a href=""></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        $(document).ready(function () {


            // Handle Increase Quantity
            $(document).on('click', '.increase-quantity', function () {
                const cartCounter = $(this).closest('.cart-counter');
                const productId = cartCounter.data('product-id');
                const currentQuantity = cartCounter.data('product-quantity');
                const singlePrice = cartCounter.data('single-price');  // Get the single price from the data attribute
                const saveMoney = cartCounter.data('save-money');  // Get the single price from the data attribute
                const action = 'add';

                updateCartQuantity(productId, cartCounter, action, currentQuantity,singlePrice,saveMoney);
            });

            // Handle Decrease Quantity
            $(document).on('click', '.decrease-quantity', function () {
                const cartCounter = $(this).closest('.cart-counter');
                const productId = cartCounter.data('product-id');
                const currentQuantity = cartCounter.data('product-quantity');
                const singlePrice = cartCounter.data('single-price');  // Get the single price from the data attribute
                const saveMoney = cartCounter.data('save-money');  // Get the single price from the data attribute
                const action = 'minus';

                updateCartQuantity(productId, cartCounter, action, currentQuantity, singlePrice,saveMoney);
            });

            // AJAX Request to Update Quantity
{{--            function updateCartQuantity(productId, cartCounter, action, currentQuantity,singlePrice,saveMoney) {--}}
{{--                $.ajax({--}}
{{--                    url: '{{ route("cart.update") }}',--}}
{{--                    method: 'POST',--}}
{{--                    data: {--}}
{{--                        _token: '{{ csrf_token() }}',--}}
{{--                        product_id: productId,--}}
{{--                        quantity: currentQuantity,--}}
{{--                        action: action,--}}
{{--                    },--}}
{{--                    success: function (response) {--}}
{{--console.log(response);--}}
{{--                        if (response.success) {--}}
{{--                            cartCounter.find('.quantity-input').val(response.updated_quantity);--}}

{{--                            if (response.cart_count === 0) {--}}
{{--                                $('#cartItemsContainer').html('<p id="emptyCart">Your cart is empty.</p>');--}}
{{--                            }--}}

{{--                            // Update total price--}}
{{--                            if (response.total_price) {--}}
{{--                                $('#totalCartPrice').text('₦' + response.total_price);--}}
{{--                            }--}}

{{--                            // Update saved money--}}
{{--                            if (response.updated_quantity && saveMoney) {--}}
{{--                                let totalSavedMoney = saveMoney * response.updated_quantity;--}}
{{--                                $('.savedMoney').text('₦' + totalSavedMoney.toFixed(2));--}}
{{--                            }--}}

{{--                            if (response.updated_quantity && singlePrice) {--}}
{{--                                const updatedPrice = singlePrice * response.updated_quantity;--}}
{{--                                $('.singlePrice').text('₦' + updatedPrice.toFixed(2));--}}
{{--                            }--}}

{{--                            updateCartCount();--}}
{{--                        } else {--}}
{{--                            toastr.error(response.message || 'Failed to update quantity.');--}}
{{--                        }--}}
{{--                    },--}}
{{--                    error: function () {--}}
{{--                        toastr.error('Something went wrong!');--}}
{{--                    }--}}
{{--                });--}}
{{--            }--}}
            function updateCartQuantity(productId, cartCounter, action, currentQuantity) {
                $.ajax({
                    url: '{{ route("cart.update") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        product_id: productId,
                        quantity: currentQuantity,
                        action: action,
                    },
                    success: function (response) {


                        if (response.success) {
                            // Update the product quantity in the cart UI

                            const mainCartCounter = $('#accordionExample #cartItemsContainer .cart-counter[data-product-id="' + response.product_id + '"]');

                            if (mainCartCounter.length) {
                                // Update quantity in the input field
                                mainCartCounter.find('.quantity-input').val(response.updated_quantity).trigger('change');
                                mainCartCounter.data('product-quantity', response.updated_quantity);

                                // Update the single price
                                const updatedSinglePrice = response.updated_quantity * mainCartCounter.data('single-price');
                                mainCartCounter.closest('.check-cart').find('.singlePrice').text('₦' + updatedSinglePrice.toFixed(2));

                                // Update the saved money
                                const updatedSavedMoney = response.updated_quantity * mainCartCounter.data('save-money');
                                mainCartCounter.closest('.check-cart').find('.savedMoney').text('₦' + updatedSavedMoney.toFixed(2));
                            }

                            // Update product total price
                            if (response.updated_quantity > 0) {
                                // Update the hover cart (components/cart)
                                const hoverCartCounter = $('.cart-hover .cart-counter[data-product-id="' + response.product_id + '"]');
                                if (hoverCartCounter.length) {
                                    hoverCartCounter.find('.quantity-input').val(response.updated_quantity).trigger('change');
                                    hoverCartCounter.data('product-quantity', response.updated_quantity);

                                    const updatedHoverSinglePrice = response.updated_quantity * hoverCartCounter.data('single-price');
                                    hoverCartCounter.closest('.cart-info').find('.singlePrice').text('₦' + updatedHoverSinglePrice.toFixed(2));

                                    const updatedHoverSavedMoney = response.updated_quantity * hoverCartCounter.data('save-money');
                                    hoverCartCounter.closest('.cart-info').find('.savedMoney').text('₦' + updatedHoverSavedMoney.toFixed(2));
                                }


                            } else {
                                // Remove the product if quantity is zero
                                const hoverCartCounter = $('.cart-hover .cart-counter[data-product-id="' + response.product_id + '"]');
                                if (hoverCartCounter.length) {
                                    hoverCartCounter.closest('.cart-info').remove();
                                }

                                const mainCartCounter = $('#cartItemsContainer .cart-counter[data-product-id="' + response.product_id + '"]');
                                if (mainCartCounter.length) {
                                    mainCartCounter.closest('.check-cart').remove();
                                }
                            }

                            // Update total cart price
                            if (response.total_price !== undefined) {
                                $('.cart-hover #totalCartPrice').text('₦' + response.total_price.toFixed(2)); // Hover cart
                                $('.customization-cartAmount #totalCartPrice').text('₦' + response.total_price.toFixed(2)); // Main cart
                            }
                            // Update saved money
                            if (response.saved_money !== undefined) {
                                $('#savedMoney').text('₦' + response.saved_money.toFixed(2));
                            }

                            // Update cart count badge
                            if (response.cart_count !== undefined) {
                                updateCartCount(response.cart_count);
                            }
                        } else {
                            toastr.error(response.message || 'Failed to update quantity.');
                        }
                    },
                    error: function () {
                        toastr.error('Something went wrong!');
                    }
                });
            }

            function updateCartCount() {
                $.ajax({
                    url: '{{ route("cart.count") }}',
                    method: 'GET',
                    success: function (count) {
                        if (count == 0) {
                            // Update the hover cart (components/cart)
                            $('.hoverCart').html('<p id="emptyCart">Your cart is empty.</p>');
                            $('#cartItemCount').text(0 + ' Items');

                            // Update the main cart (front/cart)
                            $('#accordionExample').html(`
                    <li class="check-cart1">
                        <div class="cart-wrapper">
                            <div class="text-wrapper">
                                <div class="customization-cartDetails__text">
                                    <h4 class="subText">Your Cart is Empty! </h4>
                                </div>
                                <div class="save-later">
                                    <a href="#" class="btn btn-warning">Let's Shop Something?</a>
                                </div>
                            </div>
                        </div>
                    </li>
                `);
                        }
                        // Update the cart count badge
                        $('.badge').text(count);
                    },
                    error: function () {
                        console.error('Failed to fetch cart count.');
                    },
                });
            }

        });


    </script>
@endpush