@extends('layout.layout')

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

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

                <x-page-title
                    title="Exams"
                    description="View assigned exams, track due dates, check results, and start available exams.">
                </x-page-title>

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

                                <div>
                                    <h5 class="exams-filter-head__title mb-0">Exam Filters</h5>
                                    <p class="exams-filter-head__sub mb-0">
                                        Control how many exams appear and search by exam information.
                                    </p>
                                </div>
                            </div>

                            @if (request('search') || 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>

                        <div class="exams-filter-grid">
                            <form action="" method="GET" class="exams-filter-item">
                                <input type="hidden" name="search" value="{{ request('search') }}">

                                <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>
                            </form>

                            <form class="exams-search-form" action="" method="GET">
                                <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">

                                <label for="exam_search" class="asset-label">Search</label>
                                <div class="exams-search">
                                    <input type="text"
                                           class="exams-search__input"
                                           id="exam_search"
                                           name="search"
                                           placeholder="Search exams..."
                                           value="{{ request('search') }}">

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

                    <div class="ui-card exams-table-card">
                        <div class="exams-table-head">
                            <div>
                                <h5 class="exams-table-title mb-0">Exam Records</h5>
                                <p class="exams-table-sub mb-0">
                                    Exam title, availability, teacher, admin, result, submission date, and available actions.
                                </p>
                            </div>
                        @if(isset($ieltsExamGroups) && $ieltsExamGroups->isNotEmpty())
                            <div class="px-5 py-4">
                                @foreach($ieltsExamGroups as $group)
                                    <div class="mb-4">
                                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                                            <div>
                                                <h6 class="mb-1">{{ $group['track_name'] }}</h6>
                                                @if($group['level_name'])
                                                    <div class="text-muted small">{{ $group['level_name'] }}</div>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="row g-3">
                                            @foreach(['initial' => 'Initial Exam', 'final' => 'Final Exam'] as $type => $label)
                                                <div class="col-12 col-xl-6">
                                                    <div class="border rounded-3 p-3 h-100">
                                                        <h6 class="mb-3">{{ $label }}</h6>
                                                        @forelse($group[$type] as $exam)
                                                            @php
                                                                $submission = $exam->examSubmissions;
                                                                $availableFrom = $exam->available_from ? \Carbon\Carbon::parse($exam->available_from) : null;
                                                                $availableUntil = $exam->available_until ? \Carbon\Carbon::parse($exam->available_until) : null;
                                                                $attemptInProgress = $exam->attempts->isNotEmpty() && $exam->attempts->first()->status === 'in_progress';
                                                                $canStartExam = ! $exam->has_submission
                                                                    && ! $exam->is_upcoming
                                                                    && ! $exam->is_expired
                                                                    && $exam->can_start_now
                                                                    && ! $attemptInProgress;
                                                                $disabledReason = $exam->has_submission ? 'You already completed this exam.' : ($exam->is_upcoming ? 'This exam is not available yet.' : ($attemptInProgress ? 'This exam is already in progress.' : ($exam->is_expired ? 'This exam assignment has expired.' : (! $exam->can_start_now ? 'This exam is currently closed.' : 'This exam cannot be started right now.'))));
                                                            @endphp
                                                            <div class="border-bottom pb-3 mb-3">
                                                                <div class="fw-semibold">{{ $exam->title }}</div>
                                                                <div class="text-muted small mb-2">{{ count($exam->questions) }} Questions</div>
                                                                <div class="d-flex flex-wrap gap-2 mb-2">
                                                                    <span class="badge bg-light text-dark border">
                                                                        Available: <strong>{{ $availableFrom?->format('Y-m-d H:i') ?? '-' }}</strong>
                                                                    </span>
                                                                    <span class="badge bg-light text-dark border">
                                                                        Until: <strong>{{ $availableUntil?->format('Y-m-d H:i') ?? 'No day limit' }}</strong>
                                                                    </span>
                                                                    @if ($availableFrom && $exam->is_upcoming)
                                                                        <span class="badge bg-info text-white border"
                                                                             data-countdown="{{ $availableFrom->timestamp }}"
                                                                             data-exam-id="{{ $exam->id }}">
                                                                            <i class="bi bi-clock"></i> Loading...
                                                                        </span>
                                                                    @endif
                                                                </div>
                                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                                    <div>
                                                                        @if ($exam->has_submission)
                                                                            @if ($submission?->passed)
                                                                                <span class="badge bg-success">Pass</span>
                                                                            @else
                                                                                <span class="badge bg-danger">Fail</span>
                                                                            @endif
                                                                        @elseif ($exam->is_upcoming)
                                                                            <span class="badge bg-info">Not Started Yet</span>
                                                                        @elseif ($exam->attempts->isNotEmpty() && $exam->attempts->first()->status === 'in_progress')
                                                                            <span class="badge bg-warning">Already Started</span>
                                                                        @elseif ($exam->is_expired)
                                                                            <span class="badge bg-danger">Expired</span>
                                                                        @elseif (!$exam->can_start_now)
                                                                            <span class="badge bg-secondary">Closed</span>
                                                                        @else
                                                                            <span class="badge bg-success">Available</span>
                                                                        @endif
                                                                    </div>
                                                                    <div>
                                                                        @if ($exam->has_submission)
                                                                            <a href="{{ route('exam.feedback.page', $submission->id) }}" class="text-decoration-none btn btn-outline-primary btn-sm radius-8">Feedback</a>
                                                                        @else
                                                                            @can('student')
                                                                                @if ($canStartExam)
                                                                                    <a class="text-decoration-none load-exam btn btn-outline-success btn-sm radius-8" data-exam-id="{{ $exam->id }}">Start Exam</a>
                                                                                @else
                                                                                    <button type="button"
                                                                                            class="text-decoration-none btn btn-outline-secondary btn-sm radius-8"
                                                                                            disabled
                                                                                            title="{{ $disabledReason }}">
                                                                                        Start Exam
                                                                                    </button>
                                                                                @endif
                                                                            @endcan
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @empty
                                                            <div class="text-muted">No {{ $label }} assigned yet.</div>
                                                        @endforelse
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <div style="overflow: auto">

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

                        <div class="exams-table-wrap">
                            <table class="table exams-table mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-center">ID</th>
                                        @if(isset($hasMultipleChildren) && $hasMultipleChildren)
                                            <th>Student</th>
                                        @endif
                                        <th>Name</th>
                                        <th>Due Date</th>
                                        <th>Teacher</th>
                                        <th>Admin</th>
                                        <th class="text-center">Result</th>
                                        <th class="text-center">Submitted Date</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse ($exams as $exam)
                                        @php
                                            $submission = $exam->examSubmissions;
                                            $teacher = $exam->teacher;
                                            $admins = $exam->admins ?? collect();
                                            $availableFrom = $exam->available_from ? \Carbon\Carbon::parse($exam->available_from) : null;
                                            $availableUntil = $exam->available_until ? \Carbon\Carbon::parse($exam->available_until) : null;
                                            $attemptInProgress = $exam->attempts->isNotEmpty() && $exam->attempts->first()->status === 'in_progress';
                                            $canStartExam = ! $submission
                                                && ! $exam->is_upcoming
                                                && ! $exam->is_expired
                                                && $exam->can_start_now
                                                && ! $attemptInProgress;
                                            $disabledReason = $submission ? 'You already completed this exam.' : ($exam->is_upcoming ? 'This exam is not available yet.' : ($attemptInProgress ? 'This exam is already in progress.' : ($exam->is_expired ? 'This exam assignment has expired.' : (! $exam->can_start_now ? 'This exam is currently closed.' : 'This exam cannot be started right now.'))));
                                        @endphp

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

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

                                            <td>
                                                <div class="exam-title-cell">
                                                    <div class="exam-title">{{ $exam->title }}</div>
                                                    <div class="exam-subtitle">
                                                        {{ count($exam->questions) }} Question(s)
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="exam-schedule-stack">
                                                    <span class="ui-pill ui-pill--neutral">
                                                        Available:
                                                        <strong>{{ $availableFrom?->format('Y-m-d') ?? '-' }}</strong>
                                                        {{ $availableFrom?->format('H:i') ?? '' }}
                                                    </span>

                                                    <span class="ui-pill {{ $availableUntil ? 'ui-pill--warn' : 'ui-pill--success' }}">
                                                        Until:
                                                        <strong>{{ $availableUntil?->format('Y-m-d H:i') ?? 'No day limit' }}</strong>
                                                    </span>

                                                    @if ($availableFrom && $exam->is_upcoming)
                                                        <span class="ui-pill ui-pill--info"
                                                              data-countdown="{{ $availableFrom->timestamp }}"
                                                              data-exam-id="{{ $exam->id }}">
                                                            <i class="bi bi-clock"></i>
                                                            Loading...
                                                        </span>
                                                    @endif
                                                </div>
                                            </td>

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

                                            <td>
                                                <div class="exam-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 class="text-center">
                                                @if ($exam->examSubmissions)
                                                    @if ($submission->passed)
                                                        <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">No Result</span>
                                                @endif
                                            </td>

                                            {{-- @dd($exam->attempts) --}}
                                            {{-- @dd($exam->has_submission,$exam->attempts,$exam->is_expired) --}}
                                            @if ($exam->has_submission)
                                                <td class="text-center">
                                                    <span class="exam-date">{{ $exam->examSubmissions->submitted_at }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <a href="{{ route('exam.feedback.page', $exam->examSubmissions->id) }}"
                                                       class="exam-action-btn exam-action-btn--primary">
                                                        <iconify-icon icon="ri:feedback-line"></iconify-icon>
                                                        Feedback
                                                    </a>
                                                </td>
                                            @elseif ($exam->is_upcoming)
                                                <td class="text-center">
                                                    <span class="exam-date">Not Started Yet</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="exam-action-btn exam-action-btn--disabled">
                                                        <iconify-icon icon="ri:time-line"></iconify-icon>
                                                        Not Started Yet
                                                    </span>
                                                </td>
                                            @elseif ($exam->attempts->isNotEmpty() && $exam->attempts->first()->status === 'in_progress')
                                                <td class="text-center">
                                                    <span class="exam-date">Already Started</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="exam-action-btn exam-action-btn--disabled">
                                                        <iconify-icon icon="ri:loader-4-line"></iconify-icon>
                                                        Already Started
                                                    </span>
                                                </td>
                                            @elseif ($exam->is_expired)
                                                <td class="text-center">
                                                    <span class="exam-date">Expired</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="exam-action-btn exam-action-btn--danger">
                                                        <iconify-icon icon="ri:close-circle-line"></iconify-icon>
                                                        Expired
                                                    </span>
                                                </td>
                                            @elseif (!$exam->can_start_now)
                                                <td class="text-center">
                                                    <span class="exam-date">-</span>
                                                </td>
                                                <td class="text-center">
                                                    <button type="button"
                                                            class="exam-action-btn exam-action-btn--disabled"
                                                            disabled
                                                            title="{{ $disabledReason }}">
                                                        <iconify-icon icon="ri:play-circle-line"></iconify-icon>
                                                        Start Exam
                                                    </button>
                                                </td>
                                            @else
                                                <td class="text-center">
                                                    <span class="exam-date">Start Exam</span>
                                                </td>
                                                <td class="text-center">
                                                    @can('student')
                                                        @if ($canStartExam)
                                                            <a href="javascript:void(0)"
                                                               class="exam-action-btn exam-action-btn--success load-exam"
                                                               data-exam-id="{{ $exam->id }}">
                                                                <iconify-icon icon="ri:play-circle-line"></iconify-icon>
                                                                Start Exam
                                                            </a>
                                                        @else
                                                            <button type="button"
                                                                    class="exam-action-btn exam-action-btn--disabled"
                                                                    disabled
                                                                    title="{{ $disabledReason }}">
                                                                <iconify-icon icon="ri:play-circle-line"></iconify-icon>
                                                                Start Exam
                                                            </button>
                                                        @endif
                                                    @endcan
                                                </td>
                                            @endif
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="{{ isset($hasMultipleChildren) && $hasMultipleChildren ? 9 : 8 }}">
                                                <div class="exams-empty">
                                                    <iconify-icon icon="ri:file-list-3-line"></iconify-icon>
                                                    <h6>No exams found.</h6>
                                                    <p>There are no exams matching your current filters.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

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


@push('scripts')
    <script>
        $(document).ready(function () {
            $('.load-exam').on('click', function (e) {
                e.preventDefault();

                const examId = $(this).data('exam-id');

                $.ajax({
                    url: "{{ route('getExam', ['id' => 'id']) }}".replace('id', examId),
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        loadExamContent(response, examId);
                    },
                    error: function (xhr) {
                        toastr.error('Failed to load the exam. Please try again.', xhr);
                    }
                });
            });

            function loadExamContent(examData, examId) {
                const examHtml = `
                    <div class="ui-card exam-start-card">
                        <div class="exam-start-card__icon">
                            <iconify-icon icon="ri:file-edit-line"></iconify-icon>
                        </div>

                        <h4 class="exam-start-card__title">${examData.title || 'Untitled Assessment'}</h4>

                        <p class="exam-start-card__description">
                            ${examData.description || 'No description available.'}
                        </p>

                        <button class="asset-btn asset-btn--primary start-exam"
                                data-exam-id="${examData.id}">
                            <i class="bi bi-play-circle"></i>
                            Start Exam
                        </button>
                    </div>
                `;

                $('#container')
                    .removeClass('exam-container')
                    .html(examHtml)
                    .addClass('exam-container');

                $('.start-exam').on('click', function (e) {
                    e.preventDefault();

                    const examId = $(this).data('exam-id');

                    $.ajax({
                        url: '{{ route('startExam') }}',
                        type: 'POST',
                        data: {
                            examId: examId,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            if (response.success) {
                                window.location.href = "{{ route('showExamQuestions', ['examId' => 'id']) }}".replace('id', examId);
                            } else {
                                toastr.error(response.error || 'Exam start failed. Please try again.');
                            }
                        },
                        error: function (xhr) {
                            if (xhr.responseJSON && xhr.responseJSON.error) {
                                toastr.error(xhr.responseJSON.error);
                            } else {
                                toastr.error('Failed to start the exam. Please try again.');
                            }
                        }
                    });
                });
            }

            function updateCountdowns() {
                $('[data-countdown]').each(function () {
                    const $this = $(this);
                    const targetTime = parseInt($this.data('countdown'));
                    const now = Math.floor(Date.now() / 1000);
                    const timeDiff = targetTime - now;

                    if (timeDiff <= 0) {
                        $this.removeClass('ui-pill--info').addClass('ui-pill--success');
                        $this.html('<i class="bi bi-check-circle"></i> Exam Started!');

                        setTimeout(function () {
                            location.reload();
                        }, 2000);
                    } else {
                        // Calculate days, hours, minutes, seconds
                        const days = Math.floor(timeDiff / 86400);
                        const hours = Math.floor((timeDiff % 86400) / 3600);
                        const minutes = Math.floor((timeDiff % 3600) / 60);
                        const seconds = timeDiff % 60;

                        let countdownText = '<i class="bi bi-clock"></i> ';

                        if (days > 0) {
                            countdownText += days + 'd ';
                        }

                        if (hours > 0 || days > 0) {
                            countdownText += hours + 'h ';
                        }

                        if (minutes > 0 || hours > 0 || days > 0) {
                            countdownText += minutes + 'm ';
                        }

                        countdownText += seconds + 's';

                        $this.html(countdownText);
                    }
                });
            }

            if ($('[data-countdown]').length > 0) {
                updateCountdowns();
                setInterval(updateCountdowns, 1000);
            }
        });
    </script>
@endpush

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

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

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

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

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

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

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

        .exams-filter-item,
        .exams-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;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .exam-subtitle {
            color: #94a3b8;
            font-size: 0.78rem !important;
            margin-top: 0.2rem;
            font-weight: 750;
        }

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

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

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

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

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

        .exam-date {
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 750;
            white-space: nowrap;
        }

        .exam-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;
            border: 1px solid transparent;
            background: transparent;
            appearance: none;
            -webkit-appearance: none;
            font-family: inherit;
            transition: 0.18s ease;
            white-space: nowrap;
        }

        .exam-action-btn:disabled {
            opacity: 1;
        }

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

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

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

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

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

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

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

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

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

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

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

        .exam-start-card {
            max-width: 640px;
            margin: 0 auto;
            text-align: center;
            padding: 2rem !important;
        }

        .exam-start-card__icon {
            width: 70px;
            height: 70px;
            border-radius: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .exam-start-card__title {
            color: #111827;
            font-size: 1.25rem !important;
            font-weight: 900;
            margin-bottom: 0.5rem;
        }

        .exam-start-card__description {
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.65;
            margin-bottom: 1.25rem;
        }

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

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

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

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

            .exam-start-card {
                padding: 1.25rem !important;
            }
        }
    </style>
@endpush