{{-- <div class="max-w-xl mx-auto py-10 px-4 sm:px-6 lg:px-8">
    <h1 class="text-2xl font-bold text-center text-blue-700 mb-6">Kuiz Risiko Scam</h1>

    <form wire:submit.prevent="submit">
        @if (isset($questions[$currentStep]))
            <div class="mb-6 p-4 border rounded bg-gray-50">
                <h2 class="font-semibold mb-2">
                    Soalan {{ $currentStep + 1 }} daripada {{ count($questions) }}:
                    {{ $questions[$currentStep]->text }}
                </h2>

                @php
                    $isSelected = $answers[$currentStep] ?? null;
                @endphp

                @foreach ($questions[$currentStep]->answerOptions as $option)
                    @php
                        $isThisOptionSelected = $isSelected == $option->id;
                        $scoreColor = '';

                        if (!is_null($isSelected)) {
                            $scoreColor = match(true) {
                                $option->score == 0 => 'bg-green-100 text-green-800',
                                $option->score >= 3 => 'bg-red-100 text-red-800',
                                default => 'bg-yellow-100 text-yellow-800',
                            };
                        }

                        $selectedClass = $isThisOptionSelected ? 'ring-2 ring-offset-1 ring-blue-500' : '';
                    @endphp

                    <label class="block mb-2 p-2 rounded {{ $scoreColor }} {{ $selectedClass }}" wire:key="option-{{ $questions[$currentStep]->id }}-{{ $option->id }}">
                        <input
                            type="radio"
                            wire:model.lazy="answers.{{ $currentStep }}"
                            name="answers[{{ $currentStep }}]"
                            value="{{ $option->id }}"
                            class="mr-2"
                        >
                        {{ $option->text }}
                    </label>
                @endforeach
            </div>

            @php
                $selectedOption = $questions[$currentStep]->answerOptions->firstWhere('id', $answers[$currentStep] ?? null);
            @endphp

            @if (!is_null($selectedOption))
                <div class="bg-blue-100 text-blue-900 p-4 rounded shadow mb-4">
                    <strong>Tips:</strong>
                    <p>{{ $questions[$currentStep]->tips ?? 'Tiada tips khusus untuk soalan ini.' }}</p>
                </div>
            @endif

            <div class="flex justify-between">
                @if ($currentStep > 0)
                    <button type="button" wire:click="prevStep" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
                        Sebelumnya
                    </button>
                @endif

                @if ($currentStep < count($questions) - 1)
                    <button type="button" wire:click="nextStep" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 ml-auto">
                        Seterusnya
                    </button>
                @else
                    <button type="submit" class="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700 ml-auto">
                        Hantar Jawapan
                    </button>
                @endif
            </div>
        @endif
    </form>
</div> --}}

<div class="max-w-xl mx-auto py-10 px-4 sm:px-6 lg:px-8">
    <h1 class="text-2xl font-bold text-center text-blue-700 mb-6">Kuiz Risiko Scam</h1>

    @guest
        <div class="mb-6 text-center">
            <a href="{{ route('auth.google.redirect') }}" class="inline-block bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700">
                Login dengan Google
            </a>
        </div>
    @endguest

    <form wire:submit.prevent="submit">
        @if (isset($questions[$currentStep]))
            <div class="mb-6 p-4 border rounded bg-gray-50">
                <h2 class="font-semibold mb-2">
                    Soalan {{ $currentStep + 1 }} daripada {{ count($questions) }}:
                    {{ $questions[$currentStep]->text }}
                </h2>

                @php
                    $isSelected = $answers[$currentStep] ?? null;
                @endphp

                @foreach ($questions[$currentStep]->answerOptions as $option)
                    @php
                        $isThisOptionSelected = $isSelected == $option->id;
                        $scoreColor = '';

                        if (!is_null($isSelected)) {
                            $scoreColor = match(true) {
                                $option->score == 0 => 'bg-green-100 text-green-800',
                                $option->score >= 3 => 'bg-red-100 text-red-800',
                                default => 'bg-yellow-100 text-yellow-800',
                            };
                        }

                        $selectedClass = $isThisOptionSelected ? 'ring-2 ring-offset-1 ring-blue-500' : '';
                    @endphp

@php
$selected = isset($answers[$currentStep]) && $answers[$currentStep] == $option->id;
$hasAnswered = isset($answers[$currentStep]);

$scoreColor = $hasAnswered
    ? ($option->score == 0
        ? 'bg-green-100 border-green-500'
        : ($option->score >= 4
            ? 'bg-red-100 border-red-500'
            : 'bg-yellow-100 border-yellow-500'))
    : 'bg-white border-gray-300';

$selectedClass = $selected ? 'ring-2 ring-blue-400' : '';
$cursorClass = $hasAnswered ? 'cursor-not-allowed' : 'cursor-pointer';
@endphp

            <label class="block mb-2 p-2 rounded {{ $scoreColor }} {{ $selectedClass }} {{ $cursorClass }}"
            wire:key="option-{{ $questions[$currentStep]->id }}-{{ $option->id }}">
            <input
                type="radio"
                wire:model.lazy="answers.{{ $currentStep }}"
                name="answers[{{ $currentStep }}]"
                value="{{ $option->id }}"
                class="mr-2"
                @if($hasAnswered) disabled @endif
            >
            {{ $option->text }}
            </label>

                @endforeach
            </div>

            @php
                $selectedOption = $questions[$currentStep]->answerOptions->firstWhere('id', $answers[$currentStep] ?? null);
            @endphp

            @if (!is_null($selectedOption))
                <div class="bg-blue-100 text-blue-900 p-4 rounded shadow mb-4">
                    <strong>Tips:</strong>
                    <p>{{ $questions[$currentStep]->tips ?? 'Tiada tips khusus untuk soalan ini.' }}</p>
                </div>
            @endif

            <div class="flex justify-between">
                @if ($currentStep > 0)
                    <button type="button" wire:click="prevStep" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
                        Sebelumnya
                    </button>
                @endif

                @if ($currentStep < count($questions) - 1)
                    <button wire:click="nextStep"
                            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
                            @disabled(!isset($answers[$currentStep]))>
                        Seterusnya
                    </button>
                @else
                    <button wire:click.prevent="submit"
                            class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"
                            @disabled(!isset($answers[$currentStep]))>
                        Hantar
                    </button>
                @endif
            </div>
        @endif
    </form>
</div>