@php
    $employees = $employees ?? collect();
    $pendingLeaveByStaff = $pendingLeaveByStaff ?? collect();
    $pendingVisitByStaff = $pendingVisitByStaff ?? collect();
    $surroundStats = $surroundStats ?? (object) [];
    $todayStatusByStaff = $todayStatusByStaff ?? collect();
    $filters = $filters ?? ['q' => '', 'status' => '', 'department_id' => '', 'warehouse_id' => ''];
    $filterOptions = $filterOptions ?? ['departments' => collect(), 'warehouses' => collect(), 'statuses' => []];
    $routePrefix = $routePrefix ?? 'admin.surrounding.employees';
    $approvalCenterRoute = $approvalCenterRoute ?? null;
    $approvalCenterUrl = $approvalCenterRoute && \Illuminate\Support\Facades\Route::has($approvalCenterRoute)
        ? route($approvalCenterRoute)
        : null;
    $hasActiveFilter = ($filters['q'] ?? '') !== ''
        || ($filters['status'] ?? '') !== ''
        || ($filters['department_id'] ?? '') !== ''
        || ($filters['warehouse_id'] ?? '') !== '';
@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-stat { background:#fff; border:1px solid #edf0f6; border-radius:10px; padding:10px 14px; text-align:center; height:100%; }
    .sur-stat .num { font-size:1.25rem; font-weight:800; line-height:1.2; }
    .sur-stat .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#64748b; }
    .sur-pending {
        border:1px solid #fde68a; background:#fffbeb; border-radius:12px; padding:12px 16px; margin-bottom:1rem;
        display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
    }
    .sur-pending .pending-title { font-weight:800; color:#92400e; margin-bottom:2px; }
    .sur-pending .pending-pill {
        display:inline-flex; align-items:center; gap:4px; background:#fff; border:1px solid #fcd34d;
        border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; color:#92400e; margin-right:6px;
    }
    .sur-filters { background:#fff; border:1px solid #edf0f6; border-radius:12px; padding:12px 14px; margin-bottom:1rem; }
    .sur-filters .form-control, .sur-filters .custom-select { height: 36px; font-size: 13px; }
    .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:.85rem 1rem;
    }
    .sur-table tbody td { vertical-align:middle; padding:.85rem 1rem; }
    .sur-actions { display:inline-flex; flex-wrap:wrap; gap:6px; }
    .sur-action {
        display:inline-flex; align-items:center; gap:4px; border:1px solid #d9deea; border-radius:999px;
        padding:5px 11px; font-size:12px; font-weight:700; color:#475569; background:#fff; text-decoration:none;
    }
    .sur-action:hover { background:#615dad; color:#fff; border-color:#615dad; text-decoration:none; }
    .sur-action .badge-count {
        min-width:18px; height:18px; border-radius:999px; background:#f59e0b; color:#fff;
        font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
    }
    .sur-empty { padding:2.5rem 1.5rem; text-align:center; color:#64748b; }
    .sur-today { display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; }
    .sur-today-badge {
        display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 10px;
        font-size:11px; font-weight:800; white-space:nowrap;
    }
    .sur-today-badge.leave { background:rgba(99,102,241,.12); color:#4338ca; }
    .sur-today-badge.leave_pending { background:rgba(245,158,11,.16); color:#b45309; }
    .sur-today-badge.movement { background:rgba(14,165,233,.12); color:#0369a1; }
    .sur-today-badge.movement_pending { background:rgba(249,115,22,.14); color:#c2410c; }
    .sur-today-badge.in_office { background:rgba(34,197,94,.12); color:#166534; }
    .sur-today-badge.absent { background:rgba(239,68,68,.12); color:#991b1b; }
    .sur-today-badge.no_record { background:rgba(100,116,139,.12); color:#475569; }
    .sur-today-detail { font-size:11px; color:#64748b; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
</style>

<div class="sur-wrap">
    <div class="mb-3">
        <h4 class="page-title mb-0">{{ __('Subordinate employee list') }}</h4>
        <p class="text-muted mb-0 small">{{ __('Open attendance, leave, or visit for each subordinate. Data loads only on that page.') }}</p>
    </div>

    @if (session()->has('message'))
        <div class="alert alert-success">{{ session('message') }}</div>
    @endif
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="form-row mb-3">
        <div class="col-6 col-md-3 mb-2">
            <div class="sur-stat">
                <div class="num text-primary">{{ (int) ($surroundStats->subordinates ?? 0) }}</div>
                <div class="lbl">{{ __('Subordinates') }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-2">
            <div class="sur-stat">
                <div class="num text-info">{{ (int) ($surroundStats->filtered ?? $employees->count()) }}</div>
                <div class="lbl">{{ __('Showing') }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-2">
            <div class="sur-stat">
                <div class="num text-warning">{{ (int) ($surroundStats->pending_leave ?? 0) }}</div>
                <div class="lbl">{{ __('Pending leave') }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-2">
            <div class="sur-stat">
                <div class="num text-success">{{ (int) ($surroundStats->pending_visit ?? 0) }}</div>
                <div class="lbl">{{ __('Pending visit') }}</div>
            </div>
        </div>
    </div>

    @if (((int) ($surroundStats->pending_leave ?? 0) + (int) ($surroundStats->pending_visit ?? 0)) > 0)
        <div class="sur-pending">
            <div>
                <div class="pending-title">{{ __('Pending subordinate notifications') }}</div>
                <div>
                    <span class="pending-pill"><i class="fas fa-calendar-minus"></i> {{ __('Leave') }}: {{ (int) ($surroundStats->pending_leave ?? 0) }}</span>
                    <span class="pending-pill"><i class="fas fa-route"></i> {{ __('Visit / Movement') }}: {{ (int) ($surroundStats->pending_visit ?? 0) }}</span>
                </div>
            </div>
            @if($approvalCenterUrl)
                <a href="{{ $approvalCenterUrl }}" class="btn btn-sm btn-warning font-weight-bold">{{ __('Open Approval Center') }}</a>
            @endif
        </div>
    @endif

    <form method="get" action="{{ route($routePrefix) }}" class="sur-filters">
        <div class="form-row align-items-end">
            <div class="form-group col-md-3 mb-2 mb-md-0">
                <label class="small font-weight-bold mb-1">{{ __('Search') }}</label>
                <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" class="form-control" placeholder="{{ __('Name or ID') }}">
            </div>
            <div class="form-group col-md-3 mb-2 mb-md-0">
                <label class="small font-weight-bold mb-1">{{ __('Today status') }}</label>
                <select name="status" class="custom-select">
                    <option value="">{{ __('All statuses') }}</option>
                    @foreach(($filterOptions['statuses'] ?? []) as $key => $label)
                        <option value="{{ $key }}" @selected(($filters['status'] ?? '') === $key)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-2 mb-2 mb-md-0">
                <label class="small font-weight-bold mb-1">{{ __('Department') }}</label>
                <select name="department_id" class="custom-select">
                    <option value="">{{ __('All') }}</option>
                    @foreach(($filterOptions['departments'] ?? []) as $dept)
                        <option value="{{ $dept->id }}" @selected((string) ($filters['department_id'] ?? '') === (string) $dept->id)>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-2 mb-2 mb-md-0">
                <label class="small font-weight-bold mb-1">{{ __('Branch') }}</label>
                <select name="warehouse_id" class="custom-select">
                    <option value="">{{ __('All') }}</option>
                    @foreach(($filterOptions['warehouses'] ?? []) as $wh)
                        <option value="{{ $wh->id }}" @selected((string) ($filters['warehouse_id'] ?? '') === (string) $wh->id)>{{ $wh->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-2 mb-0 d-flex" style="gap:6px;">
                <button type="submit" class="btn btn-primary btn-sm flex-grow-1">{{ __('Filter') }}</button>
                @if($hasActiveFilter)
                    <a href="{{ route($routePrefix) }}" class="btn btn-outline-secondary btn-sm">{{ __('Reset') }}</a>
                @endif
            </div>
        </div>
    </form>

    <div class="card">
        @if($employees->isEmpty())
            <div class="sur-empty">
                <div class="mb-2"><i class="fas fa-users fa-2x text-muted"></i></div>
                @if($hasActiveFilter)
                    <div class="font-weight-bold mb-1">{{ __('No subordinates match these filters') }}</div>
                    <div class="small mb-2">{{ __('Try clearing filters or choosing another status.') }}</div>
                    <a href="{{ route($routePrefix) }}" class="btn btn-sm btn-outline-secondary">{{ __('Reset filters') }}</a>
                @else
                    <div class="font-weight-bold mb-1">{{ __('No subordinates found') }}</div>
                    <div class="small">{{ __('You do not have any active subordinates assigned under your supervision.') }}</div>
                @endif
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover sur-table mb-0">
                    <thead class="thead-light">
                    <tr>
                        <th>{{ __('Employee') }}</th>
                        <th>{{ __('Department') }}</th>
                        <th>{{ __('Designation') }}</th>
                        <th>{{ __('Branch') }}</th>
                        <th>{{ __('Today') }}</th>
                        <th class="text-right">{{ __('Actions') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($employees as $row)
                        @php
                            $pendingLeave = (int) ($pendingLeaveByStaff[$row->id] ?? 0);
                            $pendingVisit = (int) ($pendingVisitByStaff[$row->id] ?? 0);
                            $today = $todayStatusByStaff[$row->id] ?? ['key' => 'no_record', 'label' => __('No attendance'), 'detail' => null];
                        @endphp
                        <tr>
                            <td>
                                <div class="font-weight-bold">{{ optional($row->user)->name ?? __('Unknown') }}</div>
                                <div class="small text-muted">#{{ optional($row->user)->id }}</div>
                            </td>
                            <td>{{ optional($row->department)->name ?? '—' }}</td>
                            <td>{{ optional($row->designation)->name ?? '—' }}</td>
                            <td>{{ optional($row->warehouse)->name ?? '—' }}</td>
                            <td>
                                <div class="sur-today">
                                    <span class="sur-today-badge {{ $today['key'] }}">
                                        @if($today['key'] === 'leave')
                                            <i class="fas fa-calendar-minus"></i>
                                        @elseif($today['key'] === 'leave_pending')
                                            <i class="fas fa-hourglass-half"></i>
                                        @elseif($today['key'] === 'movement')
                                            <i class="fas fa-route"></i>
                                        @elseif($today['key'] === 'movement_pending')
                                            <i class="fas fa-hourglass-half"></i>
                                        @elseif($today['key'] === 'in_office')
                                            <i class="fas fa-building"></i>
                                        @elseif($today['key'] === 'absent')
                                            <i class="fas fa-user-times"></i>
                                        @else
                                            <i class="fas fa-minus-circle"></i>
                                        @endif
                                        {{ $today['label'] }}
                                    </span>
                                    @if(!empty($today['detail']))
                                        <span class="sur-today-detail" title="{{ $today['detail'] }}">{{ $today['detail'] }}</span>
                                    @endif
                                </div>
                            </td>
                            <td class="text-right">
                                <div class="sur-actions justify-content-end">
                                    <a class="sur-action" href="{{ route($routePrefix.'.attendance', $row->id) }}">
                                        <i class="fas fa-user-clock"></i> {{ __('Attendance') }}
                                    </a>
                                    <a class="sur-action" href="{{ route($routePrefix.'.leave', $row->id) }}">
                                        <i class="fas fa-calendar-minus"></i> {{ __('Leave') }}
                                        @if($pendingLeave > 0)<span class="badge-count">{{ $pendingLeave }}</span>@endif
                                    </a>
                                    <a class="sur-action" href="{{ route($routePrefix.'.visit', $row->id) }}">
                                        <i class="fas fa-route"></i> {{ __('Visit') }}
                                        @if($pendingVisit > 0)<span class="badge-count">{{ $pendingVisit }}</span>@endif
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>