@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="cart_details_page_sec flat-spacing-2 mt_15">
    <div class="container">
        <div class="cart_heading_and_quantity">
        <a href="{{ route('home') }}"><i class="bi bi-arrow-left"></i>&nbsp;Continue Shopping</a>
        <h3>Your Basket <span>({{ cart_count() }} items)</span></h3>
        </div>
        <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 class="text-start">Items</th>
                                    <th>Item Price</th>
                                    <th>Quantity</th>
                                    <th>Subtotal</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->slug) }}" class="img-box">

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

            {{-- ✅ If Selected Options (nested) --}}
            @if($key === 'Selected Options' && is_array($value))
                @foreach($value as $optionName => $optionData)
                    <div>
                        <span>{{ $optionName }} :</span>
                        {{ $optionData['value'] ?? '' }}
                    </div>
                @endforeach

            {{-- ✅ Normal array --}}
            @elseif(is_array($value))
                <div>
                    <span>{{ ucfirst($key) }} :</span>
                    {{ implode(', ', $value) }}
                </div>

            {{-- ✅ Normal string --}}
            @else
                <div>
                    <span>{{ ucfirst($key) }} :</span>
                    {{ $value }}
                </div>
            @endif

        @endforeach
    </div>
@endif


                                               
                                            </div>
                                        </td>
                                        
                                        <td class="tf-cart-item_total">
                                            <div class="tf-cart-item_price">
                                             <span class="cart-price price-on-sale text-md fw-medium">
                                                £{{ number_format($price, 2) }}
                                            </span>
                                            </div>
                                        </td>
                                        <td class="cart_item_inc_remv 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>
                                         <span class="remove-cart link text-danger remove-item" title="Delete" data-id="{{ $item->id }}"><i class="bi bi-trash3"></i>&nbsp;Remove</span>
                                        </td>
                                        <td class="tf-cart-item_total">
                                            <div class="cart_price_and_total_p">
                                           <span class="cart-total text-md fw-medium">£{{ number_format($total, 2) }}</span>
                                            </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 form-control" 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="Summary_hea">
                        <h4>Summary</h4>
                        </div>
                        <div class="table-responsive">
                        <table class="table table-striped">
                        <tr>
                        <td>Subtotal ({{ cart_count() }} items)</td>
                        <td>£{{ number_format($cartTotal, 2) }}</td>
                        </tr>
                        <tr>
                        <td>Shipping (Standard Delivery - Fixed) <!--Taxes and shipping calculated at checkout--></td> 
                        <td>£0.00</td>
                        </tr>
                        <tr>
                        <td>Total incl. VAT</td>    
                        <td><span id="cartTotal">£{{ number_format($cartTotal, 2) }}</span></td>
                        </tr>
                        </table>
                        </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">
                            <a href="{{route('checkout')}}" class="tf-btn btn-dark2 animate-btn">Checkout</a>
                        </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