@extends('layouts.admin')
@section('title', 'Media library')
@section('admin-content')
<div class="admin-heading"><div><div class="eyebrow">YOUR CAMPAIGN IMAGES</div><h1>Media library<span class="gold">.</span></h1><p>View uploaded wheel images and remove the ones you no longer need.</p></div><span class="date-chip">{{ $media->total() }} images</span></div>
<div class="info-box"><strong>Keep your library tidy</strong><p>Deleting an image removes it from every wheel slot using it. Prizes, stock, and past winnings are preserved. Upload images here or from Prizes &amp; odds. Library uploads do not change wheel slots.</p></div>
<form class="panel media-upload" method="post" action="{{ route('admin.media.upload') }}" enctype="multipart/form-data" id="media-upload-form">@csrf
<label id="media-dropzone" class="media-dropzone" for="media-files"><span aria-hidden="true" style="font-size:30px">↑</span><strong>Drop your images here</strong><span>or click to browse · PNG, JPEG, WebP</span><small>Up to 10 images · 8 MB each · 16–4096 pixels per side · 10 MB total per upload</small><input id="media-files" type="file" name="images[]" accept="image/png,image/jpeg,image/webp" multiple required></label>
<div id="media-upload-preview" class="media-upload-preview"></div><p id="media-upload-status" role="status" aria-live="polite"></p><button class="button small" type="submit" id="media-upload-button">Upload images</button></form>
<style>.media-dropzone{padding:28px;align-items:center;text-align:center;border:2px dashed var(--line);border-radius:12px;cursor:pointer;background:var(--bg);transition:border-color .2s,background .2s}.media-dropzone.is-dragging{border-color:#498f88;background:#498f8815}.media-dropzone strong{font-size:18px;color:var(--text)}.media-dropzone input{max-width:320px;margin-top:10px}.media-upload-preview{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.media-upload-preview figure{margin:0;width:100px}.media-upload-preview img{width:100px;height:80px;object-fit:contain;border:1px solid var(--line);border-radius:8px}.media-upload-preview figcaption{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-upload #media-upload-status{font-size:12px;margin:12px 0}</style>
@if($media->count())<form id="media-bulk-delete" method="post" action="{{ route('admin.media.bulk-delete') }}" class="panel media-bulk-toolbar">@csrf @method('DELETE')<label class="check"><input type="checkbox" id="media-select-all"> Select all on this page</label><span id="media-selection-count" role="status">0 selected</span><button class="button small secondary" id="media-delete-selected" type="submit" disabled>Delete selected</button></form>@endif
<style>.media-bulk-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:18px}.media-bulk-toolbar span{font-size:12px;color:var(--muted)}.media-card.is-selected{border-color:#498f88;box-shadow:0 0 0 2px #498f8833}.media-select-label{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:12px}.media-select-label input{accent-color:#498f88}</style>
<div class="media-grid">
@forelse($media as $item)
<article class="panel media-card"><label class="media-select-label"><input type="checkbox" name="media[]" value="{{ $item['id'] }}" form="media-bulk-delete" data-media-select> Select image</label><a class="media-preview" href="{{ route('admin.media.image', $item['id']) }}" target="_blank" rel="noopener" aria-label="View image {{ $item['name'] }}"><img src="{{ route('admin.media.image', $item['id']) }}" loading="lazy" alt="Uploaded wheel image"></a><div class="media-details"><strong class="media-name" title="{{ $item['name'] }}">{{ $item['name'] }}</strong><p>{{ number_format($item['size'] / 1024, 1) }} KB · {{ date('d M Y', $item['modified']) }}</p>@forelse($item['slots'] as $slot)<span class="odds-badge">{{ $slot->prize?->name ?? 'Prize' }} · slot {{ $slot->position + 1 }}</span>@empty<span class="muted">Not currently used</span>@endforelse</div></article>
@empty<div class="panel"><h2>No images yet</h2><p>Your uploaded wheel images will appear here.</p><a class="button small" href="{{ route('admin.prizes') }}">Open Prizes &amp; odds</a></div>@endforelse
</div>
@include('admin.partials.list-pagination',['paginator'=>$media,'itemsLabel'=>'images'])
<style>.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.media-card{padding:14px;margin:0;display:flex;flex-direction:column;gap:14px;border-radius:14px}.media-preview{height:180px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px dashed var(--line);border-radius:10px;overflow:hidden}.media-preview img{max-width:100%;max-height:100%;object-fit:contain}.media-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.media-details{flex:1;min-width:0}.media-details p,.media-details>.muted{font-size:11px}.media-details .odds-badge{display:inline-block;margin:3px 2px 0 0;white-space:normal}.media-delete{width:100%;justify-content:center!important;color:#be5b63!important;border-color:#be5b6355!important;border-radius:8px!important}</style>
@endsection
@push('scripts')
<script src="{{ asset('wheel/media-upload.js') }}" defer></script>
<script src="{{ asset('wheel/media-select.js') }}" defer></script>
@endpush