{{-- trsuex/_partials/exam_list_table.blade.php
    DataTable listing for trsuex/list: shows exam schedule, status, actions.
    Used by: trsuex/list.blade.php
--}}
@php
use App\Enums\AttendanceStatus;
use App\Enums\AttemptStatus;
use App\Enums\ExamStatus;
use App\Enums\ControlType;
@endphp
<div class="row mx-1">
    <div class="card">
        <div class="row">
            <div class="card-header col-md-auto">
                <h5 class="mb-0">{{ $title_menu }}</h5>
            </div>
            <div class="col">
                @include('components.alert')
            </div>
        </div>
        <hr class="horizontal dark mt-0">

        <div class="row px-4 py-2">
    <div class="table-responsive">
        <table class="table display" id="list_{{ $dmenu }}">
            <thead class="thead-light" style="background-color: #00b7bd4f;">
                <tr>
                    <th>No</th>
                    <th>Training Name</th>
                    <th>Test Type</th>
                    <th>Schedule</th>
                    <th>Bank Question</th>
                    <th class="text-center">Attended</th>
                    <th class="text-center">Exam Status</th>
                    <th class="text-center">Timer</th>
                    <th class="text-center">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($table_detail as $index => $item)
                <tr>
                    <td class="text-sm">{{ $index + 1 }}</td>
                    <td class="text-sm font-weight-bold">{{ $item->training_name }}</td>
                    <td class="text-sm">{{ strtoupper(str_replace('_', ' ', $item->test_type ?? '-')) }}</td>
                    <td class="text-sm">
                        {{ \Carbon\Carbon::parse($item->schedule_date)->translatedFormat('d F Y') }}<br>
                        <span class="text-xs text-secondary">
                            {{ $item->time_start ? \Carbon\Carbon::parse($item->time_start)->format('H:i') . ' - ' . \Carbon\Carbon::parse($item->time_end)->format('H:i') : '-' }}
                        </span>
                    </td>
                    <td class="text-sm">{{ $item->bank_question_title ?? '-' }}</td>
                    <td class="text-sm text-center">
                        @if($item->attendance_status === AttendanceStatus::HADIR->value)
                            <span class="badge badge-sm bg-success">Attended</span>
                        @elseif($item->attendance_status === AttendanceStatus::TIDAK_HADIR->value)
                            <span class="badge badge-sm bg-danger">Absent</span>
                        @elseif($item->attendance_status === AttendanceStatus::RESCHEDULE->value)
                            <span class="badge badge-sm bg-warning">Reschedule</span>
                        @else
                            <span class="badge badge-sm bg-secondary">{{ $item->attendance_status ?? 'Waiting' }}</span>
                        @endif
                    </td>
                    <td class="text-sm text-center">
                        @if($item->attempt_status === AttemptStatus::SUBMITTED->value)
                            <span class="badge badge-sm bg-info">Finished</span>
                        @elseif($item->attempt_status === AttemptStatus::ON_PROGRESS->value)
                            <span class="badge badge-sm bg-warning">On Progress</span>
                        @elseif($item->exam_status === ExamStatus::ON_PROGRESS->value)
                            <span class="badge badge-sm bg-primary">Running</span>
                        @elseif($item->exam_status === ExamStatus::FINISHED->value)
                            <span class="badge badge-sm bg-danger">Closed</span>
                        @else
                            <span class="badge badge-sm bg-secondary">Waiting</span>
                        @endif
                    </td>
                    <td class="text-sm text-center">
                        @if($item->control_type === ControlType::TIMER->value && $item->exam_status !== ExamStatus::FINISHED->value)
                            <span class="text-xs text-secondary"><i class="fas fa-clock me-1"></i>Timer</span>
                            @if(
                                (
                                    $item->exam_status === ExamStatus::SCHEDULED->value &&
                                    !empty($item->exam_start_time)
                                ) ||
                                (
                                    $item->exam_status === ExamStatus::ON_PROGRESS->value &&
                                    !empty($item->exam_end_time)
                                )
                            )
                            <br>
                                <span class="badge badge-sm bg-danger js-user-table-countdown"
                                      data-exam-id="{{ $item->exam_id }}"
                                      data-mode="{{ $item->exam_status === ExamStatus::SCHEDULED->value ? 'start' : 'end' }}"
                                      data-target-time="{{ \Carbon\Carbon::parse(($item->exam_status === ExamStatus::SCHEDULED->value ? $item->exam_start_time : $item->exam_end_time))->format('Y-m-d H:i:s') }}">
                                    {{ $item->exam_status === ExamStatus::SCHEDULED->value ? 'Mulai: 00:00:00' : 'Sisa: 00:00:00' }}
                                </span>
                            @endif
                        @else
                            <span class="badge badge-sm bg-danger">-</span>
                        @endif
                    </td>
                    <td class="text-sm text-center">
                        @if($item->attempt_status === AttemptStatus::SUBMITTED->value)
                            <a href="{{ url('trsuex/result/' . encrypt($item->exam_id)) }}"
                               class="btn btn-info btn-sm mb-0 px-3">
                                <i class="fas fa-chart-bar me-1"></i> View Result
                            </a>
                        @elseif($item->attendance_status === AttendanceStatus::HADIR->value && $item->exam_status === ExamStatus::ON_PROGRESS->value)
                            <a href="{{ url('trsuex/run/' . encrypt($item->exam_id)) }}"
                               class="btn btn-sm mb-0 px-3 {{ $item->attempt_status === AttemptStatus::ON_PROGRESS->value ? 'btn-warning' : 'btn-primary' }}">
                                @if($item->attempt_status === AttemptStatus::ON_PROGRESS->value)
                                    <i class="fas fa-play me-1"></i> Continue
                                @else
                                    <i class="fas fa-pencil-alt me-1"></i> Start Exam
                                @endif
                            </a>
                        @elseif($item->attendance_status === AttendanceStatus::HADIR->value && $item->exam_status === ExamStatus::SCHEDULED->value)
                            <span class="text-xs text-secondary font-weight-bold">
                                <i class="fas fa-hourglass-half me-1"></i> Waiting to Start
                            </span>
                        @else
                            <button disabled class="btn btn-secondary btn-sm mb-0 px-3">
                                <i class="fas fa-lock me-1"></i> Unavailable
                            </button>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script>
    (function () {
        const trsuexExamTableCountdownUI = {
            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());
            },
            tick() {
                const currentServerMs = this.serverNowAtLoad + (performance.now() - this.perfStart);
                this.nodes.forEach((node) => {
                    const mode = node.getAttribute('data-mode') || 'end';
                    const raw = node.getAttribute('data-target-time') || '';
                    const targetAt = new Date(raw.replace(' ', 'T')).getTime();
                    const examId = node.getAttribute('data-exam-id') || '';
                    const reloadKey = 'trsuex-table-reloaded-' + examId + '-' + raw + '-' + mode;

                    if (!targetAt || Number.isNaN(targetAt)) {
                        node.textContent = mode === 'start' ? 'Mulai: --:--:--' : 'Sisa: --:--:--';
                        return;
                    }

                    const remain = Math.floor((targetAt - currentServerMs) / 1000);
                    const prefix = mode === 'start' ? 'Mulai' : 'Sisa';
                    node.textContent = `${prefix}: ${this.formatHms(remain)}`;

                    if (remain <= 0) {
                        node.classList.remove('bg-danger');
                        node.classList.add('bg-secondary');
                        if (!window.sessionStorage.getItem(reloadKey)) {
                            window.sessionStorage.setItem(reloadKey, '1');
                            this.syncTimerStatus(examId).finally(() => {
                                window.setTimeout(() => this.hardReloadCurrentPage(), 300);
                            });
                        }
                    }
                });
            },
            init() {
                this.nodes = Array.from(document.querySelectorAll('.js-user-table-countdown'));
                if (!this.nodes.length) {
                    return;
                }
                this.tick();
                setInterval(() => this.tick(), 1000);
            }
        };

        window.trsuexExamTableCountdownUI = trsuexExamTableCountdownUI;
        trsuexExamTableCountdownUI.init();
    })();
</script>
    </div>
</div>