@extends('layouts.admin')
@section('title', 'Wheel layout')
@section('admin-content')
<div class="admin-heading"><div><div class="eyebrow">EVERY PRIZE HAS ITS PLACE</div><h1>Wheel layout<span class="gold">.</span></h1><p class="muted">Choose the prize displayed in each of the eight slots.</p></div></div>
<div class="info-box"><strong>Start at the top. Move clockwise.</strong><p>Slot 1 starts at the top pointer. Slots continue clockwise around the wheel. A prize can appear in more than one slot; its chance weight stays the same.</p></div>
<form method="post" action="{{ route('admin.slots.update') }}">@csrf @method('PUT')
<div class="slot-grid">@foreach($slots as $slot)<label class="panel slot-editor"><span class="slot-number">{{ str_pad($slot->position + 1, 2, '0', STR_PAD_LEFT) }}</span><span class="slot-label">SLOT {{ $slot->position + 1 }}</span><select name="slots[{{ $slot->position }}]" required>@foreach($prizes as $prize)<option value="{{ $prize->id }}" @selected(old('slots.'.$slot->position, $slot->prize_id) == $prize->id)>{{ $prize->name }}{{ !$prize->active || !$prize->weight ? ' (cannot win)' : '' }}</option>@endforeach</select></label>@endforeach</div>
<div class="panel form-footer"><label class="check"><input type="checkbox" name="enabled" value="1" @checked(old('enabled', $enabled))> Wheel open for play</label><button class="button" type="submit">Save wheel layout ↗</button></div></form>
<div class="section-heading"><div><div class="eyebrow">MAKE EVERY SLOT YOUR OWN</div><h2>Slot images</h2></div></div><p class="muted">PNG, JPEG, or WebP · up to 1 MB · 16–1024 pixels per side. Square images work best; they appear as tiny icons without replacing the prize labels.</p>
<div class="slot-grid">@foreach($slots as $slot)<article class="panel"><div class="panel-heading"><h2>Slot {{ $slot->position + 1 }}</h2><span class="muted">{{ $slot->prize->name }}</span></div>@if($slot->image_path)<img class="slot-image-preview" src="{{ route('slot.image', $slot) }}?v={{ sha1($slot->image_path) }}" alt="Current image for slot {{ $slot->position + 1 }}">@else<div class="slot-image-empty">No image uploaded</div>@endif<form method="post" action="{{ route('admin.slots.image', $slot) }}" enctype="multipart/form-data" class="stack-form">@csrf<label>Image for slot {{ $slot->position + 1 }}<input name="image" type="file" accept="image/png,image/jpeg,image/webp" required></label><button class="button small secondary" type="submit">{{ $slot->image_path ? 'Replace image' : 'Upload image' }} ↗</button></form>@if($slot->image_path)<form method="post" action="{{ route('admin.slots.image.remove', $slot) }}" class="slot-remove-form">@csrf @method('DELETE')<button class="nav-link" type="submit">Remove this image</button></form>@endif</article>@endforeach</div>
@endsection