@extends('layout.layout')

@section('content')
    @include('components.alert')

    @php
        $statusPillMap = [
            'pending' => 'warn',
            'assigned' => 'info',
            'in_progress' => 'info',
            'resolved' => 'success',
            'closed' => 'neutral',
            'rejected' => 'danger',
        ];

        $activeFilters = collect([
            request('search'),
            request('from_department_id'),
            request('to_department_id'),
            request('status'),
            request('assigned_to'),
            request('created_by'),
            request('date_from'),
            request('date_to'),
            request('sort'),
            request('direction') && request('direction') !== 'desc' ? request('direction') : null,
            request()->boolean('unassigned_only') ? 'unassigned' : null,
            request()->boolean('assigned_to_me') ? 'mine' : null,
        ])->filter()->count();

        $canEditEscalation = function ($item) use ($staff) {
            return $staff
                && (int) $item->to_department_id === (int) $staff->department_id
                && (
                    (int) $item->toDepartment?->department_head_id === (int) $staff->id
                    || (int) optional($staff->jobTitle)->sort === 1
                );
        };

        $requestMeta = function ($item) use ($academicStudentRequestsUrl, $hrRequestsUrl) {
            if ($item->studentRequest) {
                $studentName = $item->studentRequest->student?->full_name
                    ?: trim(($item->studentRequest->student?->first_name ?? '') . ' ' . ($item->studentRequest->student?->last_name ?? ''));

                return [
                    'type' => 'Student Request',
                    'url' => $academicStudentRequestsUrl . '/' . $item->studentRequest->id,
                    'id' => $item->studentRequest->id,
                    'title' => $studentName ?: 'Student #' . $item->studentRequest->created_by,
                    'description' => $item->studentRequest->subject ?: 'No subject',
                ];
            }

            if ($item->hrRequest) {
                $hrCreatorName = $item->hrRequest->creator?->full_name
                    ?: trim(($item->hrRequest->creator?->first_name ?? '') . ' ' . ($item->hrRequest->creator?->last_name ?? ''));
                $hrTitle = $item->hrRequest->requestType?->name ?: 'Staff Request #' . $item->hrRequest->id;
                $departmentLine = $item->hrRequest->department?->name ?? 'No department';

                if ($hrCreatorName) {
                    $departmentLine .= ' - ' . $hrCreatorName;
                }

                return [
                    'type' => 'Staff Request',
                    'url' => $hrRequestsUrl . '/' . $item->hrRequest->id,
                    'id' => $item->hrRequest->id,
                    'title' => $hrTitle,
                    'description' => $item->hrRequest->details
                        ? \Illuminate\Support\Str::limit($item->hrRequest->details, 80)
                        : ucfirst($item->hrRequest->status ?? 'pending'),
                    'meta' => $departmentLine,
                ];
            }

            return null;
        };

        $statusValueFor = function ($status) {
            return $status instanceof \App\Enums\EscalationRequestStatus
                ? $status->value
                : (string) $status;
        };

        $statusLabelFor = function ($status) {
            if ($status instanceof \App\Enums\EscalationRequestStatus) {
                return $status->label();
            }

            return ucfirst(str_replace('_', ' ', (string) $status));
        };
    @endphp

    <style>
        .escalation-filter-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .escalation-filter-shell {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .escalation-filter-field {
            min-width: 0;
        }

        .escalation-filter-field--wide {
            grid-column: span 2;
        }

        .escalation-filter-field--small {
            grid-column: span 1;
        }

        .escalation-filter-field .form-label {
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .escalation-filter-field .form-control,
        .escalation-filter-field .form-select,
        .escalation-filter-field .nice-select,
        .escalation-filter-field .select2-container {
            width: 100% !important;
            min-height: 42px;
        }

        .escalation-filter-field .select2-container,
        .escalation-filter-field .select2-container .selection,
        .escalation-filter-field .select2-container .select2-selection {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

        .escalation-filter-field .form-control,
        .escalation-filter-field .form-select {
            border-radius: 8px;
            background-color: #fff;
        }

        .escalation-filter-field .nice-select {
            display: flex;
            align-items: center;
            float: none;
            padding: 0 14px;
            line-height: 40px;
            border-radius: 8px;
        }

        .escalation-filter-field .nice-select .list {
            width: 100%;
        }

        .escalation-filter-field .select2-container--default .select2-selection--single {
            width: 100% !important;
            max-width: 100% !important;
            height: 42px !important;
            min-height: 42px;
            display: flex !important;
            align-items: center;
            border: 1px solid #dbe3f0;
            border-radius: 8px;
            background: #fff;
        }

        .escalation-filter-field .select2-container--default .select2-selection--single .select2-selection__rendered {
            width: 100%;
            padding-left: 14px;
            padding-right: 36px;
            color: #0f172a;
            line-height: 40px !important;
        }

        .escalation-filter-field .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px;
            right: 10px;
        }

        .escalation-filter-field .select2-container--default.select2-container--focus .select2-selection--single,
        .escalation-filter-field .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
        }

        .escalation-filter-checks {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .escalation-filter-check {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 38px;
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            color: #334155;
            background: #f8fafc;
            font-size: 13px;
            font-weight: 700;
        }

        .escalation-filter-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-top: 16px;
            border-top: 1px solid #e2e8f0;
        }

        .escalation-filter-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
        }

        .escalation-filter-note {
            color: #64748b;
            font-size: 12px;
            font-weight: 600;
        }

        .escalation-summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .escalation-summary__item {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px 14px;
            background: #fff;
            min-width: 0;
        }

        .escalation-summary__label {
            color: #64748b;
            font-size: 12px;
            font-weight: 700;
            display: block;
            margin-bottom: 6px;
        }

        .escalation-summary__value {
            color: #0f172a;
            font-size: 20px;
            font-weight: 800;
            line-height: 1;
        }

        .escalation-title-cell {
            min-width: 260px;
            max-width: 360px;
        }

        .escalation-linked-cell {
            min-width: 240px;
            max-width: 340px;
        }

        .escalation-table-text {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .escalation-mobile-list {
            display: none;
        }

        .escalation-request-card {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 14px;
            background: #fff;
        }

        .escalation-request-card+.escalation-request-card {
            margin-top: 12px;
        }

        .escalation-request-card__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .escalation-request-card__title {
            color: #0f172a;
            font-size: 15px;
            font-weight: 800;
            line-height: 1.35;
            word-break: break-word;
        }

        .escalation-request-card__desc {
            color: #64748b;
            font-size: 12px;
            line-height: 1.5;
            margin-top: 4px;
            word-break: break-word;
        }

        .escalation-request-card__grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 12px;
        }

        .escalation-request-card__label {
            display: block;
            color: #64748b;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 3px;
        }

        .escalation-request-card__value {
            color: #334155;
            font-size: 13px;
            font-weight: 600;
            word-break: break-word;
        }

        .escalation-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
        }

        @media (max-width: 1199.98px) {
            .escalation-filter-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .escalation-filter-grid,
            .escalation-summary {
                grid-template-columns: 1fr;
            }

            .escalation-filter-field,
            .escalation-filter-field--wide,
            .escalation-filter-field--small {
                grid-column: span 1;
            }

            .escalation-summary__item {
                padding: 11px 12px;
            }

            .escalation-filter-footer {
                align-items: stretch;
                flex-direction: column;
            }

            .escalation-filter-actions .asset-btn,
            .escalation-filter-footer .asset-btn {
                width: 100%;
                justify-content: center;
            }

            .escalation-desktop-table {
                display: none;
            }

            .escalation-mobile-list {
                display: block;
            }

            .escalation-request-card__head,
            .escalation-actions {
                align-items: stretch;
            }

            .escalation-request-card__grid {
                grid-template-columns: 1fr;
            }

            .escalation-actions .asset-btn {
                flex: 1 1 120px;
                justify-content: center;
            }
        }
    </style>

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title title="Escalation Requests"
                    description="Track cross-department requests, assignments, and status updates.">
                    <a href="{{ route('escalation-requests.create') }}" class="asset-btn asset-btn--primary">
                        Create Request
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap w-100">
                            <div style="margin-right:auto">
                                <h6 class="mb-0 ui-title">Filters</h6>
                                <p class="mb-0 ui-muted">Filter by department, assignee, status, dates, or keyword.</p>
                            </div>
                            <span class="ui-pill ui-pill--neutral">{{ $activeFilters }} active</span>
                        </div>
                    </div>

                    <div class="p-3 p-md-4">
                        <form method="GET" action="{{ route('escalation-requests.index') }}">
                            <div class="escalation-filter-shell">
                                <div class="escalation-filter-grid">
                                    <div class="escalation-filter-field escalation-filter-field--wide">
                                        <label class="form-label" for="search">Search</label>
                                        <input type="text" id="search" name="search" value="{{ request('search') }}"
                                            class="form-control border border-2 border-secondary-subtle"
                                            placeholder="Title or description">
                                    </div>

                                    <div class="escalation-filter-field">
                                        <label class="form-label" for="from_department_id">From Department</label>
                                        <select id="from_department_id" name="from_department_id"
                                            class="form-select general-select border border-2 border-secondary-subtle">
                                            <option value="">All departments</option>
                                            @foreach ($departments as $department)
                                                <option value="{{ $department->id }}" @selected((string) request('from_department_id') === (string) $department->id)>
                                                    {{ $department->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="escalation-filter-field">
                                        <label class="form-label" for="to_department_id">To Department</label>
                                        <select id="to_department_id" name="to_department_id"
                                            class="form-select general-select border border-2 border-secondary-subtle">
                                            <option value="">All departments</option>
                                            @foreach ($departments as $department)
                                                <option value="{{ $department->id }}" @selected((string) request('to_department_id') === (string) $department->id)>
                                                    {{ $department->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="escalation-filter-field">
                                        <label class="form-label" for="status">Status</label>
                                        <select id="status" name="status"
                                            class="form-select general-select border border-2 border-secondary-subtle">
                                            <option value="">All statuses</option>
                                            @foreach ($statuses as $value => $label)
                                                <option value="{{ $value }}" @selected(request('status') === $value)>
                                                    {{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="escalation-filter-field">
                                        <label class="form-label" for="assigned_to">Assigned To</label>
                                        <select id="assigned_to" name="assigned_to"
                                            class="form-select general-select border border-2 border-secondary-subtle">
                                            <option value="">Anyone</option>
                                            @foreach ($staffMembers as $member)
                                                <option value="{{ $member->id }}" @selected((string) request('assigned_to') === (string) $member->id)>
                                                    {{ $member->full_name ?: trim($member->first_name . ' ' . $member->last_name) ?: 'Staff #' . $member->id }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="escalation-filter-field">
                                        <label class="form-label" for="created_by">Created By</label>
                                        <select id="created_by" name="created_by"
                                            class="form-select general-select border border-2 border-secondary-subtle">
                                            <option value="">Anyone</option>
                                            @foreach ($staffMembers as $member)
                                                <option value="{{ $member->id }}" @selected((string) request('created_by') === (string) $member->id)>
                                                    {{ $member->full_name ?: trim($member->first_name . ' ' . $member->last_name) ?: 'Staff #' . $member->id }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="escalation-filter-field">
                                        <label class="form-label" for="date_from">Date From</label>
                                        <input type="date" id="date_from" name="date_from"
                                            value="{{ request('date_from') }}"
                                            class="form-control border border-2 border-secondary-subtle">
                                    </div>

                                    <div class="escalation-filter-field">
                                        <label class="form-label" for="date_to">Date To</label>
                                        <input type="date" id="date_to" name="date_to" value="{{ request('date_to') }}"
                                            class="form-control border border-2 border-secondary-subtle">
                                    </div>

                                    <div class="escalation-filter-field escalation-filter-field--small">
                                        <label class="form-label" for="sort">Sort</label>
                                        <select id="sort" name="sort"
                                            class="form-select general-select border border-2 border-secondary-subtle">
                                            <option value="">Latest</option>
                                            <option value="status" @selected(request('sort') === 'status')>Status</option>
                                            <option value="department" @selected(request('sort') === 'department')>Department</option>
                                            <option value="assigned_to" @selected(request('sort') === 'assigned_to')>Assigned To</option>
                                            <option value="created_at" @selected(request('sort') === 'created_at')>Created Date</option>
                                        </select>
                                    </div>

                                    <div class="escalation-filter-field escalation-filter-field--small">
                                        <label class="form-label" for="direction">Direction</label>
                                        <select id="direction" name="direction"
                                            class="form-select general-select border border-2 border-secondary-subtle">
                                            <option value="desc" @selected(request('direction', 'desc') === 'desc')>Desc</option>
                                            <option value="asc" @selected(request('direction') === 'asc')>Asc</option>
                                        </select>
                                    </div>

                                    <div class="escalation-filter-field escalation-filter-field--small">
                                        <label class="form-label" for="per_page">Show</label>
                                        <select id="per_page" name="per_page"
                                            class="form-select general-select border border-2 border-secondary-subtle">
                                            @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                                <option value="{{ $count }}" @selected((int) request('per_page', 10) === $count)>{{ $count }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="escalation-filter-footer">
                                    <div class="escalation-filter-checks">
                                        <label class="escalation-filter-check">
                                            <input type="checkbox" name="unassigned_only" value="1"
                                                class="form-check-input m-0"
                                                @checked(request()->boolean('unassigned_only'))>
                                            <span>Unassigned only</span>
                                        </label>
                                        <label class="escalation-filter-check">
                                            <input type="checkbox" name="assigned_to_me" value="1"
                                                class="form-check-input m-0" @checked(request()->boolean('assigned_to_me'))>
                                            <span>Assigned to me only</span>
                                        </label>
                                    </div>
                                    <div class="escalation-filter-actions">
                                        <a href="{{ route('escalation-requests.index') }}"
                                            class="asset-btn asset-btn--secondary">Reset</a>
                                        <button type="submit" class="asset-btn asset-btn--primary">Apply Filters</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="escalation-summary">
                    <div class="escalation-summary__item">
                        <span class="escalation-summary__label">Visible Requests</span>
                        <span class="escalation-summary__value">{{ $escalationRequests->total() }}</span>
                    </div>
                    <div class="escalation-summary__item">
                        <span class="escalation-summary__label">This Page</span>
                        <span class="escalation-summary__value">{{ $escalationRequests->count() }}</span>
                    </div>
                    <div class="escalation-summary__item">
                        <span class="escalation-summary__label">Unassigned</span>
                        <span
                            class="escalation-summary__value">{{ $escalationRequests->whereNull('assigned_to')->count() }}</span>
                    </div>
                    <div class="escalation-summary__item">
                        <span class="escalation-summary__label">Active Filters</span>
                        <span class="escalation-summary__value">{{ $activeFilters }}</span>
                    </div>
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap w-100">
                            <div style="margin-right:auto">
                                <h6 class="mb-0 ui-title">Request List</h6>
                                <p class="mb-0 ui-muted">Visible requests are limited to your department context and
                                    assignments.</p>
                            </div>
                            <span class="ui-pill ui-pill--info">Page {{ $escalationRequests->currentPage() }} of
                                {{ $escalationRequests->lastPage() }}</span>
                        </div>
                    </div>

                    <div class="escalation-desktop-table">
                        <div class="ui-table-wrap nice-scrollbar">
                            <table class="ui-table">
                                <thead class="ui-table__head">
                                    <tr>
                                        <th class="text-center">Title</th>
                                        <th class="text-center">Route</th>
                                        <th class="text-center">Linked Request</th>
                                        <th class="text-center">Assigned To</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Created By</th>
                                        <th class="text-center">Created Date</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="ui-table__body">
                                    @forelse ($escalationRequests as $item)
                                        @php
                                            $statusValue = $statusValueFor($item->status);
                                            $statusLabel = $statusLabelFor($item->status);
                                            $statusPill = $statusPillMap[$statusValue] ?? 'neutral';
                                            $linkedRequest = $requestMeta($item);
                                        @endphp
                                        <tr>
                                            <td class="escalation-title-cell">
                                                <div class="fw-semibold escalation-table-text">{{ $item->title }}</div>
                                                <div class="ui-muted small escalation-table-text">
                                                    {{ \Illuminate\Support\Str::limit($item->description, 90) }}</div>
                                            </td>
                                            <td class="text-center">
                                                <div class="d-flex flex-column align-items-center gap-1">
                                                    <span
                                                        class="ui-pill ui-pill--neutral">{{ $item->fromDepartment?->name ?? 'N/A' }}</span>
                                                    <span class="ui-muted small">to</span>
                                                    <span
                                                        class="ui-pill ui-pill--info">{{ $item->toDepartment?->name ?? 'N/A' }}</span>
                                                </div>
                                            </td>
                                            <td class="escalation-linked-cell text-center">
                                                @if ($linkedRequest)
                                                    <div class="fw-semibold">{{ $linkedRequest['type'] }}</div>
                                                    <div class="fw-semibold">
                                                        <a href="{{ $linkedRequest['url'] }}" target="_blank"
                                                            rel="noopener noreferrer">
                                                            #{{ $linkedRequest['id'] }}
                                                        </a>
                                                        - {{ $linkedRequest['title'] }}
                                                    </div>
                                                    @if (!empty($linkedRequest['meta']))
                                                        <div class="ui-muted small">{{ $linkedRequest['meta'] }}</div>
                                                    @endif
                                                    <div class="ui-muted small">{{ $linkedRequest['description'] }}</div>
                                                @else
                                                    <span class="ui-pill ui-pill--neutral">Not linked</span>
                                                @endif
                                            </td>
                                            <td class="text-center ui-muted">{{ $item->assignedTo?->full_name ?: 'Unassigned' }}
                                            </td>
                                            <td class="text-center">
                                                <span class="ui-pill ui-pill--{{ $statusPill }}">{{ $statusLabel }}</span>
                                            </td>
                                            <td class="text-center ui-muted">{{ $item->creator?->full_name ?: 'N/A' }}</td>
                                            <td class="text-center ui-muted">{{ $item->created_at?->format('Y-m-d H:i') }}</td>
                                            <td class="text-center" onclick="event.stopPropagation()">
                                                <div class="escalation-actions">
                                                    <a href="{{ route('escalation-requests.show', $item) }}"
                                                        class="asset-btn asset-btn--secondary">View</a>
                                                    @if ($canEditEscalation($item))
                                                        <a href="{{ route('escalation-requests.edit', $item) }}"
                                                            class="asset-btn asset-btn--secondary">Edit</a>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center py-5 text-muted">No escalation requests found.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="escalation-mobile-list p-3">
                        @forelse ($escalationRequests as $item)
                            @php
                                $statusValue = $statusValueFor($item->status);
                                $statusLabel = $statusLabelFor($item->status);
                                $statusPill = $statusPillMap[$statusValue] ?? 'neutral';
                                $linkedRequest = $requestMeta($item);
                            @endphp
                            <article class="escalation-request-card">
                                <div class="escalation-request-card__head">
                                    <div>
                                        <div class="escalation-request-card__title">{{ $item->title }}</div>
                                        <div class="escalation-request-card__desc">
                                            {{ \Illuminate\Support\Str::limit($item->description, 120) }}</div>
                                    </div>
                                    <span class="ui-pill ui-pill--{{ $statusPill }}">{{ $statusLabel }}</span>
                                </div>

                                <div class="escalation-request-card__grid">
                                    <div>
                                        <span class="escalation-request-card__label">From</span>
                                        <span
                                            class="escalation-request-card__value">{{ $item->fromDepartment?->name ?? 'N/A' }}</span>
                                    </div>
                                    <div>
                                        <span class="escalation-request-card__label">To</span>
                                        <span
                                            class="escalation-request-card__value">{{ $item->toDepartment?->name ?? 'N/A' }}</span>
                                    </div>
                                    <div>
                                        <span class="escalation-request-card__label">Assigned To</span>
                                        <span
                                            class="escalation-request-card__value">{{ $item->assignedTo?->full_name ?: 'Unassigned' }}</span>
                                    </div>
                                    <div>
                                        <span class="escalation-request-card__label">Created</span>
                                        <span
                                            class="escalation-request-card__value">{{ $item->created_at?->format('Y-m-d H:i') }}</span>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <span class="escalation-request-card__label">Linked Request</span>
                                    @if ($linkedRequest)
                                        <div class="escalation-request-card__value">
                                            <a href="{{ $linkedRequest['url'] }}" target="_blank" rel="noopener noreferrer">
                                                {{ $linkedRequest['type'] }} #{{ $linkedRequest['id'] }}
                                            </a>
                                        </div>
                                        <div class="ui-muted small mt-1">{{ $linkedRequest['title'] }}</div>
                                        <div class="ui-muted small">{{ $linkedRequest['description'] }}</div>
                                    @else
                                        <span class="ui-pill ui-pill--neutral">Not linked</span>
                                    @endif
                                </div>

                                <div class="escalation-actions mt-3">
                                    <a href="{{ route('escalation-requests.show', $item) }}"
                                        class="asset-btn asset-btn--secondary">View</a>
                                    @if ($canEditEscalation($item))
                                        <a href="{{ route('escalation-requests.edit', $item) }}"
                                            class="asset-btn asset-btn--secondary">Edit</a>
                                    @endif
                                </div>
                            </article>
                        @empty
                            <div class="px-3 py-5 text-center text-muted">No escalation requests found.</div>
                        @endforelse
                    </div>

                    <div class="p-3">
                        {{ $escalationRequests->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection