@section('title', 'Spring Clean')
@extends('layouts.main')


@section('extra-css')

    <style>
        html {
            background-image: url("/assets/images/bg.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-color: #5597d3;
            background-position: top center;
        }

        body { margin: 0; }

        #bridge {
            display: block;
            margin: 0 auto;
            background-image: url({{ asset('/assets/images/bg-wipe.jpg') }});
            background-image: -webkit-image-set(url('https://placehold.jp/13/a6c7ea/cd1956/500.500?text=@foreach($prize as $data) {{ $data->prize }} @endforeach%0A%0AYour entry will be verified within the following 48hour. Once verified you’ll receive your voucher code via email.'), url('https://yeswecan.co.za/public/assets/images/bg-wipe.jpg'));
            background-size: auto;
            background-position: center center;
            background-repeat: no-repeat;
            background-color: #a6c7ea;
            width: 500px;
            height: 500px;
            margin-top:5%;
            border-radius: 50%;
            cursor:  crosshair;
            cursor: url({{ asset('/assets/images/sponge.png') }}) 53 53, crosshair;
            position: relative;
        }
        #bridgeContainer {
            text-align: center;
            font-family: Avenir, sans-serif;
        }
        #bridgeContainer figcaption {
            margin-top: 2rem;
        }

        @media screen and (max-width: 991px) {
            html {
                background-image: url("/assets/images/bg-991.jpg");
            }
        }

        @media screen and (max-width: 600px) {
            html {
                background-image: url("/assets/images/bg-600-2.jpg");
                background-color: #94c0e8;
                background-position: 100% 30%;
                background-repeat: no-repeat;
                background-size: cover;
            }
            #bridge {
                background-image: url('https://yeswecan.co.za/public/assets/images/bg-wipe.jpg');
                background-image: -webkit-image-set(url('https://placehold.jp/18/a6c7ea/cd1956/300.300?text=@foreach($prize as $data) {{ $data->prize }} @endforeach'), url({{ asset('/assets/images/bg-wipe.jpg') }}));
                width: 300px;
                height: 300px;
            }
        }

    </style>
@endsection

@section('content')
    <div class="container hidden-xs">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 style="font-weight: bold;">START CLEANING TO WIN YOUR SHARE OF <br>R100,000 IN GUARANTEED SPOT PRIZES!</h2>
            </div>
        </div>
    </div>
    <canvas id="bridge" width="300" height="300"></canvas>
    <div class="container">
        <div class="row">
            @if(session('currentPlayerQuantity') > 1)
                <div class="col-xs-6 text-center">
                    <a href="{{ route('play.thank-you') }}" class="btn btn-primary">FINISH</a>
                </div>
            <div class="col-xs-6 text-center">
                <form action="{{ route('entries.index') }}" class="spin-again-form">
                    @csrf
                    @foreach($prize as $data)
                        <input type="hidden" name="id" value="{{ $data->id }}">
                    @endforeach
                    <button type="submit" class="btn btn-primary">CLEAN AGAIN</button>
                </form>
            </div>
            @else
                <div class="col-xs-12 text-center">
                    <br>
                    <a href="{{ route('play.thank-you') }}" class="btn btn-primary">FINISH</a>
                </div>
            @endif


        </div>
    </div>
@endsection


@section('extra-js')
    <script>
        var bridge = document.getElementById("bridge"),
            bridgeCanvas = bridge.getContext('2d'),
            brushRadius = (bridge.width / 100) * 5,
            img = new Image();

        if (brushRadius < 50) { brushRadius = 50 }

        img.onload = function(){
            bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height);
        }
        img.loc = 'https://yeswecan.co.za/public/assets/images/';
        img.filename = 'bg-wipe.jpg';
        if (window.devicePixelRatio >= 2) {
            var nameParts = img.filename.split('.');
            img.src = img.loc + nameParts[0]+"-2x"+"."+nameParts[1];
        } else {
            img.src = img.loc + img.filename;
        }

        function detectLeftButton(event) {
            if ('buttons' in event) {
                return event.buttons === 1;
            } else if ('which' in event) {
                return event.which === 1;
            } else {
                return event.button === 1;
            }
        }

        function getBrushPos(xRef, yRef) {
            var bridgeRect = bridge.getBoundingClientRect();
            return {
                x: Math.floor((xRef-bridgeRect.left)/(bridgeRect.right-bridgeRect.left)*bridge.width),
                y: Math.floor((yRef-bridgeRect.top)/(bridgeRect.bottom-bridgeRect.top)*bridge.height)
            };
        }

        function drawDot(mouseX,mouseY){
            bridgeCanvas.beginPath();
            bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2*Math.PI, true);
            bridgeCanvas.fillStyle = '#000';
            bridgeCanvas.globalCompositeOperation = "destination-out";
            bridgeCanvas.fill();
        }

        bridge.addEventListener("mousemove", function(e) {
            var brushPos = getBrushPos(e.clientX, e.clientY);
            var leftBut = detectLeftButton(e);
            if (leftBut == 1) {
                drawDot(brushPos.x, brushPos.y);
            }
        }, false);

        bridge.addEventListener("touchmove", function(e) {
            e.preventDefault();
            var touch = e.targetTouches[0];
            if (touch) {
                var brushPos = getBrushPos(touch.pageX, touch.pageY);
                drawDot(brushPos.x, brushPos.y);
            }
        }, false);
    </script>
@endsection()