@extends('layouts.app')

@section('title', 'Order #' . $order->id)

@push('head')
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
    .done { padding:56px 24px 24px; display:flex; flex-direction:column; gap:24px; }
    .tick { width:72px; height:72px; border-radius:50%; background:var(--green); color:#fff; font-size:36px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
    .card { border:1.5px solid var(--line); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:18px; }
    .step { display:flex; align-items:center; gap:14px; font-weight:700; color:var(--muted); }
    .dot { width:28px; height:28px; border-radius:50%; border:3px solid #CBD3CC; flex:none; }
    .step.active { color:var(--ink); }
    .step.active .dot { border-color:var(--accent); }
    .step.complete { color:var(--ink); }
    .step.complete .dot { background:var(--green); border-color:var(--green); }
    .lines { font-size:15px; line-height:1.7; }
</style>
@endpush

@section('content')
<div class="wrap done"
     x-data="{ status: '{{ $order->status }}', steps: ['new','preparing','ready','served'] }"
     x-init="setInterval(async () => {
         if (status === 'served') return;
         const r = await fetch('{{ route('order.status', [$table, $order]) }}', { headers: { Accept: 'application/json' } });
         if (r.ok) status = (await r.json()).status;
     }, 5000)">
    <div style="text-align:center">
        <div class="tick">✓</div>
        <h1 style="font-size:30px;margin-top:12px">Order sent</h1>
        <p class="muted">Order #{{ $order->id }} · {{ $table->name }} ·
            {{ $order->payment_method === 'counter' ? 'Pay at the counter' : 'Pay on your phone' }}</p>
    </div>

    <div class="card">
        <div class="step" :class="steps.indexOf(status) > 0 ? 'complete' : 'active'">
            <span class="dot"></span><span>Received by the kitchen</span>
        </div>
        <div class="step" :class="status === 'preparing' ? 'active' : (steps.indexOf(status) > 1 ? 'complete' : '')">
            <span class="dot"></span><span>Being prepared</span>
        </div>
        <div class="step" :class="status === 'ready' ? 'active' : (status === 'served' ? 'complete' : '')">
            <span class="dot"></span><span>On its way to your table</span>
        </div>
    </div>

    <div class="lines">
        @foreach ($order->items as $line)
            <div style="display:flex;justify-content:space-between">
                <span>{{ $line->quantity }} × {{ $line->name }}</span>
                <span>${{ number_format($line->unit_price * $line->quantity, 2) }}</span>
            </div>
        @endforeach
        <div style="display:flex;justify-content:space-between;font-weight:700;border-top:1px solid var(--line);margin-top:8px;padding-top:8px">
            <span>Total</span><span>${{ number_format($order->total, 2) }}</span>
        </div>
    </div>

    <a class="btn btn-dark" href="{{ route('menu.show', $table) }}" style="display:flex;align-items:center;justify-content:center;text-decoration:none">Order something else</a>
</div>
@endsection