@extends('layouts.app')

@section('content')

<div class="container py-5">

    <div class="text-center mb-4">

        <h2>🎟 Scratch Card</h2>

    </div>

    @if($card)

    <div class="row justify-content-center">

        <div class="col-md-5">

            <div class="card shadow border-0">

                <div class="card-body text-center">

                    <canvas
                        id="scratchCanvas"
                        width="320"
                        height="220"
                        style="
                        border-radius:20px;
                        cursor:pointer;
                        width:100%;
                        "
                    ></canvas>

                    <div
                        id="rewardBox"
                        class="mt-3 d-none"
                    >

                        <h2>

                            🎉 ৳{{ $card->reward }}

                        </h2>

                        <form
                            action="{{ route('scratch.claim',$card->id) }}"
                            method="POST"
                        >

                            @csrf

                            <button
                                class="btn btn-success btn-lg"
                            >
                                Claim Prize
                            </button>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>

    @else

    <div class="alert alert-info text-center">

        No Scratch Card Available

    </div>

    @endif

</div>

@if($card)

<script>

const canvas =
document.getElementById(
    'scratchCanvas'
);

const ctx =
canvas.getContext('2d');

ctx.fillStyle = '#c0c0c0';

ctx.fillRect(
    0,
    0,
    canvas.width,
    canvas.height
);

ctx.fillStyle = '#000';

ctx.font = '30px Arial';

ctx.fillText(
    'Scratch Here',
    70,
    120
);

let scratched = 0;

let isDown = false;

canvas.addEventListener(
'mousedown',
() => {
    isDown = true;
});

canvas.addEventListener(
'mouseup',
() => {
    isDown = false;
});

canvas.addEventListener(
'mousemove',
function(e){

    if(!isDown) return;

    let rect =
    canvas.getBoundingClientRect();

    let x =
    e.clientX - rect.left;

    let y =
    e.clientY - rect.top;

    ctx.globalCompositeOperation =
    'destination-out';

    ctx.beginPath();

    ctx.arc(
        x,
        y,
        20,
        0,
        Math.PI*2
    );

    ctx.fill();

    scratched++;

    if(scratched > 80){

        document
        .getElementById(
            'rewardBox'
        )
        .classList
        .remove('d-none');

        canvas.style.display =
        'none';
    }

});

</script>

@endif

@endsection