@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        @php
            use App\Enums\ExamStatus;
            use App\Enums\AttendanceStatus;
            use App\Enums\AttemptStatus;
        @endphp

        {{-- ── Banner: Ujian Hari Ini (Peserta) ─────────────────────────────── --}}
        @if(isset($todayExams) && $todayExams->isNotEmpty())
        <div class="row mx-1 mb-3">
            <div class="col-12">
                <div class="card border-0 shadow-sm border-radius-xl overflow-hidden mb-0">
                    {{-- Header --}}
                    <div class="card-header d-flex align-items-center justify-content-between py-2 px-4"
                         style="background: linear-gradient(135deg,#00b7bd 0%,#007b80 100%); border-bottom:0;">
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-white font-weight-bolder mb-0" style="font-size:.85rem;">
                                Today's Exams
                            </span>
                            <span class="badge bg-white text-dark ms-1" style="font-size:.68rem;">
                                {{ $todayExams->count() }}
                            </span>
                        </div>
                        <span class="text-white opacity-8" style="font-size:.75rem;">
                            {{ now()->translatedFormat('l, d F Y') }}
                        </span>
                    </div>

                    {{-- Item list --}}
                    <div class="card-body p-0">
                        @foreach($todayExams as $loop_u => $todayItem)
                        @php
                            $submitted   = $todayItem->attempt_status === AttemptStatus::SUBMITTED->value;
                            $onProgress  = $todayItem->attempt_status === AttemptStatus::ON_PROGRESS->value;
                            $examOpen    = $todayItem->exam_status === ExamStatus::ON_PROGRESS->value;
                            $hadir       = $todayItem->attendance_status === AttendanceStatus::HADIR->value;

                            if ($submitted) {
                                $accentColor = '#17c1e8';
                                $rowBg       = '#f0fbff';
                                $statusBadge = 'bg-gradient-info';
                                $statusLabel = 'Completed';
                                $btnClass    = 'bg-gradient-info';
                                $btnIcon     = 'fa-chart-bar';
                                $btnLabel    = 'View Results';
                                $btnHref     = url('trsuex/result/' . encrypt($todayItem->exam_id));
                                $btnDisabled = false;
                            } elseif ($hadir && $examOpen && $onProgress) {
                                $accentColor = '#fb8c00';
                                $rowBg       = '#fff8f0';
                                $statusBadge = 'bg-gradient-warning';
                                $statusLabel = 'In Progress';
                                $btnClass    = 'bg-gradient-warning';
                                $btnIcon     = 'fa-play';
                                $btnLabel    = 'Continue';
                                $btnHref     = url('trsuex/run/' . encrypt($todayItem->exam_id));
                                $btnDisabled = false;
                            } elseif ($hadir && $examOpen) {
                                $accentColor = '#82d616';
                                $rowBg       = '#f6ffed';
                                $statusBadge = 'bg-gradient-success';
                                $statusLabel = 'Exam Open';
                                $btnClass    = 'bg-gradient-success';
                                $btnIcon     = 'fa-pencil-alt';
                                $btnLabel    = 'Start Exam';
                                $btnHref     = url('trsuex/run/' . encrypt($todayItem->exam_id));
                                $btnDisabled = false;
                            } elseif ($hadir && !$examOpen) {
                                $accentColor = '#00b7bd';
                                $rowBg       = '#f0feff';
                                $statusBadge = 'bg-gradient-secondary';
                                $statusLabel = 'Waiting to Start';
                                $btnClass    = '';
                                $btnIcon     = 'fa-hourglass-half';
                                $btnLabel    = 'Not Yet Started';
                                $btnHref     = '#';
                                $btnDisabled = true;
                            } else {
                                $accentColor = '#8392ab';
                                $rowBg       = '#f8f9fa';
                                $statusBadge = 'bg-gradient-secondary';
                                $statusLabel = 'Not Available';
                                $btnClass    = '';
                                $btnIcon     = 'fa-lock';
                                $btnLabel    = 'Locked';
                                $btnHref     = '#';
                                $btnDisabled = true;
                            }
                        @endphp
                        <div class="d-flex align-items-center px-4 py-3 gap-3
                                    {{ !$loop->last ? 'border-bottom' : '' }}"
                             style="background:{{ $rowBg }}; border-left: 4px solid {{ $accentColor }};">

                            {{-- Indikator kiri --}}
                            <div class="flex-shrink-0">
                                @if($hadir && $examOpen && !$submitted)
                                    <span class="position-relative d-inline-flex" style="width:10px;height:10px;">
                                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle"
                                              style="background:{{ $accentColor }};opacity:.4;animation:pulse-ring 1.4s ease-out infinite;"></span>
                                        <span class="rounded-circle d-inline-block"
                                              style="width:10px;height:10px;background:{{ $accentColor }};"></span>
                                    </span>
                                @else
                                    <span class="rounded-circle d-inline-block"
                                          style="width:10px;height:10px;background:{{ $accentColor }};"></span>
                                @endif
                            </div>

                            {{-- Info training --}}
                            <div class="flex-grow-1">
                                <div class="font-weight-bolder text-dark text-sm mb-1"
                                     style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                                    {{ $todayItem->training_name }}
                                </div>
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <span class="badge {{ $statusBadge }} badge-sm" style="font-size:.63rem;">
                                        {{ $statusLabel }}
                                    </span>
                                    @if($todayItem->time_start)
                                        <span class="text-xs text-secondary">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ \Carbon\Carbon::parse($todayItem->time_start)->format('H:i') }}
                                            – {{ \Carbon\Carbon::parse($todayItem->time_end)->format('H:i') }}
                                        </span>
                                    @endif
                                    @if(
                                        ($todayItem->control_type ?? null) === 'TIMER' &&
                                        ($todayItem->exam_status ?? null) === ExamStatus::ON_PROGRESS->value &&
                                        !empty($todayItem->exam_end_time)
                                    )
                                        <span class="badge bg-gradient-danger text-white text-xxs js-user-countdown"
                                              data-exam-id="{{ $todayItem->exam_id }}"
                                              data-end-time="{{ \Carbon\Carbon::parse($todayItem->exam_end_time)->format('Y-m-d H:i:s') }}">
                                            Sisa: 00:00:00
                                        </span>
                                    @endif
                                </div>
                            </div>

                            {{-- Tombol aksi --}}
                            <div class="flex-shrink-0">
                                @if($btnDisabled)
                                    <button disabled
                                            class="btn btn-sm btn-secondary mb-0 px-3 d-flex align-items-center gap-1"
                                            style="font-size:.75rem;white-space:nowrap;">
                                        <i class="fas {{ $btnIcon }}"></i>
                                        <span>{{ $btnLabel }}</span>
                                    </button>
                                @else
                                    <a href="{{ $btnHref }}"
                                       class="btn btn-sm {{ $btnClass }} mb-0 px-3 d-flex align-items-center gap-1"
                                       style="font-size:.75rem;white-space:nowrap;">
                                        <i class="fas {{ $btnIcon }}"></i>
                                        <span>{{ $btnLabel }}</span>
                                    </a>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <style>
            @keyframes pulse-ring {
                0%   { transform: scale(1);   opacity: .5; }
                80%  { transform: scale(2.6); opacity: 0;  }
                100% { transform: scale(2.6); opacity: 0;  }
            }
        </style>
        <script>
            (function () {
                const trsuexListCountdownUI = {
                    nodes: [],
                    syncUrl: '{{ route('trsexm.live_status') }}',
                    serverNowAtLoad: {{ now()->getTimestampMs() }},
                    perfStart: performance.now(),
                    formatHms(totalSeconds) {
                        const sec = Math.max(0, totalSeconds);
                        const hh = String(Math.floor(sec / 3600)).padStart(2, '0');
                        const mm = String(Math.floor((sec % 3600) / 60)).padStart(2, '0');
                        const ss = String(sec % 60).padStart(2, '0');
                        return `${hh}:${mm}:${ss}`;
                    },
                    syncTimerStatus(examId) {
                        if (!examId) {
                            return Promise.resolve();
                        }

                        return fetch(this.syncUrl + '?exam_id=' + encodeURIComponent(examId), {
                            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
                        }).catch(() => null);
                    },
                    hardReloadCurrentPage() {
                        const url = new URL(window.location.href);
                        url.searchParams.set('_ts', Date.now().toString());
                        window.location.replace(url.toString());
                    },
                    formatModeLabel(mode) {
                        return mode === 'start' ? 'Mulai' : 'Sisa';
                    },
                    tick() {
                        const currentServerMs = this.serverNowAtLoad + (performance.now() - this.perfStart);
                        this.nodes.forEach((node) => {
                            const raw = node.getAttribute('data-end-time') || '';
                            const endAt = new Date(raw.replace(' ', 'T')).getTime();
                            const examId = node.getAttribute('data-exam-id') || '';
                            const reloadKey = 'trsuex-list-reloaded-' + examId + '-' + raw;

                            if (!endAt || Number.isNaN(endAt)) {
                                node.textContent = 'Sisa: --:--:--';
                                return;
                            }

                            const remain = Math.floor((endAt - currentServerMs) / 1000);
                            if (remain <= 0) {
                                const mode = node.getAttribute('data-mode') || 'end';
                                node.textContent = `${this.formatModeLabel(mode)}: 00:00:00`;
                                node.classList.remove('bg-gradient-danger');
                                node.classList.add('bg-gradient-secondary');
                                if (!window.sessionStorage.getItem(reloadKey)) {
                                    window.sessionStorage.setItem(reloadKey, '1');
                                    this.syncTimerStatus(examId).finally(() => {
                                        window.setTimeout(() => this.hardReloadCurrentPage(), 300);
                                    });
                                }
                                return;
                            }

                            node.textContent = `Sisa: ${this.formatHms(remain)}`;
                        });
                    },
                    init() {
                        this.nodes = Array.from(document.querySelectorAll('.js-user-countdown'));
                        if (!this.nodes.length) {
                            return;
                        }
                        this.tick();
                        setInterval(() => this.tick(), 1000);
                    }
                };

                window.trsuexListCountdownUI = trsuexListCountdownUI;
                trsuexListCountdownUI.init();
            })();
        </script>
        @endif

        <div class="row">
            <div class="col-md-12">
                @include('assesm.trsuex._partials.summary_stats')
                @include('assesm.trsuex._partials.exam_list_table')
            </div>
        </div>
    </div>
@endsection

@include('assesm._partials.jsmenu_push')