@extends('layouts.kiosk')
@section('title', 'Order Placed!')

@section('content')
<div class="h-screen flex flex-col items-center justify-center text-center px-8">

    <div class="w-28 h-28 rounded-full bg-green-100 flex items-center justify-center text-6xl mb-6">✅</div>

    <p class="text-2xl text-gray-500 mb-2">Your Order Token</p>
    <p class="text-8xl font-black text-orange-500 mb-6">#{{ $order->token_number }}</p>

    @if ($order->payment_status === 'paid')
        <div class="bg-green-50 text-green-700 rounded-2xl px-8 py-5 text-xl font-semibold mb-4">
            Payment received — thank you!
        </div>
        <p class="text-gray-500 text-lg max-w-md">
            Please keep your printed receipt. Collect your food at the counter when your
            token number is called.
        </p>
    @else
        <div class="bg-orange-50 text-orange-700 rounded-2xl px-8 py-5 text-xl font-semibold mb-4">
            Please pay ₹{{ number_format($order->grand_total, 2) }} at the counter
        </div>
        <p class="text-gray-500 text-lg max-w-md">
            Take your printed receipt to the cashier to complete payment. Your food will be
            prepared once payment is confirmed.
        </p>
    @endif

    <div class="mt-10">
        <a href="{{ route('kiosk.menu', $kiosk) }}"
           class="inline-block bg-orange-500 text-white font-bold text-xl py-5 px-10 rounded-2xl">
            Place Another Order
        </a>
    </div>

    <p class="text-gray-400 mt-6" id="countdown-msg">Returning to the menu in <span id="countdown">10</span> seconds…</p>
</div>

@if ($kiosk->printer_mode === 'browser')
    {{-- USB printer via OS driver: silently open the print dialog for the receipt --}}
    <iframe src="{{ route('kiosk.receipt.print', [$kiosk, $order]) }}" style="display:none" onload="this.contentWindow.print()"></iframe>
@endif

<script>
    let seconds = 10;
    const el = document.getElementById('countdown');
    const timer = setInterval(() => {
        seconds--;
        if (el) el.innerText = seconds;
        if (seconds <= 0) {
            clearInterval(timer);
            window.location.href = @json(route('kiosk.menu', $kiosk));
        }
    }, 1000);
</script>
@endsection