@extends('layouts.shop')

@section('title', 'Encomenda Confirmada - O Rei dos Queijos')

@section('content')
<div class="max-w-xl mx-auto px-4 sm:px-6 py-12 md:py-16">
    <div class="card p-8 md:p-10 text-center">
        <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-5">
            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        </div>
        <h1 class="font-display text-2xl md:text-3xl font-bold text-ink mb-2">Encomenda Registada!</h1>
        <p class="text-stone-500 mb-8">Obrigado, {{ $order->customer_name }}. A sua encomenda foi recebida.</p>
        <p class="text-sm text-stone-500 mb-6">{{ __('shop.messages.email_sent') }}</p>

        <div class="bg-stone-50 rounded-xl p-6 text-left space-y-2.5 text-sm mb-8">
            <div class="flex justify-between"><span class="text-stone-500">Nº Encomenda</span><span class="font-semibold text-ink">{{ $order->order_number }}</span></div>
            <div class="flex justify-between"><span class="text-stone-500">Total</span><span class="font-semibold text-ink">{{ number_format($order->total, 2, ',', '.') }} €</span></div>
            <div class="flex justify-between"><span class="text-stone-500">Entrega</span><span class="font-medium text-ink">{{ $order->shipping_method_label }}</span></div>
            <div class="flex justify-between"><span class="text-stone-500">Pagamento</span><span class="font-medium text-ink">{{ $order->payment_method_label }}</span></div>

            @if($order->payment_method === 'multibanco' && $order->payment_reference)
                <hr class="my-4 border-stone-200">
                <p class="font-semibold text-ink text-base mb-2">Dados Multibanco</p>
                <div class="flex justify-between"><span class="text-stone-500">Entidade</span><span class="font-mono font-bold">{{ $order->payment_entity }}</span></div>
                <div class="flex justify-between"><span class="text-stone-500">Referência</span><span class="font-mono font-bold">{{ $order->payment_reference }}</span></div>
                <div class="flex justify-between"><span class="text-stone-500">Valor</span><span class="font-bold text-gold-dark">{{ number_format($order->total, 2, ',', '.') }} €</span></div>
                @if($order->payment_deadline)
                    <div class="flex justify-between"><span class="text-stone-500">Limite</span><span>{{ \Carbon\Carbon::parse($order->payment_deadline)->format('d/m/Y') }}</span></div>
                @endif
            @endif

            @if($order->payment_method === 'mbway')
                <hr class="my-4 border-stone-200">
                <p class="text-stone-600 mb-3">Foi enviado um pedido MB WAY para <strong>{{ $order->customer_phone }}</strong>. Confirme no telemóvel.</p>
                <p id="payment-status-message" class="text-amber-700 font-medium {{ $order->payment_status === 'paid' ? 'hidden' : '' }}">A aguardar confirmação do pagamento...</p>
            @endif

            @if($order->payment_status === 'paid')
                <p id="payment-confirmed" class="text-green-700 font-semibold mt-4 text-center">✓ Pagamento confirmado — encomenda em preparação</p>
            @else
                <p id="payment-confirmed" class="text-green-700 font-semibold mt-4 text-center hidden">✓ Pagamento confirmado — encomenda em preparação</p>
            @endif
        </div>

        <a href="{{ route('catalog') }}" class="btn btn-primary">Continuar a Comprar</a>
    </div>
</div>

@if($order->payment_status !== 'paid' && in_array($order->payment_method, ['mbway', 'multibanco']))
<script>
(function () {
    const statusUrl = @json(route('checkout.status', $order));
    const confirmedEl = document.getElementById('payment-confirmed');
    const waitingEl = document.getElementById('payment-status-message');

    function checkStatus() {
        fetch(statusUrl, { headers: { 'Accept': 'application/json' } })
            .then(function (response) { return response.json(); })
            .then(function (data) {
                if (!data.paid) return;

                if (waitingEl) waitingEl.classList.add('hidden');
                if (confirmedEl) confirmedEl.classList.remove('hidden');
                clearInterval(timer);
            })
            .catch(function () {});
    }

    const timer = setInterval(checkStatus, 4000);
    checkStatus();
})();
</script>
@endif
@endsection