@extends('layouts.app')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">Shopping Cart</h1>

        @if(count($items) > 0)
            <div class="grid lg:grid-cols-3 gap-8">
                {{-- Cart Items --}}
                <div class="lg:col-span-2 space-y-4">
                    @foreach($items as $id => $item)
                    <div class="bg-white rounded-2xl shadow-sm p-6 flex gap-6" id="cart-item-{{ $id }}">
                        <a href="{{ route('product.show', $item['slug']) }}" class="w-24 h-24 flex-shrink-0 bg-gray-100 rounded-xl overflow-hidden">
                            <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}" class="w-full h-full object-cover">
                        </a>
                        
                        <div class="flex-1 min-w-0">
                            <a href="{{ route('product.show', $item['slug']) }}" class="font-semibold text-gray-900 hover:text-blue-600 transition line-clamp-1">
                                {{ $item['name'] }}
                            </a>
                            <p class="text-gray-500 text-sm mt-1">৳{{ number_format($item['price'], 2) }} each</p>
                            
                            <div class="flex items-center justify-between mt-4">
                                <div class="flex items-center border rounded-lg">
                                    <button type="button" onclick="updateCartItem({{ $id }}, {{ $item['quantity'] - 1 }})"
                                            class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-l-lg">-</button>
                                    <input type="number" value="{{ $item['quantity'] }}" min="1" 
                                           class="w-12 h-10 text-center border-0 focus:ring-0 text-sm"
                                           onchange="updateCartItem({{ $id }}, this.value)">
                                    <button type="button" onclick="updateCartItem({{ $id }}, {{ $item['quantity'] + 1 }})"
                                            class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-r-lg">+</button>
                                </div>
                                
                                <div class="text-right">
                                    <p class="font-bold text-gray-900">৳{{ number_format($item['price'] * $item['quantity'], 2) }}</p>
                                    <button type="button" onclick="removeCartItem({{ $id }})"
                                            class="text-red-500 text-sm hover:underline mt-1">Remove</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                {{-- Order Summary --}}
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-2xl shadow-sm p-6 sticky top-24">
                        <h2 class="text-xl font-bold text-gray-900 mb-6">Order Summary</h2>
                        
                        {{-- Coupon --}}
                        <form action="{{ route('cart.coupon') }}" method="POST" class="mb-6">
                            @csrf
                            <div class="flex">
                                <input type="text" name="code" value="{{ $coupon }}" placeholder="Enter coupon code"
                                       class="flex-1 px-4 py-2 border rounded-l-lg focus:ring-blue-500 focus:border-blue-500 uppercase">
                                @if($coupon)
                                    @method('DELETE')
                                    <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-r-lg hover:bg-red-600">Remove</button>
                                @else
                                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700">Apply</button>
                                @endif
                            </div>
                        </form>

                        {{-- Totals --}}
                        <div class="space-y-3 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Subtotal</span>
                                <span class="font-medium">৳{{ number_format($subtotal, 2) }}</span>
                            </div>
                            @if($discount > 0)
                            <div class="flex justify-between text-green-600">
                                <span>Discount</span>
                                <span class="font-medium">-৳{{ number_format($discount, 2) }}</span>
                            </div>
                            @endif
                            <div class="flex justify-between">
                                <span class="text-gray-600">Shipping</span>
                                <span class="text-gray-500">Calculated at checkout</span>
                            </div>
                        </div>
                        
                        <div class="border-t my-4 pt-4">
                            <div class="flex justify-between text-lg font-bold">
                                <span>Total</span>
                                <span>৳{{ number_format($subtotal - $discount, 2) }}</span>
                            </div>
                        </div>

                        <a href="{{ route('checkout.index') }}" 
                           class="block w-full bg-blue-600 text-white py-3 rounded-xl font-semibold text-center hover:bg-blue-700 transition">
                            Proceed to Checkout
                        </a>
                        
                        <a href="{{ route('shop') }}" 
                           class="block w-full text-center text-blue-600 mt-4 hover:underline">
                            Continue Shopping
                        </a>
                    </div>
                </div>
            </div>
        @else
            {{-- Empty Cart --}}
            <div class="text-center py-16 bg-white rounded-2xl">
                <svg class="w-24 h-24 mx-auto text-gray-300 mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
                <h2 class="text-2xl font-bold text-gray-900 mb-2">Your cart is empty</h2>
                <p class="text-gray-600 mb-6">Looks like you haven't added anything to your cart yet.</p>
                <a href="{{ route('shop') }}" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-xl font-semibold hover:bg-blue-700 transition">
                    Start Shopping
                </a>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    function updateCartItem(id, quantity) {
        if (quantity < 1) return;
        
        fetch(`{{ url('cart/update') }}/${id}`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ quantity: quantity })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            }
        });
    }

    function removeCartItem(id) {
        if (!confirm('Remove this item from cart?')) return;
        
        fetch(`{{ url('cart/remove') }}/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById(`cart-item-${id}`).remove();
                if (data.count === 0) {
                    location.reload();
                } else {
                    document.getElementById('cart-count').textContent = data.count;
                }
            }
        });
    }
</script>
@endpush
@endsection