@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" style="margin-bottom:20px"><h2 style="font-size:22px">Build a fuller wheel</h2><p class="muted" style="font-size:12px">Repeat the active prizes currently selected below, evenly across more slots. Inventory and winning chances stay the same. Review the rows, then Save wheel layout. New repeats reuse an existing image for that prize.</p><div style="display:flex;gap:12px;align-items:end;flex-wrap:wrap"><label>Number of slots<select data-layout-size><option>8</option><option>10</option><option selected>12</option><option>16</option><option>24</option></select></label><button class="button small secondary" type="button" data-layout-build>Distribute prizes</button></div><p data-layout-build-status role="status" style="font-size:12px;margin-top:12px"></p></div>
<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 data-active="{{ $prize->active ? 1 : 0 }}" 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 data-active="{{ $prize->active ? 1 : 0 }}" 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-plan.js') }}" defer></script><script src="{{ asset('wheel/wheel-layout.js') }}" defer></script>@endpush