@php
$hasRows = $data->isNotEmpty();

$cleanText = fn ($value) => Str::of(strip_tags((string) $value))->squish();

$optionsFor = function ($question) {
return collect(is_array($question->content) ? $question->content : [])
->filter(fn ($option) => is_array($option) && filled(data_get($option, 'text')))
->values();
};

$answerFor = function ($question) use ($cleanText) {
$content = is_array($question->content) ? $question->content : [];
$answer = data_get($content, 'answer')
?? data_get($content, 'answers')
?? data_get($content, 'correct_answer')
?? data_get($content, 'correctAnswer');

if (is_array($answer)) {
$answer = collect($answer)->filter(fn ($value) => filled($value))->implode(', ');
}

return filled($answer) ? $cleanText($answer) : 'N/A';
};

$hintFor = function ($question) use ($cleanText) {
$content = is_array($question->content) ? $question->content : [];
$hint = data_get($content, 'hint') ?? data_get($content, 'hints');

if (is_array($hint)) {
$hint = collect($hint)->filter(fn ($value) => filled($value))->implode(', ');
}

return filled($hint) ? $cleanText($hint) : null;
};

$hasFillMeta = function ($question) {
$content = is_array($question->content) ? $question->content : [];

return filled(data_get($content, 'answer'))
|| filled(data_get($content, 'answers'))
|| filled(data_get($content, 'correct_answer'))
|| filled(data_get($content, 'correctAnswer'))
|| filled(data_get($content, 'hint'))
|| filled(data_get($content, 'hints'));
};

$isMultiChoice = fn ($question) => Str::contains((string) $question->type, ['multi', 'checkbox']);
$isSingleChoice = fn ($question) => Str::contains((string) $question->type, ['single', 'radio']);
$isFillBlank = fn ($question) => Str::contains((string) $question->type, ['fill', 'blank']);
@endphp

@if($hasRows)
<table class="sr-only" aria-hidden="true">
    <tbody>
        @foreach($data as $item)
        <tr>
            <td>{{ ($data->currentPage() - 1) * $data->perPage() + $loop->iteration }}</td>
        </tr>
        @endforeach
    </tbody>
</table>

<div class="space-y-3">
    @foreach($data as $item)
    @php
    $children = $item->relationLoaded('children') ? $item->children : collect();
    $options = $optionsFor($item);
    $isScenario = $children->isNotEmpty();
    $showFillAnswer = !$isScenario && ($isFillBlank($item) || ($options->isEmpty() && $hasFillMeta($item)));
    @endphp

    <article class="relative rounded-xl border border-border bg-card px-4 pb-14 pt-4 text-card-foreground shadow-sm transition-colors dark:border-surface-700">
        <div class="flex items-start gap-3">
            <div class="mt-0.5 w-9 shrink-0 text-right text-sm font-semibold text-surface-900 dark:text-surface-100">
                {{ ($data->currentPage() - 1) * $data->perPage() + $loop->iteration }}.
            </div>

            <div class="min-w-0 flex-1">
                <div class="text-sm font-semibold leading-6 text-surface-950 dark:text-surface-50" x-data="{ expanded: false }">
                    @php
                    $questionText = $cleanText($item->question);
                    $isLong = Str::length($questionText) > 100;
                    @endphp
                    @if($isLong)
                    <span x-show="!expanded">{{ Str::limit($questionText, 100) }}</span>
                    <span x-show="expanded">{{ $questionText }}</span>
                    <button @click="expanded = !expanded" type="button" class="ml-1 text-xs text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 focus:outline-none focus:underline font-medium">
                        <span x-show="!expanded">{{ __('pages/admin/question.read_more') }}</span>
                        <span x-show="expanded">{{ __('pages/admin/question.read_less') }}</span>
                    </button>
                    @else
                    {{ $questionText }}
                    @endif
                </div>

                @if($isScenario)
                <div class="mt-4 space-y-5">
                    @foreach($children as $child)
                    @php
                    $childOptions = $optionsFor($child);
                    $childIsMultiChoice = $isMultiChoice($child) || $childOptions->filter(fn ($option) => filter_var(data_get($option, 'is_correct'), FILTER_VALIDATE_BOOLEAN))->count() > 1;
                    @endphp

                    <section class="space-y-3">
                        <div class="text-sm font-semibold leading-6 text-surface-950 dark:text-surface-50">
                            {{ ($data->currentPage() - 1) * $data->perPage() + $loop->parent->iteration }}.{{ $loop->iteration }}&nbsp;&nbsp;{{ $cleanText($child->question) }}
                        </div>

                        @if($childOptions->isNotEmpty())
                        <div class="grid gap-x-8 gap-y-3 md:grid-cols-2">
                            @foreach($childOptions as $option)
                            @php
                            $isCorrect = filter_var(data_get($option, 'is_correct'), FILTER_VALIDATE_BOOLEAN);
                            @endphp

                            <div class="flex items-start gap-2.5 text-sm font-medium leading-6 text-surface-800 dark:text-surface-200">
                                @include('pages.admin.question.partials.option-marker', [
                                'checked' => $isCorrect,
                                'shape' => 'checkbox',
                                ])
                                <span>{{ $cleanText(data_get($option, 'text')) }}</span>
                            </div>
                            @endforeach
                        </div>
                        @elseif($isFillBlank($child))
                        <div class="space-y-2 pl-1 text-sm font-semibold text-surface-900 dark:text-surface-100">
                            <div>Answer - {{ $answerFor($child) }}</div>
                            @if($hintFor($child))
                            <div>Hint - {{ $hintFor($child) }}</div>
                            @endif
                        </div>
                        @endif
                    </section>
                    @endforeach
                </div>
                @elseif($options->isNotEmpty())
                @php
                $useCheckbox = $isMultiChoice($item) || $options->filter(fn ($option) => filter_var(data_get($option, 'is_correct'), FILTER_VALIDATE_BOOLEAN))->count() > 1;
                @endphp

                <div class="mt-4 grid gap-x-8 gap-y-3 md:grid-cols-2">
                    @foreach($options as $option)
                    @php
                    $isCorrect = filter_var(data_get($option, 'is_correct'), FILTER_VALIDATE_BOOLEAN);
                    @endphp

                    <div class="flex items-start gap-2.5 text-sm font-medium leading-6 text-surface-800 dark:text-surface-200">
                        @include('pages.admin.question.partials.option-marker', [
                        'checked' => $isCorrect,
                        'shape' => 'checkbox',
                        ])
                        <span>{{ $cleanText(data_get($option, 'text')) }}</span>
                    </div>
                    @endforeach
                </div>
                @elseif($showFillAnswer)
                <div class="mt-4 space-y-2 text-sm font-semibold leading-6 text-surface-900 dark:text-surface-100">
                    <div>Answer - {{ $answerFor($item) }}</div>
                    @if($hintFor($item))
                    <div>Hint - {{ $hintFor($item) }}</div>
                    @endif
                </div>
                @endif
            </div>
        </div>

        <div class="absolute bottom-3 right-3 flex items-center gap-2 rounded-lg border border-border bg-card px-2 py-1 shadow-sm dark:border-surface-700">
            <button type="button"
                class="inline-flex items-center rounded-md px-3 py-1 text-xs font-semibold uppercase focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 {{ $item->status === 'publish' ? 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300 dark:hover:bg-green-900/50' : 'bg-surface-100 text-surface-700 hover:bg-surface-200 dark:bg-surface-700 dark:text-surface-200 dark:hover:bg-surface-600' }}"
                data-status-url="{{ route('admin.question.update-status', $item->id) }}"
                data-next-status="{{ $item->status === 'publish' ? 'draft' : 'publish' }}"
                x-on:click="confirmStatusChange($el.dataset.statusUrl, $el.dataset.nextStatus)">
                {{ __('pages/admin/question.status.'.$item->status) }}
            </button>

            <x-utility.tooltip text="Edit" position="top">
                <x-buttons.icon
                    variant="primary"
                    size="sm"
                    data-edit-url="{{ route('admin.question.edit', $item->id) }}"
                    x-on:click="openEdit($el.dataset.editUrl)">
                    <x-heroicon-o-pencil class="h-4 w-4" />
                </x-buttons.icon>
            </x-utility.tooltip>

            <x-utility.tooltip text="Delete" position="top">
                <x-buttons.icon
                    variant="danger"
                    size="sm"
                    data-delete-url="{{ route('admin.question.destroy', $item->id) }}"
                    x-on:click="confirmDelete($el.dataset.deleteUrl)">
                    <x-heroicon-o-trash class="h-4 w-4" />
                </x-buttons.icon>
            </x-utility.tooltip>
        </div>
    </article>
    @endforeach
</div>
@endif

@if($data->isEmpty() && ($totalQuestions ?? 0) > 0)
<div data-cb-filtered-empty class="rounded-xl border border-border bg-card px-6 py-12 text-center shadow-sm">
    <x-heroicon-o-exclamation-circle class="mx-auto h-10 w-10 text-surface-400" />
    <p class="mt-3 text-sm font-semibold text-surface-900 dark:text-white">
        {{ __('pages/admin/question.no_data_available.title') }}
    </p>
    <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">
        {{ __('pages/admin/question.no_results_filtered') }}
    </p>
    <div class="pt-6">
        <x-buttons.secondary type="button" @click="resetFilters()">
            {{ __('buttons.filter.clear') }}
        </x-buttons.secondary>
    </div>
</div>
@endif

<div class="mt-4">
    {{ $data->links('components.ajax-pagination') }}
</div>