@extends('layout.layout')

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

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

                <x-page-title
                    title="Assignments"
                    description="View assigned homework, check availability, track status, and open submissions or graded answers.">
                </x-page-title>

                <div id="container">
                    <div class="ui-card assignments-filter-card" style="margin-bottom: 1rem !important;">
                        <div class="assignments-filter-head">
                            <div class="assignments-filter-head__main">
                                <div class="assignments-filter-head__icon">
                                    <iconify-icon icon="ri:filter-3-line"></iconify-icon>
                                </div>

                                <div>
                                    <h5 class="assignments-filter-head__title mb-0">Assignment Filters</h5>
                                    <p class="assignments-filter-head__sub mb-0">
                                        Control how many assignments appear, filter by status, or search by ID/title.
                                    </p>
                                </div>
                            </div>

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

                        <form action="" method="GET" class="assignments-filter-form">
                            <div class="assignments-filter-grid">
                                <div class="assignments-filter-item">
                                    <label for="per_page" class="asset-label">Show Records</label>
                                    <select name="per_page" id="per_page" class="asset-select" onchange="this.form.submit()">
                                        @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                            <option value="{{ $count }}" {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                                                {{ $count }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="assignments-filter-item">
                                    <label for="status" class="asset-label">Status</label>
                                    <select name="status" id="status" class="asset-select" onchange="this.form.submit()">
                                        <option value="">All Statuses</option>
                                        @foreach (['upcoming', 'available', 'expired', 'submitted', 'graded'] as $status)
                                            <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                                                {{ ucfirst($status) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="assignments-search-form">
                                    <label for="assignment_search" class="asset-label">Search</label>
                                    <div class="assignments-search">
                                        <input type="text"
                                               class="assignments-search__input"
                                               id="assignment_search"
                                               name="search"
                                               placeholder="Search by ID or title..."
                                               value="{{ request('search') }}">

                                        <button class="assignments-search__button" type="submit" aria-label="Search">
                                            <iconify-icon icon="ion:search-outline"></iconify-icon>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="ui-card assignments-table-card">
                        <div class="assignments-table-head">
                            <div>
                                <h5 class="assignments-table-title mb-0">Assignment Records</h5>
                                <p class="assignments-table-sub mb-0">
                                    Assignment details, teacher, admin, level, schedule, result, and available action.
                                </p>
                            </div>

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

                        <div class="assignments-table-wrap">
                            <table class="table assignments-table mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-center">ID</th>
                                        @if(isset($hasMultipleChildren) && $hasMultipleChildren)
                                            <th>Student</th>
                                        @endif
                                        <th>Assignment Name</th>
                                        <th>Teacher Name</th>
                                        <th>Admin Name</th>
                                        <th>Level</th>
                                        <th>Type</th>
                                        <th class="text-center">Status</th>
                                        <th>Assigned Date</th>
                                        <th class="text-center">Result</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse ($assignments as $assignment)
                                        @php
                                            $teacher = $assignment->staffScheduled?->staff;
                                            $admins = $assignment->staffScheduled?->admin_assigned_students ?? collect();

                                            $statusClass = match ($assignment->status) {
                                                'upcoming' => 'ui-pill--neutral',
                                                'available' => 'ui-pill--success',
                                                'expired' => 'ui-pill--danger',
                                                'submitted' => 'ui-pill--warn',
                                                'graded' => 'ui-pill--info',
                                                default => 'ui-pill--neutral',
                                            };

                                            $statusLabel = match ($assignment->status) {
                                                'upcoming' => 'Not Started Yet',
                                                'available' => 'Available Now',
                                                'expired' => 'Expired',
                                                'submitted' => 'Submitted - Waiting for Grade',
                                                'graded' => 'Graded',
                                                default => ucfirst($assignment->status),
                                            };
                                        @endphp

                                        <tr>
                                            <td class="text-center">
                                                <span class="assignment-id">#{{ $assignment->id }}</span>
                                            </td>

                                            @if(isset($hasMultipleChildren) && $hasMultipleChildren)
                                                <td>
                                                    <span class="ui-pill ui-pill--neutral">
                                                        {{ $assignment->student_name ?? '-' }}
                                                    </span>
                                                </td>
                                            @endif

                                            <td>
                                                <div class="assignment-title-cell">
                                                    <div class="assignment-title">
                                                        {{ $assignment->title }}
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="assignment-person">
                                                    <div class="assignment-person__avatar">
                                                        {{ strtoupper(substr($teacher->first_name ?? 'T', 0, 1) . substr($teacher->last_name ?? '', 0, 1)) }}
                                                    </div>

                                                    <div class="assignment-person__name">
                                                        {{ $teacher->first_name ?? '' }} {{ $teacher->last_name ?? '' }}
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="assignment-admin-list">
                                                    @forelse ($admins as $admin)
                                                        <span class="ui-pill ui-pill--neutral">
                                                            {{ $admin->admin->full_name ?? '' }}
                                                        </span>
                                                    @empty
                                                        <span class="text-muted">-</span>
                                                    @endforelse
                                                </div>
                                            </td>

                                            <td>
                                                <span class="ui-pill ui-pill--primary">
                                                    {{ $assignment->staffScheduled->trackLevel->name_en ?? '-' }}
                                                </span>
                                            </td>

                                            <td>
                                                <span class="ui-pill ui-pill--info">
                                                    {{ $assignment->staffScheduled->trackType->name ?? '-' }}
                                                </span>
                                            </td>

                                            <td class="text-center">
                                                <span class="ui-pill {{ $statusClass }}">
                                                    {{ $statusLabel }}
                                                </span>
                                            </td>

                                            <td>
                                                <div class="assignment-schedule-stack">
                                                    <span class="ui-pill ui-pill--neutral">
                                                        From:
                                                        <strong>{{ $assignment->start_date }}</strong>
                                                        {{ $assignment->start_time }}
                                                    </span>

                                                    <span class="ui-pill ui-pill--neutral">
                                                        To:
                                                        <strong>{{ $assignment->end_date }}</strong>
                                                        {{ $assignment->end_time }}
                                                    </span>
                                                </div>
                                            </td>

                                            <td class="text-center">
                                                @if ($assignment->grade)
                                                    @if ($assignment->grade > 50)
                                                        <span class="ui-pill ui-pill--success">Pass</span>
                                                    @else
                                                        <span class="ui-pill ui-pill--danger">Fail</span>
                                                    @endif
                                                @else
                                                    <span class="ui-pill ui-pill--neutral">—</span>
                                                @endif
                                            </td>

                                            <td class="text-center">
                                                @switch($assignment->status)
                                                    @case('upcoming')
                                                        <span class="assignment-action-btn assignment-action-btn--disabled">
                                                            <iconify-icon icon="ri:time-line"></iconify-icon>
                                                            Not Started
                                                        </span>
                                                    @break

                                                    @case('available')
                                                        @can('student')
                                                            <a href="{{ route('assignments.start', $assignment->id) }}"
                                                               class="assignment-action-btn assignment-action-btn--success">
                                                                <iconify-icon icon="ri:play-circle-line"></iconify-icon>
                                                                Start Assignment
                                                            </a>
                                                        @endcan
                                                    @break

                                                    @case('expired')
                                                        <span class="assignment-action-btn assignment-action-btn--danger">
                                                            <iconify-icon icon="ri:close-circle-line"></iconify-icon>
                                                            Expired
                                                        </span>
                                                    @break

                                                    @case('submitted')
                                                        <a href="{{ route('assignments.start', $assignment->id) }}"
                                                           class="assignment-action-btn assignment-action-btn--warn">
                                                            <iconify-icon icon="ri:file-search-line"></iconify-icon>
                                                            View Submission
                                                        </a>
                                                    @break

                                                    @case('graded')
                                                        <a href="{{ route('assignments.start', $assignment->id) }}"
                                                           class="assignment-action-btn assignment-action-btn--primary">
                                                            <iconify-icon icon="ri:feedback-line"></iconify-icon>
                                                            View Answer
                                                        </a>
                                                    @break
                                                @endswitch
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="{{ isset($hasMultipleChildren) && $hasMultipleChildren ? 11 : 10 }}">
                                                <div class="assignments-empty">
                                                    <iconify-icon icon="ri:file-list-3-line"></iconify-icon>
                                                    <h6>No assignments found.</h6>
                                                    <p>There are no assignments matching your current filters.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        @if ($assignments->hasPages())
                            <div class="assignments-pagination">
                                {{ $assignments->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                            </div>
                        @endif
                    </div>
                </div>

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

@push('styles')
    <style>
        .assignments-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;
        }

        .assignments-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;
        }

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

        .assignments-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;
        }

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

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

        .assignments-filter-grid {
            display: grid;
            grid-template-columns: 180px 220px minmax(260px, 1fr);
            gap: 1rem;
            align-items: end;
        }

        .assignments-filter-item,
        .assignments-search-form {
            min-width: 0;
        }

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

        .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-select:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .assignments-search {
            position: relative;
            width: 100%;
        }

        .assignments-search__input {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 14px;
            padding: 0.68rem 3rem 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none;
        }

        .assignments-search__input:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .assignments-search__button {
            position: absolute;
            right: 0.4rem;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border: 0;
            border-radius: 12px;
            background: #111827;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s ease;
        }

        .assignments-search__button:hover {
            background: #071b3d;
        }

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

        .assignments-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;
        }

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

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

        .assignments-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .assignments-table {
            min-width: 1180px;
            width: 100%;
            vertical-align: middle;
        }

        .assignments-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

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

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

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

        .assignment-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;
        }

        .assignment-title-cell {
            min-width: 240px;
        }

        .assignment-title {
            color: #111827;
            font-weight: 900;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

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

        .assignment-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;
        }

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

        .assignment-admin-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            min-width: 180px;
        }

        .assignment-schedule-stack {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.45rem;
            min-width: 210px;
        }

        .assignment-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            min-height: 34px;
            border-radius: 999px;
            padding: 0.45rem 0.8rem;
            font-size: 0.78rem;
            font-weight: 900;
            text-decoration: none;
            transition: 0.18s ease;
            white-space: nowrap;
        }

        .assignment-action-btn--primary {
            background: #eff6ff;
            border: 1px solid #dbeafe;
            color: #0f1724;
        }

        .assignment-action-btn--primary:hover {
            background: #071b3d;
            border-color: #071b3d;
            color: #fff;
            transform: translateY(-1px);
        }

        .assignment-action-btn--success {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #166534;
        }

        .assignment-action-btn--success:hover {
            background: #16a34a;
            border-color: #16a34a;
            color: #fff;
            transform: translateY(-1px);
        }

        .assignment-action-btn--warn {
            background: #fffbeb;
            border: 1px solid #fde68a;
            color: #92400e;
        }

        .assignment-action-btn--warn:hover {
            background: #f59e0b;
            border-color: #f59e0b;
            color: #fff;
            transform: translateY(-1px);
        }

        .assignment-action-btn--danger {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #b91c1c;
            cursor: not-allowed;
        }

        .assignment-action-btn--disabled {
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            color: #6b7280;
            cursor: not-allowed;
        }

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

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

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

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

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

        .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) {
            .assignments-filter-grid {
                grid-template-columns: 1fr;
            }

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

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

            .assignments-table-head,
            .assignments-pagination {
                padding: 1rem;
            }
        }
    </style>
@endpush