@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 layout-help"><strong>How wheel slots work</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. New repeated slots reuse an existing image for the same prize.</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 }}">
@php
$activePrizeCount = $prizes->where('active', true)->count();
$layoutSizes = $activePrizeCount > 0 && $activePrizeCount <= 15 ? collect(range($activePrizeCount, 15)) : collect();
@endphp
<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">Include every active prize, repeating prizes evenly when extra slots are available. 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 @disabled($activePrizeCount === 0 || $activePrizeCount > 15)>@foreach($layoutSizes as $size)<option value="{{ $size }}" @selected($size === $activePrizeCount)>{{ $size }}</option>@endforeach</select></label><button class="button small secondary" type="button" data-layout-build @disabled($activePrizeCount === 0 || $activePrizeCount > 15)>Distribute prizes</button></div><p class="muted" style="font-size:12px">{{ $activePrizeCount }} active prizes · minimum {{ $activePrizeCount }} slots.@if($activePrizeCount === 0) Activate a prize in Prizes &amp; odds first.@elseif($activePrizeCount > 15) Automatic distribution supports up to 15 slots; reduce the number of active prizes before distributing.@endif</p><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 strong{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