<?php
$mins     = (int) round((time() - strtotime($o['placed_at'])) / 60);
$ago      = $mins < 60 ? $mins . 'm ago' : floor($mins / 60) . 'h ago';
$isGuest  = empty($o['customer_id']);
$delivered= (int)($o['cust_delivered_orders'] ?? 0);
$custId   = (int)($o['customer_id'] ?? 0);
?>
<div class="live-order-card" id="card-<?= $o['id'] ?>">

    <!-- Row 1: Order number + Amount -->
    <div class="d-flex justify-content-between align-items-center" style="cursor:pointer"
         onclick="location.href='<?= url('orders/'.$o['id']) ?>'">
        <span class="order-num"><?= e($o['order_number']) ?></span>
        <span class="amount"><?= money((float)$o['total_amount']) ?></span>
    </div>

    <!-- Row 2: Customer name + delivered-count badge -->
    <div class="d-flex align-items-center justify-content-between mt-1 gap-1">
        <span class="cust-name" style="cursor:pointer"
              onclick="location.href='<?= url('orders/'.$o['id']) ?>'">
            <?= e($o['customer_name']) ?>
        </span>
        <?php if (!$isGuest && $custId): ?>
        <a href="<?= url('customers/'.$custId) ?>" onclick="event.stopPropagation()"
           title="<?= $delivered ?> delivered orders"
           style="display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;
                  background:#fff3e0;color:#e65100;font-size:.68rem;font-weight:800;
                  text-decoration:none;flex-shrink:0;border:1px solid #ffcc80;">
            <i class="bi bi-patch-check-fill" style="font-size:.6rem;"></i>
            <strong><?= $delivered ?></strong>
        </a>
        <?php else: ?>
        <span style="font-size:.62rem;color:#9ca3af;flex-shrink:0;">Guest</span>
        <?php endif; ?>
    </div>

    <!-- Row 3: Time badge + Order type badge -->
    <div class="d-flex gap-1 mt-2 flex-wrap">
        <span style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;
                     background:#f1f5f9;color:#475569;font-size:.67rem;font-weight:600;">
            <i class="bi bi-clock" style="font-size:.6rem;"></i> <?= $ago ?>
        </span>
        <span style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;
                     font-size:.67rem;font-weight:600;
                     <?= ($o['order_type'] ?? 'delivery') === 'pickup'
                         ? 'background:#e8f5e9;color:#2e7d32;'
                         : 'background:#e3f2fd;color:#1565c0;' ?>">
            <i class="bi bi-<?= ($o['order_type'] ?? 'delivery') === 'pickup' ? 'shop' : 'bicycle' ?>"
               style="font-size:.6rem;"></i>
            <?= ucfirst($o['order_type'] ?? 'delivery') ?>
        </span>
    </div>

    <!-- Row 4: Status actions -->
    <div class="loc-card-actions">
        <select class="loc-status-select" title="Jump to status"
                onchange="event.stopPropagation();handleSelect(<?= $o['id'] ?>,this)"
                onclick="event.stopPropagation()">
            <option value="">Status</option>
            <?php
            $allStatuses = ['pending','confirmed','cooking','ready','picked_up','on_the_way','delivered','cancelled'];
            $labels      = ['pending'=>'Pending','confirmed'=>'Confirmed','cooking'=>'Cooking',
                            'ready'=>'Ready','picked_up'=>'Picked Up','on_the_way'=>'On the Way',
                            'delivered'=>'Delivered','cancelled'=>'Cancelled'];
            foreach ($allStatuses as $s):
                if ($s === $o['status']) continue;
            ?>
            <option value="<?= $s ?>"><?= $labels[$s] ?></option>
            <?php endforeach; ?>
        </select>
        <?php
        $nextMap = ['pending'=>'confirmed','confirmed'=>'cooking','cooking'=>'ready',
                    'ready'=>'picked_up','picked_up'=>'on_the_way','on_the_way'=>'delivered'];
        $next    = $nextMap[$o['status']] ?? null;
        if ($next):
        ?>
        <button class="btn btn-success btn-next"
                onclick="event.stopPropagation();handleNext(<?= $o['id'] ?>,this)">
            <?= $labels[$next] ?> &rsaquo;
        </button>
        <?php endif; ?>
    </div>

    <!-- Rider selection — shown when status is picked_up -->
    <?php if ($o['status'] === 'picked_up'): ?>
    <div class="loc-rider-row mt-1" onclick="event.stopPropagation()">
        <select class="loc-status-select w-100" style="color:#6c757d;"
                onchange="event.stopPropagation();assignRider(<?= $o['id'] ?>,this)">
            <option value="">Assign rider…</option>
            <?php foreach ($riders as $r): ?>
            <option value="<?= $r['id'] ?>"
                <?= ((int)($o['rider_id'] ?? 0) === (int)$r['id']) ? 'selected' : '' ?>>
                <?= e($r['name']) ?>
            </option>
            <?php endforeach; ?>
        </select>
    </div>
    <?php endif; ?>

    <!-- Row 5: View + KOT -->
    <div class="loc-card-actions" style="margin-top:4px;">
        <a href="<?= url('orders/'.$o['id']) ?>" class="btn btn-outline-primary btn-sm"
           onclick="event.stopPropagation()" title="View order">
            <i class="bi bi-eye"></i>
        </a>
        <a href="<?= url('orders/'.$o['id'].'/kot') ?>" class="btn btn-outline-secondary btn-sm"
           target="_blank" onclick="event.stopPropagation()" title="Print KOT">KOT</a>
    </div>
</div>
