@extends('layouts.admin.app')

@section('title', __('pages/admin/question.title'))

@section('content')
<div
    class="animate-fade-in"
    x-data="questionManagementPage({ 
        indexUrl: @js(route('admin.question.index')), 
        storeUrl: @js(route('admin.question.store')),
        updateUrlBase: @js(route('admin.question.update', 'ID_PLACEHOLDER')),
        hasRecords: @js(($totalQuestions ?? 0) > 0),
        totalQuestions: @js($totalQuestions ?? 0),
        types: @js(config('question.types', [])),
        translations: {
            add_question: @js(__('pages/admin/question.form.add_question')),
            edit_question: @js(__('pages/admin/question.form.edit_question'))
        }
    })">
    <div class="px-4 py-4 flex flex-wrap items-center justify-between gap-4">
        <x-layouts.admin.breadcrumb :items="[
            ['label' => __('pages/admin/question.heading.plural')],
        ]" />

        @php
        $types = config('question.types', []);
        $availableTypes = array_filter($types, fn($key) => $key !== 'default', ARRAY_FILTER_USE_KEY);
        @endphp

        <div class="flex flex-wrap items-center justify-end gap-2">
            @if(($totalQuestions ?? 0) > 0)
            <x-buttons.secondary
                href="{{ route('admin.question.preview-simulator') }}"
                target="_blank"
                rel="noopener noreferrer">
                <x-heroicon-o-play class="w-4 h-4" />
                Preview
            </x-buttons.secondary>
            @endif

            @if(empty($availableTypes))
            <x-buttons.primary type="button" disabled>
                <x-heroicon-o-plus class="w-4 h-4" />
                {{ __('pages/admin/question.form.add_question') }}
            </x-buttons.primary>
            @else
            <div x-data="{ openDropdown: false }" class="relative" @click.outside="openDropdown = false">
                <x-buttons.primary type="button" @click="openDropdown = !openDropdown">
                    <x-heroicon-o-plus class="w-4 h-4" />
                    {{ __('pages/admin/question.form.add_question') }}
                    <x-heroicon-m-chevron-down class="w-4 h-4 ml-1" />
                </x-buttons.primary>

                <div x-show="openDropdown" x-cloak
                    class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-card ring-1 ring-black ring-opacity-5 z-50">
                    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                        @foreach($availableTypes as $key => $label)
                        <button @click="openCreate('{{ $key }}'); openDropdown = false" class="block w-full text-left px-4 py-2 text-sm text-foreground hover:bg-surface-100 dark:hover:bg-surface-800" role="menuitem">
                            {{ $label }}
                        </button>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>

    <div class="px-6 pb-6 space-y-4 mt-1">
        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2" x-show="hasRecords" x-cloak>
            <div class="flex items-center gap-2 min-w-0">
                {{-- Search --}}
                <div class="w-52 flex-shrink-0">
                    <x-forms.input
                        type="text"
                        x-model="filters.search"
                        data-cb-search
                        icon="heroicon-o-magnifying-glass"
                        placeholder="{{ __('pages/common.search', ['resource' => __('pages/admin/question.heading.plural')]) }}" />
                </div>

                {{-- Filter Dropdown --}}
                <x-common.table-filter>
                    <div>
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">{{ __('pages/admin/question.table.status') }}</x-forms.label>
                        <x-forms.select x-model="filters.status" data-cb-filter="status">
                            <option value="">{{ __('pages/admin/question.filter.options.all') }}</option>
                            @foreach(\App\Models\Question::STATUSES as $status)
                            <option value="{{ $status }}">{{ __('pages/admin/question.status.'.$status) }}</option>
                            @endforeach
                        </x-forms.select>
                    </div>
                    <div class="mt-3">
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">{{ __('pages/admin/question.table.type') }}</x-forms.label>
                        <x-forms.select x-model="filters.type" data-cb-filter="type">
                            <option value="">{{ __('pages/admin/question.filter.options.all') }}</option>
                            @foreach($availableTypes as $typeKey => $typeLabel)
                            <option value="{{ $typeKey }}">{{ $typeLabel }}</option>
                            @endforeach
                        </x-forms.select>
                    </div>
                </x-common.table-filter>

                <x-buttons.secondary type="button" class="hidden" data-cb-reset-filters>
                    <x-heroicon-o-arrow-path class="w-4 h-4" />
                    Reset
                </x-buttons.secondary>
            </div>
        </div>

        <div class="hidden" data-cb-skeleton-template>
            <div class="space-y-3">
                @for($i = 0; $i < min((int) config('pagination.skeleton_rows', 7), 4); $i++)
                    <div class="rounded-xl border border-border bg-card px-4 pb-14 pt-4 shadow-sm dark:border-surface-700">
                    <div class="flex items-start gap-3">
                        <x-skeleton.horizontal class="mt-1 h-4 w-9 shrink-0 rounded" />
                        <div class="min-w-0 flex-1 space-y-4">
                            <x-skeleton.horizontal class="h-4 w-11/12 rounded" />
                            <div class="grid gap-x-8 gap-y-3 md:grid-cols-2">
                                <x-skeleton.horizontal class="h-4 w-4/5 rounded" />
                                <x-skeleton.horizontal class="h-4 w-3/4 rounded" />
                                <x-skeleton.horizontal class="h-4 w-2/3 rounded" />
                                <x-skeleton.horizontal class="h-4 w-5/6 rounded" />
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 flex justify-end gap-2">
                        <x-skeleton.horizontal class="h-7 w-20 rounded-md" />
                        <x-skeleton.horizontal class="h-7 w-7 rounded-md" />
                        <x-skeleton.horizontal class="h-7 w-7 rounded-md" />
                    </div>
            </div>
            @endfor
        </div>
    </div>

    <div class="hidden" data-cb-empty-template>
        <x-no-data-available
            :title="__('pages/admin/question.no_data_available.title')"
            :description="__('pages/admin/question.no_data_available.description')" />
    </div>

    <div id="table-container"></div>
</div>

@include('pages.admin.question.partials.view-modal')
@include('pages.admin.question.partials.form-modal')

<x-alert-dialog />
</div>

@push('before-app-js')
<script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
{!! JsValidator::formRequest('App\Http\Requests\Admin\QuestionRequest', '#questionForm') !!}
@endpush
@endsection

@push('before-app-js')
@vite(['resources/js/admin/question.js'])
@endpush