@extends('layouts.app')
@section('title', 'Play & Win')
@section('content')
<div class="text-center mb-4">
    <h4>🎉 Pick a Card to Win a Reward!</h4>
    <p class="text-muted">Order #{{ $order->order_number }} — find the lucky card. Fewer tries, better prize!</p>
</div>

<div class="row row-cols-3 row-cols-md-{{ min($cards->count(), 5) }} g-3 justify-content-center" id="cardGrid" style="max-width:700px; margin:auto;">
    @foreach ($cards as $card)
    <div class="col text-center">
        <button type="button" class="btn btn-outline-dark w-100 py-4 card-btn" data-card-id="{{ $card->id }}" style="font-size:2.5rem;">
            ❓
        </button>
    </div>
    @endforeach
</div>

<div class="text-center mt-4">
    <p id="gameStatus" class="fs-5"></p>
</div>

@endsection
@section('scripts')
<script>
const attemptUrl = "{{ route('pos.shell-game.attempt', $order) }}";
const csrfToken = "{{ csrf_token() }}";
let gameOver = false;

document.querySelectorAll('.card-btn').forEach(btn => {
    btn.addEventListener('click', async function () {
        if (gameOver || this.disabled) return;
        this.disabled = true;

        const res = await fetch(attemptUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ card_id: this.dataset.cardId })
        });
        const data = await res.json();

        if (data.status === 'miss') {
            this.innerHTML = '❌';
            this.classList.add('btn-outline-secondary');
            document.getElementById('gameStatus').textContent = 'Not this one — try again! (Attempt ' + data.attempt + ')';
        } else if (data.status === 'won') {
            gameOver = true;
            this.innerHTML = '🎁';
            this.classList.add('btn-success');
            document.querySelectorAll('.card-btn').forEach(b => b.disabled = true);
            let msg = '🎉 You won: ' + data.reward_text + '!';
            if (data.coupon_code) {
                msg += ' Your code: ' + data.coupon_code;
            }
            document.getElementById('gameStatus').innerHTML = '<strong class="text-success">' + msg + '</strong>';
        }
    });
});
</script>
@endsection