@extends('layouts.app')
@section('title', 'For the love of cats')
@section('content')
<section class="cat-benefits" aria-label="About the campaign"><div class="container cat-benefits-inner">
<article><span class="benefit-icon"><svg aria-hidden="true"><use href="#cat-paw"/></svg></span><div><h2>FOR THE LOVE OF CATS</h2><p>A little moment of play for people who make room for paws, purrs, and personality.</p></div></article>
<article><span class="benefit-icon"><svg aria-hidden="true"><use href="#cat-heart"/></svg></span><div><h2>YOUR OWN BONUS MOMENT</h2><p>Your player account keeps your credits and spin results together, just for you.</p></div></article>
<article><span class="benefit-icon"><svg aria-hidden="true"><use href="#cat-spark"/></svg></span><div><h2>A SIMPLE WAY TO PLAY</h2><p>Shop in store, submit your receipt for review, and spin after approval.</p></div></article>
</div></section>
<section class="cat-intro container"><div class="cat-intro-copy"><div class="eyebrow">BONUS BONANZA / THE CAT LOVERS’ EDITION</div><h1>For the love<br><em>of cats.</em></h1><p class="lead">They make our homes a little warmer. Our days a little brighter. This is a little moment for the people who love them.</p><p>Your in-store purchase unlocks a little bonus moment. Upload your receipt and verify your email. Once our team approves your purchase, your spins will be ready.</p><div class="cat-hero-actions"><a class="button" href="{{ auth()->check() ? '#play-wheel' : '#claim-purchase' }}">{{ auth()->check() ? 'Go to my wheel' : 'Claim my spins' }} <span>↗</span></a><a class="text-link" href="#how-it-works">How to play ↓</a></div><span class="cat-hero-note">Made for cat people. A moment that’s yours.</span></div>@include('purchase.claim-form')</section>
<section class="wheel-hero container" id="play-wheel">
    <div class="hero-copy">
        <div class="eyebrow">TAKE A LITTLE TIME FOR YOU</div>
        <h2 class="wheel-section-title">A little spin.<br>A lovely possibility.</h2>
        <p class="lead">Curiosity looks good on you.<br>Take your place at the wheel and see what comes around.</p>
        <div class="play-card">
            @guest
                <div class="card-label">WELCOME, CAT PERSON</div><h2>Your bonus moment starts here.</h2>
                <p>Buy a qualifying product in store, then upload your receipt for review.</p>
                <a class="button wide" href="#claim-purchase">Claim my spins <span>↗</span></a>
                <div class="small-note">Already claimed? <a href="{{ route('customer.login') }}">Sign in to spin</a></div>
            @else
                @if(auth()->user()->is_admin)
                    <div class="card-label">ADMINISTRATOR VIEW</div><h2>Your wheel, your way.</h2><p>Manage prizes 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 ? $wheelNotice : (auth()->user()->spin_credits > 0 ? 'Let’s spin!' : 'You need a spin credit') }} <span>✳</span></button>
                    <p class="small-note" id="spin-status" role="status" aria-live="polite">{{ !$ready ? 'Please come back later or contact your campaign administrator. Your credits are kept.' : (auth()->user()->spin_credits > 0 ? 'One credit. One spin. Your bonus moment awaits.' : 'Upload your receipt above. Spins are added after approval.') }}</p>
                @endif
            @endguest
        </div>
        <div class="hero-details"><span>◎ &nbsp; Verified customers</span><span>↻ &nbsp; 1 credit = 1 spin</span></div>
    </div>
    <div class="wheel-side">
        <div class="wheel-topline"><span>THE BONUS WHEEL</span><span class="wheel-state {{ $ready ? 'is-open' : '' }}"><span aria-hidden="true">●</span> {{ $wheelNotice }}</span></div>
        <div class="wheel-stage awan-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>
            <img class="awan-mascot awan-behind" src="{{ asset('wheel/awan-peek.png') }}" width="1254" height="1254" alt="Awan, a blue-eyed ragdoll in a beige hat, peeking from behind the wheel with his paws holding the rim" draggable="false">
            <img class="awan-mascot awan-head" src="{{ asset('wheel/awan-peek.png') }}" width="1254" height="1254" alt="" aria-hidden="true" draggable="false">
            <img class="awan-mascot awan-blink" src="{{ asset('wheel/awan-blink.png') }}" width="1254" height="1254" alt="" aria-hidden="true" draggable="false">
            <div class="pointer" aria-hidden="true"></div>
            <div id="wheel-disc" class="wheel-disc" role="img" aria-label="Bonus Bonanza wheel with {{ $slots->count() }} active prize slots"></div>
            <img class="awan-mascot awan-paw-left" src="{{ asset('wheel/awan-peek.png') }}" width="1254" height="1254" alt="" aria-hidden="true" draggable="false">
            <img class="awan-mascot awan-paw-right" src="{{ asset('wheel/awan-peek.png') }}" width="1254" height="1254" alt="" aria-hidden="true" draggable="false">
            <div class="wheel-hub" aria-hidden="true"><span>BONUS</span><svg class="hub-paw"><use href="#cat-paw"/></svg><span>BONANZA</span></div>
            <div class="wheel-sticker" aria-hidden="true"><strong>{{ $slots->count() }}</strong><span>SLOTS OF<br>POSSIBILITY</span></div>
        </div>
        <div class="wheel-caption"><span class="tiny-star">✦</span> ROUND AND ROUND. WHAT WILL YOU FIND? <span class="tiny-star">✦</span></div>
        <p class="odds-note">Slots are shuffled when you open the wheel.<br>Only in-stock prizes can win. Equal-sized slots don’t mean equal odds.</p>
    </div>
</section>
<div class="campaign-ribbon" aria-hidden="true"><span>A LITTLE PLAY. A LITTLE POSSIBILITY.</span><b>♡</b><span>FOR THE PEOPLE WHO LOVE CATS.</span><b>♡</b><span>BONUS BONANZA</span></div>
<section class="prize-section container" id="prizes">
    <div class="section-heading"><div><div class="eyebrow">A LITTLE SOMETHING TO LOOK FORWARD TO</div><h2>On the wheel</h2></div><span class="muted">Current wheel outcomes · {{ $slots->count() }} slots</span></div>
    <div class="prize-grid">@foreach($slots->unique('prize_id') as $slot)<article class="prize-card" style="--prize-color: {{ $slot->prize->color }}"><div class="prize-card-top"><span class="prize-icon" aria-hidden="true">{{ $loop->first ? '✷' : '✦' }}</span><span class="prize-index">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span></div><div><h3>{{ $slot->prize->name }}</h3><p>{{ $slot->prize->description }}</p><span class="availability">{{ !$slot->prize->active || $slot->prize->weight === 0 ? 'Currently unavailable' : ($slot->prize->stock < 1 ? 'Sold out' : number_format($slot->prize->stock).' in stock') }}</span></div></article>@endforeach</div>
</section>
<section class="how-section container" id="how-it-works"><div class="section-heading"><div><div class="eyebrow">AS SIMPLE AS ONE, TWO, THREE</div><h2>Make yourself at home.</h2></div><a class="text-link" href="{{ auth()->check() ? '#play-wheel' : '#claim-purchase' }}">{{ auth()->check() ? 'Back to the wheel' : 'Let’s get started' }} ↗</a></div><div class="steps-grid"><article class="step-card"><span class="step-number">01</span><h3>Shop in our physical store.</h3><p>Buy a qualifying product and collect your receipt from our team.</p></article><article class="step-card"><span class="step-number">02</span><h3>Collect your spin credits.</h3><p>Upload your receipt and verify your email. Our team checks it and adds spins after approval.</p></article><article class="step-card"><span class="step-number">03</span><h3>Let curiosity take a turn.</h3><p>Spend one credit, spin the wheel, and see the outcome. Your result is saved to your account.</p></article></div></section>
<section class="faq-section container"><div><div class="eyebrow">GOOD TO KNOW BEFORE YOU GO</div><h2>A few things<br>about the bonanza.</h2><p>Clear rules. A smoother spin.</p></div><div class="faq-list"><details><summary>How do I get credits?<span aria-hidden="true">+</span></summary><p>Buy a qualifying product in store, then upload your receipt for review.</p></details><details><summary>Does every spin win a prize?<span aria-hidden="true">+</span></summary><p>No prize is guaranteed. Your result depends on the prizes and chances configured by the admin. Each prize can have a different chance of selection, even when the wheel slots look equal.</p></details><details><summary>How do I collect a reward?<span aria-hidden="true">+</span></summary><p>Your result is saved in your recent spins. Contact your campaign administrator to arrange collection of any applicable reward.</p></details></div></section>
@auth
@if(!auth()->user()->is_admin)
@include('purchase.my-receipts')
<section class="container history-section">@if(\Illuminate\Support\Facades\DB::table('customer_profiles')->where('user_id', auth()->id())->exists())
<details class="panel" style="margin-top:24px"><summary>Optional: tell us about your cat</summary><p class="muted" style="font-size:12px;margin-top:12px">These questions are optional and do not affect your spins.</p><form class="stack-form" method="post" action="{{ route('customer.profile') }}">@csrf<label>Number of cats<input name="cat_count" type="number" min="0" max="100"></label><div>Product interests</div>@foreach(['food'=>'Food','treats'=>'Treats','toys'=>'Toys','grooming'=>'Grooming','boarding'=>'Boarding'] as $value=>$label)<label class="check"><input type="checkbox" name="interests[]" value="{{ $value }}">{{ $label }}</label>@endforeach<label>How did you hear about us?<select name="source"><option value="">Prefer not to say</option>@foreach(['walk-in'=>'Walk-in','instagram'=>'Instagram','facebook'=>'Facebook','referral'=>'Referral','other'=>'Other'] as $value=>$label)<option value="{{ $value }}">{{ $label }}</option>@endforeach</select></label><button class="button small" type="submit">Save optional preferences</button></form></details>
@endif<div class="section-heading"><div><div class="eyebrow">YOUR BONUS STORY SO FAR</div><h2>Recent spins<span class="gold">.</span></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 BONANZA RESULT</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(['imagePercent' => (int) (\Illuminate\Support\Facades\DB::table('wheel_settings')->where('id', 1)->value('wheel_image_percent') ?? 70), '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