@extends('layouts.app')

@section('title', 'Shopping Cart - Memorycloset Media')

@section('content')
<div class="container mx-auto px-4 py-8 md:py-12">
    <h1 class="text-3xl md:text-4xl font-serif font-bold text-[#524438] mb-6 md:mb-8">Shopping Cart</h1>

    @if(session('error'))
        <div class="bg-red-50 border-2 border-red-200 text-red-700 px-4 py-3 rounded-xl mb-6">
            {{ session('error') }}
        </div>
    @endif

    @if(empty($cartItems))
        <div class="bg-white rounded-2xl shadow-md border border-[#e8ddd0] p-8 md:p-12 text-center">
            <svg class="w-24 h-24 mx-auto mb-6 text-[#9d8566]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
            </svg>
            <h2 class="text-2xl font-serif font-bold text-[#524438] mb-4">Your cart is empty</h2>
            <p class="text-[#645443] mb-6">Start adding some delicious treats to your cart!</p>
            <a href="{{ route('products.index') }}" class="inline-block bg-[#7d6a52] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#9d8566] transition-all shadow-lg hover:shadow-xl">
                Browse Products
            </a>
        </div>
    @else
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
            <!-- Cart Items -->
            <div class="lg:col-span-2 space-y-4">
                @foreach($cartItems as $item)
                    <div class="bg-white rounded-2xl shadow-md border border-[#e8ddd0] p-4 md:p-6" data-product-id="{{ $item['product']->id }}">
                        <div class="flex flex-col sm:flex-row gap-4">
                            <!-- Product Image -->
                            <div class="flex-shrink-0">
                                <a href="{{ route('products.show', $item['product']->id) }}">
                                    @if($item['product']->primaryImage)
                                        <img src="{{ asset('storage/' . $item['product']->primaryImage->image_path) }}" 
                                             alt="{{ $item['product']->name }}" 
                                             class="w-24 h-24 md:w-32 md:h-32 object-cover rounded-xl">
                                    @else
                                        <div class="w-24 h-24 md:w-32 md:h-32 bg-[#e8ddd0] rounded-xl flex items-center justify-center">
                                            <svg class="w-12 h-12 text-[#9d8566]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                            </svg>
                                        </div>
                                    @endif
                                </a>
                            </div>

                            <!-- Product Details -->
                            <div class="flex-1">
                                <h3 class="text-lg md:text-xl font-serif font-bold text-[#524438] mb-2">
                                    <a href="{{ route('products.show', $item['product']->id) }}" class="hover:text-[#9d8566] transition-colors">
                                        {{ $item['product']->name }}
                                    </a>
                                </h3>
                                
                                @if($item['product']->category)
                                    <p class="text-sm text-[#645443] mb-2">{{ $item['product']->category->name }}</p>
                                @endif

                                <div class="flex items-center gap-4 mb-4">
                                    <div class="flex items-center gap-2">
                                        <label class="text-sm text-[#645443] font-medium">Quantity:</label>
                                        <div class="flex items-center border-2 border-[#e8ddd0] rounded-lg">
                                            <button onclick="updateQuantity({{ $item['product']->id }}, {{ $item['quantity'] - 1 }})" 
                                                    class="px-3 py-1 text-[#645443] hover:bg-[#f5f0e8] transition-colors">-</button>
                                            <input type="number" 
                                                   id="quantity-{{ $item['product']->id }}" 
                                                   value="{{ $item['quantity'] }}" 
                                                   min="1" 
                                                   class="w-16 text-center border-0 focus:ring-0 text-[#524438] font-semibold"
                                                   onchange="updateQuantity({{ $item['product']->id }}, this.value)">
                                            <button onclick="updateQuantity({{ $item['product']->id }}, {{ $item['quantity'] + 1 }})" 
                                                    class="px-3 py-1 text-[#645443] hover:bg-[#f5f0e8] transition-colors">+</button>
                                        </div>
                                    </div>
                                    
                                    <div class="text-lg font-bold text-[#7d6a52]">
                                        R{{ number_format($item['subtotal'], 2) }}
                                    </div>
                                </div>

                                <button onclick="removeFromCart({{ $item['product']->id }})" 
                                        class="text-[#c97d60] hover:text-[#b86a4f] transition-colors text-sm font-medium flex items-center gap-1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                    </svg>
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="mt-6">
                    <a href="{{ route('products.index') }}" class="text-[#7d6a52] hover:text-[#9d8566] transition-colors font-medium inline-flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        Continue Shopping
                    </a>
                </div>
            </div>

            <!-- Order Summary -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-md border border-[#e8ddd0] p-6 sticky top-24">
                    <h2 class="text-2xl font-serif font-bold text-[#524438] mb-6">Order Summary</h2>
                    
                    <div class="space-y-4 mb-6">
                        <div class="flex justify-between items-center py-3 border-b border-[#e8ddd0]">
                            <span class="text-[#645443] font-medium">Subtotal</span>
                            <span class="font-semibold text-[#524438] text-lg">R{{ number_format($subtotal, 2) }}</span>
                        </div>
                        <div class="pt-4">
                            <div class="flex justify-between items-center bg-gradient-to-r from-[#f5f0e8] to-[#e8ddd0] p-4 rounded-xl">
                                <span class="text-xl font-bold text-[#524438]">Total</span>
                                <span class="text-2xl font-bold text-[#7d6a52]">R{{ number_format($total, 2) }}</span>
                            </div>
                        </div>
                    </div>

                    <a href="{{ route('orders.checkout') }}" class="block w-full bg-[#7d6a52] text-white text-center px-6 py-3 rounded-full font-semibold hover:bg-[#9d8566] transition-all shadow-lg hover:shadow-xl mb-4">
                        Proceed to Checkout
                    </a>

                    <p class="text-xs text-[#645443] text-center">No payment required. We'll contact you to confirm your order.</p>
                </div>
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script>
function updateQuantity(productId, quantity) {
    if (quantity < 1) {
        removeFromCart(productId);
        return;
    }

    fetch(`/cart/${productId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: JSON.stringify({ quantity: parseInt(quantity) })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            showToast(data.message || 'Failed to update cart', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Failed to update cart', 'error');
    });
}

function removeFromCart(productId) {
    fetch(`/cart/${productId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            showToast(data.message || 'Failed to remove item', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Failed to remove item', 'error');
    });
}
</script>
@endpush
@endsection