@extends('layouts.admin')
@section('title','Game prize pool')
@section('admin-content')
@php
$giftMode=\App\Services\GameSettings::active()==='lucky-gift-box';
@endphp
<div class="admin-heading"><div><div class="eyebrow">EVERY PRIZE HAS ITS PLACE</div><h1>Game prize pool.</h1><p>{{ $giftMode ? 'Choose the prizes available in the weighted gift draw. Manage the number of gift boxes in Games → Lucky Gift Box → Settings.' : 'Choose the prizes and slots for Lucky Wheel, 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 prize selection works</strong><p>Each active, in-stock prize with a positive weight in this pool can be won. Each prize counts once when calculating its chance.@if($giftMode) The number of gift boxes is separate from the number of prizes. High-value PIN showcases are display only and do not change the actual draw.@else Each row is a wheel slot. You can use 1–24 slots; repeated prizes do not increase their chances. Existing images are kept when their prize stays the same.@endif</p></div>
<form method="post" action="{{ route('admin.slots.update') }}" id="wheel-layout-form">@csrf @method('PUT')@if($giftMode)<input type="hidden" name="pool_mode" value="1">@endif<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))> Game open for play</label><button class="button small" type="submit">Save prize pool</button></div>@if(!$giftMode)<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 prize pool. 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>
@endif
<div class="panel-heading"><strong><span data-slot-count>{{ count(old('slots',$giftMode?$slots->unique('prize_id'):$slots)) }}</span> {{ $giftMode?'prizes':'slots' }}</strong><button class="button small secondary" type="button" data-slot-add>{{ $giftMode?'Add prize +':'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]) : ($giftMode?$slots->unique('prize_id')->values():$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">Manage prize 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