@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>
<details class="info-box layout-help"><summary>How wheel slots work</summary><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. New repeated slots reuse an existing image for the same prize.</p></details>
<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 form-footer layout-save-bar"><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><div class="panel layout-builder"><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</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</button></div></template>
</form>
<p class="muted">Upload slot images in <a href="{{ route('admin.prizes') }}">Prizes &amp; odds</a> after saving.</p>
<style>
.layout-help{padding:12px 16px;margin-bottom:16px;font-size:12px}.layout-help summary{cursor:pointer;font-weight:600}.layout-help p{margin:10px 0 0}
#wheel-layout-form .layout-save-bar{position:sticky;top:12px;z-index:20;padding:12px 16px;margin:0 0 14px;gap:12px;box-shadow:0 4px 14px #14242b15;flex-wrap:wrap}
#wheel-layout-form .layout-builder{padding:14px 16px;margin-bottom:16px}#wheel-layout-form .layout-builder h2{margin:0 0 6px}#wheel-layout-form .layout-builder p{margin:6px 0 10px}#wheel-layout-form [data-layout-build-status]:empty{display:none}
#wheel-layout-form .slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:58vh;max-height:58dvh;overflow-y:auto;overscroll-behavior-y:contain;padding:2px 8px 8px 2px;scrollbar-gutter:stable;align-content:start}
#wheel-layout-form .slot-editor{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;margin:0;min-width:0}
#wheel-layout-form .slot-number{font-size:18px;line-height:1;margin:0}#wheel-layout-form .slot-editor label{min-width:0;font-size:11px;gap:4px}#wheel-layout-form .slot-editor select{width:100%;min-width:0;font-size:12px;padding:8px}#wheel-layout-form .slot-editor>[data-slot-remove]{align-self:end;padding:9px 10px;font-size:11px}
@media(max-width:1100px){#wheel-layout-form .slot-grid{grid-template-columns:1fr}}
@media(max-width:600px){#wheel-layout-form .slot-grid{max-height:none;overflow:visible;padding:0}#wheel-layout-form .layout-save-bar{top:8px}#wheel-layout-form .layout-save-bar>button{width:100%;justify-content:center}#wheel-layout-form .slot-editor{grid-template-columns:24px minmax(0,1fr) auto;gap:6px}}
</style>
@endsection
@push('scripts')<script src="{{ asset('wheel/wheel-layout-plan.js') }}" defer></script><script src="{{ asset('wheel/wheel-layout.js') }}" defer></script>@endpush