{{-- Shared appointment table. Expects $appointments (collection or paginator); optional $compact. --}}
<div class="table-responsive">
    <table class="table table-hover mb-0">
        <thead class="table-light">
        <tr>
            <th>Reference</th>
            <th>Visitor</th>
            <th class="d-none d-md-table-cell">Host</th>
            <th class="d-none d-lg-table-cell">Purpose</th>
            <th>Schedule</th>
            <th>Status</th>
            <th class="text-end">Action</th>
        </tr>
        </thead>
        <tbody>
        @forelse ($appointments as $a)
            <tr>
                <td>
                    <a href="{{ route('appointments.show', $a) }}" class="fw-semibold text-decoration-none">{{ $a->reference }}</a>
                    <div><span class="badge {{ $a->type === 'walk_in' ? 'text-bg-warning' : 'text-bg-light' }}">{{ $a->type_label }}</span></div>
                </td>
                <td>
                    <div class="fw-semibold">{{ $a->visitor->name }}</div>
                    <div class="small text-muted">{{ $a->visitor->phone }}@if($a->visitor->company) · {{ $a->visitor->company }}@endif</div>
                </td>
                <td class="d-none d-md-table-cell">{{ $a->host->name }}</td>
                <td class="d-none d-lg-table-cell text-truncate" style="max-width: 220px;">{{ $a->purpose }}</td>
                <td class="small">
                    {{ $a->scheduled_at->format('d M Y') }}<br>
                    <span class="text-muted">{{ $a->scheduled_at->format('h:i A') }}</span>
                </td>
                <td><x-status-badge :appointment="$a" /></td>
                <td class="text-end text-nowrap">
                    @if (auth()->user()->hasRole('admin', 'security') && $a->canCheckIn())
                        <a href="{{ route('security.checkin.form', $a) }}" class="btn btn-success btn-sm"><i class="bi bi-box-arrow-in-right"></i> Check in</a>
                    @elseif (auth()->user()->hasRole('admin', 'security') && $a->canCheckOut())
                        <form method="POST" action="{{ route('security.checkout', $a) }}" class="d-inline">@csrf
                            <button class="btn btn-outline-danger btn-sm" data-confirm="Check out {{ $a->visitor->name }}?"><i class="bi bi-box-arrow-right"></i> Check out</button>
                        </form>
                    @elseif (auth()->user()->can('decide-walkin', $a))
                        <a href="{{ route('walkins.pending') }}" class="btn btn-warning btn-sm"><i class="bi bi-hourglass-split"></i> Review</a>
                    @endif
                    <a href="{{ route('appointments.show', $a) }}" class="btn btn-light btn-sm" title="View"><i class="bi bi-eye"></i></a>
                </td>
            </tr>
        @empty
            <tr><td colspan="7" class="text-center text-muted py-5"><i class="bi bi-inbox fs-3 d-block"></i>No appointments found.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>