@extends('frontend.layout.master')
@section('title', $pageTitle)
@section('content')

<style>
    .shop-btn {
        background: #232b83;
        color: white;
        margin-top: 17px;
        padding: 10px 22px;
        font-size: 14px;
        margin-bottom: 16px;
    }

    .shop-btn:hover {
        color: white;
    }
</style>

<section>
    <div class="nk_cart_div_1 card-div-main-padding">
        <div class="container">
            <div class="nk_cart_div_2 scrollmenu">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-12">
                        <div class="nk_cart_div_3">

                            @php $total = 0 @endphp
                            @if(session('cart') && count(session('cart')) > 0)
                            <!-- Display headers only if the cart has items -->
                            <div class="nk_cart_div_4">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2">
                                        <div class="nk_cart_div_6">
                                            <p class="nk_cart_p_1">PRODUCT</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-3"></div>
                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2">
                                        <div class="nk_cart_div_6">
                                            <p class="nk_cart_p_1">PRICE</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2">
                                        <div class="nk_cart_div_6">
                                            <p class="nk_cart_p_1">QUANTITY</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2">
                                        <div class="nk_cart_div_6">
                                            <p class="nk_cart_p_1">TOTAL</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 col-1"></div>
                                </div>
                            </div>

                            @foreach(session('cart') as $id => $details)
                            @php $total += $details['price'] * $details['quantity'] @endphp

                            <div class="nk_cart_div_7">
                                <div class="nk_cart_div_8">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2">
                                            <div class="nk_cart_div_6">
                                                <img src="{{ $details['image'] }}" class="nk_cart_img_1">
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-3">
                                            <div class="nk_cart_div_10" style="text-align: left;">
                                                <p class="nk_cart_p_3">{{ $details['name'] }}</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2">
                                            <div class="nk_cart_div_10">
                                                <p class="nk_cart_p_3">₹ {{ $details['price'] }}</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2">
                                            <div class="nk_cart_div_6" style="margin-top: 30px">
                                                <div class="holder">
                                                    <a class="quantity_button minus arrow_icon nk_quantity_btn">-</a>
                                                    <input type="number" class="form-control quantity update-cart" value="{{ $details['quantity'] }}" min="1" data-id="{{ $id }}">
                                                    <a class="quantity_button plus arrow_icon nk_quantity_btn" style="margin-left: -5px;">+</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2">
                                            <div class="nk_cart_div_6" style="margin-top: 30px">
                                                <p class="nk_cart_p_3">₹ {{ $details['price'] * $details['quantity'] }}</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 col-1">
                                            <div class="nk_cart_div_6">
                                                <p class="nk_cart_p_5">
                                                    <i class="fa fa-trash remove-from-cart" aria-hidden="true" data-id="{{ $id }}"></i>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                            <!-- Total amount section -->
                            <div class="nk_checkout_div_11">
                                <div class="row">
                                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-10" style="padding: 0px;">
                                        <div class="nk_checkout_div_12">
                                            <p class="nk_checkout_p_8" style="color: #02c720;">Total:</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                                        <div class="nk_checkout_div_12">
                                            <p class="nk_checkout_p_9">Rs. {{ $total }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="text-end check-out-div-1" style="text-align: end;">
                                <a href="{{ route('checkout') }}" class="btn btn-submit">Checkout</a>
                            </div>
                            @else
                            <!-- Display message and button when the cart is empty -->
                            <div class="nk_cart_div_71">
                                <div class="nk_cart_div_81">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-12">
                                            <div class="nk_cart_div_6">
                                                <img src="{{ url('/') }}/frontend/img/empty-cart.webp" alt="" class="empty-img">
                                                <p class="nk_cart_p_1 card-text-size" style="font-size: 21px; color: #939393;">Your cart is empty.</p>
                                                <a href="{{route('products')}}" class="btn shop-btn">Continue to Shop</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

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


<div class="continew-shoping-div">
    <div class="container">
        <div class="row">


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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- amr -->


<script>
    $(document).ready(function() {

        // Function to update cart with AJAX
        function updateCart(inputElement) {
            var ele = $(inputElement);
            var quantity = ele.val();
            var id = ele.data('id');

            // Prepare the data
            var data = {
                _token: '{{ csrf_token() }}',
                id: id,
                quantity: quantity
            };

            // Send AJAX request
            $.ajax({
                url: "{{ route('update.cart') }}",
                method: "PATCH",
                data: data,
                success: function(response) {
                    window.location.reload();
                },
                error: function(error) {
                    alert('Error updating cart');
                    console.error('Error:', error);
                }
            });
        }

        // Handle Quantity Buttons (Prevent Double Increment)
        $('.holder').on('click', '.quantity_button', function() {
            let input = $(this).siblings('.update-cart');
            let currentValue = parseInt(input.val(), 10);

            // Handle plus and minus
            if ($(this).hasClass('plus')) {
                input.val(currentValue + 1);
            } else if ($(this).hasClass('minus') && currentValue > 1) {
                input.val(currentValue - 1);
            }

            input.trigger('change');  // Trigger AJAX update
        });

        // Prevent manually entering values below 1
        $(".update-cart").on("input", function () {
            if ($(this).val() < 1) {
                $(this).val(1);
            }
        });

        // Trigger update on input change
        $(".update-cart").change(function(e) {
            e.preventDefault();
            updateCart(this);
        });

    });
</script>


<script>
    $(document).ready(function() {
        $(".remove-from-cart").click(function(e) {
            e.preventDefault();

            var id = $(this).data('id');

            $.ajax({
                url: "{{ route('remove.from.cart') }}",
                method: "DELETE",
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(response) {
                    alert('Item removed successfully');
                    window.location.reload(); // or update the cart view as needed
                },
                error: function(error) {
                    alert('Error removing item');
                    console.error('Error:', error);
                }
            });
        });
    });
</script>




@endsection