@if(auth()->user()->admin_role === 'owner')
@php
$editingTheme=request('theme_editor',$settings->website_theme??'cat-pastel');
if(!in_array($editingTheme,['cat-pastel','christmas','chinese-new-year']))$editingTheme='cat-pastel';
$themeConfig=request('theme_defaults')==='1' ? \App\Services\WebsiteThemes::defaults($editingTheme) : \App\Services\WebsiteThemes::config($editingTheme,$settings);
@endphp
<article class="panel" id="wheel-appearance" style="grid-column:1/-1;scroll-margin-top:24px">
<div class="panel-heading"><h2>Website theme</h2><span class="odds-badge">Active: {{ ['cat-pastel'=>'Cat Pastel','christmas'=>'Christmas','chinese-new-year'=>'Chinese New Year'][$settings->website_theme??'cat-pastel']??'Cat Pastel' }}</span></div>
<p class="muted" style="font-size:12px">Each theme keeps its own settings. Preview your changes, then apply when ready. Customer pages change; your admin studio stays familiar.</p>
<nav class="settings-tabs" aria-label="Theme settings"><a href="{{ route('admin.preferences',['theme_editor'=>'cat-pastel']) }}#wheel-appearance" @if($editingTheme==='cat-pastel') aria-current="page" @endif>Cat Pastel</a><a href="{{ route('admin.preferences',['theme_editor'=>'christmas']) }}#wheel-appearance" @if($editingTheme==='christmas') aria-current="page" @endif>Christmas</a><a href="{{ route('admin.preferences',['theme_editor'=>'chinese-new-year']) }}#wheel-appearance" @if($editingTheme==='chinese-new-year') aria-current="page" @endif>Chinese New Year</a></nav>
<form method="post" action="{{ route('admin.preferences.website-theme') }}" class="stack-form">
@csrf
<input type="hidden" name="website_theme" value="{{ $editingTheme }}">
<a href="{{ route('admin.preferences',['theme_editor'=>$editingTheme,'theme_defaults'=>1]) }}#wheel-appearance" style="font-size:12px;text-decoration:underline">Load theme defaults</a><small>Defaults are loaded into the editor only. Save or apply to keep them.</small>
<h3>{{ ['cat-pastel'=>'Cat Pastel settings','christmas'=>'Christmas settings','chinese-new-year'=>'Chinese New Year settings'][$editingTheme] }}</h3>
@if($editingTheme==='chinese-new-year')
<p class="muted">Paper Festival · Year of the Goat 2027. Ivory, vermilion, layered paper clouds, gold blossoms and goat mascots.</p><img src="{{ asset('wheel/cny-paper-backdrop.png') }}" alt="Paper Festival red and ivory artwork" style="display:block;width:100%;max-height:180px;object-fit:cover;border-radius:14px"><input type="hidden" name="motion" value="0"><label class="check"><input type="checkbox" name="motion" value="1" @checked(old('motion',$themeConfig['motion']))> Animate lanterns, goats, petals and gold sparkles</label><small>Reduced-motion preferences keep decorations still. Decorations never block forms or game controls.</small>
@elseif($editingTheme==='christmas')
<p class="muted" style="font-size:12px">Midnight Winter Magic: navy and gold navigation, snowy village, Santa’s sleigh and festive cat.</p>
<div class="form-row"><label>Night sky colour<input type="color" name="background" value="{{ old('background',$themeConfig['background']) }}" required></label><label>Festive accent<input type="color" name="accent" value="{{ old('accent',$themeConfig['accent']) }}" required></label></div>
<label class="check"><input type="checkbox" name="snow" value="1" @checked(old('snow',$themeConfig['snow']))> Falling snow</label>
<input type="hidden" name="hero_motion" value="0"><label class="check"><input type="checkbox" name="hero_motion" value="1" @checked(old('hero_motion',$themeConfig['hero_motion']))> Paper-layer welcome animation and twinkling stars</label><small>Scenery, village, bridge, snow, Santa and cat settle into place. Replay welcome repeats the entrance. Reduced-motion shows the final scene immediately.</small>
<label>Snow intensity<select name="snow_intensity"><option value="gentle" @selected(old('snow_intensity',$themeConfig['snow_intensity'])==='gentle')>Gentle</option><option value="normal" @selected(old('snow_intensity',$themeConfig['snow_intensity'])==='normal')>Normal</option></select></label>
<label class="check"><input type="checkbox" name="snow_mobile" value="1" @checked(old('snow_mobile',$themeConfig['snow_mobile']))> Allow snowfall on mobile</label><small>Snow never blocks controls. Reduced-motion preferences turn animated snow off.</small>
@else
<p class="muted" style="font-size:12px">Your existing pastel colours, cat decorations, patterned background and current wheel finish are preserved.</p>
@endif
<div class="form-row"><label>Outer rim colour<input type="color" name="rim" value="{{ old('rim',$themeConfig['rim']) }}" required></label><label>Prize image size (%)<input type="number" name="image_percent" min="10" max="100" value="{{ old('image_percent',$themeConfig['image_percent']) }}" required></label></div>
<div style="display:flex;gap:10px;flex-wrap:wrap"><button type="submit" class="button small secondary" formaction="{{ route('admin.preferences.website-theme.preview') }}" formtarget="_blank">Preview theme ↗</button><button class="button small secondary" type="submit" name="intent" value="save">Save theme settings</button><button class="button small" type="submit" name="intent" value="apply">Apply theme</button></div>
<small>Preview opens a new tab without saving. Save theme settings updates this theme only; Apply theme also makes it the customer website theme. Form and email designs remain shared.</small>
</form></article>
@endif