@extends('layouts.admin')
@section('title', 'Prizes & odds')
@section('admin-content')
<div class="admin-heading"><div><div class="eyebrow">SHAPE THE POSSIBILITIES</div><h1>Prizes & odds<span class="gold">.</span></h1><p class="muted">Give each prize its own chance to shine.</p></div><div style="display:flex;gap:10px;flex-wrap:wrap"><a class="button small secondary" href="{{ route('admin.slots') }}">Manage wheel slots</a><a class="button small" href="#new-prize">Add a prize +</a></div></div>
@php($imagePercent = (int) \Illuminate\Support\Facades\DB::table('wheel_settings')->where('id', 1)->value('wheel_image_percent'))
<details class="panel wheel-image-controls" id="wheel-image-controls" @if($errors->has('wheel_image_percent')) open @endif><summary><strong>Wheel image size</strong><span class="odds-badge">{{ $imagePercent }}%</span><span class="muted">Adjust size ▾</span></summary><form method="post" action="{{ route('admin.preferences.image-size') }}" class="wheel-image-size-form">@csrf @method('PUT')<label for="wheel-image-range">Badge coverage<input id="wheel-image-range" type="range" min="10" max="100" step="1" value="{{ old('wheel_image_percent', $imagePercent) }}"></label><label>Size (%)<input id="wheel-image-number" type="number" name="wheel_image_percent" min="10" max="100" step="1" required value="{{ old('wheel_image_percent', $imagePercent) }}"></label><button class="button small" type="submit">Save image size</button></form><small class="muted">10–100% of each slot’s outer edge. Resizes the circular badge and stitching. Refresh the frontend after saving.</small></details>
<div class="info-box"><strong>How chances work</strong><p>Chance = prize weight ÷ total weight of active, in-stock prizes assigned to the wheel. Sold-out, inactive, zero-weight, and unassigned prizes cannot win. Repeating a prize in several slots doesn’t increase its chance. The displayed order is shuffled for every player page.</p></div>
<p class="muted" style="font-size:11px">Edit a prize, then select Update to save. On smaller screens, scroll the table sideways to see every column.</p><div class="table-wrap prize-row-wrap" tabindex="0" role="region" aria-label="Prize editor"><table class="prize-row-table"><thead><tr><th>Active</th><th>Prize name<br>Description</th><th>Chance weight</th><th>Slot color</th><th>Slot image</th><th>Prize stock</th><th>Update / Delete</th></tr></thead><tbody>
@foreach($prizes as $prize)
<tr>
<td><input form="prize-{{ $prize->id }}" type="checkbox" name="active" value="1" @checked($prize->active) aria-label="{{ $prize->name }} active"></td>
<td><label class="sr-only" for="name-{{ $prize->id }}">Prize name</label><input id="name-{{ $prize->id }}" form="prize-{{ $prize->id }}" name="name" value="{{ $prize->name }}" maxlength="80" required><label class="sr-only" for="description-{{ $prize->id }}">Description</label><textarea id="description-{{ $prize->id }}" form="prize-{{ $prize->id }}" name="description" maxlength="200" rows="2">{{ $prize->description }}</textarea>@if(!$assigned->contains($prize->id))<small class="muted">Not assigned to the wheel · <a href="{{ route('admin.slots') }}" style="text-decoration:underline">Assign a slot</a></small>@endif</td>
<td><input form="prize-{{ $prize->id }}" type="number" name="weight" value="{{ $prize->weight }}" min="0" max="100000" required aria-label="Chance weight for {{ $prize->name }}"><small class="muted">{{ $totalWeight && $prize->active && $prize->stock > 0 && $assigned->contains($prize->id) ? number_format($prize->weight / $totalWeight * 100, 2) : '0.00' }}% chance</small></td>
<td><input form="prize-{{ $prize->id }}" type="color" name="color" value="{{ $prize->color }}" required aria-label="Slot color for {{ $prize->name }}"></td>
<td>@forelse($slots->where('prize_id', $prize->id) as $slot)@include('admin.partials.slot-image', ['slot' => $slot])@empty<small class="muted">Assign a wheel slot to upload an image.</small>@endforelse</td>
<td><input form="prize-{{ $prize->id }}" type="number" name="stock" value="{{ $prize->stock }}" min="0" max="1000000" required aria-label="Stock for {{ $prize->name }}"><input form="prize-{{ $prize->id }}" type="hidden" name="expected_stock" value="{{ $prize->stock }}"><small class="muted">Remaining units</small></td>
<td><form id="prize-{{ $prize->id }}" method="post" action="{{ route('admin.prizes.update', $prize) }}" data-preserve-scroll>@csrf @method('PUT')<button class="button small secondary" type="submit">Update</button></form><form method="post" action="{{ route('admin.prizes.delete', $prize) }}" data-preserve-scroll onsubmit="return confirm('Delete this prize? Past winnings will be kept. Its wheel slots will be removed, reducing the wheel size.');">@csrf @method('DELETE')<button class="button small secondary" type="submit">Delete</button></form></td>
</tr>
@endforeach
</tbody></table></div>@include('admin.partials.list-pagination',['paginator'=>$prizes,'itemsLabel'=>'prizes'])
<style>

.prize-row-wrap { margin: 24px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 8px 28px #152f2910; }
.prize-row-table { min-width: 1020px; width: 100%; table-layout: fixed; white-space: normal; }
.prize-row-table th { padding: 18px 12px; font-weight: 600; background: var(--panel2); }
.prize-row-table th:nth-child(1) { width: 66px; }
.prize-row-table th:nth-child(2) { width: 24%; }
.prize-row-table th:nth-child(3) { width: 110px; }
.prize-row-table th:nth-child(4) { width: 84px; }
.prize-row-table th:nth-child(5) { width: 24%; }
.prize-row-table th:nth-child(6) { width: 120px; }
.prize-row-table th:nth-child(7) { width: 108px; }
.prize-row-table td { vertical-align: top; padding: 20px 12px; white-space: normal; }
.prize-row-table tbody tr:hover { background: color-mix(in srgb, var(--teal) 5%, transparent); }
.prize-row-table input:not([type=checkbox]):not([type=hidden]), .prize-row-table textarea { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 0 0 8px; border-radius: 9px; }
.prize-row-table textarea { font: inherit; line-height: 1.5; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); color: var(--text); resize: vertical; min-height: 70px; }
[data-theme=light] .prize-row-table textarea { background: #fff; border-color: #cbd4cf; }
.prize-row-table textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.prize-row-table input[name=name] { font-weight: 600; }
.prize-row-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal); margin: 12px 0 0 8px; }
.prize-row-table input[type=color] { height: 44px; cursor: pointer; }
.prize-row-table small { display: block; line-height: 1.6; font-size: 10px; }
.prize-row-table td:last-child .button { width: 100%; justify-content: center; border-radius: 8px; }
.prize-row-table td:last-child form:first-child .button { background: #498f88; color: #fff; border-color: #498f88; }
.prize-row-table td:last-child form + form { margin-top: 10px; }
.prize-row-table td:last-child form + form .button { color: #be5b63; border-color: #be5b6355; background: #be5b6308; }
.prize-row-table .prize-slot-image { border: 0; background: none; padding: 0; margin: 0 0 12px; }
.prize-row-table .prize-slot-image .panel-heading { margin-bottom: 8px; font-size: 10px; }
.prize-row-table .slot-image-preview { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; margin-bottom: 8px; }
.prize-row-table .slot-image-empty { padding: 8px 10px; margin-bottom: 8px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 10px; }
.prize-row-table .prize-slot-image .stack-form { gap: 8px; }
.prize-row-table .prize-slot-image label { font-size: 0; gap: 0; }
.prize-row-table .prize-slot-image input[type=file] { padding: 7px; font-size: 10px; margin: 0; }
.prize-row-table input[type=file]::file-selector-button { border: 0; padding: 5px 7px; border-radius: 5px; background: #498f881a; color: var(--text); font: inherit; margin-right: 5px; cursor: pointer; }
.prize-row-table .prize-slot-image .button { padding: 7px 10px; font-size: 10px; border-radius: 7px; justify-content: center; }
.prize-row-table .slot-remove-form { margin-top: 5px; }
.prize-row-table .slot-remove-form button { font-size: 10px; }

.wheel-image-controls{padding:16px 20px;margin-bottom:18px}
.wheel-image-controls summary{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:13px}
.wheel-image-controls summary>.muted{margin-left:auto;font-size:11px}
.wheel-image-size-form{display:grid;grid-template-columns:minmax(120px,1fr) 90px auto;gap:18px;align-items:end;margin:18px 0 10px}
.wheel-image-size-form input[type=range]{accent-color:#498f88;padding:0;height:42px}
.wheel-image-controls>small{font-size:11px}
.prize-row-table td{padding:16px 12px}
.prize-row-table textarea{min-height:56px;height:56px;font-size:11px}
.prize-row-table .prize-slot-image .panel-heading{margin:0;font-size:10px}
.prize-row-table .prize-slot-image{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;margin-bottom:8px}
.prize-row-table .prize-slot-image>.panel-heading{grid-column:1/-1}
.prize-row-table .prize-slot-image .slot-image-preview{margin:0}
.prize-row-table .prize-slot-image .slot-image-empty{margin:0;font-size:9px;padding:5px;text-align:center}
.prize-row-table .slot-upload-options{min-width:0}
.prize-row-table .slot-upload-options summary{font-size:11px;cursor:pointer;color:var(--text);padding:8px;border:1px solid var(--line);border-radius:7px;white-space:normal}
.prize-row-table .slot-upload-options[open]{grid-column:1/-1}
.prize-row-table .slot-upload-options .stack-form{margin-top:10px}
.prize-row-table .slot-upload-options .slot-remove-form{margin-top:8px}
@media(max-width:760px){.wheel-image-size-form{grid-template-columns:1fr 90px}.wheel-image-size-form button{grid-column:1/-1;justify-self:start}}
</style><article class="panel" id="new-prize"><div class="panel-heading"><h2>Create a new prize</h2><span class="gold">✦</span></div><form class="stack-form" method="post" action="{{ route('admin.prizes.create') }}">@csrf
<div class="form-row"><label>Prize name<input name="name" value="{{ old('name') }}" maxlength="80" required placeholder="Your next great reward"></label><label>Description<input name="description" value="{{ old('description') }}" maxlength="200" placeholder="Tell players what awaits"></label></div>
<div class="form-row"><label>Chance weight<input type="number" name="weight" value="{{ old('weight', 10) }}" min="0" max="100000" required></label><label>Slot color<input type="color" name="color" value="{{ old('color', '#498f88') }}" required></label></div><label>Starting stock<input name="stock" type="number" min="0" max="1000000" value="{{ old('stock', 0) }}" required></label><div class="form-footer"><label class="check"><input type="checkbox" name="active" value="1" @checked(old('active', true))> Active</label><button class="button small" type="submit">Create prize +</button></div></form></article>
<article class="panel"><div class="panel-heading"><h2>Recent stock top-ups</h2></div><div class="table-wrap"><table><thead><tr><th>Prize</th><th>Added</th><th>Stock after top-up</th><th>Admin</th><th>Date</th></tr></thead><tbody>@forelse($stockUpdates as $topup)<tr><td>{{ $topup->prize_name }}</td><td>+{{ $topup->amount }}</td><td>{{ $topup->balance_after }}</td><td>{{ $topup->admin_name }}</td><td>{{ \Carbon\Carbon::parse($topup->created_at)->format('d M, H:i') }}</td></tr>@empty<tr><td colspan="5" class="empty-state">Stock top-ups will be recorded here.</td></tr>@endforelse</tbody></table></div></article>
@endsection






@push('scripts')
<script src="{{ asset('wheel/image-size-controls.js') }}" defer></script>
@endpush