@extends('layouts.shop')

@section('title', 'Finalizar Compra | Pago Móvil')

@section('content')
<div class="container mx-auto px-4 py-8" x-data="checkout()">
    <h1 class="text-3xl font-bold mb-8">Finalizar Compra</h1>

    <div class="grid md:grid-cols-2 gap-8">
        <!-- Formulario de Datos -->
        <div class="space-y-6">
            <div class="bg-background border rounded-lg p-6 shadow-sm">
                <h2 class="text-xl font-semibold mb-4">1. Datos del Cliente</h2>
                <div class="grid gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">Nombre Completo</label>
                        <input type="text" x-model="form.customer_name" class="w-full rounded-md border bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Cédula / Identidad</label>
                        <input type="text" x-model="form.customer_identity" class="w-full rounded-md border bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Email</label>
                        <input type="email" x-model="form.customer_email" class="w-full rounded-md border bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Teléfono</label>
                        <input type="tel" x-model="form.customer_phone" class="w-full rounded-md border bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary">
                    </div>
                </div>
            </div>

            <div class="bg-background border rounded-lg p-6 shadow-sm">
                <h2 class="text-xl font-semibold mb-4">2. Pago Móvil</h2>
                <div class="bg-muted/50 p-4 rounded-md mb-4 text-sm font-mono space-y-1">
                    <p><strong>Banco:</strong> Banesco (0134)</p>
                    <p><strong>Teléfono:</strong> 0414-1234567</p>
                    <p><strong>C.I.:</strong> 12.345.678</p>
                </div>
                <div class="grid gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">Banco desde donde pagas (Opcional)</label>
                        <input type="text" x-model="form.bank_name" placeholder="Ej: Venezuela, Mercantil..." class="w-full rounded-md border bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Referencia de Transferencia *</label>
                        <input type="text" x-model="form.payment_proof" placeholder="Últimos 4-6 dígitos" class="w-full rounded-md border bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary">
                        <p class="text-xs text-muted-foreground mt-1">Ingresa el número de referencia para verificar tu pago.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Resumen del Pedido -->
        <div>
            <div class="bg-muted/10 border rounded-lg p-6 sticky top-24">
                <h2 class="text-xl font-semibold mb-6">Resumen del Pedido</h2>
                
                <div class="space-y-4 mb-6 max-h-80 overflow-y-auto">
                    <template x-for="item in $store.cart.items" :key="item.id">
                        <div class="flex justify-between text-sm">
                            <span x-text="item.quantity + 'x ' + item.name"></span>
                            <span x-text="'$' + (item.price * item.quantity).toFixed(2)"></span>
                        </div>
                    </template>
                </div>

                <div class="border-t pt-4 space-y-2 font-medium">
                    <div class="flex justify-between text-lg">
                        <span>Total a Pagar</span>
                        <span x-text="'$' + $store.cart.total"></span>
                    </div>
                    <div class="flex justify-between text-sm text-muted-foreground">
                        <span>Tasa de Cambio (Ref)</span>
                        <span>Bs. 60.00</span>
                    </div>
                    <div class="flex justify-between text-lg text-primary mt-2 pt-2 border-t border-dashed">
                        <span>Total en Bolívares</span>
                        <span x-text="'Bs. ' + ($store.cart.total * 60).toFixed(2)"></span>
                    </div>
                </div>

                <button @click="submit" 
                        :disabled="loading || $store.cart.items.length === 0"
                        class="w-full mt-6 bg-primary text-primary-foreground py-3 rounded-md font-bold hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center gap-2">
                    <span x-show="loading" class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></span>
                    <span x-text="loading ? 'Procesando...' : 'Confirmar Pago'"></span>
                </button>
                
                <p x-show="error" x-text="error" class="text-sm text-destructive mt-4 text-center"></p>
            </div>
        </div>
    </div>
</div>

<script>
    function checkout() {
        return {
            loading: false,
            error: null,
            form: {
                customer_name: '{{ auth()->user()->name ?? "" }}',
                customer_email: '{{ auth()->user()->email ?? "" }}',
                customer_phone: '',
                customer_identity: '',
                bank_name: '',
                payment_proof: ''
            },
            
            async submit() {
                this.error = null;
                
                // Validaciones completas
                if (!this.form.customer_name || !this.form.customer_email || !this.form.payment_proof || !this.form.customer_identity || !this.form.customer_phone) {
                    this.error = 'Por favor completa todos los campos obligatorios (Nombre, Email, Teléfono, CI y Referencia).';
                    return;
                }

                if (this.$store.cart.items.length === 0) {
                    this.error = 'Tu carrito está vacío.';
                    return;
                }

                this.loading = true;

                try {
                    const payload = {
                        ...this.form,
                        cart: this.$store.cart.items
                    };

                    const res = await fetch('{{ route('shop.checkout.store') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(payload)
                    });

                    // Intentar parsear JSON, si falla usar texto plano (para errores de Laravel/PHP)
                    let data;
                    const contentType = res.headers.get("content-type");
                    if (contentType && contentType.indexOf("application/json") !== -1) {
                        data = await res.json();
                    } else {
                        const text = await res.text();
                        console.error("Backend Error:", text);
                        throw new Error("Error del servidor (500). Revisa la consola para más detalles.");
                    }

                    if (!res.ok) throw new Error(data.message || 'Error al procesar el pedido');

                    // Éxito
                    localStorage.removeItem('basepro_cart'); 
                    this.$store.cart.items = []; 
                    
                    // Forzar redirección estricta
                    window.location.replace(data.redirect);

                } catch (e) {
                    this.error = e.message;
                    console.error(e);
                } finally {
                    this.loading = false;
                }
            }
        }
    }
</script>
@endsection