@extends('layouts.app')
@section('title', 'A little spin. A little possibility.')
@section('content')
<section class="wheel-hero container">
    <div class="hero-copy">
        <div class="eyebrow"><span class="live-dot"></span> YOUR NEXT LUCKY MOMENT</div>
        <h1>Good things<br>come <em>around.</em></h1>
        <p class="lead">A little anticipation. A little luck.<br>Give the wheel a spin and see what’s waiting for you.</p>
        <div class="play-card">
            @guest
                <div class="card-label">YOUR SEAT AT THE WHEEL</div><h2>Every lucky story starts here.</h2>
                <p>Create your player account, then ask an admin for spin credits. One credit. One chance to discover a reward.</p>
                <a class="button wide" href="{{ route('register') }}">Create a player account <span>↗</span></a>
                <div class="small-note">Already a member? <a href="{{ route('login') }}">Sign in</a></div>
            @else
                @if(auth()->user()->is_admin)
                    <div class="card-label">ADMINISTRATOR VIEW</div><h2>Your wheel, your way.</h2><p>Manage prizes, assign wheel slots, and give your players their next chance.</p><a class="button wide" href="{{ route('admin.dashboard') }}">Open admin studio ↗</a>
                @else
                    <div class="card-label">WELCOME BACK, {{ auth()->user()->name }}</div>
                    <div class="wallet"><strong data-credit-count>{{ auth()->user()->spin_credits }}</strong><span>spin credits<br><small>1 credit per spin</small></span></div>
                    <button class="button wide" id="spin-button" type="button" @disabled(!$ready || auth()->user()->spin_credits < 1)>{{ !$ready ? 'The wheel is paused' : (auth()->user()->spin_credits > 0 ? 'Spin the wheel' : 'You need a spin credit') }} <span>✳</span></button>
                    <p class="small-note" id="spin-status" role="status" aria-live="polite">{{ auth()->user()->spin_credits > 0 ? 'Ready when you are. Make it a lucky one.' : 'Contact your admin to receive spin credits.' }}</p>
                @endif
            @endguest
        </div>
        <div class="hero-details"><span>✧ &nbsp; {{ $slots->count() }} prize slots</span><span>◎ &nbsp; Members only</span><span>↻ &nbsp; One credit per spin</span></div>
    </div>
    <div class="wheel-side">
        <div class="wheel-topline"><span>THE LUCKY WHEEL</span><span class="edition">NO. 001 / CLUB EDITION</span></div>
        <div class="wheel-stage">
            <div class="orbit orbit-one"></div><div class="orbit orbit-two"></div><span class="star star-one">✧</span><span class="star star-two">✧</span>
            <div class="pointer" aria-hidden="true"></div>
            <div id="wheel-disc" class="wheel-disc" role="img" aria-label="Lucky Wheel with eight prize slots"></div>
            <div class="wheel-hub" aria-hidden="true"><span>THE LUCKY</span><strong>✳</strong><span>CLUB</span></div>
        </div>
        <div class="wheel-caption"><span class="tiny-star">✦</span> A little spin. A little possibility. <span class="tiny-star">✦</span></div>
        <p class="odds-note">Each reward has its own chance of being selected.<br>Equal-sized slots don’t mean equal odds.</p>
    </div>
</section>
<section class="prize-section container" id="prizes">
    <div class="section-heading"><div><div class="eyebrow">THE POSSIBILITIES</div><h2>A wheel full of surprises.</h2></div><span class="muted">Explore the current wheel</span></div>
    <div class="prize-grid">@foreach($slots->unique('prize_id') as $slot)<article class="prize-card"><span class="prize-icon" style="--prize-color: {{ $slot->prize->color }}">✦</span><div><h3>{{ $slot->prize->name }}</h3><p>{{ $slot->prize->description }}</p></div></article>@endforeach</div>
</section>
@auth
@if(!auth()->user()->is_admin)
<section class="container history-section"><div class="section-heading"><div><div class="eyebrow">YOUR LUCKY MOMENTS</div><h2>Recent spins.</h2></div></div>
    @if($history->isEmpty())<div class="empty-state">Your story is just getting started. Your spin results will appear here.</div>@else<div class="table-wrap"><table><thead><tr><th>Reward</th><th>Date</th><th>Spin</th></tr></thead><tbody>@foreach($history as $spin)<tr><td><span class="gold">✦</span> {{ $spin->prize_name }}</td><td>{{ $spin->created_at->format('d M Y, H:i') }} {{ config('app.timezone') }}</td><td class="muted">#{{ $spin->id }}</td></tr>@endforeach</tbody></table></div>@endif
</section>
@endif
@endauth
<dialog id="result-dialog" class="result-dialog"><div class="result-symbol">✦</div><div class="eyebrow">YOUR LUCKY MOMENT</div><h2 id="result-prize"></h2><p>Your result has been saved to your player account.<br>Contact your admin to arrange any prize collection.</p><button class="button wide" type="button" id="result-close">Back to the wheel ↗</button></dialog>
@endsection
@push('scripts')
<script type="application/json" id="wheel-data">{!! json_encode(['slots' => $wheelData, 'version' => $wheelVersion, 'spinUrl' => route('spin'), 'userId' => auth()->id(), 'canPlay' => auth()->check() && !auth()->user()->is_admin && $ready], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
@endpush