@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.</h1><p>Choose how many slots appear on the wheel. Add or remove rows, select their prizes, then save.</p></div><a class="button small secondary" href="{{ route('admin.prizes') }}">Prizes &amp; odds</a></div>
<div class="info-box"><strong>Your layout sets the wheel size.</strong><p>7 rows show 7 slots; 10 rows show 10 slots. You can use 1–24 slots. Repeating a prize is optional and does not multiply its chance. Inactive prizes are hidden. Player pages shuffle the displayed order. Unchanged slots keep their images; changing a slot’s prize clears its old image.</p></div>
<form method="post" action="{{ route('admin.slots.update') }}" id="wheel-layout-form">@csrf @method('PUT')<input type="hidden" name="layout_version" value="{{ $layoutVersion }}">
<div class="panel-heading"><strong><span data-slot-count>{{ count(old('slots',$slots)) }}</span> slots</strong><button class="button small secondary" type="button" data-slot-add>Add slot +</button></div>
@php($layoutRows=old('slots')!==null ? collect(old('slots'))->map(fn($prizeId,$index)=>(object)['id'=>old('slot_ids.'.$index),'prize_id'=>$prizeId]) : $slots)
<div class="slot-grid" data-slot-rows>@foreach($layoutRows as $slot)<div class="panel slot-editor" data-slot-row><span class="slot-number" data-slot-number>{{ $loop->iteration }}</span><label>Prize<select name="slots[{{ $loop->index }}]" data-slot-prize required><option value="">Choose prize</option>@foreach($prizes as $prize)<option value="{{ $prize->id }}" @selected((int)$slot->prize_id===$prize->id)>{{ $prize->name }}{{ !$prize->active?' (inactive)':'' }}</option>@endforeach</select></label><input type="hidden" data-slot-id name="slot_ids[{{ $loop->index }}]" value="{{ $slot->id }}"><button class="button small secondary" type="button" data-slot-remove>Remove slot</button></div>@endforeach</div>
<template id="wheel-slot-template"><div class="panel slot-editor" data-slot-row><span class="slot-number" data-slot-number></span><label>Prize<select data-slot-prize required><option value="">Choose prize</option>@foreach($prizes as $prize)<option value="{{ $prize->id }}">{{ $prize->name }}{{ !$prize->active?' (inactive)':'' }}</option>@endforeach</select></label><input type="hidden" data-slot-id value=""><button class="button small secondary" type="button" data-slot-remove>Remove slot</button></div></template>
<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 small" type="submit">Save wheel layout</button></div></form>
<p class="muted">Upload slot images in <a href="{{ route('admin.prizes') }}">Prizes &amp; odds</a> after saving.</p>
<style>.slot-editor{display:flex;flex-direction:column;gap:14px}.slot-editor>[data-slot-remove]{align-self:flex-end}</style>
@endsection
@push('scripts')<script src="{{ asset('wheel/wheel-layout.js') }}" defer></script>@endpush