@php use App\Enums\ControlType; @endphp

{{-- Hidden Forms for Exam Actions --}}
<form method="POST" action="{{ route('trsexm.action') }}" id="form-action" style="display:none">
    @csrf
    <input type="hidden" name="exam_id" value="{{ $exam_id_encrypted }}">
    <input type="hidden" name="type" id="action-type" value="">
    <input type="hidden" name="control_type" id="action-control-type" value="MANUAL">
    <input type="hidden" name="start_time" id="action-start-time" value="">
    <input type="hidden" name="end_time" id="action-end-time" value="">
</form>

<script>
    // ====================== LIVE POLLING ======================
    const EXAM_ID = {{ $exam->id ?? 0 }};
    const LIVE_URL = '{{ route('trsexm.live_status') }}';
    const EXAM_STATUS = '{{ $exam->status }}';
    const CONTROL_TYPE = '{{ $exam->control_type }}';
    const IS_LOCKED_DUE_TO_PAST = {{ !empty($exam->is_locked_due_to_past) ? 'true' : 'false' }};
    const START_TIME_FULL = '{{ $exam->start_time_full ?? '' }}';
    const END_TIME_FULL = '{{ $exam->end_time_full ?? '' }}';
    const ACTUAL_STARTED_AT = '{{ $exam->actual_started_at ?? '' }}';
    const HAS_TIMER_SET = {{ !empty($exam->start_time) && !empty($exam->end_time) ? 'true' : 'false' }};
    const CURRENT_TIME_HHMM = '{{ now()->format('H:i') }}';
    let pollingInterval = null;
    let participantCurrentPage = 1;
    let participantRowsPerPage = 10;
    let participantKeyword = '';

    function formatSecondsToHms(totalSeconds) {
        const s = Math.max(0, Math.floor(totalSeconds));
        const hh = String(Math.floor(s / 3600)).padStart(2, '0');
        const mm = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
        const ss = String(s % 60).padStart(2, '0');
        return `${hh}:${mm}:${ss}`;
    }

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

    function hardReloadCurrentPage() {
        const url = new URL(window.location.href);
        url.searchParams.set('_ts', Date.now().toString());
        window.location.replace(url.toString());
    }

    function syncTimerStatus(examId) {
        if (!examId) {
            return Promise.resolve();
        }

        return fetch(LIVE_URL + '?exam_id=' + encodeURIComponent(examId), {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        }).catch(() => null);
    }

    function applyTimerTimeBounds() {
        const startInput = document.querySelector('input[name="start_time"]');
        const endInput = document.querySelector('input[name="end_time"]');

        if (startInput) {
            startInput.min = CURRENT_TIME_HHMM;
        }

        if (endInput) {
            endInput.min = (startInput && startInput.value) ? startInput.value : CURRENT_TIME_HHMM;
        }
    }

    async function resolveCurrentTime(fallbackServerMs) {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 2500);

        try {
            const cacheBuster = Date.now() + '_' + Math.floor(Math.random() * 100000);
            const response = await fetch('https://timeapi.io/api/time/current/zone?timeZone=Asia/Jakarta&_cb=' + cacheBuster, {
                method: 'GET',
                cache: 'no-store',
                headers: {
                    'Cache-Control': 'no-cache, no-store, must-revalidate',
                    'Pragma': 'no-cache'
                },
                signal: controller.signal
            });
            clearTimeout(timeoutId);
            if (response.ok) {
                const data = await response.json();
                if (data && data.dateTime) {
                    const apiMs = new Date(data.dateTime).getTime();
                    if (!Number.isNaN(apiMs) && apiMs > 0) {
                        return apiMs;
                    }
                }
            }
        } catch (e) {
            // Fallback ke jam server internal Laravel jika offline / API timeout
        }
        return fallbackServerMs;
    }

    function startGlobalSessionTimer() {
        const timerDisplay = document.getElementById('timerDisplay');
        if (!timerDisplay) return;

        timerDisplay.innerHTML =
            '<span class="text-xs text-muted font-weight-normal"><i class="fas fa-spinner fa-spin me-1"></i> Syncing...</span>';

        const fallbackServerNowMs = {{ now()->getTimestampMs() }};

        resolveCurrentTime(fallbackServerNowMs).then((serverNowAtLoad) => {
            const perfStart = performance.now();

            // Mode MANUAL: stopwatch hitung maju dari actual_started_at.
            if (CONTROL_TYPE !== 'TIMER') {
                if (EXAM_STATUS === 'ON_PROGRESS' && ACTUAL_STARTED_AT) {
                    const startAt = new Date(ACTUAL_STARTED_AT.replace(' ', 'T')).getTime();
                    const initialElapsed = Math.max(0, Math.floor((serverNowAtLoad - startAt) / 1000));
                    const tick = () => {
                        const elapsed = initialElapsed + Math.floor((performance.now() - perfStart) / 1000);
                        timerDisplay.textContent = formatSecondsToHms(elapsed);
                    };
                    tick();
                    setInterval(tick, 1000);
                } else {
                    timerDisplay.textContent = '00:00:00';
                }
                return;
            }

            const startAt = START_TIME_FULL ? new Date(START_TIME_FULL.replace(' ', 'T')).getTime() : null;
            const endAt = END_TIME_FULL ? new Date(END_TIME_FULL.replace(' ', 'T')).getTime() : null;

            if (!endAt || Number.isNaN(endAt)) {
                timerDisplay.textContent = '00:00:00';
                return;
            }

            const tick = () => {
                const currentServerMs = serverNowAtLoad + (performance.now() - perfStart);
                let remainingSec = 0;
                const reloadKey = 'trsexm-auto-reload-' + EXAM_ID + '-' + (START_TIME_FULL ||
                    END_TIME_FULL || 'none');

                if (EXAM_STATUS === 'FINISHED') {
                    remainingSec = 0;
                } else if (EXAM_STATUS === 'SCHEDULED' && startAt && currentServerMs < startAt) {
                    // Sebelum mulai: countdown menuju start time.
                    remainingSec = Math.floor((startAt - currentServerMs) / 1000);
                } else {
                    // Saat berjalan / scheduler belum update status: countdown ke end time.
                    remainingSec = Math.floor((endAt - currentServerMs) / 1000);
                }

                timerDisplay.textContent = formatSecondsToDhms(remainingSec);

                if (EXAM_STATUS === 'SCHEDULED' && startAt && currentServerMs >= startAt && !window
                    .sessionStorage.getItem(reloadKey)) {
                    window.sessionStorage.setItem(reloadKey, '1');
                    syncTimerStatus(EXAM_ID).finally(() => hardReloadCurrentPage());
                }
            };

            tick();
            setInterval(tick, 1000);
        });
    }

    function statusBadgeHtml(status) {
        if (status === 'progress') {
            return '<span class="badge badge-sm border-0 font-weight-bolder py-2 px-3 bg-soft-warning text-warning border-radius-pill text-uppercase" style="font-size:0.55rem"><i class="fas fa-spinner fa-spin me-1"></i> Working</span>';
        } else if (status === 'submitted') {
            return '<span class="badge badge-sm border-0 font-weight-bolder py-2 px-3 bg-soft-success text-success border-radius-pill text-uppercase" style="font-size:0.55rem"><i class="fas fa-check-circle me-1"></i> Ready</span>';
        } else {
            return '<span class="badge badge-sm border-0 font-weight-bolder py-2 px-3 bg-soft-secondary text-secondary border-radius-pill text-uppercase" style="font-size:0.55rem">Idle</span>';
        }
    }

    function fetchLiveStatus() {
        fetch(LIVE_URL + '?exam_id=' + EXAM_ID, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(r => r.json())
            .then(data => {
                if (!data.success) return;

                const bar = document.getElementById('mainProgressBar');
                const lbl = document.getElementById('progressLabel');
                if (bar) bar.style.width = data.progress_pct + '%';
                if (lbl) lbl.textContent = data.progress_pct + '% (' + data.submitted + '/' + data.total + ')';

                const mc = document.getElementById('modalProgressCount');
                const ms = document.getElementById('modalSubmittedCount');
                const mu = document.getElementById('modalUnstartedCount');
                if (mc) mc.textContent = data.on_progress;
                if (ms) ms.textContent = data.submitted;
                if (mu) mu.textContent = data.unstarted;

                data.participants.forEach(p => {
                    const row = document.querySelector('#participantTableBody tr[data-nik="' + p.nik +
                    '"]');
                    if (!row) return;

                    const stateCell = row.querySelector('.p-state');
                    if (stateCell) stateCell.innerHTML = statusBadgeHtml(p.status);

                    const ansText = row.querySelector('.answered-text');
                    const ansBar = row.querySelector('.answered-bar');
                    if (ansText) ansText.textContent = p.answered + '/' + p.total_soal;
                    if (ansBar && p.total_soal > 0) ansBar.style.width = Math.round(p.answered / p
                        .total_soal * 100) + '%';

                    const startedVal = row.querySelector('.started-at-val');
                    const submittedVal = row.querySelector('.submitted-at-val');
                    if (startedVal) startedVal.textContent = p.started_at;
                    if (submittedVal) submittedVal.textContent = p.submitted_at;

                    const durVal = row.querySelector('.duration-val');
                    if (durVal) durVal.textContent = p.duration;
                });

                const lul = document.getElementById('lastUpdateLabel');
                if (lul) {
                    const now = new Date();
                    const hh = String(now.getHours()).padStart(2, '0');
                    const mm = String(now.getMinutes()).padStart(2, '0');
                    const ss = String(now.getSeconds()).padStart(2, '0');
                    lul.innerHTML = '<i class="fas fa-sync-alt me-1"></i> Updated ' + hh + ':' + mm + ':' + ss;
                }
            })
            .catch(() => {
                const lul = document.getElementById('lastUpdateLabel');
                if (lul) lul.innerHTML =
                    '<i class="fas fa-exclamation-triangle me-1 text-warning"></i> Reconnecting...';
            });
    }

    if (EXAM_STATUS === 'ON_PROGRESS') {
        fetchLiveStatus();
        pollingInterval = setInterval(fetchLiveStatus, 5000);
    }

    function getFilteredParticipantRows() {
        const rows = Array.from(document.querySelectorAll('#participantTableBody tr'));
        if (!participantKeyword) return rows;
        return rows.filter(row => {
            const name = row.dataset.name || '';
            const nik = (row.dataset.nik || '').toLowerCase();
            return name.includes(participantKeyword) || nik.includes(participantKeyword);
        });
    }

    function buildParticipantPagination(totalPages) {
        const container = document.getElementById('participantPagination');
        if (!container) return;

        if (totalPages <= 1) {
            container.innerHTML = '';
            return;
        }

        let buttons = '';
        const startPage = Math.max(1, participantCurrentPage - 2);
        const endPage = Math.min(totalPages, startPage + 4);
        const finalStart = Math.max(1, endPage - 4);

        buttons +=
            `<button type="button" class="btn btn-sm ${participantCurrentPage === 1 ? 'btn-light disabled' : 'btn-outline-secondary'} mb-0" onclick="goToParticipantPage(${participantCurrentPage - 1})">Prev</button>`;

        for (let p = finalStart; p <= endPage; p++) {
            buttons +=
                `<button type="button" class="btn btn-sm ${p === participantCurrentPage ? 'btn-primary' : 'btn-outline-secondary'} mb-0" onclick="goToParticipantPage(${p})">${p}</button>`;
        }

        buttons +=
            `<button type="button" class="btn btn-sm ${participantCurrentPage === totalPages ? 'btn-light disabled' : 'btn-outline-secondary'} mb-0" onclick="goToParticipantPage(${participantCurrentPage + 1})">Next</button>`;
        container.innerHTML = buttons;
    }

    function renderParticipantPagination() {
        const allRows = Array.from(document.querySelectorAll('#participantTableBody tr'));
        const filteredRows = getFilteredParticipantRows();
        const totalFiltered = filteredRows.length;
        const totalPages = Math.max(1, Math.ceil(totalFiltered / participantRowsPerPage));

        if (participantCurrentPage > totalPages) {
            participantCurrentPage = totalPages;
        }

        const start = (participantCurrentPage - 1) * participantRowsPerPage;
        const end = start + participantRowsPerPage;
        const pageRows = filteredRows.slice(start, end);
        const pageSet = new Set(pageRows);

        allRows.forEach(row => {
            row.style.display = pageSet.has(row) ? '' : 'none';
        });

        const info = document.getElementById('participantPageInfo');
        if (info) {
            if (totalFiltered === 0) {
                info.textContent = '0 of 0';
            } else {
                info.textContent = `${start + 1}-${Math.min(end, totalFiltered)} of ${totalFiltered}`;
            }
        }

        buildParticipantPagination(totalPages);
    }

    function goToParticipantPage(page) {
        const filteredRows = getFilteredParticipantRows();
        const totalPages = Math.max(1, Math.ceil(filteredRows.length / participantRowsPerPage));
        participantCurrentPage = Math.min(Math.max(1, page), totalPages);
        renderParticipantPagination();
    }

    function changeParticipantRowsPerPage(value) {
        participantRowsPerPage = Math.max(1, parseInt(value, 10) || 10);
        participantCurrentPage = 1;
        renderParticipantPagination();
    }

    function filterParticipants(keyword) {
        participantKeyword = (keyword || '').toLowerCase().trim();
        participantCurrentPage = 1;
        renderParticipantPagination();
    }
    // ====================== END LIVE POLLING ======================

    function toggleTimerMode(mode) {
        const autoSettings = document.getElementById('autoTimerSettings');
        const manualInfo = document.getElementById('manualInfo');
        const btnManual = document.getElementById('btnGroupManual');
        const btnAuto = document.getElementById('btnGroupAuto');

        if (mode === 'auto') {
            if (autoSettings) autoSettings.classList.remove('d-none');
            if (manualInfo) manualInfo.classList.add('d-none');
            if (btnManual) btnManual.classList.add('d-none');
            if (btnAuto) btnAuto.classList.remove('d-none');
            document.getElementById('action-control-type').value = 'TIMER';
        } else {
            if (autoSettings) autoSettings.classList.add('d-none');
            if (manualInfo) manualInfo.classList.remove('d-none');
            if (btnManual) btnManual.classList.remove('d-none');
            if (btnAuto) btnAuto.classList.add('d-none');
            document.getElementById('action-control-type').value = 'MANUAL';
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        trsexmManageUI.init();
    });

    function handleAction(type) {
        if (IS_LOCKED_DUE_TO_PAST && ['start', 'save_timer', 'cancel_timer', 'stop'].includes(type)) {
            Swal.fire({
                icon: 'warning',
                title: 'Action terkunci',
                text: 'Schedule ujian sudah lewat. Ubah schedule di TRN terlebih dahulu untuk membuka action.'
            });
            return;
        }

        let title = 'Confirmation';
        let text = '';
        let confirmBtnColor = '#5e72e4';

        if (type === 'start') {
            text = 'Pelaksanaan ujian akan segera dimulai. Semua peserta yang hadir bisa mengakses ujian.';
            confirmBtnColor = '#2dce89';
        } else if (type === 'stop') {
            text =
                'Ujian akan dihentikan untuk semua peserta sekarang juga. Jawaban yang belum disubmit akan di-submit otomatis.';
            confirmBtnColor = '#f5365c';
        } else if (type === 'save_timer') {
            if (HAS_TIMER_SET) {
                Swal.fire({
                    icon: 'info',
                    title: 'Auto Timer sudah aktif',
                    text: 'Tidak bisa set ulang. Batalkan Auto Timer dulu untuk mengubah waktu.'
                });
                return;
            }

            type = 'configure';
            text = 'Pengaturan waktu otomatis akan disimpan dan diaktivasi.';
            confirmBtnColor = '#344767';
            const sTime = document.querySelector('input[name="start_time"]')?.value ?? '';
            const eTime = document.querySelector('input[name="end_time"]')?.value ?? '';

            if (!sTime || !eTime) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Waktu belum lengkap',
                    text: 'Start time dan end time wajib diisi untuk Auto Timer.'
                });
                return;
            }
            if (sTime < CURRENT_TIME_HHMM) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Start time tidak valid',
                    text: 'Start time tidak boleh lebih kecil dari jam sekarang.'
                });
                return;
            }
            if (eTime <= sTime) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Rentang waktu tidak valid',
                    text: 'End time harus lebih besar dari start time.'
                });
                return;
            }

            document.getElementById('action-control-type').value = 'TIMER';
            document.getElementById('action-start-time').value = sTime;
            document.getElementById('action-end-time').value = eTime;
        } else if (type === 'cancel_timer') {
            type = 'configure';
            text = HAS_TIMER_SET ?
                'Auto timer akan dibatalkan. Exam kembali ke mode manual dan bisa disetting ulang kapan saja.' :
                'Mode tetap manual. Anda bisa set ulang Auto Timer kapan saja.';
            confirmBtnColor = '#f5365c';
            document.getElementById('action-control-type').value = 'MANUAL';
            document.getElementById('action-start-time').value = '';
            document.getElementById('action-end-time').value = '';
        }

        Swal.fire({
            title: title,
            text: text,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: confirmBtnColor,
            cancelButtonColor: '#adb5bd',
            confirmButtonText: 'Ya, Lanjutkan'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('action-type').value = type;
                document.getElementById('form-action').submit();
            }
        });
    }

    const trsexmManageUI = {
        formatSecondsToHms,
        formatSecondsToDhms,
        hardReloadCurrentPage,
        syncTimerStatus,
        applyTimerTimeBounds,
        startGlobalSessionTimer,
        fetchLiveStatus,
        renderParticipantPagination,
        goToParticipantPage,
        changeParticipantRowsPerPage,
        filterParticipants,
        toggleTimerMode,
        handleAction,
        bindEvents() {
            const tabManual = document.getElementById('tabManual');
            const tabAuto = document.getElementById('tabAuto');
            if (tabManual) {
                tabManual.addEventListener('click', function(e) {
                    e.preventDefault();
                    trsexmManageUI.toggleTimerMode('manual');
                });
            }
            if (tabAuto) {
                tabAuto.addEventListener('click', function(e) {
                    e.preventDefault();
                    trsexmManageUI.toggleTimerMode('auto');
                });
            }

            document.addEventListener('input', function(event) {
                if (event.target && event.target.name === 'start_time') {
                    trsexmManageUI.applyTimerTimeBounds();
                }
            });
        },
        init() {
            this.startGlobalSessionTimer();
            this.renderParticipantPagination();
            this.applyTimerTimeBounds();
            this.bindEvents();
            // Default view selalu Manual saat halaman dibuka/refresh.
            this.toggleTimerMode('manual');
        }
    };

    window.trsexmManageUI = trsexmManageUI;
    // Backward compatibility for existing inline handlers.
    window.goToParticipantPage = function(page) {
        return trsexmManageUI.goToParticipantPage(page);
    };
    window.changeParticipantRowsPerPage = function(value) {
        return trsexmManageUI.changeParticipantRowsPerPage(value);
    };
    window.filterParticipants = function(keyword) {
        return trsexmManageUI.filterParticipants(keyword);
    };
    window.toggleTimerMode = function(mode) {
        return trsexmManageUI.toggleTimerMode(mode);
    };
    window.handleAction = function(type) {
        return trsexmManageUI.handleAction(type);
    };
</script>