@extends('layouts.app')

@section('content')

<nav class="dsdsd" aria-label="breadcrumb">
    <div class="container">
        <ol class="breadcrumb custom-breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Cart</li>
        </ol>
    </div>
</nav>

<!-- Cart Section -->
<div class="flat-spacing-2 mt_15">
    <div class="container">
        <div class="row">
            <div class="col-xl-8">
                <div class="tf-page-cart-main">
                    <form class="form-cart">
                        <table class="table-page-cart">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($cartItems as $item)
                                    @php
                                        $product = $item->product;
                                        $price = $item->custom_price ?? $product->price;
                                        $total = $price * $item->quantity;
                                        $custom = $item->custom_attributes;
                                    @endphp

                                    <tr class="tf-cart-item" data-id="{{ $item->id }}">
                                        <td class="tf-cart-item_product">
                                            <a href="{{ route('product.detail', $product->id) }}" class="img-box">

                                                <img src="{{ asset('storage/' . $product->primary_image) }}" alt="img-product">
                                            </a>
                                            <div class="cart-info">
                                                <a href="{{ route('product.detail', $product->id) }}" class="name text-md link fw-medium">
                                                    {{ $product->name }}
                                                </a>
                                                
                                                @if(!empty($custom))
													<div class="text-sm text-muted">
														@foreach($custom as $key => $value)
															<div>
																{{ ucfirst($key) }}:
																@if(is_array($value))
																	{{ implode(', ', $value) }}
																@else
																	{{ $value }}
																@endif
															</div>
														@endforeach
													</div>
												@endif

                                                <span class="remove-cart link text-danger remove-item" data-id="{{ $item->id }}">Remove</span>
                                            </div>
                                        </td>
                                        <td class="tf-cart-item_price text-center">
                                            <span class="cart-price price-on-sale text-md fw-medium">
                                                £{{ number_format($price, 2) }}
                                            </span>
                                        </td>
                                        <td class="tf-cart-item_quantity text-center">
                                            <div class="wg-quantity">
                                                <span class="btn-quantity btn-decrease" data-id="{{ $item->id }}">-</span>
                                                <input class="quantity-product" type="text" value="{{ $item->quantity }}" readonly>
                                                <span class="btn-quantity btn-increase" data-id="{{ $item->id }}">+</span>
                                            </div>
                                        </td>
                                        <td class="tf-cart-item_total text-center">
                                            <div class="cart-total text-md fw-medium">£{{ number_format($total, 2) }}</div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-5">
                                            Your cart is empty.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                        <div class="box-ip-discount mt-4">
                            <div class="discount-ip">
                                <input class="value-discount" type="text" placeholder="Discount code">
                                <button type="button" class="tf-btn radius-6 btn-out-line-dark-2">Apply</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="tf-page-cart-sidebar">
                    <form action="{{'checkout'}}" class="cart-box checkout-cart-box">
                        <div class="cart-head">
                            <div class="total-discount text-xl fw-medium d-flex justify-content-between">
                                <span>Total:</span>
                                 <strong id="cartTotal">£{{ number_format($cartTotal, 2) }}</strong>

                            </div>
                            <p class="text-sm text-dark-4">Taxes and shipping calculated at checkout</p>
                        </div>

                        <div class="check-agree">
                            <input type="checkbox" class="tf-check" id="check-agree">
                            <label for="check-agree" class="label text-dark-4">
                                I agree with <a href="#" class="text-dark-4 fw-medium text-underline link">terms and conditions</a>
                            </label>
                        </div>

                        <div class="checkout-btn mt-3">
                            <button type="submit" class="tf-btn btn-dark2 animate-btn w-100">Checkout</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // === Remove from cart ===
    document.querySelectorAll('.remove-item').forEach(btn => {
        btn.addEventListener('click', function () {
            const id = this.dataset.id;
            const row = this.closest('tr');

            fetch(`cart/remove/${id}`, {
                method: 'POST', // ✅ use POST instead of DELETE
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({ _method: 'DELETE' }) // ✅ Laravel method spoofing
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    row.remove();
                    updateCartTotal();
					    location.reload();

                } else {
                    console.error('Remove failed:', data);
                }
            })
            .catch(err => console.error('Error removing item:', err));
        });
    });

    // === Quantity change (increase / decrease) ===
    document.querySelectorAll('.btn-quantity').forEach(btn => {
    btn.addEventListener('click', function () {
        const id = this.dataset.id;
        const row = this.closest('tr');
        const input = row.querySelector('.quantity-product');
        let qty = parseInt(input.value) || 1; // fallback to 1 if NaN

        // Adjust quantity but never below 1
        if (this.classList.contains('btn-increase')) {
            qty += 1;
        } else if (this.classList.contains('btn-decrease')) {
            qty = Math.max(1, qty - 1);
        }

        input.value = qty;

        fetch(`cart/update/${id}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
            body: JSON.stringify({ quantity: qty })
        })
        .then(async res => {
            const text = await res.text();
            try {
                return JSON.parse(text);
            } catch {
                console.error('Invalid JSON:', text);
                throw new Error('Invalid JSON');
            }
        })
        .then(data => {
            if (data.success) {
                input.value = data.updated_quantity ?? qty;
                row.querySelector('.cart-total').textContent = '£' + data.item_total.toFixed(2);
                document.querySelector('#cartTotal').textContent = '£' + data.cart_total.toFixed(2);
            } else {
                console.error('Update failed:', data.message);
            }
        })
        .catch(err => console.error('Error updating quantity:', err));
    });
});
	
    });

    // === Helper to recalc cart total ===
    function updateCartTotal() {
        let total = 0;
        document.querySelectorAll('.cart-total').forEach(el => {
            total += parseFloat(el.textContent.replace('£', '')) || 0;
        });
        document.querySelector('#cartTotal').textContent = '£' + total.toFixed(2);
    }
</script>
@endsection