@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>{{ $activeGame==='lucky-wheel'?'Lucky Wheel':'Lucky Gift Box' }}</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']] 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>@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></div></div></article>
@endforeach
</div>
@foreach(['lucky-wheel'=>'Lucky Wheel','lucky-gift-box'=>'Lucky Gift Box'] 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>
@else

<label>Number of boxes<select name="boxes">@foreach([3,6,9] as $count)<option value="{{ $count }}" @selected((int)old('boxes',$gift['boxes'])===$count)>{{ $count }}</option>@endforeach</select></label>
<label>Heading<input name="heading" required maxlength="100" value="{{ old('heading',$gift['heading']) }}"></label><label>Instructions<textarea name="intro" required maxlength="300">{{ old('intro',$gift['intro']) }}</textarea></label><label>Open button label<input name="button" required maxlength="60" value="{{ old('button',$gift['button']) }}"></label>
<label>Opening animation<select name="animation"><option value="gentle" @selected(old('animation',$gift['animation'])==='gentle')>Gentle</option><option value="celebratory" @selected(old('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('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('box_color',$gift['box_color']) }}" required></label><label>Custom ribbon colour<input type="color" name="ribbon_color" value="{{ old('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('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-gift-box'&&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-gift-box'?'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