@extends('layouts.shop')

@section('title', '¡Gracias por tu compra!')

@section('content')
<div class="container mx-auto px-4 py-16 text-center max-w-lg">
    <div class="bg-green-100 text-green-600 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
        <svg class="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
    </div>
    
    <h1 class="text-3xl font-bold mb-4">¡Pedido Recibido!</h1>
    <p class="text-muted-foreground mb-8">
        Gracias por tu compra, <strong>{{ $order->customer_name }}</strong>. Hemos registrado tu pago móvil (Ref: {{ $order->payment_proof }}) y está pendiente de verificación.
    </p>

    <div class="bg-muted/10 p-6 rounded-lg mb-8 text-left">
        <div class="flex justify-between py-2 border-b">
            <span class="font-medium">Número de Pedido:</span>
            <span class="font-mono">{{ substr($order->uuid, 0, 8) }}</span>
        </div>
        <div class="flex justify-between py-2 border-b">
            <span class="font-medium">Total:</span>
            <span>${{ number_format($order->total, 2) }}</span>
        </div>
        <div class="flex justify-between py-2">
            <span class="font-medium">Estado:</span>
            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full uppercase font-bold">Pendiente</span>
        </div>
    </div>

    <div class="space-y-4">
        <a href="{{ route('shop.index') }}" class="block w-full bg-primary text-primary-foreground py-3 rounded-md font-bold hover:bg-primary/90 transition-colors">
            Volver a la Tienda
        </a>
        @auth
            <a href="{{ route('customer.orders.show', $order) }}" class="block w-full border border-gray-300 text-gray-700 py-3 rounded-md font-medium hover:bg-gray-50 transition-colors">
                Ver detalle del pedido
            </a>
        @endauth
        <p class="text-sm text-muted-foreground">Te hemos enviado un correo con los detalles.</p>
    </div>
</div>
@endsection