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

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

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

    <style>
        .question-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
            margin-top: 8px;
            padding: 0 4px;
        }

        .q-number {
            font-size: 0.9rem;
            font-weight: 700;
            color: #344767;
            width: 28px;
            text-align: right;
            flex-shrink: 0;
        }

        .q-options {
            display: flex;
            gap: 12px;
            flex: 1;
        }

        .option-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1.5px solid #dee2e6;
            border-radius: 50px;
            padding: 9px 18px;
            cursor: pointer;
            flex: 1;
            font-size: 0.85rem;
            color: #344767;
            transition: all 0.2s;
            user-select: none;
        }

        .option-pill:hover {
            border-color: #028284;
            background: #f0f9f9;
        }

        .option-pill input[type="radio"] {
            accent-color: #028284;
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            cursor: pointer;
        }

        .option-pill.selected {
            border-color: #028284;
            background: #e8f7f7;
            color: #028284;
            font-weight: 600;
        }

        .wizard-buttons {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #dee2e6;
        }

        @media (max-width: 768px) {
            .question-row {
                align-items: flex-start;
                gap: 12px;
            }

            .q-number {
                margin-top: 10px;
            }

            .q-options {
                flex-direction: column;
                gap: 8px;
            }

            .option-pill {
                border-radius: 20px;
            }
        }

        @media (max-width: 576px) {
            .test-header-top {
                gap: 10px;
            }
        }
    </style>

    <div class="container-fluid py-3">
        @include('components.alert')
        <div class="row">
            <div class="col-12">
                @if (!session('test1_code_submitted'))
                    {{-- Rules --}}
                    <div class="test-card">
                        <div class="test-card-title">Rules Test 1</div>
                        <div class="row">
                            <div class="col-md-6 rules-col-left">
                                <div class="rules-col-title">Peraturan</div>
                                <ul class="rules-list">
                                    <li>Pada test ini terdapat 90 soal.</li>
                                    <li>Masing-masing soal terdiri dari 2 pernyataan.</li>
                                    <li>Silahkan pilih 1 pernyataan yang <b>PALING SESUAI</b> dengan diri anda!</li>
                                    <li>Waktu mengerjakan adalah 45 menit.</li>
                                </ul>
                            </div>
                            <div class="col-md-6 ps-md-4">
                                <div class="rules-col-title">Cara Mengerjakan</div>
                                <ul class="rules-list">
                                    <li>Masukkan kode tes pada modal dari halaman Aktivitas Lamaran.</li>
                                    <li>Setiap soal hanya bisa memilih satu pernyataan.</li>
                                    <li>Ketika sudah memilih salah satu pernyataan, progress bar akan bertambah.</li>
                                    <li>Tekan tombol Next untuk ke halaman selanjutnya atau tekan tombol Previous untuk
                                        kembali ke halaman sebelumnya.</li>
                                    <li>Jika sudah menjawab seluruh soal, tombol Submit otomatis akan muncul pada 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/test1.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('/test1') }}">
                            @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 Row --}}
                        <div class="test-header-top">
                            <div class="d-flex align-items-center gap-2">
                                <div class="test-header-name">{{ $title_menu ?? 'Test 1' }}</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) : '00:45:00' }}
                            </div>
                            <div class="test-counter">{{ $startNum }}/{{ $totalQuestions }}</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>

                        {{-- Navigation 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('/test1') }}">
                            <input type="hidden" name="halaman" id="input-halaman" value="{{ $currentPage }}">

                            @foreach ($questions as $index => $q)
                                @php
                                    $qNum = $startNum + $index;
                                    $detail = $q->detail;

                                    $hasAnswer = \App\Models\ApplicantAnswer::where('test_session_id', $testSession->id)
                                        ->where('question_id', $q->id)
                                        ->first();
                                    $currentAnswer = $hasAnswer ? $hasAnswer->answer : null;
                                @endphp
                                <div class="question-row" id="question-row-{{ $q->id }}">
                                    <span class="q-number">{{ $qNum }}.</span>
                                    <div class="q-options">
                                        <label class="option-pill {{ $currentAnswer === '1' ? 'selected' : '' }}"
                                            id="pill-{{ $q->id }}-1">
                                            <input type="radio" name="answers[{{ $q->id }}]" value="1"
                                                {{ $currentAnswer === '1' ? 'checked' : '' }}
                                                onchange="selectOption({{ $q->id }}, '1', {{ $index + 1 }})">
                                            {{ $detail->option1 }}
                                        </label>

                                        <label class="option-pill {{ $currentAnswer === '2' ? 'selected' : '' }}"
                                            id="pill-{{ $q->id }}-2">
                                            <input type="radio" name="answers[{{ $q->id }}]" value="2"
                                                {{ $currentAnswer === '2' ? 'checked' : '' }}
                                                onchange="selectOption({{ $q->id }}, '2', {{ $index + 1 }})">
                                            {{ $detail->option2 }}
                                        </label>
                                    </div>
                                </div>
                            @endforeach

                            {{-- 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('/test1') }}" 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')
@endpush