@section('title', 'Enter')
@extends('layouts.main')


@section('extra-css')
    <link rel="stylesheet" href="{{ asset('/assets/plugins/light-pick/lightpick.css') }}"/>
    <style>
        html {
            background-image: url("/assets/images/bg.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-color: #5597d3;
            background-position: top center;
        }

        main {
            position: relative;
            margin: 0 auto;
            width: var(--canvas-width);
            border:1px solid lime;
        }

        #canvas {
            z-index:9999;
            position:relative;
            margin: auto;
            background-color: transparent;
            border:1px solid red;
        }

        #canvas-background {
            z-index: 2000;
            position: absolute;
            top:40%;
            left:50%;
            transform: translate(-50%, -50%);
            width: inherit;
            font-size: 22px;
            text-align: center;
            color: var(--primaryColor);
            font-weight: bold;
        }

        .cover{
            position: absolute;
            width: 100%;
            height: 330px;
            z-index: 99999;
            background-image:url('/assets/images/cover.jpg');
            background-repeat: no-repeat;
            background-color: #ffffff;

        }
        .fContent {
            text-align: center;
            background: #2871b8;
            top:35%;
        }
        @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.jpg");
            }
        }

    </style>
@endsection

@section('content')

    <!--begin:: Check error or success -->
    @include('layouts.partials.success')
    @include('layouts.partials.errors')
    <!--end:: Check error or success -->
    <div class="row">
        <div class="col-xs-12">
            <div class="fContent animated slideInRight">
                <main class="center">
                    <div class="cover" id="cover"></div>
                    <canvas id="canvas" width="320px" height="320px"></canvas>
                    <p id="canvas-background" ></p>
                    <div style="margin-top:20px;"></div>
                    <div class="row">
                        <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-success">Play Again</button>
                            </form>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>


@endsection


@section('extra-js')
    <script>
        // Animation frame
        window.requestAnimFrame = (function (callback) {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimaitonFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000/60);
                };
        })();

        const body = document.getElementById('body');

        // Draw
        const color = "#ffffff";
        const stroke = 50;
        const bg = "#ffffff";

        // Canvas
        const canvas = document.getElementById("canvas");
        let canvasWidth = canvas.offsetWidth;
        let canvasHeight = canvas.offsetHeight;
        const context = canvas.getContext("2d");
        context.fillRect(0, 0, canvasWidth, canvasHeight);
        context.strokeStyle = color;
        context.lineWidth = stroke;
        context.fillStyle = bg;
        //document.getElementById('canvas-background').innerHTML = "<p>@foreach($prize as $data) {{ $data->prize }} @endforeach</p>";
        document.getElementById('canvas-background').innerHTML = "<p>Voucher R100 Woolworths Voucher 5% Bravecto®</p>";

        // Mouse events
        var drawing = false;
        var mousePos = { x:0, y:0 };
        var lastPos = mousePos;
        canvas.addEventListener("mousedown", function (e) {
            drawing = true;
            lastPos = getMousePos(canvas, e);
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            drawing = false;
        }, false);
        canvas.addEventListener("mousemove", function (e) {
            mousePos = getMousePos(canvas, e);
        }, false);

        // Touch events
        canvas.addEventListener("touchstart", function (e) {
            mousePos = getTouchPos(canvas, e);
            var touch = e.touches[0];
            var mouseEvent = new MouseEvent("mousedown", {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            canvas.dispatchEvent(mouseEvent);
        }, false);
        canvas.addEventListener("touchend", function (e) {
            var mouseEvent = new MouseEvent("mouseup", {});
            canvas.dispatchEvent(mouseEvent);
        }, false);
        canvas.addEventListener("touchmove", function (e) {
            var touch = e.touches[0];
            var mouseEvent = new MouseEvent("mousemove", {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            canvas.dispatchEvent(mouseEvent);
        }, false);

        // Prevent default scrolling behavior on Touch events
        document.body.addEventListener("touchstart", function (e) {
            if (e.target == canvas) {
                e.preventDefault();
            }
        }, {passive:false});
        document.body.addEventListener("touchend", function (e) {
            if (e.target == canvas) {
                e.preventDefault();
            }
        }, {passive:false});
        document.body.addEventListener("touchmove", function (e) {
            if (e.target == canvas) {
                e.preventDefault();
            }
        }, {passive:false});

        // Mouse position
        function getMousePos(canvasDom, mouseEvent) {
            var rect = canvasDom.getBoundingClientRect();
            return {
                x: mouseEvent.clientX - rect.left,
                y: mouseEvent.clientY - rect.top
            };
        }

        // Touch position
        function getTouchPos(canvasDom, touchEvent) {
            var rect = canvasDom.getBoundingClientRect();
            return {
                x: touchEvent.touches[0].clientX - rect.left,
                y: touchEvent.touches[0].clientY - rect.top
            };
        }

        // Draw
        function renderCanvas() {
            if (drawing) {
                context.moveTo(lastPos.x, lastPos.y);
                context.lineTo(mousePos.x, mousePos.y);
                context.globalCompositeOperation = "destination-out";
                context.stroke();
                lastPos = mousePos;
            }
        }

        // Animation frame
        (function drawLoop () {
            requestAnimFrame(drawLoop);
            renderCanvas();
        })();
    </script>


    <script>
        const box = document.getElementById('cover');
        box.addEventListener('click', () => {
            box.remove();
        });
    </script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            function disableBack() {window.history.forward()}

            window.onload = disableBack();
            window.onpageshow = function (evt) {if (evt.persisted) disableBack()}
        });
    </script>
    <script>
        document.onkeydown = function (e) {
            return (e.which || e.keyCode) != 116;
        };
        history.pushState(null, document.title, location.href);window.addEventListener('popstate', function (event) {history.pushState(null, document.title, location.href);});
    </script>
@endsection()