{{-- trsexm/_partials/data_table.blade.php
    DataTable listing for trsexm.
    Used by: trsexm/list.blade.php
--}}
@php use App\Enums\ExamStatus; @endphp
<style>
    .trsexm-table-wrap {
        overflow: hidden;
        border-radius: 1rem;
    }

    .trsexm-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
    }

    .trsexm-table thead th {
        white-space: nowrap;
        font-size: 0.78rem;
        font-weight: 700;
        padding-top: 0.95rem;
        padding-bottom: 0.95rem;
        text-align: center;
    }

    .trsexm-table tbody td {
        vertical-align: middle;
        font-size: 0.78rem;
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }

    .trsexm-table td:first-child,
    .trsexm-table th:first-child {
        width: 150px;
        white-space: nowrap;
        text-align: center;
    }

    .trsexm-table td:nth-child(2),
    .trsexm-table th:nth-child(2) {
        width: 56px;
        white-space: nowrap;
        text-align: center;
    }

    .trsexm-table td:nth-child(3),
    .trsexm-table th:nth-child(3) {
        width: 180px;
    }

    .trsexm-table td:nth-child(4),
    .trsexm-table th:nth-child(4) {
        width: 100px;
        text-align: center;
    }

    .trsexm-table td:nth-child(5),
    .trsexm-table th:nth-child(5) {
        width: 140px;
    }

    .trsexm-table td:nth-child(6),
    .trsexm-table th:nth-child(6) {
        width: 92px;
        text-align: center;
        white-space: nowrap;
    }

    .trsexm-table td:nth-child(7),
    .trsexm-table th:nth-child(7) {
        width: 112px;
        text-align: center;
    }

    .trsexm-table td:nth-child(8),
    .trsexm-table th:nth-child(8) {
        width: 90px;
        text-align: center;
    }

    .trsexm-table td:nth-child(9),
    .trsexm-table th:nth-child(9) {
        width: 170px;
    }

    tr.row-today {
        background-color: #e6fafb !important;
        border-left: 3px solid #00b7bd;
    }
    tr.row-today td:first-child {
        border-left: 3px solid #00b7bd;
    }
    tr.row-today.row-progress {
        background-color: #fff8e1 !important;
        border-left: 3px solid #ffc107;
    }
    tr.row-today.row-progress td:first-child {
        border-left: 3px solid #ffc107;
    }
    tr.row-past {
        background-color: #ffffff !important;
        border-left: 3px solid #dc3545;
    }
    tr.row-past td:first-child {
        border-left: 3px solid #dc3545;
    }
    tr.row-past td {
        color: #333;
    }

    .trsexm-action-btn {
        min-width: 112px;
        justify-content: center;
    }

    .trsexm-status-badge {
        min-width: 82px;
        text-align: center;
    }

    .trsexm-cell-ellipsis {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .trsexm-cell-center {
        text-align: center;
    }

    .trsexm-cell-right {
        text-align: right;
    }
</style>
<div class="row px-4 py-2 mt-3">
    <div class="table-responsive">
        <table class="table align-middle display trsexm-table" id="list_exam">
            <thead class="thead-light" style="background-color: #00b7bd4f;">
                <tr>
                    <th>Action</th>
                    <th>No</th>
                    <th class="text-start">Training Name</th>
                    <th>Test Type</th>
                    <th class="text-start">Schedule</th>
                    <th>TRN ID</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Absent</th>
                    <th class="text-start">Bank Question</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($table_detail as $i => $item)
                    @php
                        $rowClass = '';
                        if ($item->is_past) {
                            $rowClass = 'row-past';
                        } elseif ($item->is_today) {
                            $rowClass = 'row-today';
                            if ($item->status == ExamStatus::ON_PROGRESS->value) {
                                $rowClass .= ' row-progress';
                            }
                        }
                    @endphp
                    <tr class="{{ $rowClass }} hover-light">
                        <td class="text-sm">
                            @if (!empty($item->is_locked_due_to_past))
                                <button class="btn btn-secondary btn-sm mb-0 px-3 d-flex align-items-center gap-1 trsexm-action-btn" disabled
                                    title="Schedule sudah lewat. Ubah jadwal di TRN untuk membuka action.">
                                    <i class="fas fa-lock me-1"></i> Locked
                                </button>
                            @elseif ($item->action_label == 'Progress')
                                <button class="btn btn-warning btn-sm mb-0 px-3 d-flex align-items-center gap-1 trsexm-action-btn"
                                    onclick="window.location='{{ url($url_menu . '/manage/' . encrypt($item->id)) }}'">
                                    <i class="fas fa-spinner fa-spin me-1"></i>
                                    {{ $item->action_label }}
                                </button>
                            @elseif($item->action_label == 'Setting')
                                @if (!$item->is_absen)
                                    <button class="btn btn-danger btn-sm mb-0 px-3 d-flex align-items-center gap-1 trsexm-action-btn"
                                        onclick="window.location='{{ url('trsatd') . '?open_schedule=' . $item->schedule_id . '&redirect_back=trsexm' }}'">
                                        <i class="fas fa-clipboard-check me-1"></i> Attendance
                                    </button>
                                @else
                                    <button class="btn btn-primary btn-sm mb-0 px-3 d-flex align-items-center gap-1 trsexm-action-btn"
                                        onclick="window.location='{{ url($url_menu . '/manage/' . encrypt($item->id)) }}'">
                                        <i class="fas fa-cog me-1"></i> {{ $item->action_label }}
                                    </button>
                                @endif
                            @elseif($item->action_label == 'Detail')
                                <button class="btn btn-info btn-sm mb-0 px-3 d-flex align-items-center gap-1 trsexm-action-btn"
                                    onclick="window.location='{{ url($url_menu . '/manage/' . encrypt($item->id)) }}'">
                                    <i class="fas fa-eye me-1"></i> {{ $item->action_label }}
                                </button>
                            @endif
                        </td>
                        <td class="text-sm">{{ $i + 1 }}</td>
                        <td class="text-sm font-weight-bold">
                            <span class="trsexm-cell-ellipsis" title="{{ $item->training_name }}">{{ $item->training_name }}</span>
                        </td>
                        <td class="text-sm text-center">
                            @php $testType = \App\Enums\TestType::tryFrom($item->test_type); @endphp
                            @if ($testType)
                                <span class="badge badge-sm {{ $testType->badgeClass() }} trsexm-status-badge">{{ $testType->label() }}</span>
                            @else
                                -
                            @endif
                        </td>
                        <td class="text-sm">
                            <span class="trsexm-cell-ellipsis" title="{{ $item->schedule }}">{{ $item->schedule }}</span>
                            @if($item->is_today)
                                <span class="badge badge-sm ms-1"
                                      style="background:{{ $item->status == ExamStatus::ON_PROGRESS->value ? '#ffc107' : '#00b7bd' }};color:#fff;font-size:.65rem;">
                                    <i class="fas fa-bolt me-1"></i>Today
                                </span>
                            @endif
                        </td>
                        <td class="text-sm">{{ $item->trn_id }}</td>
                        <td class="text-sm text-center">
                            @if (!empty($item->is_locked_due_to_past))
                                <span class="badge badge-sm bg-dark trsexm-status-badge">Locked</span>
                            @elseif ($item->status == ExamStatus::ON_PROGRESS->value)
                                <span class="badge badge-sm bg-warning trsexm-status-badge">Progress</span>
                            @elseif($item->status == ExamStatus::SCHEDULED->value)
                                <span class="badge badge-sm bg-secondary trsexm-status-badge">Scheduled</span>
                            @elseif($item->status == ExamStatus::FINISHED->value)
                                <span class="badge badge-sm bg-success trsexm-status-badge">Complete</span>
                            @endif
                            @if (
                                empty($item->is_locked_due_to_past) &&
                                ($item->control_type ?? null) === 'TIMER' &&
                                (
                                    (
                                        ($item->status ?? null) === ExamStatus::SCHEDULED->value &&
                                        !empty($item->start_time_full)
                                    ) ||
                                    (
                                        ($item->status ?? null) === ExamStatus::ON_PROGRESS->value &&
                                        !empty($item->end_time_full)
                                    )
                                )
                            )
                                <br>
                                <span class="badge badge-sm bg-danger js-admin-table-countdown"
                                      data-mode="{{ ($item->status ?? null) === ExamStatus::SCHEDULED->value ? 'start' : 'end' }}"
                                      data-target-time="{{ ($item->status ?? null) === ExamStatus::SCHEDULED->value ? $item->start_time_full : $item->end_time_full }}">
                                    {{ ($item->status ?? null) === ExamStatus::SCHEDULED->value ? 'Starts: 0d 00:00:00' : 'Remaining: 0d 00:00:00' }}
                                </span>
                            @endif
                        </td>
                        <td class="text-sm text-center">
                            @if ($item->absent != '-')
                                <span class="badge badge-sm bg-danger">{{ $item->absent }}</span>
                            @else
                                -
                            @endif
                        </td>
                        <td class="text-sm">
                            <span class="trsexm-cell-ellipsis" title="{{ $item->bank_question_title }}">{{ $item->bank_question_title }}</span>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script>
    (function () {
        const trsexmListCountdownUI = {
            nodes: [],
            syncUrl: '{{ route('trsexm.live_status') }}',
            reloadTriggered: false,
            serverNowAtLoad: {{ now()->getTimestampMs() }},
            perfStart: performance.now(),

            formatDhms(totalSeconds) {
                const sec = Math.max(0, totalSeconds);
                const dd = Math.floor(sec / 86400);
                const hh = String(Math.floor((sec % 86400) / 3600)).padStart(2, '0');
                const mm = String(Math.floor((sec % 3600) / 60)).padStart(2, '0');
                const ss = String(sec % 60).padStart(2, '0');
                if (dd > 0) {
                    return `${dd}d ${hh}:${mm}:${ss}`;
                }
                return `${hh}:${mm}:${ss}`;
            },

            // Trigger server-side autoProcessTimerExams dengan dummy sync call
            triggerServerSync() {
                return fetch(this.syncUrl + '?exam_id=0', {
                    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);
                let hasEndTimerExpired = false;

                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();

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

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

                    if (remain <= 0) {
                        node.classList.remove('bg-danger');
                        node.classList.add('bg-secondary');
                        
                        // Jika ini adalah timer END (exam selesai), tandai untuk reload
                        if (mode === 'end' && !this.reloadTriggered) {
                            hasEndTimerExpired = true;
                        }
                    }
                });

                // Auto-reload saat ada timer END yang habis
                if (hasEndTimerExpired && !this.reloadTriggered) {
                    this.reloadTriggered = true;
                    console.log('[trsexmTable] Timer END habis, trigger server sync...');
                    
                    // Panggil server untuk trigger autoProcessTimerExams
                    this.triggerServerSync().finally(() => {
                        console.log('[trsexmTable] Auto-refresh dalam 2 detik...');
                        window.setTimeout(() => this.hardReloadCurrentPage(), 2000);
                    });
                }
            },

            init() {
                this.nodes = Array.from(document.querySelectorAll('.js-admin-table-countdown'));
                if (!this.nodes.length) {
                    return;
                }
                this.tick();
                setInterval(() => this.tick(), 1000);
            }
        };

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