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

@section('title', __('Checkout'))

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">{{ __('Checkout') }}</h1>
    
    <div x-data="checkoutPage()" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Checkout Form -->
        <form @submit.prevent="submitOrder" class="lg:col-span-2 space-y-6">
            <!-- Contact Information -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-xl font-bold mb-4">{{ __('Contact Information') }}</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">{{ __('Full Name') }}</label>
                        <input type="text" x-model="formData.name" required class="w-full px-4 py-2 border rounded-lg dark:bg-gray-700">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">{{ __('Phone') }}</label>
                        <input type="tel" x-model="formData.phone" required class="w-full px-4 py-2 border rounded-lg dark:bg-gray-700">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium mb-2">{{ __('Email') }}</label>
                        <input type="email" x-model="formData.email" required class="w-full px-4 py-2 border rounded-lg dark:bg-gray-700">
                    </div>
                </div>
            </div>
            
            <!-- Shipping Address -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-xl font-bold mb-4">{{ __('Shipping Address') }}</h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">{{ __('Address') }}</label>
                        <input type="text" x-model="formData.address" required class="w-full px-4 py-2 border rounded-lg dark:bg-gray-700">
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium mb-2">{{ __('City') }}</label>
                            <input type="text" x-model="formData.city" required class="w-full px-4 py-2 border rounded-lg dark:bg-gray-700">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-2">{{ __('Postal Code') }}</label>
                            <input type="text" x-model="formData.postal_code" class="w-full px-4 py-2 border rounded-lg dark:bg-gray-700">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Payment Method -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-xl font-bold mb-4">{{ __('Payment Method') }}</h2>
                <div class="space-y-3">
                    <label class="flex items-center gap-3 p-4 border-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700" :class="formData.payment_method === 'cod' ? 'border-amber-700 bg-amber-50 dark:bg-amber-900/20' : ''">
                        <input type="radio" x-model="formData.payment_method" value="cod" class="text-amber-700">
                        <span class="font-medium">{{ __('Cash on Delivery') }}</span>
                    </label>
                </div>
            </div>
            
            <button type="submit" :disabled="loading" class="w-full bg-amber-700 text-white py-3 rounded-lg font-semibold hover:bg-amber-800 transition disabled:opacity-50">
                <span x-show="!loading">{{ __('Place Order') }}</span>
                <span x-show="loading">{{ __('Processing...') }}</span>
            </button>
        </form>
        
        <!-- 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">
                    <template x-for="item in $store.cart.items" :key="item.id">
                        <div class="flex justify-between text-sm">
                            <span x-text="`${item.product.name} x${item.quantity}`"></span>
                            <span x-text="(item.product.price * item.quantity).toFixed(2) + ' EGP'"></span>
                        </div>
                    </template>
                </div>
                <div class="border-t pt-4 space-y-2">
                    <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-2 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>
            </div>
        </div>
    </div>
</div>

<script>
function checkoutPage() {
    return {
        loading: false,
        formData: {
            name: '',
            phone: '',
            email: '',
            address: '',
            city: '',
            postal_code: '',
            payment_method: 'cod'
        },
        async submitOrder() {
            this.loading = true;
            try {
                const res = await fetch('/api/store/checkout', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(this.formData)
                });
                const data = await res.json();
                if (data.success) {
                    window.showToast('{{ __("Order placed successfully!") }}', 'success');
                    setTimeout(() => window.location.href = '/store', 2000);
                } else {
                    window.showToast(data.message || '{{ __("Error placing order") }}', 'error');
                }
            } catch (error) {
                window.showToast('{{ __("Error placing order") }}', 'error');
            } finally {
                this.loading = false;
            }
        }
    };
}
</script>
@endsection