<?php $title = 'Rider — ' . e($rider['name']); ?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0 fw-bold">Rider Profile</h4>
    <div class="d-flex gap-2">
        <a href="<?= url('riders/'.$rider['id'].'/edit') ?>" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-pencil me-1"></i> Edit
        </a>
        <a href="<?= url('riders') ?>" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i> Back
        </a>
    </div>
</div>

<?= flash_alert() ?>

<div class="row g-4">

    <!-- Profile card -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm text-center p-4">
            <div class="avatar-circle bg-warning text-dark mx-auto mb-3" style="width:72px;height:72px;font-size:2rem;">
                <?= strtoupper(substr($rider['name'], 0, 1)) ?>
            </div>
            <h5 class="fw-bold mb-1"><?= e($rider['name']) ?></h5>
            <span class="badge bg-warning text-dark mb-3">Rider</span>

            <ul class="list-group list-group-flush text-start">
                <li class="list-group-item d-flex justify-content-between px-0">
                    <span class="text-muted"><i class="bi bi-envelope me-1"></i> Email</span>
                    <span class="fw-semibold"><?= e($rider['email']) ?></span>
                </li>
                <li class="list-group-item d-flex justify-content-between px-0">
                    <span class="text-muted"><i class="bi bi-telephone me-1"></i> Phone</span>
                    <a href="tel:<?= e($rider['phone']) ?>" class="fw-semibold"><?= e($rider['phone']) ?></a>
                </li>
                <?php if ($rider['vehicle_type']): ?>
                <li class="list-group-item d-flex justify-content-between px-0">
                    <span class="text-muted"><i class="bi bi-bicycle me-1"></i> Vehicle</span>
                    <span class="fw-semibold"><?= e($rider['vehicle_type']) ?></span>
                </li>
                <?php endif ?>
                <?php if ($rider['vehicle_number']): ?>
                <li class="list-group-item d-flex justify-content-between px-0">
                    <span class="text-muted"><i class="bi bi-card-text me-1"></i> Plate</span>
                    <span class="fw-semibold"><?= e($rider['vehicle_number']) ?></span>
                </li>
                <?php endif ?>
                <li class="list-group-item d-flex justify-content-between px-0">
                    <span class="text-muted">Status</span>
                    <span class="badge <?= $rider['is_active'] ? 'bg-success' : 'bg-secondary' ?>">
                        <?= $rider['is_active'] ? 'Active' : 'Inactive' ?>
                    </span>
                </li>
                <li class="list-group-item d-flex justify-content-between px-0">
                    <span class="text-muted">Joined</span>
                    <span><?= format_date($rider['created_at']) ?></span>
                </li>
            </ul>

            <div class="d-grid gap-2 mt-3">
                <form method="POST" action="<?= url('riders/'.$rider['id'].'/toggle') ?>">
                    <?= csrf_field() ?>
                    <button class="btn w-100 <?= $rider['is_active'] ? 'btn-outline-warning' : 'btn-outline-success' ?>">
                        <i class="bi bi-<?= $rider['is_active'] ? 'pause' : 'play' ?>-circle me-1"></i>
                        <?= $rider['is_active'] ? 'Deactivate' : 'Activate' ?>
                    </button>
                </form>
                <form method="POST" action="<?= url('riders/'.$rider['id'].'/delete') ?>"
                      onsubmit="return confirm('Delete this rider?')">
                    <?= csrf_field() ?>
                    <button class="btn btn-outline-danger w-100">
                        <i class="bi bi-trash me-1"></i> Delete Rider
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Delivery history -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-semibold">
                <i class="bi bi-clock-history me-1"></i>
                Delivery History
                <span class="badge bg-light text-dark ms-1"><?= $total ?></span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Order</th>
                            <th>Customer</th>
                            <th>Address</th>
                            <th>Status</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php if (empty($history)): ?>
                        <tr><td colspan="5" class="text-center text-muted py-4">No deliveries yet.</td></tr>
                    <?php else: foreach ($history as $o): ?>
                        <tr>
                            <td>
                                <a href="<?= url('orders/'.$o['id']) ?>" class="fw-semibold text-decoration-none">
                                    <?= e($o['order_number']) ?>
                                </a>
                                <div><small class="text-muted"><?= format_date($o['placed_at']) ?></small></div>
                            </td>
                            <td>
                                <?= e($o['customer_name']) ?>
                                <?php if ($o['customer_phone']): ?>
                                    <div><small><?= e($o['customer_phone']) ?></small></div>
                                <?php endif ?>
                            </td>
                            <td>
                                <small class="text-muted"><?= e(str_limit($o['delivery_address'] ?? '—', 40)) ?></small>
                            </td>
                            <td><?= order_status_badge($o['status']) ?></td>
                            <td class="text-end fw-semibold"><?= money((float)$o['total_amount']) ?></td>
                        </tr>
                    <?php endforeach; endif ?>
                    </tbody>
                </table>
            </div>
            <?php if ($pages > 1): ?>
            <div class="card-footer bg-white">
                <?= paginate($total, $page, 15, url('riders/'.$rider['id'])) ?>
            </div>
            <?php endif ?>
        </div>
    </div>

</div>
