@extends('store.themes.modern-coffee-shop.layouts.app')

@section('title', __('Shopping Cart'))

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">{{ __('Shopping Cart') }}</h1>
    
    <div x-data="cartPage()" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Cart Items -->
        <div class="lg:col-span-2">
            <template x-if="$store.cart.items.length === 0">
                <div class="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <p class="text-gray-500 mb-4">{{ __('Your cart is empty') }}</p>
                    <a href="{{ route('store.products') }}" class="inline-block bg-amber-700 text-white px-6 py-3 rounded-lg hover:bg-amber-800 transition">
                        {{ __('Continue Shopping') }}
                    </a>
                </div>
            </template>
            
            <div class="space-y-4">
                <template x-for="item in $store.cart.items" :key="item.id">
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 flex gap-4">
                        <img :src="item.product.main_image" :alt="item.product.name" class="w-24 h-24 object-cover rounded">
                        <div class="flex-1">
                            <h3 class="font-semibold mb-1" x-text="item.product.name"></h3>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
                                <span x-text="item.product.price"></span> {{ __('EGP') }}
                            </p>
                            <div class="flex items-center gap-2">
                                <button @click="updateQuantity(item.id, item.quantity - 1)" class="px-2 py-1 border rounded hover:bg-gray-100 dark:hover:bg-gray-700">-</button>
                                <input type="number" :value="item.quantity" @change="updateQuantity(item.id, $event.target.value)" min="1" class="w-16 text-center border rounded dark:bg-gray-700">
                                <button @click="updateQuantity(item.id, item.quantity + 1)" class="px-2 py-1 border rounded hover:bg-gray-100 dark:hover:bg-gray-700">+</button>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="font-bold text-lg text-amber-700" x-text="(item.product.price * item.quantity).toFixed(2) + ' EGP'"></p>
                            <button @click="removeItem(item.id)" class="text-red-600 hover:text-red-700 text-sm mt-2">{{ __('Remove') }}</button>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        
        <!-- Order Summary -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 sticky top-4">
                <h2 class="text-xl font-bold mb-4">{{ __('Order Summary') }}</h2>
                <div class="space-y-3 mb-4">
                    <div class="flex justify-between">
                        <span>{{ __('Subtotal') }}</span>
                        <span x-text="$store.cart.subtotal.toFixed(2) + ' EGP'"></span>
                    </div>
                    <div class="flex justify-between">
                        <span>{{ __('Shipping') }}</span>
                        <span>{{ __('Free') }}</span>
                    </div>
                    <div class="border-t pt-3 flex justify-between font-bold text-lg">
                        <span>{{ __('Total') }}</span>
                        <span class="text-amber-700" x-text="$store.cart.total.toFixed(2) + ' EGP'"></span>
                    </div>
                </div>
                <a href="{{ route('store.checkout') }}" class="block w-full bg-amber-700 text-white text-center py-3 rounded-lg font-semibold hover:bg-amber-800 transition">
                    {{ __('Proceed to Checkout') }}
                </a>
            </div>
        </div>
    </div>
</div>

<script>
function cartPage() {
    return {
        async updateQuantity(itemId, quantity) {
            if (quantity < 1) {
                return this.removeItem(itemId);
            }
            try {
                const res = await fetch(`/api/store/cart/${itemId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ quantity: parseInt(quantity) })
                });
                if (res.ok) {
                    await Alpine.store('cart').fetch();
                }
            } catch (error) {
                console.error('Update failed:', error);
            }
        },
        async removeItem(itemId) {
            try {
                const res = await fetch(`/api/store/cart/${itemId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });
                if (res.ok) {
                    await Alpine.store('cart').fetch();
                    window.showToast('{{ __("Item removed") }}', 'success');
                }
            } catch (error) {
                console.error('Remove failed:', error);
            }
        }
    };
}
</script>
@endsection