@include('layouts.header')


@include('layouts.tostMessage')

{{-- Main content --}}
<div class="container" style="margin-top: 50px">
    <div class="bread-crumb flex-w p-l-25 p-r-15 p-t-30 p-lr-0-lg">
        <a href="{{url('/')}}" class="stext-109 cl8 hov-cl1 trans-04">
            Home
            <i class="fa fa-angle-right m-l-9 m-r-10" aria-hidden="true"></i>
        </a>
        <span class="stext-109 cl4">Shopping Cart</span>
    </div>
</div>

<!-- Shopping Cart -->
<form class="bg0 p-t-75 p-b-85">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-xl-7 m-lr-auto m-b-50">
                <div class="m-l-25 m-r--38 m-lr-0-xl">
                    <div class="wrap-table-shopping-cart">
                        <div id="cart-items-container">
                            <table class="table-shopping-cart">
                                <thead>
                                    <tr class="table_head">
                                        <th class="column-1">Product</th>
                                        <th class="column-2"></th>
                                        <th class="column-3">Price</th>
                                        <th class="column-3">Size</th>
                                        <th class="column-4">Quantity</th>
                                        <th class="column-5">Total</th>
                                        <th class="column-6"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($cartItems as $item)
                                        @php
                                            $imagePaths = explode(',', $item->product->images);
                                            $firstImage = count($imagePaths) > 0 ? $imagePaths[0] : null;
                                        @endphp
                                        <tr class="table_row" data-product-id="{{ $item->id }}">
                                            
                                            <td class="column-1">
                                                <a href="{{ route('product.details', $item->product->id) }}">
                                                <div class="how-itemcart1">
                                                    @if ($firstImage)
                                                        <img src="{{ asset('product/' . $firstImage) }}"
                                                            alt="Product Image" loading="lazy">
                                                    @else
                                                        <span>No Image</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td class="column-2" >{{ $item->product->name }}</td>
                                            <td class="column-3">${{ $item->product->price }}</td>
                                            <td class="column-3">{{ $item->size }} </td>
                                            <td class="column-4">
                                                <div class="wrap-num-product flex-w m-l-auto m-r-0">
                                                    <div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m" onclick="update_cart_minus('{{ $item->product_id }}')">
                                                        <i class="fs-16 zmdi zmdi-minus"></i>
                                                    </div>
                                                    <input class="mtext-104 cl3 txt-center num-product" type="number"
                                                        name="num-product1" value="{{ $item->quantity }}" readonly/>
                                                    <div class="btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m" onclick="update_cart('{{ $item->product_id }}')">
                                                        <i class="fs-16 zmdi zmdi-plus" ></i>
                                                    </div>
                                                </div>
                                            </td>
                                            
                                            <td class="column-5">${{ $item->product->price * $item->quantity }}</td>
                                            <td class="column-6" style="width: 10px">
                                                <button class="btn btn-sm btn-outline-danger  delete-btn" id="cart-del-btn" title="remove cart item" >Delete</button>
                                            </td>
                                        </a>
                                        </tr >
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
              <!--      <div class="flex-w flex-sb-m bor15 p-t-18 p-b-15 p-lr-40 p-lr-15-sm">-->
              <!--  <div class="flex-w flex-m m-r-20 m-tb-5">-->
              <!--    <input class="stext-104 cl2 plh4 size-117 bor13 p-lr-20 m-r-10 m-tb-5" type="text" name="coupon" placeholder="Coupon Code">-->

              <!--    <div class="flex-c-m stext-101 cl2 size-118 bg8 bor13 hov-btn3 p-lr-15 trans-04 pointer m-tb-5">-->
              <!--      Apply coupon-->
              <!--    </div>-->
              <!--  </div>-->
              <!--</div>-->
                </div>
            </div>

            <div class="col-sm-10 col-lg-5 col-xl-5 m-lr-auto m-b-50">
                <div class="bor10 p-lr-40 p-t-30 p-b-40 m-l-63 m-r-40 m-lr-0-xl p-lr-15-sm">
                    <!-- Cart Totals -->
                    <h4 class="mtext-109 cl2 p-b-30">Cart Totals</h4>
                    <div class="flex-w flex-t bor12 p-b-13">
                        <div class="size-208">
                            <span class="stext-110 cl2">Subtotal:</span>
                        </div>
                        <div class="size-209">
                            <span class="mtext-110 cl2 subtotal">$0.00</span> <!-- Placeholder for subtotal -->
                        </div>
                    </div>
                    <div class="flex-w flex-t bor12 p-b-13">
                        <div class="size-208">
                            <span class="stext-110 cl2">Shipping:</span>
                        </div>
                        <div class="size-209">
                            <span class="mtext-110 cl2 shipping">$0.00</span> <!-- Placeholder for shipping -->
                        </div>
                    </div>
                    <div class="flex-w flex-t p-t-27 p-b-33">
                        <div class="size-208">
                            <span class="mtext-101 cl2">Total:</span>
                        </div>
                        <div class="size-209 p-t-1">
                            <span class="mtext-110 cl2 total">$0.00</span> <!-- Placeholder for total -->
                        </div>
                    </div>
                    <a href="{{route('checkout')}}"  class="flex-c-m stext-101 cl0 size-116 bg3 bor14 hov-btn3 p-lr-15 trans-04 pointer">
                        Proceed to Checkout
                    </a> 

                </div>
            </div>

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

<script>
    function update_cart_minus(product_id) {
        var newQuantity = parseInt($(`tr[data-product-id="${product_id}"] .num-product`).val()) - 1;
        
        if (newQuantity < 1) {
            newQuantity = 1;
        }
        
        $.ajax({
            url: '{{route("cart.update_minus")}}',
            type: 'POST',
            data: {
                product_id: product_id,
                quantity: newQuantity
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                console.log(response);
                $(`tr[data-product-id="${product_id}"] .num-product`).val(newQuantity);
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    }
</script>

<script>
    function update_cart(product_id) {
        var newQuantity = parseInt($(`tr[data-product-id="${product_id}"] .num-product`).val()) + 1;
        
        $.ajax({
            url: '{{ route("cart.update") }}',
            type: 'POST',
            data: {
                product_id: product_id,
                quantity: newQuantity
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                console.log(response);
                $(`tr[data-product-id="${product_id}"] .num-product`).val(newQuantity);
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    }
</script>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {

    $('.btn-num-product-down').on('click', function() {
        var input = $(this).closest('.wrap-num-product').find('.num-product');
        var currentValue = parseInt(input.val());
        if (currentValue == 0) {
            input.val(currentValue = 1);
        }else{
            input.val(parseInt(input.val()) - 0);
        }
       
        updateTotal(input);
    });


        // Function to handle quantity increase
        $('.btn-num-product-up').on('click', function() {
            var input = $(this).closest('.wrap-num-product').find('.num-product');
            input.val(parseInt(input.val()) + 0);
            updateTotal(input);
        });

        // Function to handle direct quantity input change
        $('.num-product').on('input', function() {
            var input = $(this);
            var currentValue = parseInt(input.val());
            if (!currentValue || currentValue < 1) {
                input.val(1);
            }
            updateTotal(input);
        });

        // Function to update total price based on quantity
        function updateTotal(input) {
            var quantity = parseInt(input.val());
            var price = parseFloat(input.closest('tr').find('.column-3').text().replace('$', ''));
            var total = quantity * price;
            input.closest('tr').find('.column-5').text('$' + total.toFixed(2));
            calculateTotal();
        }

     // Function to calculate subtotal and total
    function calculateTotal() {
        var subtotal = 0;
        $('.column-5').each(function() {
            var value = parseFloat($(this).text().replace('$', ''));
            if (!isNaN(value)) {
                subtotal += value;
            }
        });
        var shipping = {{ $shippingCharge }}; // Dynamic shipping charge
        var total = subtotal + shipping;
        $('.subtotal').text('$' + subtotal.toFixed(2));
        $('.shipping').text('$' + shipping.toFixed(2)); // Update shipping charge dynamically
        $('.total').text('$' + total.toFixed(2)); // Update both subtotal and total
    }



        // Call calculateTotal initially
        calculateTotal();

        // Event listener for delete button
        var deleteUrlBase = "{{ route('cart.remove', ['productId' => 'PLACEHOLDER']) }}";

        $('.delete-btn').on('click', function() {
            var productId = $(this).closest('tr').data('product-id');
            var fullUrl = deleteUrlBase.replace('PLACEHOLDER', productId);

            $.ajax({
                url: fullUrl,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log(response.message);
                    $(`tr[data-product-id="${productId}"]`).remove();
                    calculateTotal();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    
    });
</script>

@include('layouts.footer')