@props([
    'staff',
    'routePrefix' => 'admin.surrounding.employees',
    'activityType' => 'leave',
    'approvalCenterRoute' => null,
])

@php
    $approvalCenterUrl = $approvalCenterRoute && \Illuminate\Support\Facades\Route::has($approvalCenterRoute)
        ? route($approvalCenterRoute)
        : null;
@endphp

<style>
    .sur-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15,23,42,.04); }
    .sur-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:1rem; }
    .sur-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:.4rem; }
    .sur-meta span {
        display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#475569;
        background:#f8fafc; border:1px solid #edf0f6; border-radius:999px; padding:3px 10px;
    }
    .sur-nav { display:inline-flex; flex-wrap:wrap; gap:6px; }
    .sur-nav a {
        border:1px solid #d9deea; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700;
        color:#475569; background:#fff; text-decoration:none;
    }
    .sur-nav a.active, .sur-nav a:hover { background:#615dad; color:#fff; border-color:#615dad; text-decoration:none; }
    .sur-table { margin-bottom:0; font-size:13px; }
    .sur-table thead th {
        font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:rgba(15,23,42,.65);
        border-top:0; white-space:nowrap; padding:.75rem .85rem;
    }
    .sur-table tbody td { vertical-align:middle; padding:.75rem .85rem; }
    .sur-table tr.is-pending { background: rgba(245,158,11,.08); }
    .sur-badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; }
    .sur-badge.approved { background:rgba(34,197,94,.12); color:#166534; }
    .sur-badge.pending { background:rgba(245,158,11,.14); color:#b45309; }
    .sur-badge.rejected { background:rgba(239,68,68,.12); color:#991b1b; }
    .sur-time { font-variant-numeric:tabular-nums; white-space:nowrap; }
</style>

<div class="sur-wrap">
    <div class="sur-head">
        <div>
            <a href="{{ route($routePrefix) }}" class="small text-muted d-inline-block mb-1">
                <i class="fas fa-arrow-left"></i> {{ __('Back to subordinate list') }}
            </a>
            <h4 class="page-title mb-0">
                {{ optional($staff->user)->name ?? __('Unknown') }}
                <span class="text-muted small font-weight-bold">#{{ optional($staff->user)->id }}</span>
            </h4>
            <div class="sur-meta">
                <span><i class="fas fa-building text-muted"></i> {{ optional($staff->department)->name ?? '—' }}</span>
                <span><i class="fas fa-id-badge text-muted"></i> {{ optional($staff->designation)->name ?? '—' }}</span>
                <span><i class="fas fa-map-marker-alt text-muted"></i> {{ optional($staff->warehouse)->name ?? '—' }}</span>
            </div>
        </div>
        <div class="sur-nav">
            <a href="{{ route($routePrefix.'.attendance', $staff->id) }}" class="{{ $activityType === 'attendance' ? 'active' : '' }}">{{ __('Attendance') }}</a>
            <a href="{{ route($routePrefix.'.leave', $staff->id) }}" class="{{ $activityType === 'leave' ? 'active' : '' }}">{{ __('Leave') }}</a>
            <a href="{{ route($routePrefix.'.visit', $staff->id) }}" class="{{ $activityType === 'visit' ? 'active' : '' }}">{{ __('Visit') }}</a>
            @if($approvalCenterUrl)
                <a href="{{ $approvalCenterUrl }}">{{ __('Approval Center') }}</a>
            @endif
        </div>
    </div>

    {{ $slot }}
</div>