@extends('layouts.app')

@section('content')
<div class="container section">
    <div class="max-w-4xl mx-auto">

        <header class="mb-10" style="text-align: center;">
            <div style="display: flex; justify-content: center; margin-bottom: 1.5rem;">
                <div style="width: 5rem; height: 5rem; border-radius: 50%; background: #f5f0eb; display: flex; align-items: center; justify-content: center;">
                    <svg style="width: 2.5rem; height: 2.5rem; color: var(--color-accent);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </div>
            </div>
            <h1 class="font-serif text-3xl mb-3">¡Tu pedido está confirmado!</h1>
            <p class="text-muted" style="font-size: 1.1rem; max-width: 32rem; margin: 0 auto;">
                Tu orden <strong>#{{ $order->id }}</strong> ha sido recibida. Para completarla, realiza el pago siguiendo las instrucciones a continuación.
            </p>
        </header>

        {{-- Order summary box --}}
        <div style="border: 1px solid var(--color-border); padding: 1.5rem 2rem; background: var(--color-white); margin-bottom: 2rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
                <div>
                    <p style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 0.25rem;">Número de pedido</p>
                    <p class="font-serif" style="font-size: 1.4rem; font-weight: 600;">#{{ $order->id }}</p>
                </div>
                <div style="text-align: right;">
                    <p style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 0.25rem;">Total a pagar</p>
                    <p class="font-serif" style="font-size: 1.4rem; font-weight: 600;">${{ number_format((float) $order->total_amount, 2) }} MXN</p>
                </div>
                <div style="text-align: right;">
                    <p style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 0.25rem;">Estado</p>
                    <x-status-badge :status="$order->status" />
                </div>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem;">

            {{-- Bank Transfer Instructions --}}
            <div style="border: 1px solid var(--color-border); padding: 2rem; background: var(--color-white);">
                <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);">
                    <svg style="width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--color-accent);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                    </svg>
                    <h3 class="font-serif" style="font-size: 1.1rem;">Transferencia bancaria</h3>
                </div>
                <dl style="display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9rem;">
                    <div>
                        <dt style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 0.2rem;">Banco</dt>
                        <dd style="font-weight: 500;">BBVA México</dd>
                    </div>
                    <div>
                        <dt style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 0.2rem;">Titular</dt>
                        <dd style="font-weight: 500;">Galería Hazlo S.A. de C.V.</dd>
                    </div>
                    <div>
                        <dt style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 0.2rem;">CLABE</dt>
                        <dd style="font-weight: 500; letter-spacing: 0.05em;">012 345 678901234567</dd>
                    </div>
                    <div>
                        <dt style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 0.2rem;">Concepto / Referencia</dt>
                        <dd style="font-weight: 600; color: var(--color-accent);">PEDIDO-{{ $order->id }}</dd>
                    </div>
                </dl>
                <p style="margin-top: 1rem; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.5;">
                    Incluye el número de pedido como concepto para que podamos identificar tu pago.
                </p>
            </div>

            {{-- Cash on Delivery Instructions --}}
            <div style="border: 1px solid var(--color-border); padding: 2rem; background: var(--color-white);">
                <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);">
                    <svg style="width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--color-accent);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    <h3 class="font-serif" style="font-size: 1.1rem;">Pago contra entrega</h3>
                </div>
                <p style="font-size: 0.9rem; line-height: 1.7; color: var(--color-text-muted);">
                    Si prefieres pagar al recibir tu obra, un representante de la galería se pondrá en contacto contigo para coordinar la entrega y el cobro.
                </p>
                <ul style="margin-top: 1rem; padding-left: 1.25rem; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.8;">
                    <li>Disponible en Ciudad de México y área metropolitana</li>
                    <li>Aceptamos efectivo y tarjeta en punto de venta</li>
                    <li>Recibirás confirmación en 24–48 horas hábiles</li>
                </ul>
            </div>
        </div>

        {{-- Next steps --}}
        <div style="border-left: 3px solid var(--color-accent); padding: 1.25rem 1.5rem; background: var(--color-white); margin-bottom: 2.5rem;">
            <p style="font-weight: 500; margin-bottom: 0.5rem;">¿Qué sigue?</p>
            <ol style="padding-left: 1.25rem; font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.9; margin: 0;">
                <li>Realiza el pago mediante cualquiera de las opciones anteriores.</li>
                <li>Sube tu comprobante de pago desde el detalle de tu pedido (opcional pero recomendado).</li>
                <li>Nuestro equipo verificará tu pago en un plazo de 1–2 días hábiles.</li>
                <li>Recibirás un correo de confirmación y comenzaremos a preparar tu envío.</li>
            </ol>
        </div>

        {{-- CTA Buttons --}}
        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
            <a href="{{ route('customer.orders.show', $order->id) }}" class="btn btn-primary">
                Ver detalle del pedido
            </a>
            <a href="{{ route('customer.orders') }}" class="btn">
                Mis pedidos
            </a>
            <a href="/catalog" class="btn" style="margin-left: auto;">
                Seguir explorando
            </a>
        </div>

    </div>
</div>
@endsection