@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')

        <section class="cart-page py-5">
        <div class="container">
            <!-- <div class="container cart-header text-center mb-4 pb-md-3">
                <div class="heading">Your Shopping Cart</div>
                <div class="desc text-black">Review your items before proceeding to checkout</div>
            </div> -->
            <div class="row g-4">
                <div class="col-lg-8">
                    <div class="h-100 bg-white rounded-3 p-3">
                        <div class="cart-table table-responsive" id="cart-table">
                            <table class="table table-bordered align-middle mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Product</th>
                                        <th>Quantity</th>
                                        <th>Price</th>
                                        <th>Total</th>
                                        <th>Remove</th>
                                    </tr>
                                </thead>
                                <tbody id="cart-items">
                                    @foreach($cartItems as $index => $item)
                          
                                    
                                    <tr class="cart-item">
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                @if($item->cowCareItem->image)
                                                    <img src="{{ url('storage/' . $item->cowCareItem->image) }}" alt="{{ $item->cowCareItem->title }}" class="img-fluid prdct-img">
                                                @else
                                                    <img src="{{ url('/assets/admin/images/blog_default.png') }}" alt="{{ $item->cowCareItem->title }}" class="img-fluid prdct-img">
                                                @endif

                                                <!-- <img src="./images/cow-vaccinations.jpg" alt="Product 1" > -->
                                                <span class="prdct-name text-black fs-6 text-capitalize flex-fill">{{ $item->cowCareItem->title }}</span>
                                            </div>
                                        </td>
                                        <td class="product-item">
                                            <div class="quantity-box">
                                                <button class="quantity-button" id="minus" onclick="changeQuantity(-1, {{ $item->id }})"><i class="bi bi-dash-lg"></i></button>
                                                <input type="text" class="quantity-input" id="quantity-{{ $item->id }}" value="{{ $item->quantity }}" min="1">
                                                <button class="quantity-button" id="plus" onclick="changeQuantity(1, {{ $item->id }})"><i class="bi bi-plus-lg"></i></button>
                                            </div>
                                        </td>
                                        <td id="price-{{ $item->id }}">{{ number_format($item->cowCareItem->price, 2) }}</td>
                                        <td class="item-total" id="total-{{ $item->id }}">{{ $subtotal }}</td>

                                        <!-- <td><span class="remove-btn text-danger pointer" onclick="removeItem({{ $item->id }})"><i class="bi bi-trash3"></i></span></td> -->
                                        <td>
                                            <span class="remove-btn text-danger pointer" onclick="removeItem({{ $item->id }})">
                                                <i class="bi bi-trash3"></i>
                                            </span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- No items in the cart message -->
                        <div id="empty-cart-message" class="h-100 border rounded-3 text-center p-3" style="display: none;">
                            <div class="text-danger h-100 d-flex flex-column justify-content-center">
                                <div><i class="bi bi-images fs-1 lh-sm"></i></div>
                                <div class="fs-4 fw-bold">No items in the cart</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cart Summary -->
                <div class="col-lg-4">
                    
                    <div class="cart-summary h-100 bg-white rounded-3 p-3">
                        <div class="text-black fs-5 fw-bold border-bottom pb-2 mb-3">Cart Summary</div>
                        <div class="fs-6 fw-medium d-flex justify-content-between mb-3">
                            <span class="text-black">Subtotal:</span>
                            <span class="text-theme1" id="final-total">{{ number_format($total, 2) }}</span>
                        </div>
                        <div class="fs-6 fw-medium d-flex justify-content-between">
                            <span class="text-black">Shipping:</span>
                            <span class="text-theme1">Free</span>
                        </div>
                        <hr>
                        <div class="text-black fs-18 fw-bold d-flex justify-content-between mb-4">
                            <span class="total-price">Total:</span>
                            <span class="total-price" id="total-price">{{ number_format($total, 2) }}</span>
                        </div>
                        <button class="btn btn-primary btn-custom w-100" id="checkout-btn" disabled>Proceed to Checkout</button>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <script>
        const BASE_URL = "{{ url('/') }}"; // Laravel base URL
        // console.
        function changeQuantity(amount, cartId) {
            const quantityInput = document.getElementById(`quantity-${cartId}`);
            const priceInput = document.getElementById(`price-${cartId}`).innerText;
            const totalInput = document.getElementById(`total-${cartId}`).innerText;
            const grandTotalInput = document.getElementById('final-total');
            const finalTotalInput = document.getElementById('total-price');

            let currentValue = parseFloat(quantityInput.value);
            let priceValue = parseFloat(priceInput);

            // Update quantity
            currentValue += amount;
            if (currentValue < 1) currentValue = 1;

            quantityInput.value = currentValue;

            // Update item total
            const itemTotal = (priceValue * currentValue).toFixed(2);
            console.log(itemTotal);
           
            // totalInput.innerText = `${itemTotal}`;

            // Disable minus button if value is 1
            const minusButton = quantityInput.parentElement.querySelector('.quantity-button:first-child');
            minusButton.disabled = currentValue <= 1;

            // Send updated quantity to backend
            const url = `${BASE_URL}/cart/update-cart-quantity`;

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    cart_id: cartId,
                    quantity: currentValue
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // Recalculate grand total (sum of all cart item totals)
                    let total = 0;
                    document.querySelectorAll('[id^="total-"]').forEach(el => {
                        const amount = parseFloat(el.innerText.replace(/[^\d.-]/g, '')) || 0;
                        total += amount;
                    });

                    document.getElementById(`total-${cartId}`).innerText = `${itemTotal}`;
                    grandTotalInput.innerText = `${total.toFixed(2)}`;
                    finalTotalInput.innerText = `${total.toFixed(2)}`;
                } else {
                    alert('Failed to update quantity');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }



        // remove cart record

        function removeItem(cartId) {
            if (!confirm('Are you sure you want to delete this item?')) return;

            const url = `${BASE_URL}/cart/delete-cart-item`;

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ cart_id: cartId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // Reload the page to reflect changes
                    location.reload();
                } else {
                    alert('Failed to delete item.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }


        // Optional: grand total update if you want
        function updateGrandTotal() {
            let total = 0;
            document.querySelectorAll('[id^="total-"]').forEach(el => {
                const amount = parseFloat(el.innerText.replace(/[^\d.-]/g, '')) || 0;
                total += amount;
            });
            const grandTotalInput = document.getElementById('grand-total');
            if (grandTotalInput) {
                grandTotalInput.innerText = `₹${total.toFixed(2)}`;
            }
        }

    </script>

@endsection