@extends('layout.layout')

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

    <div class="container-fluid app-bg requests-index-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Student Requests"
                    description="Browse, filter, review, and manage your submitted student requests.">
                    @can('student')
                        <a href="{{ route('requests.create') }}" class="asset-btn asset-btn--primary">
                            <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                            Add New Request
                        </a>
                    @endcan
                </x-page-title>

                <div class="ui-card requests-filter-card">
                    <div class="requests-filter-head">
                        <div class="requests-filter-head__main">
                            <div class="requests-filter-head__icon">
                                <iconify-icon icon="ri:filter-3-line"></iconify-icon>
                            </div>

                            <div>
                                <h5 class="requests-filter-head__title mb-0">Request Filters</h5>
                                <p class="requests-filter-head__sub mb-0">
                                    Search by subject, filter request type, or narrow results by related category.
                                </p>
                            </div>
                        </div>

                        @if (request('search') || request('type') || request('related_to'))
                            <a href="{{ url()->current() }}" class="asset-btn asset-btn--secondary">
                                <iconify-icon icon="ri:restart-line"></iconify-icon>
                                Clear Filters
                            </a>
                        @endif
                    </div>

                    <form method="GET" action="{{ url()->current() }}" class="requests-filter-form">
                        <div class="asset-form-grid">
                            <div class="asset-col-4">
                                <label for="search" class="asset-label">Subject</label>
                                <input type="text"
                                       name="search"
                                       id="search"
                                       class="asset-input"
                                       placeholder="Enter subject"
                                       value="{{ request('search') }}">
                            </div>

                            <div class="asset-col-4">
                                <label for="type" class="asset-label">Type</label>
                                <select name="type" id="type" class="asset-select">
                                    <option value="">All Types</option>
                                    <option value="complaint" {{ request('type') == 'complaint' ? 'selected' : '' }}>
                                        Complaint
                                    </option>
                                    <option value="request" {{ request('type') == 'request' ? 'selected' : '' }}>
                                        Request
                                    </option>
                                    <option value="information" {{ request('type') == 'information' ? 'selected' : '' }}>
                                        Information
                                    </option>
                                    <option value="need" {{ request('type') == 'need' ? 'selected' : '' }}>
                                        Need
                                    </option>
                                    <option value="escalation" {{ request('type') == 'escalation' ? 'selected' : '' }}>
                                        Escalations
                                    </option>
                                    <option value="refund" {{ request('type') == 'refund' ? 'selected' : '' }}>
                                        Refund
                                    </option>
                                </select>
                            </div>

                            <div class="asset-col-4">
                                <label for="related_to" class="asset-label">Related To</label>
                                <select name="related_to" id="related_to" class="asset-select">
                                    <option value="">All Categories</option>
                                    <option value="activities" {{ request('related_to') == 'activities' ? 'selected' : '' }}>
                                        Activities
                                    </option>
                                    <option value="homework" {{ request('related_to') == 'homework' ? 'selected' : '' }}>
                                        Homework
                                    </option>
                                    <option value="whiteboard" {{ request('related_to') == 'whiteboard' ? 'selected' : '' }}>
                                        Whiteboard
                                    </option>
                                    <option value="curriculum" {{ request('related_to') == 'curriculum' ? 'selected' : '' }}>
                                        Curriculum
                                    </option>
                                    <option value="time" {{ request('related_to') == 'time' ? 'selected' : '' }}>
                                        Time
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="asset-actions requests-filter-actions">
                            <a href="{{ url()->current() }}" class="asset-btn asset-btn--secondary">
                                <iconify-icon icon="bi:x-lg"></iconify-icon>
                                Clear
                            </a>

                            <button type="submit" class="asset-btn asset-btn--primary">
                                <iconify-icon icon="bi:funnel"></iconify-icon>
                                Apply Filters
                            </button>
                        </div>
                    </form>
                </div>

                <div class="ui-card requests-table-card mt-3">
                    <div class="requests-table-head">
                        <div>
                            <h5 class="requests-table-title mb-0">Requests List</h5>
                            <p class="requests-table-sub mb-0">
                                Student request records including assignees, department, subject, status, and actions.
                            </p>
                        </div>

                        <span class="ui-pill ui-pill--info">
                            {{ $rows->total() ?? $rows->count() }} Request(s)
                        </span>
                    </div>

                    @if ($rows->isNotEmpty())
                        <div class="requests-table-wrap">
                            <table class="table requests-table mb-0">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Student Name</th>
                                        <th>Admin</th>
                                        <th>Department</th>
                                        <th>Supervisor</th>
                                        <th>Team Leader</th>
                                        <th>Subject</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Escalation</th>
                                        <th>Note</th>
                                        <th>Related To</th>
                                        <th>Created Date</th>
                                        <th class="text-end">Actions</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($rows as $row)

                                        @php
                                            $courseAssignedAdmin = $row->course?->admin_assigned_students
                                                ?->firstWhere('student_id', $row->created_by)
                                                ?->admin;

                                            $displayAdmin = $row->admin ?? $courseAssignedAdmin;

                                            $storedSupervisorName = $row->supervisor?->full_name
                                                ?? getSupervisorFromSessionId($row->session_id)
                                                ?? $row->course?->staff?->manager?->full_name
                                                ?? trim(($row->course?->staff?->manager?->first_name ?? '') . ' ' . ($row->course?->staff?->manager?->last_name ?? ''));

                                            $instructorManagerName = $row->instructor?->manager?->full_name
                                                ?? trim(($row->instructor?->manager?->first_name ?? '') . ' ' . ($row->instructor?->manager?->last_name ?? ''));
                                            $teamLeaderName = $displayAdmin?->staff?->manager?->full_name
                                                ?? trim(($displayAdmin?->staff?->manager?->first_name ?? '') . ' ' . ($displayAdmin?->staff?->manager?->last_name ?? ''));
                                            $relatedToLabel = $row->related_to
                                                ? ucfirst($row->related_to)
                                                : ($row->type === 'refund'
                                                    ? ($row->course?->course_name_en ?? $row->course?->course_name_ar ?? 'Course')
                                                    : '-');
                                            $latestEscalation = $row->escalationRequests->sortByDesc('created_at')->first();
                                            $escalationStatusClass = match ($latestEscalation?->status) {
                                                'pending' => 'ui-pill--warn',
                                                'assigned', 'in_progress' => 'ui-pill--info',
                                                'resolved', 'closed' => 'ui-pill--success',
                                                'rejected' => 'ui-pill--danger',
                                                default => 'ui-pill--neutral',
                                            };
                                        @endphp
                                        <tr>
                                            <td>
                                                <span class="request-id">#{{ $row->id }}</span>
                                            </td>

                                            <td>
                                                @if ($row->creator)
                                                    <div class="request-person">
                                                        <div class="request-person__avatar">
                                                            {{ strtoupper(substr($row->creator->first_name ?? 'S', 0, 1) . substr($row->creator->last_name ?? '', 0, 1)) }}
                                                        </div>

                                                        <div class="request-person__info">
                                                            <div class="request-person__name">
                                                                {{ trim(($row->creator->first_name ?? '') . ' ' . ($row->creator->last_name ?? '')) }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>

                                            <td>
                                                <span class="request-muted">
                                                    {{ $displayAdmin?->full_name ?: '-' }}
                                                </span>
                                            </td>

                                            <td>
                                                <span class="request-muted">
                                                    {{ $row->requestType?->targetDepartment?->name ?? '-' }}
                                                </span>
                                            </td>

                                            <td>
                                                <span class="request-muted">
                                                    {{ $storedSupervisorName ?: ($instructorManagerName ?: '-') }}
                                                </span>
                                            </td>

                                            <td>
                                                <span class="request-muted">
                                                    {{ $teamLeaderName ?: '-' }}
                                                </span>
                                            </td>

                                            <td>
                                                <div class="request-subject-cell" title="{{ $row->subject }}">
                                                    {{ $row->subject }}
                                                </div>
                                            </td>

                                            <td>
                                                <span class="ui-pill ui-pill--primary">
                                                    {{ ucfirst($row->type) }}
                                                </span>
                                            </td>

                                            <td>
                                                @php
                                                    $statusClass = match ($row->status) {
                                                        'pending' => 'ui-pill--warn',
                                                        'approved', 'done', 'closed', 'accepted' => 'ui-pill--success',
                                                        'rejected', 'cancelled' => 'ui-pill--danger',
                                                        default => 'ui-pill--neutral',
                                                    };
                                                @endphp

                                                <span class="ui-pill {{ $statusClass }}">
                                                    {{ ucfirst($row->status) }}
                                                </span>
                                            </td>

                                            <td>
                                                @if ($row->escalation_requests_count > 0)
                                                    <div class="request-escalation-cell">
                                                        <span class="ui-pill {{ $escalationStatusClass }}">
                                                            {{ $latestEscalation ? ucfirst(str_replace('_', ' ', $latestEscalation->status)) : 'Escalated' }}
                                                        </span>
                                                    </div>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>

                                            <td>
                                                <div class="request-status-note" title="{{ $row->status_note }}">
                                                    {{ $row->status_note ?: '-' }}
                                                </div>
                                            </td>

                                            <td>
                                                @if ($relatedToLabel !== '-')
                                                    <span class="ui-pill ui-pill--info">
                                                        {{ $relatedToLabel }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>

                                            <td>
                                                <span class="request-date">
                                                    {{ $row->created_at?->format('d M Y, h:i A') }}
                                                </span>
                                            </td>

                                            <td class="text-end">
                                                <div class="request-actions">
                                                    <a href="{{ route('requests.show', $row->id) }}"
                                                       class="request-action-btn"
                                                       data-bs-toggle="tooltip"
                                                       title="View Request">
                                                        <iconify-icon icon="lucide:eye"></iconify-icon>
                                                    </a>

                                                    @can('student')
                                                        @if (Auth::id() === $row->created_by)
                                                            <form action="{{ route('requests.destroy', $row->id) }}"
                                                                  method="POST"
                                                                  class="d-inline"
                                                                  onsubmit="return confirm('Are you sure you want to delete this request?');">
                                                                @csrf
                                                                @method('DELETE')

                                                                <button type="submit"
                                                                        class="request-action-btn request-action-btn--danger"
                                                                        data-bs-toggle="tooltip"
                                                                        title="Delete Request">
                                                                    <iconify-icon icon="lucide:trash-2"></iconify-icon>
                                                                </button>
                                                            </form>
                                                        @endif
                                                    @endcan
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        @if ($rows->hasPages())
                            <div class="requests-pagination">
                                {{ $rows->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                            </div>
                        @endif
                    @else
                        <div class="requests-empty">
                            <iconify-icon icon="ri:clipboard-line"></iconify-icon>
                            <h6>No student requests found.</h6>
                            <p>Start by creating a new request or changing your filters.</p>

                            @can('student')
                                <a href="{{ route('requests.create') }}" class="asset-btn asset-btn--primary">
                                    <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                                    Create Request
                                </a>
                            @endcan
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        setTimeout(() => {
            let alert = document.getElementById('successAlert');

            if (alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 10000);
    </script>
@endpush

@push('styles')
    <style>
        .requests-index-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            padding: 1.25rem;
            overflow: hidden;
        }

        .requests-filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
            flex-wrap: wrap;
        }

        .requests-filter-head__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .requests-filter-head__icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 1.45rem;
            flex-shrink: 0;
        }

        .requests-filter-head__title {
            font-size: 1.05rem !important;
            font-weight: 900;
            color: #111827;
        }

        .requests-filter-head__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-4 {
            grid-column: span 4 / span 4;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .asset-select {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .requests-filter-actions {
            margin-top: 1rem;
        }

        .requests-table-card {
            padding: 0 !important;
        }

        .requests-table-head {
            padding: 1.25rem;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            background: #fff;
        }

        .requests-table-title {
            font-size: 1.05rem !important;
            font-weight: 900;
            color: #111827;
        }

        .requests-table-sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .requests-table-wrap {
            max-height: 650px;
            overflow: auto;
            width: 100%;
        }

        .requests-table {
            min-width: 1460px;
            width: 100%;
            vertical-align: middle;
        }

        .requests-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f8fafc;
            color: #475569;
            font-size: 0.76rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

        .requests-table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 650;
            border-color: #eef2f7;
            padding: 0.95rem 1rem;
            vertical-align: middle;
            white-space: nowrap;
        }

        .requests-table tbody tr {
            transition: 0.16s ease;
        }

        .requests-table tbody tr:hover {
            background: #f8fafc;
        }

        .request-id {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 900;
        }

        .request-person {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-width: 180px;
        }

        .request-person__avatar {
            width: 36px;
            height: 36px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 0.78rem;
            font-weight: 900;
            flex-shrink: 0;
        }

        .request-person__name {
            color: #111827;
            font-size: 0.9rem;
            font-weight: 850;
            line-height: 1.35;
        }

        .request-muted {
            color: #475569;
            font-weight: 700;
        }

        .request-subject-cell {
            max-width: 240px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #111827;
            font-weight: 850;
        }

        .request-status-note {
            max-width: 260px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #475569;
            font-weight: 700;
        }

        .request-escalation-cell {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            min-width: 130px;
        }

        .request-escalation-count {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 750;
        }

        .request-date {
            color: #64748b;
            font-size: 0.82rem;
            font-weight: 750;
        }

        .request-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.45rem;
        }

        .request-action-btn {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            border: 1px solid #dbeafe;
            background: #eff6ff;
            color: #0f1724;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            transition: 0.18s ease;
            text-decoration: none;
        }

        .request-action-btn:hover {
            background: #071b3d;
            border-color: #071b3d;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
        }

        .request-action-btn--danger {
            border-color: #fee2e2;
            background: #fef2f2;
            color: #b91c1c;
        }

        .request-action-btn--danger:hover {
            background: #dc2626;
            border-color: #dc2626;
            color: #fff;
            box-shadow: 0 10px 22px rgba(220, 38, 38, 0.18);
        }

        .requests-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fff;
        }

        .requests-empty {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .requests-empty iconify-icon {
            display: block;
            font-size: 2.35rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .requests-empty h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .requests-empty p {
            margin: 0.35rem 0 1rem;
            font-size: 0.9rem;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary { background: #eff6ff; color: #0f1724; }
        .ui-pill--info { background: #eef2ff; color: #4338ca; }
        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--warn { background: #fffbeb; color: #92400e; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

        @media (max-width: 991.98px) {
            .asset-col-4 {
                grid-column: span 12 / span 12;
            }

            .requests-filter-head__main {
                align-items: flex-start;
            }
        }

        @media (max-width: 575.98px) {
            .requests-index-page .ui-card {
                padding: 1rem;
            }

            .requests-table-head,
            .requests-pagination {
                padding: 1rem;
            }

            .request-person {
                min-width: 160px;
            }

            .requests-filter-head {
                align-items: flex-start;
            }
        }
    </style>
@endpush