@php($qgDefaults = \App\Support\QuestionnaireGameTheme::defaults())

<form method="POST" action="{{ route('settings.questionnaire-game.update') }}" enctype="multipart/form-data" class="space-y-6">
    @csrf
    @method('PUT')

    <x-page.card>
        <h2 class="mb-2 text-lg font-medium text-gray-900">Experiência em tela cheia do questionário</h2>
        <p class="mb-4 text-sm text-gray-600">
            Estas opções aplicam-se ao fluxo <strong>splash → jogar → resultado</strong> (abrir em nova aba).
            Se não enviar logo aqui, é usada a <strong>logo do portal</strong> quando existir.
        </p>

        <div class="grid max-w-3xl gap-6 md:grid-cols-2">
            <div>
                <x-form.label for="qg_logo" value="Logo (splash)" />
                <p class="mb-2 text-xs text-gray-500">Recomendado fundo transparente. Máx. 4&nbsp;MB.</p>
                @if ($questionnaireGameSetting->logo_path)
                    @php($qgLogoUrl = \App\Support\PortalAppearanceTheme::urlForStoredPath($questionnaireGameSetting->logo_path))
                    <div class="mb-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
                        <p class="mb-2 text-xs font-medium text-gray-600">Pré-visualização atual</p>
                        <div class="flex justify-center rounded border border-gray-200 bg-slate-900 p-3">
                            <img src="{{ $qgLogoUrl }}" alt="" class="max-h-28 w-auto max-w-full object-contain" />
                        </div>
                    </div>
                @endif
                <input id="qg_logo" name="logo" type="file" accept="image/*"
                       class="block w-full text-sm text-gray-600 file:mr-4 file:rounded-lg file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-medium file:text-blue-800" />
                <x-form.error name="logo" />
                @if ($questionnaireGameSetting->logo_path)
                    <label class="mt-2 flex items-center gap-2 text-sm text-gray-700">
                        <input type="checkbox" name="remove_logo" value="1" class="rounded border-gray-300" />
                        Remover logo atual desta experiência
                    </label>
                @endif
            </div>
            <div>
                <x-form.label for="qg_background_image" value="Imagem de fundo" />
                <p class="mb-2 text-xs text-gray-500">Sobreposta ao gradiente do tema. Máx. 8&nbsp;MB.</p>
                @if ($questionnaireGameSetting->background_image_path)
                    @php($qgBgUrl = \App\Support\PortalAppearanceTheme::urlForStoredPath($questionnaireGameSetting->background_image_path))
                    <div class="mb-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
                        <p class="mb-2 text-xs font-medium text-gray-600">Pré-visualização atual</p>
                        <div class="max-h-40 overflow-hidden rounded border border-gray-200 bg-slate-900">
                            <img src="{{ $qgBgUrl }}" alt="" class="h-40 w-full object-cover object-center" />
                        </div>
                    </div>
                @endif
                <input id="qg_background_image" name="background_image" type="file" accept="image/*"
                       class="block w-full text-sm text-gray-600 file:mr-4 file:rounded-lg file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-medium file:text-blue-800" />
                <x-form.error name="background_image" />
                @if ($questionnaireGameSetting->background_image_path)
                    <label class="mt-2 flex items-center gap-2 text-sm text-gray-700">
                        <input type="checkbox" name="remove_background_image" value="1" class="rounded border-gray-300" />
                        Remover imagem de fundo atual
                    </label>
                @endif
            </div>
        </div>

        <div class="mt-8 max-w-3xl">
            <x-form.label for="splash_tagline" value="Frase no splash (abaixo do logo / escudo)" />
            <p class="mb-2 text-xs text-gray-500">
                Texto mostrado na tela inicial da experiência em ecrã cheio. Use <strong class="font-mono">**palavra**</strong> para negrito. Deixe em branco para usar o texto padrão do sistema (definido em configuração).
            </p>
            <textarea
                id="splash_tagline"
                name="splash_tagline"
                rows="3"
                maxlength="600"
                class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
            >{{ old('splash_tagline', $questionnaireGameSetting->splash_tagline ?? '') }}</textarea>
            <x-form.error name="splash_tagline" />
        </div>
    </x-page.card>

    <x-page.card>
        <h2 class="mb-4 text-lg font-medium text-gray-900">Cores do tema</h2>
        <p class="mb-4 text-xs text-gray-500">Formato #RRGGBB. Controlam gradiente de fundo, detalhes dourados, destaques e texto principal.</p>
        <div class="grid max-w-3xl gap-6 sm:grid-cols-2">
            <div>
                <x-form.label for="color_bg_center" value="Centro do gradiente (fundo)" />
                <input id="color_bg_center" name="color_bg_center" type="color" required
                       class="mt-1 h-10 w-full max-w-[12rem] cursor-pointer rounded border border-gray-300 bg-white p-1"
                       value="{{ old('color_bg_center', $questionnaireGameSetting->color_bg_center ?? $qgDefaults->colorBgCenter) }}" />
                <x-form.error name="color_bg_center" />
            </div>
            <div>
                <x-form.label for="color_bg_mid" value="Meio do gradiente" />
                <input id="color_bg_mid" name="color_bg_mid" type="color" required
                       class="mt-1 h-10 w-full max-w-[12rem] cursor-pointer rounded border border-gray-300 bg-white p-1"
                       value="{{ old('color_bg_mid', $questionnaireGameSetting->color_bg_mid ?? $qgDefaults->colorBgMid) }}" />
                <x-form.error name="color_bg_mid" />
            </div>
            <div>
                <x-form.label for="color_bg_edge" value="Borda do gradiente" />
                <input id="color_bg_edge" name="color_bg_edge" type="color" required
                       class="mt-1 h-10 w-full max-w-[12rem] cursor-pointer rounded border border-gray-300 bg-white p-1"
                       value="{{ old('color_bg_edge', $questionnaireGameSetting->color_bg_edge ?? $qgDefaults->colorBgEdge) }}" />
                <x-form.error name="color_bg_edge" />
            </div>
            <div>
                <x-form.label for="color_gold" value="Dourado principal" />
                <input id="color_gold" name="color_gold" type="color" required
                       class="mt-1 h-10 w-full max-w-[12rem] cursor-pointer rounded border border-gray-300 bg-white p-1"
                       value="{{ old('color_gold', $questionnaireGameSetting->color_gold ?? $qgDefaults->colorGold) }}" />
                <x-form.error name="color_gold" />
            </div>
            <div>
                <x-form.label for="color_gold_dark" value="Dourado escuro" />
                <input id="color_gold_dark" name="color_gold_dark" type="color" required
                       class="mt-1 h-10 w-full max-w-[12rem] cursor-pointer rounded border border-gray-300 bg-white p-1"
                       value="{{ old('color_gold_dark', $questionnaireGameSetting->color_gold_dark ?? $qgDefaults->colorGoldDark) }}" />
                <x-form.error name="color_gold_dark" />
            </div>
            <div>
                <x-form.label for="color_gold_light" value="Dourado claro" />
                <input id="color_gold_light" name="color_gold_light" type="color" required
                       class="mt-1 h-10 w-full max-w-[12rem] cursor-pointer rounded border border-gray-300 bg-white p-1"
                       value="{{ old('color_gold_light', $questionnaireGameSetting->color_gold_light ?? $qgDefaults->colorGoldLight) }}" />
                <x-form.error name="color_gold_light" />
            </div>
            <div>
                <x-form.label for="color_accent" value="Destaque (acento)" />
                <input id="color_accent" name="color_accent" type="color" required
                       class="mt-1 h-10 w-full max-w-[12rem] cursor-pointer rounded border border-gray-300 bg-white p-1"
                       value="{{ old('color_accent', $questionnaireGameSetting->color_accent ?? $qgDefaults->colorAccent) }}" />
                <x-form.error name="color_accent" />
            </div>
            <div>
                <x-form.label for="color_text" value="Texto principal" />
                <input id="color_text" name="color_text" type="color" required
                       class="mt-1 h-10 w-full max-w-[12rem] cursor-pointer rounded border border-gray-300 bg-white p-1"
                       value="{{ old('color_text', $questionnaireGameSetting->color_text ?? $qgDefaults->colorText) }}" />
                <x-form.error name="color_text" />
            </div>
        </div>
    </x-page.card>

    <div class="flex justify-end gap-3">
        <x-ui.button type="submit">Salvar aparência do questionário</x-ui.button>
    </div>
</form>