<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><?= e($staff['first_name_en'] . ' ' . $staff['last_name_en']) ?> <?= status_badge($staff['status']) ?></h4>
    <div class="d-flex gap-2">
        <a href="/admin/staff/<?= $staff['id'] ?>/edit" class="btn btn-warning"><i class="fas fa-edit me-1"></i>Edit</a>
        <a href="/admin/staff" class="btn btn-secondary">Back</a>
    </div>
</div>
<div class="row g-4">
    <div class="col-md-4">
        <div class="card"><div class="card-body">
            <h6 class="text-muted">Staff Info</h6>
            <table class="table table-sm table-borderless mb-0">
                <tr><td class="text-muted" width="40%">Number</td><td><?= e($staff['staff_number']) ?></td></tr>
                <tr><td class="text-muted">Department</td><td><?= e($staff['dept_name'] ?? '-') ?></td></tr>
                <tr><td class="text-muted">Position</td><td><?= e($staff['position_name'] ?? '-') ?></td></tr>
                <tr><td class="text-muted">Phone</td><td><?= e($staff['phone'] ?? '-') ?></td></tr>
                <tr><td class="text-muted">Email</td><td><?= e($staff['email'] ?? '-') ?></td></tr>
                <tr><td class="text-muted">Hire Date</td><td><?= format_date($staff['hire_date']) ?></td></tr>
                <tr><td class="text-muted">User Account</td><td><?= e($staff['linked_username'] ?? 'Not linked') ?></td></tr>
            </table>
        </div></div>
    </div>
    <div class="col-md-8">
        <ul class="nav nav-tabs mb-3"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-tasks">Tasks (<?= count($tasks) ?>)</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-shifts">Shifts</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-reviews">Reviews</a></li></ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="tab-tasks"><div class="card"><div class="card-body">
                <table class="table table-sm"><thead><tr><th>Title</th><th>Priority</th><th>Status</th><th>Due</th></tr></thead><tbody>
                <?php foreach ($tasks as $t): ?><tr><td><?= e($t['title']) ?></td><td><?= status_badge($t['priority']) ?></td><td><?= status_badge($t['status']) ?></td><td><?= $t['due_date'] ? format_datetime($t['due_date']) : '-' ?></td></tr><?php endforeach; ?>
                <?php if (empty($tasks)): ?><tr><td colspan="4" class="text-center text-muted">No tasks</td></tr><?php endif; ?>
                </tbody></table>
            </div></div></div>
            <div class="tab-pane fade" id="tab-shifts"><div class="card"><div class="card-body">
                <table class="table table-sm"><thead><tr><th>Date</th><th>Scheduled</th><th>Actual</th><th>Status</th></tr></thead><tbody>
                <?php foreach ($shifts as $s): ?><tr><td><?= format_date($s['shift_date']) ?></td><td><?= e($s['start_time']) ?> - <?= e($s['end_time']) ?></td><td><?= e($s['actual_start'] ?? '-') ?> - <?= e($s['actual_end'] ?? '-') ?></td><td><?= status_badge($s['status']) ?></td></tr><?php endforeach; ?>
                <?php if (empty($shifts)): ?><tr><td colspan="4" class="text-center text-muted">No shifts</td></tr><?php endif; ?>
                </tbody></table>
            </div></div></div>
            <div class="tab-pane fade" id="tab-reviews"><div class="card"><div class="card-body">
                <table class="table table-sm"><thead><tr><th>Period</th><th>Reviewer</th><th>Rating</th><th>Status</th></tr></thead><tbody>
                <?php foreach ($reviews as $r): ?><tr><td><?= format_date($r['review_period_start']) ?> - <?= format_date($r['review_period_end']) ?></td><td><?= e($r['reviewer_name'] ?? '-') ?></td><td><?= $r['overall_rating'] ? number_format($r['overall_rating'], 1) . '/5' : '-' ?></td><td><?= status_badge($r['status']) ?></td></tr><?php endforeach; ?>
                <?php if (empty($reviews)): ?><tr><td colspan="4" class="text-center text-muted">No reviews</td></tr><?php endif; ?>
                </tbody></table>
            </div></div></div>
        </div>
    </div>
</div>