@extends('layouts.base')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/vendor.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/plugins.min.css') }}">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        .table {
            vertical-align: baseline;
        }

        .winner-name:before {
            content: "{{ $drawResult[0]->name }}";
            position: absolute;
            padding-top: 155px;
            color: white;
        }

        *{	margin:0;	padding:0; }

        body{
            background:#eaeaea;
            color:#fff;
            font-size:18px;
            font-family: 'Exo 2', sans-serif;
        }

        a{
            color:#34495e;
        }




        /*WRAPPER*/
        #wrapper{
            margin: 40px auto 0;
            width:266px;
            position:relative;
        }

        #txt{
            color:#eaeaea;
        }


        /*WHEEL*/
        #wheel{
            width:250px;
            height:250px;
            border-radius:50%;
            position:relative;
            overflow:hidden;
            border:8px solid #fff;
            box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
            transform: rotate(0deg);
        }

        #wheel:before{
            content:'';
            position:absolute;
            border:4px solid rgba(0,0,0,0.1);
            width:242px;
            height:242px;
            border-radius:50%;
            z-index:1000;
        }

        #inner-wheel{
            width:100%;
            height:100%;

            -webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
            -moz-transition:    all 6 cubic-bezier(0,.99,.44,.99);
            -o-transition:      all 6s cubic-bezier(0,.99,.44,.99);
            -ms-transition:     all 6s cubic-bezier(0,.99,.44,.99);
            transition:         all 6s cubic-bezier(0,.99,.44,.99);
        }

        #wheel div.sec{
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 130px 75px 0;
            border-color: #19c transparent;
            transform-origin: 75px 129px;
            left:50px;
            top:-4px;
            opacity:1;
        }

        #wheel div.sec:nth-child(1){
            transform: rotate(60deg);
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            -o-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            border-color: #16a085 transparent;
        }
        #wheel div.sec:nth-child(2){
            transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -o-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            border-color: #2980b9 transparent;
        }
        #wheel div.sec:nth-child(3){
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            border-color: #34495e transparent;
        }
        #wheel div.sec:nth-child(4){
            transform: rotate(240deg);
            -webkit-transform: rotate(240deg);
            -moz-transform: rotate(240deg);
            -o-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            border-color: #f39c12 transparent;
        }
        #wheel div.sec:nth-child(5){
            transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            -moz-transform: rotate(300deg);
            -o-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            border-color: #d35400 transparent;
        }
        #wheel div.sec:nth-child(6){
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            border-color: #c0392b transparent;
        }


        #wheel div.sec .fa{
            margin-top: -100px;
            color: rgba(0,0,0,0.2);
            position: relative;
            z-index: 10000000;
            display: block;
            text-align: center;
            font-size:36px;
            margin-left:-15px;

            text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
        }




        #spin{
            width:68px;
            height:68px;
            position:absolute;
            top:50%;
            left:50%;
            margin:-34px 0 0 -34px;
            border-radius:50%;
            box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
            z-index:1000;
            background:#fff;
            cursor:pointer;
            font-family: 'Exo 2', sans-serif;

            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }


        #spin:after{
            content:"SPIN";
            text-align:center;
            line-height:68px;
            color:#CCC;
            text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3) ;
            position: relative;
            z-index: 100000;
            width:68px;
            height:68px;
            display:block;
        }

        #spin:before{
            content:"";
            position:absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 20px 28px 20px;
            border-color: transparent transparent #ffffff transparent;
            top:-12px;
            left:14px;
        }

        #inner-spin{
            width:54px;
            height:54px;
            position:absolute;
            top:50%;
            left:50%;
            margin:-27px 0 0 -27px;
            border-radius:50%;
            background:red;
            z-index:999;
            box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,  rgba(0,0,0,0.4) 0px 0px 5px ;

            background: rgb(255,255,255); /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
            background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
            background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
            background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }

        #spin:active #inner-spin{
            box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
        }

        #spin:active:after{
            font-size:15px;
        }



        #shine{
            width:250px;
            height:250px;
            position:absolute;
            top:0;
            left:0;
            background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
            background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
            background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
            background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


            opacity:0.1;

        }



        /*ANIMATION*/
        @-webkit-keyframes hh {
            0%, 100%{
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }

            50%{
                transform: rotate(7deg);
                -webkit-transform: rotate(7deg);
            }
        }

        @keyframes hh {
            0%, 100%{
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }

            50%{
                transform: rotate(7deg);
                -webkit-transform: rotate(7deg);
            }
        }

        .spin {
            -webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
            animation: hh 0.1s;
        }
    </style>
@endsection

@section('content')
    <canvas id="canvas" style="background: transparent; position: absolute; z-index: 999"></canvas>

    <div class="clearfix pt-30 pt-sm-40 pb-10 pb-sm-30">
        <div class="container">
            <div class="section-title text-center mb-12 aos-init aos-animate" data-aos="fade-up">
                <h2 class="title">Çekiliş Sonucu</h2>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div id="wrapper">
                    <div id="wheel">
                        <div id="inner-wheel">
                            <div class="sec" data-name="bell"><span class="fa fa-bell-o"></span></div>
                            <div class="sec" data-name="comment"><span class="fa fa-comment-o"></span></div>
                            <div class="sec" data-name="smile"><span class="fa fa-smile-o"></span></div>
                            <div class="sec" data-name="heart"><span class="fa fa-heart-o"></span></div>
                            <div class="sec" data-name="star"><span class="fa fa-star-o"></span></div>
                            <div class="sec" data-name="lightbulb"><span class="fa fa-lightbulb-o"></span></div>
                        </div>

                        <div id="spin">
                            <div id="inner-spin"></div>
                        </div>

                        <div id="shine"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script src="{{ asset('assets/js/vendor/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/plugins.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/jquery.simplePagination.js"></script>

    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/chat.js') }}"></script>
@endsection

@section('script')
    <script>
        var usersList = [{name:"Mehmet"},{name:"Ahmet"},{name:"Ayşe"},{name:"Fatma"},];

        //set default degree (360*5)
        var degree = 1800;
        var drawIndex = 0;
        var clicks = 0;
        var position=[];
        var position_name=[];
        var position_left=[];

        $(document).ready(function(){

            setTimeout(function(){
                spinnerFn();

                var spinInterval = setInterval(function(){
                    spinnerFn();
                },11000);
            },3000);

            function spinnerFn()
            {
                if(clicks <= 2)
                {
                    clicks ++;

                    var newDegree = degree*clicks;
                    var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
                    totalDegree = newDegree+extraDegree;

                    var function_call=false;
                    $('#wheel .sec').each(function(){
                        var t = $(this);
                        var noY = 0;

                        var c = 0;
                        var n = 700;
                        var interval = setInterval(function () {
                            c++;
                            if (c === n) {
                                clearInterval(interval);
                            }

                            var aoY = t.offset().top;
                            $("#txt").html(aoY);

                            if(aoY < 23.89){
                                $('#spin').addClass('spin');
                                setTimeout(function () {
                                    $('#spin').removeClass('spin');
                                }, 100);
                            }

                            if(c == n) {
                                if(function_call == false) {
                                    /*console.log('done');
                                    console.log('ans',t.data('name'));*/
                                    function_call=true;
                                    getCounterData(aoY);

                                }

                            }
                        }, 10);

                        $('#inner-wheel').css({
                            'transform' : 'rotate(' + totalDegree + 'deg)'
                        });

                        noY = t.offset().top;

                    });
                }
            }

            function setPosition() {
                position=[];
                position_name=[];
                position_left=[];
                $('.sec').each(function(){
                    var pos = $(this).offset().top;
                    var left_pos = $(this).offset().left;
                    position_left.push(left_pos);
                    position.push(pos);
                    position_name.push($(this).data('name'));
                    $(this).attr('data-position',pos);
                });
            }
            setPosition();


            function getCounterData(num) {
                setPosition();
                current = position[0];
                current_name = position_name[0];
                //console.log(current_name);
                var $i=0;
                position = sortWithIndeces(position);
                //console.log('wqewew',position,position[1],position.sortIndices[1]);

                current_name=position_name[drawIndex];
                drawIndex++;

                console.log(usersList[clicks]['name']);

                if(drawIndex == 3)
                {
                    var havaiIndex = 0;
                    var havaiInterval = setInterval(function(){
                        havaiIndex++;
                        if(havaiIndex >= 7)
                        {
                            clearInterval(havaiInterval);
                            $('#canvas').remove();
                        }else{
                            havai();
                        }
                    },1000);
                }
                //alert(current_name);
                setPosition();
            }

        });


        function sortWithIndeces(toSort) {
            for (var i = 0; i < toSort.length; i++) {
                toSort[i] = [toSort[i], i];
            }
            toSort.sort(function(left, right) {
                return left[0] < right[0] ? -1 : 1;
            });
            toSort.sortIndices = [];
            for (var j = 0; j < toSort.length; j++) {
                toSort.sortIndices.push(toSort[j][1]);
                toSort[j] = toSort[j][0];
            }
            return toSort;
        }










        function randomIntFromInterval(min, max) { // min and max included
            return Math.floor(Math.random() * (max - min + 1) + min)
        }

        function havai()
        {
            let canvas = document.getElementById("canvas");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            let ctx = canvas.getContext("2d");

            window.addEventListener("resize", () => {
                canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

            const gravity = 0.05;
            const friction = 0.99;
            let mouse;

            class Particle {
                constructor(x, y, r, color, velocity) {
                    this.x = x;
                    this.y = y;
                    this.r = r;
                    this.color = color;
                    this.dx = velocity.x;
                    this.dy = velocity.y;
                    this.opacity = 1;
                }
                draw() {
                    ctx.save();
                    ctx.globalAlpha = this.opacity;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                    ctx.restore();
                    ctx.closePath();
                }
                update() {
                    this.draw();
                    this.dy += gravity;

                    this.dx *= friction;
                    this.dy *= friction;

                    this.x += this.dx;
                    this.y += this.dy;

                    this.opacity -= 0.01;
                }
            }
            let particles = [];
            function animate() {
                requestAnimationFrame(animate);
                ctx.fillStyle = "rgba(255, 255, 255, 0)";
                ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
                particles.forEach((particle, i) => {
                    if (particle.opacity > 0) {
                    particle.update();
                } else {
                    particles.splice(i, 1);
                }
            });
            }
            animate();

            const rndInt1 = randomIntFromInterval(1000, 250);
            const rndInt2 = randomIntFromInterval(250, 2000);

            mouse = {
                x: rndInt1,
                y: rndInt2
            };
            let speed = 30;
            let particleCount = 2000;
            let angleIncrement = (Math.PI * 2) / particleCount;
            for (let i = 0; i < particleCount; i++) {
                particles.push(
                    new Particle(
                        mouse.x,
                        mouse.y,
                        2,
                        `hsl(${Math.random() * 360}, 50%, 50%)`,
                        {
                            x: Math.cos(angleIncrement * i) * Math.random() * speed,
                            y: Math.sin(angleIncrement * i) * Math.random() * speed
                        }
                    )
                );
            }

        }


    </script>
@endsection