@extends('layouts.user')



@section('content')

<div class="page-title" style="background-image: url({{ asset('user_assets/images/section/page-title.jpg') }});">

    <div class="container">

        <h3 class="heading text-center">Shopping Cart</h3>

        <ul class="breadcrumbs d-flex align-items-center justify-content-center">

            <li><a class="link" href="{{ url('/') }}">Homepage</a></li>

            <li><i class="icon-arrRight"></i></li>

            <li><a class="link" href="{{ url('/shop') }}">Shop</a></li>

            <li><i class="icon-arrRight"></i></li>

            <li>Shopping Cart</li>

        </ul>

    </div>

</div>



<section class="flat-spacing">

    <div class="container">

        <div class="row">

            <div class="col-xl-8">

                @php $grandTotal = 0; @endphp

                @if($cartItems->count() > 0)

                <table class="tf-table-page-cart">

                    <thead>

                        <tr>

                            <th>Products</th>

                            <th>Price</th>

                            <th>Quantity</th>

                            <th>Total Price</th>

                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                        @foreach($cartItems as $item)

                            @php

                                // Use price from DB (already saved when variant selected)

                                $price = $item->price;

                                $total = $price * $item->quantity;

                                $grandTotal += $total;



                                $productVariants = $variants->get($item->product_id, collect());



                                // Merge old variant if missing

                                if(isset($item->product_variant_id) && $item->product_variant_id) {

                                    $selectedVariant = \DB::table('product_variants')->where('variant_id', $item->product_variant_id)->first();

                                    if($selectedVariant && !$productVariants->contains('variant_id', $selectedVariant->variant_id)) {

                                        $productVariants->push($selectedVariant);

                                    }

                                }

                            @endphp

                            <tr class="tf-cart-item file-delete" id="cart-item-{{ $item->id }}">

                                <td class="tf-cart-item_product">

                                    <a href="{{ url('product-details/'.$item->product->product_id) }}" class="img-box">

                                        <img src="{{ asset($item->product->product_thumbnail) }}" alt="{{ $item->product->product_name }}">

                                    </a>

                                    <div class="cart-info">

                                        <a href="{{ url('product-details/'.$item->product->product_id) }}" class="cart-title link">{{ $item->product->product_name }}</a>

                                        <div class="variant-box">

                                            @if($productVariants->isNotEmpty())

                                                @php

                                                    $groupedVariants = $productVariants->groupBy('variable_name');

                                                @endphp

                                                @foreach($groupedVariants as $variableName => $group)

                                                    <!-- <div class="tf-select">

                                                        <select class="variant-select" data-item-id="{{ $item->id }}">

                                                            <option selected disabled>{{ $variableName }}</option>

                                                            @foreach($group as $variant)

                                                                <option value="{{ $variant->variant_id }}"

                                                                    data-price="{{ $variant->sale_price }}"

                                                                    @if(isset($item->product_variant_id) && $item->product_variant_id == $variant->variant_id) selected @endif>

                                                                    {{ $variant->variable_value }}

                                                                </option>

                                                            @endforeach

                                                        </select>

                                                    </div> -->

                                                @endforeach

                                            @else

                                                <span>-</span>

                                            @endif

                                        </div>

                                    </div>

                                </td>



                                <td data-cart-title="Price" class="tf-cart-item_price text-center">

                                    <div class="cart-price text-button price-on-sale" id="price-{{ $item->id }}">₹{{ number_format($price,2) }}</div>

                                </td>



                            <td data-cart-title="" class="tf-cart-item_quantity" style="display: flex; align-items: center; justify-content: space-between; gap: 35px;">

    

    <div class="wg-quantity" style="display: flex; align-items: center; border: 1px solid #ccc; border-radius: 0; padding: 2px;">

        <span class="btn-quantity btn-decrease" onclick="changeQuantity({{ $item->id }}, -0)">-</span>

        <input type="number" class="quantity-product" id="quantity-{{ $item->id }}" value="{{ $item->quantity }}" min="1" onchange="updateQuantity({{ $item->id }})">

        <span class="btn-quantity btn-increase" onclick="changeQuantity({{ $item->id }}, 0)">+</span>

    </div>



    <div class="remove-cart">

        <button onclick="removeCartItem({{ $item->id }})" class="remove icon icon-close btn-delete"></button>

    </div>



</td>







                                <!-- <td data-cart-title="Total" class="tf-cart-item_total text-center">

                                    <div id="total-{{ $item->id }}" class="cart-total text-button total-price" data-price="{{ $price }}">₹{{ number_format($total,2) }}</div>

                                </td> -->



                                <!-- <td data-cart-title="" class="remove-cart">

                                    <button onclick="removeCartItem({{ $item->id }})" class="remove icon icon-close btn-delete"></button>

                                </td> -->

                            </tr>

                        @endforeach

                    </tbody>

                </table>

                @else

                    <p>Your cart is empty. <a href="{{ url('/shop') }}">Add products to your cart</a></p>

                @endif

            </div>



            <div class="col-xl-4">

                <div class="fl-sidebar-cart">

                    <div class="box-order bg-surface">

                        <h5 class="title">Order Summary</h5>

                        <div class="subtotal text-button d-flex justify-content-between align-items-center">

                            <span>Subtotal</span>

                            <span class="total" id="grand-total">₹{{ number_format($grandTotal,2) }}</span>

                        </div>

                        <div class="box-progress-checkout">

                            <fieldset class="check-agree">

                                <input type="checkbox" id="check-agree" class="tf-check-rounded">

                                <label for="check-agree">I agree with the <a href="{{ url('terms') }}">terms and conditions</a></label>

                            </fieldset>

                            <a href="{{ url('checkout') }}" class="tf-btn btn-reset">Proceed To Checkout</a>

                            <a href="{{ url('shop') }}" class="text-button text-center">Or continue shopping</a>

                        </div>  

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>



<script>

// Update price when variant changes

document.querySelectorAll('.variant-select').forEach(select => {

    select.addEventListener('change', function(){

        const itemId = this.dataset.itemId;

        const selectedOption = this.options[this.selectedIndex];

        const price = parseFloat(selectedOption.dataset.price);



        // Update frontend price

        document.getElementById('price-'+itemId).innerText = '₹'+price.toFixed(2);



        // Update total for that item

        const quantity = parseInt(document.getElementById('quantity-'+itemId).value);

        document.getElementById('total-'+itemId).innerText = '₹'+(price*quantity).toFixed(2);



        // Update grand total

        let grandTotal = 0;

        document.querySelectorAll('.cart-total').forEach(el=>{

            grandTotal += parseFloat(el.innerText.replace('₹',''));

        });

        document.getElementById('grand-total').innerText = '₹'+grandTotal.toFixed(2);



        // AJAX to update variant and price in DB

        fetch("{{ url('cart/update-variant') }}/"+itemId, {

            method: 'POST',

            headers:{

                'Content-Type':'application/json',

                'X-CSRF-TOKEN':'{{ csrf_token() }}'

            },

            body: JSON.stringify({ variant_id: selectedOption.value })

        })

        .then(res=>res.json())

        .then(data=>{

            if(data.status !== 'success'){

                alert('Failed to update variant');

            }

        })

        .catch(err=>console.error(err));

    });

});



// Remove item from cart

function removeCartItem(itemId){

    if(!confirm('Are you sure you want to remove this item from cart?')) return;



    fetch("{{ url('cart/remove') }}/"+itemId, {

        method: 'DELETE',

        headers:{

            'Content-Type':'application/json',

            'X-CSRF-TOKEN':'{{ csrf_token() }}'

        }

    })

    .then(res=>res.json())

    .then(data=>{

        if(data.status === 'success'){

            // Remove row from table

            document.getElementById('cart-item-'+itemId).remove();



            // Recalculate grand total

            let grandTotal = 0;

            document.querySelectorAll('.cart-total').forEach(el=>{

                grandTotal += parseFloat(el.innerText.replace('₹',''));

            });

            document.getElementById('grand-total').innerText = '₹'+grandTotal.toFixed(2);



            // If no items left, show empty message

            if(document.querySelectorAll('.tf-cart-item').length === 0){

                document.querySelector('.col-xl-8').innerHTML = '<p>Your cart is empty. <a href="{{ url('/shop') }}">Add products to your cart</a></p>';

            }

        } else {

            alert('Failed to remove item.');

        }

    })

    .catch(err=>console.error(err));

}

</script>

<script>

// Update price and variant in DB when variant changes

document.querySelectorAll('.variant-select').forEach(select => {

    select.addEventListener('change', function(){

        const itemId = this.dataset.itemId;

        const selectedOption = this.options[this.selectedIndex];

        const price = parseFloat(selectedOption.dataset.price);



        // Update frontend price

        document.getElementById('price-'+itemId).innerText = '₹'+price.toFixed(2);



        // Update total for that item

        const quantity = parseInt(document.getElementById('quantity-'+itemId).value);

        document.getElementById('total-'+itemId).innerText = '₹'+(price*quantity).toFixed(2);



        // Update grand total

        updateGrandTotal();



        // AJAX to update variant and price in DB

        fetch("{{ url('cart/update-variant') }}/"+itemId, {

            method: 'POST',

            headers:{

                'Content-Type':'application/json',

                'X-CSRF-TOKEN':'{{ csrf_token() }}'

            },

            body: JSON.stringify({ 

                product_variant_id: selectedOption.value,

                price: price,

                quantity: quantity

            })

        })

        .then(res=>res.json())

        .then(data=>{

            if(data.status !== 'success'){

                alert('Failed to update variant');

            }

        })

        .catch(err=>console.error(err));

    });

});



// Update quantity in DB

function updateQuantity(itemId){

    const quantity = parseInt(document.getElementById('quantity-'+itemId).value);

    const price = parseFloat(document.getElementById('price-'+itemId).innerText.replace('₹',''));



    // Update total for item

    document.getElementById('total-'+itemId).innerText = '₹'+(price*quantity).toFixed(2);



    // Update grand total

    updateGrandTotal();



    // AJAX to update quantity in DB

    fetch("{{ url('cart/update-quantity') }}/"+itemId, {

        method: 'POST',

        headers:{

            'Content-Type':'application/json',

            'X-CSRF-TOKEN':'{{ csrf_token() }}'

        },

        body: JSON.stringify({ quantity: quantity })

    })

    .then(res=>res.json())

    .then(data=>{

        if(data.status !== 'success'){

            alert('Failed to update quantity');

        }

    })

    .catch(err=>console.error(err));

}



// Remove item from cart

function removeCartItem(itemId){

    if(!confirm('Are you sure you want to remove this item from cart?')) return;



    fetch("{{ url('cart/remove') }}/"+itemId, {

        method: 'DELETE',

        headers:{

            'Content-Type':'application/json',

            'X-CSRF-TOKEN':'{{ csrf_token() }}'

        }

    })

    .then(res=>res.json())

    .then(data=>{

        if(data.status === 'success'){

            document.getElementById('cart-item-'+itemId).remove();

            updateGrandTotal();

            if(document.querySelectorAll('.tf-cart-item').length === 0){

                document.querySelector('.col-xl-8').innerHTML = '<p>Your cart is empty. <a href="{{ url('/shop') }}">Add products to your cart</a></p>';

            }

        } else {

            alert('Failed to remove item.');

        }

    })

    .catch(err=>console.error(err));

}



// Change quantity using plus/minus buttons

function changeQuantity(itemId, delta){

    let input = document.getElementById('quantity-'+itemId);

    let newQty = parseInt(input.value) + delta;

    if(newQty < 1) newQty = 1;

    input.value = newQty;

    updateQuantity(itemId);

}



// Update grand total calculation

function updateGrandTotal(){

    let grandTotal = 0;

    document.querySelectorAll('.cart-total').forEach(el=>{

        grandTotal += parseFloat(el.innerText.replace('₹',''));

    });

    document.getElementById('grand-total').innerText = '₹'+grandTotal.toFixed(2);

}

</script>



@endsection