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

@section('content')
    @include('test.partials.test-styles')

    <style>
        /* DISC Table */
        .disc-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-bottom: 20px;
        }

        .disc-table thead th {
            background: #f8f9fa;
            color: #344767;
            font-weight: 700;
            font-size: 0.8rem;
            padding: 10px 14px;
            text-align: center;
            border-bottom: 2px solid #e9ecef;
        }

        .disc-table thead th:first-child {
            text-align: left;
            border-radius: 8px 0 0 0;
        }

        .disc-table thead th:last-child {
            border-radius: 0 8px 0 0;
        }

        .disc-row {
            transition: background 0.15s;
        }

        .disc-row:hover {
            background: #f8f9fa;
        }

        .disc-row td {
            padding: 12px 14px;
            border-bottom: 1px solid #f1f3f5;
            vertical-align: middle;
        }

        .disc-row td:first-child {
            font-size: 0.87rem;
            color: #344767;
        }

        .disc-num {
            font-weight: 700;
            color: #028284;
            margin-right: 6px;
            font-size: 0.85rem;
        }

        .disc-text {
            font-size: 0.87rem;
            color: #344767;
        }

        .disc-radio-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        .disc-radio {
            width: 20px;
            height: 20px;
            accent-color: #028284;
            cursor: pointer;
        }

        .disc-radio.k-radio {
            accent-color: #e74a3b;
        }

        /* Row selected */
        .disc-row.selected-p {
            background: #f0fafa;
        }

        .disc-row.selected-k {
            background: #fff5f5;
        }

        .disc-row.selected-both {
            background: #f5f0ff;
        }

        .q-block-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 0 8px;
            font-size: 0.92rem;
            font-weight: 700;
            color: #344767;
            border-bottom: 1px solid #f1f3f5;
            margin-bottom: 4px;
        }

        .q-block-num {
            background: #028284;
            color: #fff;
            font-size: 0.8rem;
            font-weight: 700;
            padding: 2px 10px;
            border-radius: 20px;
        }

        .q-answered-badge {
            font-size: 0.75rem;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 20px;
        }

        .q-answered-badge.complete {
            background: #e8f5e9;
            color: #28a745;
            border: 1px solid #c3e6cb;
        }

        .q-answered-badge.partial {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffd679;
        }

        .q-answered-badge.empty {
            background: #f8f9fa;
            color: #67748e;
            border: 1px solid #dee2e6;
        }

        @media (max-width: 768px) {
            .disc-table thead th, .disc-row td { padding: 9px 8px; }
            .disc-text { font-size: 0.82rem; }
        }

        @media (max-width: 576px) {
            .wizard-buttons button { width: 100%; }
        }
    </style>

    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3">
        @include('components.alert')

        <div class="row">
            <div class="col-12">
                @if (!session('test2_code_submitted'))
                    {{-- Rules Test 2 --}}
                    <div class="test-card">
                        <div class="test-card-title">Rules Test 2</div>
                        <div class="row">
                            <div class="col-md-6 rules-col-left">
                                <div class="rules-col-title">Peraturan</div>
                                <ul class="rules-list">
                                    <li>Masing-masing soal terdiri dari 4 pernyataan.</li>
                                    <li>Pilih 1 pernyataan <b>PALING SESUAI</b> dengan diri Anda kemudian centang kolom (P).
                                    </li>
                                    <li>Pilih 1 pernyataan <b>TIDAK SESUAI</b> dengan diri Anda kemudian centang kolom (K).
                                    </li>
                                    <li>Waktu mengerjakan <b>60 menit</b>.</li>
                                </ul>
                            </div>
                            <div class="col-md-6 ps-md-4">
                                <div class="rules-col-title">Cara Mengerjakan</div>
                                <ul class="rules-list">
                                    <li>Setiap soal harus memilih pernyataan yang berbeda. 1 pernyataan untuk kolom (P) dan
                                        1 pernyataan untuk kolom (K).</li>
                                    <li>Progress bar akan bertambah ketika sudah memilih 2 pernyataan.</li>
                                    <li>Tekan <b>Selanjutnya/Sebelumnya</b> untuk navigasi halaman.</li>
                                    <li>Tombol <b>Submit</b> muncul di halaman terakhir.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    {{-- Contoh Soal Test --}}
                    <div class="test-card">
                        <div class="test-card-title">Contoh</div>
                        <img src="{{ asset('/storage/test_example/test2.png') }}" alt="Contoh tampilan soal test"
                            class="img-responsive">
                    </div>

                    <div class="test-card text-center">
                        <div class="test-card-title mb-3">Mulai Tes</div>
                        <p class="text-sm text-muted mb-3">Setelah siap, klik tombol di bawah untuk memulai tes.</p>
                        <form method="POST" action="{{ url('/test2') }}">
                            @csrf
                            <input type="hidden" name="custom_action" value="startTest">
                            <input type="hidden" name="invitation_id" value="{{ $invitation_id ?? '' }}">
                            <button type="submit" class="btn btn-primary" {{ empty($invitation_id) ? 'disabled' : '' }}>
                                <i class="fas fa-play me-1"></i> Mulai Tes
                            </button>
                        </form>
                        @if (empty($invitation_id))
                            <p class="text-danger text-xs mt-2 mb-0">Undangan tes tidak ditemukan. Silakan akses dari
                                halaman Aktivitas Lamaran.</p>
                        @endif
                    </div>
                @else
                    <div class="test-card test-card-quiz">
                        {{-- Header --}}
                        <div class="test-header-top">
                            <div class="d-flex align-items-center gap-2">
                                <div class="test-header-name">{{ $title_menu ?? 'Test 2' }}</div>
                                <span data-bs-toggle="modal" data-bs-target="#hintModal" title="Petunjuk"
                                    class="badge bg-primary cursor-pointer">
                                    <i class="fas fa-question-circle me-1"></i> Petunjuk
                                </span>
                            </div>
                            <div class="test-timer" id="test-timer"
                                data-deadline="{{ isset($testSession) && $testSession->deadline_at ? $testSession->deadline_at->toIso8601String() : '' }}">
                                {{ isset($remainingSeconds) ? sprintf('%02d:%02d:%02d', intdiv(max(0, $remainingSeconds), 3600), intdiv(max(0, $remainingSeconds) % 3600, 60), max(0, $remainingSeconds) % 60) : '01:00:00' }}
                            </div>
                            <div class="test-counter">{{ $currentPage }}/{{ $totalPages }}</div>
                        </div>

                        {{-- Progress Bar --}}
                        <div class="test-progress-container">
                            <div id="test-progress-bar" class="test-progress-bar"
                                style="width:{{ $totalQuestions > 0 ? round((($totalAnswered ?? 0) / $totalQuestions) * 100, 1) : 0 }}%;">
                            </div>
                        </div>

                        {{-- Nav Dots --}}
                        <div class="test-nav-dots-wrap">
                            @for ($p = 1; $p <= $totalPages; $p++)
                                <div class="test-nav-dot {{ $p == $currentPage ? 'active' : (($p < $currentPage && ($pageAnsweredStatus[$p] ?? false)) ? 'answered' : '') }}"
                                    onclick="goToPage({{ $p }})">{{ $p }}</div>
                            @endfor
                        </div>

                        <hr class="test-divider">

                        {{-- Questions Form --}}
                        <form id="test-form" method="GET" action="{{ url('/test2') }}">
                            <input type="hidden" name="halaman" id="input-halaman" value="{{ $currentPage }}">

                            @php
                                $currentTest2 = $test2ItemsWithOptions->first();
                                $optionsDecoded = $currentTest2?->options_decoded ?? [];
                                $letters = ['A', 'B', 'C', 'D'];

                                $groupQuestions = $questions->values();
                                $groupQ = $groupQuestions->first();
                                $groupQId = $groupQ?->id;

                                $existingAnswer = $groupQ
                                    ? \App\Models\ApplicantAnswer::where('test_session_id', $testSession->id)
                                        ->where('question_id', $groupQId)
                                        ->first()
                                    : null;
                                $savedMostIdx = $existingAnswer?->most_option;
                                $savedLeastIdx = $existingAnswer?->least_option;
                            @endphp

                            <div class="q-block-header">
                                <span class="q-block-num">{{ $currentPage }}</span>
                                <span style="font-size:0.9rem;color:#67748e;font-weight:400">Pilih pernyataan yang Paling
                                    Sesuai (P) dan Tidak Sesuai (K)</span>
                            </div>

                            <div class="table-responsive mb-3" id="q-block-main">
                                <table class="disc-table">
                                    <thead>
                                        <tr>
                                            <th>Pernyataan</th>
                                            <th style="width:80px;">P</th>
                                            <th style="width:80px;">K</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody-main">
                                        @foreach ($optionsDecoded as $idx => $option)
                                            @php
                                                $letter = $letters[$idx] ?? chr(65 + $idx);
                                                $text = $option['text'] ?? '-';
                                                $isMost = $savedMostIdx === $idx;
                                                $isLeast = $savedLeastIdx === $idx;
                                                $rowCls = $isMost ? 'selected-p' : ($isLeast ? 'selected-k' : '');
                                            @endphp
                                            <tr class="disc-row {{ $rowCls }}" id="row-{{ $letter }}">
                                                <td>
                                                    <span class="disc-num">{{ $letter }}.</span>
                                                    <span class="disc-text">{{ $text }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <input type="radio" class="disc-radio" name="disc_p"
                                                        value="{{ $idx }}" id="p-{{ $letter }}"
                                                        {{ $isMost ? 'checked' : '' }}
                                                        onchange="selectDisc('P', {{ $idx }})">
                                                </td>
                                                <td class="text-center">
                                                    <input type="radio" class="disc-radio k-radio" name="disc_k"
                                                        value="{{ $idx }}" id="k-{{ $letter }}"
                                                        {{ $isLeast ? 'checked' : '' }}
                                                        onchange="selectDisc('K', {{ $idx }})">
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            {{-- Navigation Buttons --}}
                            <div class="wizard-buttons">
                                <div class="row">
                                    <div class="col-12 d-flex justify-content-between">
                                        <div>
                                            @if ($currentPage > 1)
                                                <button type="button" class="btn btn-secondary"
                                                    onclick="goToPage({{ $currentPage - 1 }})">
                                                    <i class="fas fa-arrow-left"></i> Sebelumnya
                                                </button>
                                            @endif
                                        </div>
                                        <div>
                                            @if ($currentPage < $totalPages)
                                                <button type="button" class="btn btn-primary"
                                                    onclick="goToPage({{ $currentPage + 1 }})">
                                                    Selanjutnya <i class="fas fa-arrow-right"></i>
                                                </button>
                                            @else
                                                <button type="button" class="btn btn-primary" onclick="submitTest()">
                                                    <i class="fas fa-save"></i> Submit Test
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <form id="finish-form" method="POST" action="{{ url('/test2') }}" style="display:none;">
                            @csrf
                            <input type="hidden" name="custom_action" value="finishExam">
                        </form>
                    </div>
                @endif
            </div>
        </div>
    </div>
    @include('test.partials.hint')
@endsection

@push('js')
    @include('test.partials.test-scripts')

    <script>
        @if (session('test2_code_submitted') && isset($groupQId) && isset($existingAnswer))
            const discState = {
                most: {{ (int)($existingAnswer?->most_option) }},
                least: {{ (int)($existingAnswer?->least_option) }}
            };
        @else
            const discState = {
                most: null,
                least: null
            };
        @endif

        const groupQId = {{ $groupQId ?? 'null' }};

        function selectDisc(col, idx) {
            const otherCol = col === 'P' ? 'least' : 'most';
            const currentCol = col === 'P' ? 'most' : 'least';
            const radioName = col === 'P' ? 'disc_p' : 'disc_k';
            const radioId = col.toLowerCase() + '-' + String.fromCharCode(65 + idx);

            if (discState[otherCol] === idx) {
                document.querySelector(`input[name="${radioName}"][value="${idx}"]`).checked = false;
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'warning',
                    title: 'Opsi yang sama tidak boleh dipilih untuk P dan K!',
                    showConfirmButton: false,
                    timer: 2500
                });
                return;
            }

            const oldIdx = discState[currentCol];
            if (oldIdx !== null && oldIdx !== idx) {
                const oldRadioId = col.toLowerCase() + '-' + String.fromCharCode(65 + oldIdx);
                const oldRadio = document.getElementById(oldRadioId);
                if (oldRadio) oldRadio.checked = false;
            }

            discState[currentCol] = idx;
            updateRowHighlight();
            sendDiscAnswer();
        }

        function updateRowHighlight() {
            const mostVal = discState.most;
            const leastVal = discState.least;
            const letters = ['A', 'B', 'C', 'D'];
            letters.forEach((letter, idx) => {
                const row = document.getElementById('row-' + letter);
                if (!row) return;
                row.classList.remove('selected-p', 'selected-k');
                if (mostVal === idx) row.classList.add('selected-p');
                else if (leastVal === idx) row.classList.add('selected-k');
            });
        }

        function sendDiscAnswer() {
            const mostVal = discState.most;
            const leastVal = discState.least;

            if (!navigator.onLine) {
                showOfflineWarning && showOfflineWarning();
                return;
            }

            fetch(testUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        question_id: groupQId,
                        most_option: mostVal,
                        least_option: leastVal,
                        custom_action: 'saveAnswer'
                    })
                })
                .then(r => r.json())
                .then(data => {
                    if (data.success && data.total_answered !== undefined) {
                        const bar = document.getElementById('test-progress-bar');
                        if (bar) {
                            totalAnsweredGlobal = data.total_answered;
                            bar.style.width = ((totalAnsweredGlobal / _totalQ) * 100).toFixed(1) + '%';
                        }
                    }
                    if (!data.success && data.message === 'Waktu habis!') {
                        document.getElementById('finish-form').submit();
                    }
                })
                .catch(() => {
                    showOfflineWarning && showOfflineWarning();
                });
        }
    </script>
@endpush