@extends('layouts.admin')
@section('title','Games')
@section('admin-content')
<div class="admin-heading"><div><div class="eyebrow">CHOOSE YOUR LUCKY MOMENT</div><h1>Games.</h1><p>Choose a game. Open Settings to customise, preview or activate it.</p></div></div>
<p class="info-box">Active game: <strong>{{ ['lucky-wheel'=>'Lucky Wheel','lucky-gift-box'=>'Lucky Gift Box','lucky-scratch-card'=>'Lucky Scratch Card','lucky-angpao-tree'=>'Lucky Ang Pao Tree','cat-treasure-hunt'=>"Cat’s Treasure Hunt",'lucky-claw-machine'=>'Lucky Claw Machine','lucky-capsule-machine'=>'Lucky Capsule Machine'][$activeGame] }}</strong>. Games share receipt plays, prize stock and reward history. Changing games keeps remaining plays.</p>
<div class="game-library">
@foreach(['lucky-wheel'=>['Lucky Wheel','Turn the wheel for a little surprise.','wheel'],'lucky-gift-box'=>['Lucky Gift Box','Choose a gift and discover your lucky moment.','gift'],'lucky-scratch-card'=>['Lucky Scratch Card','Scratch away the coating to discover your reward.','scratch'],'lucky-angpao-tree'=>['Lucky Ang Pao Tree','Shake the tree and open your lucky red packet.','angpao'],'cat-treasure-hunt'=>["Cat’s Treasure Hunt",'Send a curious cat to find your hidden surprise.','treasure'],'lucky-claw-machine'=>['Lucky Claw Machine','Grab a capsule and open your lucky surprise.','claw'],'lucky-capsule-machine'=>['Lucky Capsule Machine','Turn the handle and open a lucky capsule.','capsule']] as $key=>[$name,$description,$art])
<article class="game-library-card {{ $activeGame===$key?'is-active':'' }}"><div class="game-card-art game-card-art-{{ $art }}" aria-hidden="true">@if($art==='wheel')<span class="game-art-wheel"></span>@elseif($art==='angpao')<img src="{{ asset('wheel/angpao-tree-'.$angpao['tree_design'].'.png') }}" style="width:100%;height:100%;object-fit:contain" alt="">@elseif($art==='treasure')<div class="game-art-treasure"><span>🐈</span><b>🎁</b></div>@elseif($art==='claw')<div class="game-art-claw"><span>╥</span><i>● ● ●</i><b>LUCKY CLAW</b></div>@elseif($art==='capsule')<div class="game-art-capsule"><span>● ● ●</span><span>● ●</span><i>✦</i></div>@elseif($art==='scratch')<div class="game-art-scratch"><span>✦</span><strong>SCRATCH &amp; REVEAL</strong><small>Your little lucky moment</small></div>@else<div class="game-art-gifts"><span>🎁</span><span>🎁</span><span>🎁</span></div>@endif<span class="game-card-badge">{{ $activeGame===$key?'● Active':'Available' }}</span></div><div class="game-card-content"><h2>{{ $name }}</h2><p>{{ $description }}</p><div class="game-card-actions"><button class="button small" type="button" data-game-settings="{{ $key }}" aria-haspopup="dialog" aria-controls="game-settings-{{ $key }}">⚙ Settings</button><button class="button small secondary" type="submit" form="game-form-{{ $key }}" formtarget="_blank">Preview ↗</button>
@if(app(\App\Services\TeamAccess::class)->can(auth()->user(),'games.activate'))
<form method="post" action="{{ route('admin.games.save') }}" style="margin:0;display:inline-flex" data-card-activate>
@csrf
<input type="hidden" name="game" value="{{ $key }}"><input type="hidden" name="action" value="activate">
@if($key!=='lucky-wheel')@foreach((match($key){'lucky-gift-box'=>$gift,'lucky-scratch-card'=>$scratch,'lucky-angpao-tree'=>$angpao,'lucky-claw-machine'=>$claw,'cat-treasure-hunt'=>$treasure,default=>$capsule}) as $field=>$value)<input type="hidden" name="{{ $field }}" value="{{ is_bool($value)?($value?'1':'0'):$value }}">@endforeach @endif
<button class="button small secondary" type="submit" @disabled($activeGame===$key)>{{ $activeGame===$key?'✓ Active':'Activate' }}</button></form>
@endif
</div></div></article>
@endforeach
</div>
@foreach(['lucky-wheel'=>'Lucky Wheel','lucky-gift-box'=>'Lucky Gift Box','lucky-scratch-card'=>'Lucky Scratch Card','lucky-angpao-tree'=>'Lucky Ang Pao Tree','cat-treasure-hunt'=>"Cat’s Treasure Hunt",'lucky-claw-machine'=>'Lucky Claw Machine','lucky-capsule-machine'=>'Lucky Capsule Machine'] as $key=>$name)
<dialog class="game-settings-dialog" id="game-settings-{{ $key }}" aria-labelledby="game-settings-title-{{ $key }}" @if(session()->has('errors')&&old('game')===$key) data-auto-open @endif>
<header class="game-settings-header"><h2 id="game-settings-title-{{ $key }}">{{ $name }} settings</h2><button type="button" class="game-settings-x" data-game-close aria-label="Close {{ $name }} settings">×</button></header>
<form id="game-form-{{ $key }}" class="game-settings-form" method="post" action="{{ route('admin.games.preview') }}">
@csrf
<input type="hidden" name="game" value="{{ $key }}">
<div class="game-settings-content"><div class="game-settings-inner">
@if(session()->has('errors')&&old('game')===$key)<div class="notice error" role="alert">@foreach(session('errors')->all() as $error)<p>{{ $error }}</p>@endforeach</div>@endif
@if($key==='lucky-wheel')<p>Your existing wheel layout, prize images and appearance settings are kept.</p><div class="game-settings-links"><a class="panel" href="{{ route('admin.slots') }}"><strong>Wheel layout ↗</strong><span>Assign prizes, arrange slots and manage wheel images.</span></a><a class="panel" href="{{ route('admin.preferences') }}#wheel-appearance"><strong>Wheel appearance ↗</strong><span>Adjust the wheel finish, colours and prize image size.</span></a></div><p class="muted">Preview or activate this game below. Layout and appearance open their existing settings pages.</p>
@elseif($key==='lucky-angpao-tree')
<p class="info-box">Choose your tree design. <a href="{{ route('admin.slots') }}">Manage Game Prizes</a> controls the hanging packets when this game is active. Each row is one packet; repeat prizes to add more packets without changing their winning chances.</p>
<div class="form-row">@foreach(['fan'=>'Golden Fan Tree','garden'=>'Paper-Cut Garden Tree','blossom'=>'Blossom Fortune Tree'] as $design=>$label)<label class="panel"><input type="radio" name="tree_design" value="{{ $design }}" @checked((old('game')===$key?old('tree_design',$angpao['tree_design']):$angpao['tree_design'])===$design)><img src="{{ asset('wheel/angpao-tree-'.$design.'.png') }}" alt="{{ $label }}" style="display:block;width:100%;max-height:230px;object-fit:contain"><strong>{{ $label }}</strong></label>@endforeach</div>
@foreach(['heading'=>'Heading','intro'=>'Instructions','button'=>'Draw button label'] as $field=>$label)<label>{{ $label }}<input name="{{ $field }}" required maxlength="{{ $field==='intro'?300:($field==='button'?60:100) }}" value="{{ old('game')===$key?old($field,$angpao[$field]):$angpao[$field] }}"></label>@endforeach
<p>Three seconds of shaking, then one packet falls. The customer opens it to reveal their saved reward. Preview uses samples only.</p>
@elseif($key==='cat-treasure-hunt')
<input name="enabled" type="hidden" value="0"><label class="check"><input type="checkbox" name="enabled" value="1" @checked(old('game')===$key?old('enabled',$treasure['enabled']):$treasure['enabled'])> Treasure Hunt open for play</label>
<p class="info-box">Draws directly from active, in-stock prizes with positive weights in <a href="{{ route('admin.prizes') }}">Prizes &amp; odds</a>. Four hiding spots are visual choices and do not affect the odds. Game Prize Pool assignments are not needed.</p>
@foreach(['heading'=>'Heading','intro'=>'Instructions','button'=>'Search button label'] as $field=>$label)<label>{{ $label }}<input name="{{ $field }}" required maxlength="{{ $field==='intro'?300:($field==='button'?60:100) }}" value="{{ old('game')===$key?old($field,$treasure[$field]):$treasure[$field] }}"></label>@endforeach
<label>Cat colour<select name="fur">@foreach(['ginger'=>'Ginger','grey'=>'Silver grey'] as $value=>$label)<option value="{{ $value }}" @selected((old('game')===$key?old('fur',$treasure['fur']):$treasure['fur'])===$value)>{{ $label }}</option>@endforeach</select></label>
<label>Scene<select name="scene">@foreach(['cosy'=>'Cosy corner','garden'=>'Garden hideaway'] as $value=>$label)<option value="{{ $value }}" @selected((old('game')===$key?old('scene',$treasure['scene']):$treasure['scene'])===$value)>{{ $label }}</option>@endforeach</select></label><p>Preview creates sample rewards only. Each search uses one play. Skip animation and reduced-motion preferences are supported.</p>
@elseif($key==='lucky-claw-machine')
<input name="enabled" type="hidden" value="0"><label class="check"><input type="checkbox" name="enabled" value="1" @checked(old('game')===$key?old('enabled',$claw['enabled']):$claw['enabled'])> Claw Machine open for play</label>
<p class="info-box">Rewards come directly from active, in-stock prizes with positive weights in <a href="{{ route('admin.prizes') }}">Prizes &amp; odds</a>. Each automatic grab retrieves one capsule. Button timing does not change the winning chance.</p>
@foreach(['heading'=>'Heading','intro'=>'Instructions','button'=>'Draw button label'] as $field=>$label)<label>{{ $label }}<input name="{{ $field }}" required maxlength="{{ $field==='intro'?300:($field==='button'?60:100) }}" value="{{ old('game')===$key?old($field,$claw[$field]):$claw[$field] }}"></label>@endforeach
<label>Machine colour<input type="color" name="machine_color" value="{{ old('game')===$key?old('machine_color',$claw['machine_color']):$claw['machine_color'] }}" required></label>
<label>Capsule style<select name="capsule_style">@foreach(['pastel'=>'Pastel mix','gold'=>'Golden capsules'] as $value=>$label)<option value="{{ $value }}" @selected((old('game')===$key?old('capsule_style',$claw['capsule_style']):$claw['capsule_style'])===$value)>{{ $label }}</option>@endforeach</select></label>
<label>Animation speed<select name="speed">@foreach(['normal'=>'Normal','quick'=>'Quick'] as $value=>$label)<option value="{{ $value }}" @selected((old('game')===$key?old('speed',$claw['speed']):$claw['speed'])===$value)>{{ $label }}</option>@endforeach</select></label><p>Preview creates sample rewards only. Skip animation and reduced-motion preferences are supported.</p>
@elseif($key==='lucky-capsule-machine')
<p class="info-box">Capsule Machine draws directly from active, in-stock prizes with positive weights in <a href="{{ route('admin.prizes') }}">Prizes &amp; odds</a>. Game Prize Pool assignments are not needed.</p>
<label>Heading<input name="heading" required maxlength="100" value="{{ old('game')===$key?old('heading',$capsule['heading']):$capsule['heading'] }}"></label>
<label>Instructions<textarea name="intro" required maxlength="300">{{ old('game')===$key?old('intro',$capsule['intro']):$capsule['intro'] }}</textarea></label>
<label>Start button label<input name="button" required maxlength="60" value="{{ old('game')===$key?old('button',$capsule['button']):$capsule['button'] }}"></label>
<label>Opening effects<select name="animation">@foreach(['gentle'=>'Gentle','celebratory'=>'Celebratory'] as $value=>$label)<option value="{{ $value }}" @selected((old('game')===$key?old('animation',$capsule['animation']):$capsule['animation'])===$value)>{{ $label }}</option>@endforeach</select></label>
<input name="theme_colors" type="hidden" value="0"><label class="check"><input name="theme_colors" type="checkbox" value="1" @checked(old('game')===$key?old('theme_colors',$capsule['theme_colors']):$capsule['theme_colors'])> Match the website theme</label>
<div class="form-row">@foreach(['machine_color'=>'Machine colour','capsule_color'=>'Capsule colour'] as $field=>$label)<label>{{ $label }}<input type="color" name="{{ $field }}" required value="{{ old('game')===$key?old($field,$capsule[$field]):$capsule[$field] }}"></label>@endforeach</div>
<p class="info-box">Starting the machine uses one receipt play and saves the weighted reward before the capsule drops. Skip animation is available. Preview creates sample results only.</p>
@elseif($key==='lucky-scratch-card')
<input name="enabled" type="hidden" value="0"><label class="check"><input type="checkbox" name="enabled" value="1" @checked(old('game')===$key?old('enabled',$scratch['enabled']):$scratch['enabled'])> Scratch Card open for play</label>
<p class="info-box">Scratch Card selects rewards directly from active, in-stock prizes with positive weights in <a href="{{ route('admin.prizes') }}">Prizes &amp; odds ↗</a>. Wheel slots and Game Prize Pool assignments are not used.</p>
<label>Scratch tool<select name="scratch_tool">@foreach(['coin'=>'Coin','eraser'=>'Eraser','brush'=>'Brush'] as $tool=>$label)<option value="{{ $tool }}" @selected((old('game')===$key?old('scratch_tool',$scratch['scratch_tool']):$scratch['scratch_tool'])===$tool)>{{ $label }}</option>@endforeach</select></label>
<input type="hidden" name="watermark" value="0"><label class="check"><input name="watermark" type="checkbox" value="1" @checked(old('game')===$key?old('watermark',$scratch['watermark']):$scratch['watermark'])> Show bottom-right prize watermark</label>
<input type="hidden" name="watermark_animation" value="0"><label class="check"><input name="watermark_animation" type="checkbox" value="1" @checked(old('game')===$key?old('watermark_animation',$scratch['watermark_animation']):$scratch['watermark_animation'])> Animate dotted card and watermark borders</label>

<label>Heading<input name="heading" required maxlength="100" value="{{ old('game')===$key?old('heading',$scratch['heading']):$scratch['heading'] }}"></label>
<label>Instructions<textarea name="intro" required maxlength="300">{{ old('game')===$key?old('intro',$scratch['intro']):$scratch['intro'] }}</textarea></label>
<label>Start button label<input name="button" required maxlength="60" value="{{ old('game')===$key?old('button',$scratch['button']):$scratch['button'] }}"></label>
<label>Auto-reveal after scratching (%)<input name="threshold" type="number" min="30" max="70" required value="{{ old('game')===$key?old('threshold',$scratch['threshold']):$scratch['threshold'] }}"></label>
<input name="theme_colors" type="hidden" value="0"><label class="check"><input name="theme_colors" type="checkbox" value="1" @checked(old('game')===$key?old('theme_colors',$scratch['theme_colors']):$scratch['theme_colors'])> Match the website theme</label>
<div class="form-row"><label>Custom coating colour<input type="color" name="cover_color" value="{{ old('game')===$key?old('cover_color',$scratch['cover_color']):$scratch['cover_color'] }}" required></label><label>Custom accent colour<input type="color" name="accent_color" value="{{ old('game')===$key?old('accent_color',$scratch['accent_color']):$scratch['accent_color'] }}" required></label></div>
<p class="info-box">Starting a card uses one receipt play and saves the weighted reward before scratching. Reveal without scratching is available for accessibility. Preview creates sample results only.</p>
@else

<label>Number of boxes<select name="boxes">@foreach([3,6,9] as $count)<option value="{{ $count }}" @selected((int)(old('game')===$key?old('boxes',$gift['boxes']):$gift['boxes'])===$count)>{{ $count }}</option>@endforeach</select></label>
<label>Heading<input name="heading" required maxlength="100" value="{{ (old('game')===$key?old('heading',$gift['heading']):$gift['heading']) }}"></label><label>Instructions<textarea name="intro" required maxlength="300">{{ (old('game')===$key?old('intro',$gift['intro']):$gift['intro']) }}</textarea></label><label>Open button label<input name="button" required maxlength="60" value="{{ (old('game')===$key?old('button',$gift['button']):$gift['button']) }}"></label>
<label>Opening animation<select name="animation"><option value="gentle" @selected((old('game')===$key?old('animation',$gift['animation']):$gift['animation'])==='gentle')>Gentle</option><option value="celebratory" @selected((old('game')===$key?old('animation',$gift['animation']):$gift['animation'])==='celebratory')>Celebratory</option></select></label>
<input type="hidden" name="theme_colors" value="0"><label class="check"><input type="checkbox" name="theme_colors" value="1" @checked((old('game')===$key?old('theme_colors',$gift['theme_colors']):$gift['theme_colors']))> Match box colours to the website theme</label><div class="form-row"><label>Custom box colour<input type="color" name="box_color" value="{{ (old('game')===$key?old('box_color',$gift['box_color']):$gift['box_color']) }}" required></label><label>Custom ribbon colour<input type="color" name="ribbon_color" value="{{ (old('game')===$key?old('ribbon_color',$gift['ribbon_color']):$gift['ribbon_color']) }}" required></label></div><input type="hidden" name="sound" value="0"><label class="check"><input type="checkbox" name="sound" value="1" @checked((old('game')===$key?old('sound',$gift['sound']):$gift['sound']))> Allow optional opening sound (customers can mute)</label>

<p class="info-box">The actual reward uses the prize weights and assigned prize pool. High-value PIN displays in the other boxes are a separate showcase.</p>
<small>Preview uses sample rewards only. Reduced-motion preferences skip effects. Sound stays optional. Saving settings does not activate the game.</small>
@endif
</div></div>
<footer class="game-settings-footer"><button class="button small secondary" type="submit" formtarget="_blank">Preview ↗</button><button class="button small secondary" type="button" data-game-close>Close</button><div class="game-settings-save-actions">
@if($key!=='lucky-wheel'&&app(\App\Services\TeamAccess::class)->can(auth()->user(),'games.edit'))<button class="button small secondary" type="submit" formaction="{{ route('admin.games.save') }}" name="action" value="save">Save settings</button>@endif
@if(app(\App\Services\TeamAccess::class)->can(auth()->user(),'games.activate'))<button class="button small" type="submit" formaction="{{ route('admin.games.save') }}" name="action" value="activate">{{ $activeGame===$key?($key!=='lucky-wheel'?'Save & keep active':'Keep Lucky Wheel active'):'Activate '.$name }}</button>@endif
</div></footer></form></dialog>
@endforeach
@endsection
@push('scripts')<link rel="stylesheet" href="{{ asset('wheel/game-library.css') }}"><script src="{{ asset('wheel/game-library.js') }}" defer></script>@endpush