<?php
$status = (string) $order['status'];
$steps = ['accepted', 'processing', 'ready', 'completed'];
$currentIndex = array_search($status, $steps, true);
?>
<section class="page-hero page-hero-compact">
    <div class="container">
        <span class="eyebrow">Live order tracker</span>
        <h1><?= e($order['order_number']) ?></h1>
        <p>Updates for <?= e($order['customer_name']) ?>.</p>
    </div>
</section>

<div class="container tracker-layout section">
    <section class="panel tracker-card">
        <div class="tracker-heading">
            <div>
                <span class="eyebrow">Current status</span>
                <h2><?= e(order_status_label($status)) ?></h2>
            </div>
            <span class="status-pill status-<?= e($status) ?>"><?= e(order_status_label($status)) ?></span>
        </div>

        <?php if ($status === 'declined'): ?>
            <div class="tracker-declined">
                <strong>This order was declined.</strong>
                <?php
                $visibleReason = '';
                foreach (array_reverse($events) as $event) {
                    if ($event['status'] === 'declined' && $event['customer_visible'] && $event['note'] !== '') {
                        $visibleReason = (string) $event['note'];
                        break;
                    }
                }
                ?>
                <?php if ($visibleReason !== ''): ?><p><strong>Reason:</strong> <?= e($visibleReason) ?></p><?php endif; ?>
            </div>
        <?php else: ?>
            <div class="order-progress" aria-label="Order progress">
                <?php foreach ($steps as $index => $step): ?>
                    <?php $complete = $currentIndex !== false && $index <= $currentIndex; ?>
                    <div class="<?= $complete ? 'is-complete' : '' ?> <?= $status === $step ? 'is-current' : '' ?>">
                        <i><?= $complete ? '✓' : $index + 1 ?></i>
                        <span><?= e(order_status_label($step)) ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
            <?php if ($status === 'pending'): ?>
                <div class="notice">Your paid order is waiting for staff to accept or decline it.</div>
            <?php endif; ?>
        <?php endif; ?>

        <div class="tracker-updates">
            <h3>Updates</h3>
            <?php foreach (array_reverse($events) as $event): ?>
                <article>
                    <div>
                        <strong><?= e($event['status'] ? order_status_label((string) $event['status']) : 'Order update') ?></strong>
                        <time><?= e(store_datetime((string) $event['created_at'], 'M j, g:i A')) ?></time>
                    </div>
                    <?php if ($event['customer_visible'] && $event['note']): ?><p><?= e($event['note']) ?></p><?php endif; ?>
                </article>
            <?php endforeach; ?>
        </div>
    </section>

    <aside class="order-summary">
        <span class="eyebrow">Pickup order</span>
        <h2>Order Details</h2>
        <div class="summary-items">
            <?php foreach ($items as $item): ?>
                <div><span><?= (int) $item['quantity'] ?>x <?= e($item['item_name']) ?></span><strong><?= money($item['line_total_cents']) ?></strong></div>
            <?php endforeach; ?>
        </div>
        <dl>
            <div><dt>Total paid</dt><dd><?= money($order['total_cents']) ?></dd></div>
            <div><dt>Pickup</dt><dd><?= e($order['pickup_time'] ?: 'As soon as ready') ?></dd></div>
        </dl>
    </aside>
</div>
