@extends('layouts.wheel')
@section("custom-style")
    <link rel="stylesheet" type="text/css" href="{{asset("wheels/assets/css/modal-loading.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{asset("wheels/assets/css/modal-loading-animate.css")}}"/>
    <link href="{{asset("wheels/assets/css/wheel.css")}}" rel="stylesheet">
    <style>
        #countdown span {
            display: block;
            float: left;
            width: 24px;
            height: 50px;
            background: url({{asset("wheels/assets/img/312_50_dark.png")}}) no-repeat 0px 0px;
        }

        #countdown span.image0 {
            background-position: -0px 0px;
        }

        #countdown span.image1 {
            background-position: -24px 0px;
        }

        #countdown span.image2 {
            background-position: -48px 0px;
        }

        #countdown span.image3 {
            background-position: -72px 0px;
        }

        #countdown span.image4 {
            background-position: -96px 0px;
        }

        #countdown span.image5 {
            background-position: -120px 0px;
        }

        #countdown span.image6 {
            background-position: -144px 0px;
        }

        #countdown span.image7 {
            background-position: -168px 0px;
        }

        #countdown span.image8 {
            background-position: -192px 0px;
        }

        #countdown span.image9 {
            background-position: -216px 0px;
        }

        #countdown span.imageDay {
            background-position: -240px 0px;
        }

        #countdown span.imageSep {
            background-position: -264px 0px;
        }

        #countdown span.imageSpace {
            background-position: -288px 0px;
        }

        .cursor-pointer {
            cursor: pointer !important;
        }

        .card.mb-1.cursor-pointer:hover {
            scale: 1.01;
            transition: 0.2s;
        }
    </style>
@endsection
@section("content")
    <div class="row mt-lg-5">
        <div class="col-md-3 col-sm-12 mb-3">
            <div class="card bg-dark">
                <div class="card-body">
                    <h3 class="text-center">
                        WHEELS
                    </h3>
                    <div id="wheelWrapper" class="wrapper"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12  mb-3">
            <div class="divider">
                <div class="divider-text">
                    <img src="{{asset("wheels/assets/img/leaf.png")}}"/>
                    <img src="{{asset("wheels/assets/img/crown.png")}}" width="100"/>
                    <img src="{{asset("wheels/assets/img/leaf.png")}}" style="transform: scaleX(-1);"/>
                </div>
            </div>
            <div class="d-flex justify-content-center align-items-center">
                <div id="spin_the_wheel" class="d-flex justify-content-center align-items-center"
                     style="background: url('{{asset("wheels/assets/img/spin-outline.png")}}');background-size: 100% 100%;">
                    <canvas id="wheel" class="init" width="266" height="266"></canvas>
                    <div id="spin">SPIN</div>
                </div>
            </div>
            <div class="card bg-dark mt-3">
                <div class="card-body">
                    <div id="countdown" class="d-flex justify-content-center border-0 my-3 py-2 bg-dark"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12 mb-3">
            <div class="card bg-dark">
                <div class="card-body">
                    <h3 class="text-center">
                        SPINS
                    </h3>
                    <div id="spinWrapper" class="wrapper">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="awardModal">
        <div class="modal-dialog">
            <div class="modal-content bg-dark">
                <div class="modal-body">
                    <div>
                        <h3 class="text-center  mt-1" style="color: gold">Congratulate <span
                                style="color: green;font-weight: bold" id="winner"></span> !</h3>
                    </div>
                    <div class="d-flex justify-content-center align-items-center" style="height: 300px;padding: 50px">
                        <img src="{{asset("wheels/assets/img/cup.png")}}" width="300px" id="giftImage">
                    </div>
                    <div>
                        <p class="text-center" id="giftPrice"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template id="my-template">
        <swal-title>
            Your purchase amount is not enough.
            Do you purchase any digital assets now?
        </swal-title>
        <swal-icon type="warning" color="red"></swal-icon>
        <swal-html type="cancel">
            <a href="{{url('/deposit')}}" class="swal2-confirm swal2-styled" aria-label=""
               style="display: inline-block;">Purchase now</a>
        </swal-html>
    </template>
@endsection
@section("custom-script")
    <script src="https://js.pusher.com/7.2.0/pusher.min.js"></script>
    <script type="text/javascript" src="{{asset("wheels/assets/js/modal-loading.js")}}"></script>
    <script src="{{asset("/wheels/assets/js/moment.min.js")}}"></script>
    <script src="{{asset("/wheels/assets/js/moment-timezone-with-data.min.js")}}"></script>
    <script defer src="{{asset("wheels/assets/js/wheel.custom.js")}}"></script>
    <script>
        const initWidth = window.innerWidth
        const myTimezone = moment.tz.guess()
        const timezone = "{{config("app.timezone")}}";
        var loading = new Loading({
            direction: 'hor',
            discription: 'Loading...',
            defaultApply: true,
            loadingBgColor: '#000000',
            maskBgColor: 'rgba(0, 0, 0, 1)'
        });
        new PerfectScrollbar(document.getElementById('wheelWrapper'), {
            wheelPropagation: false
        });
        new PerfectScrollbar(document.getElementById('spinWrapper'), {
            wheelPropagation: false
        });

        Pusher.logToConsole = true;
        const pusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
            cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
            encrypted: true,
        });
        const createUpdateWheelChannel = pusher.subscribe('update-wheel-channel');
        const colors = [], textColor = "#333333";
        let user_id = "{{auth()->user()->id}}" * 1;
        let allWheels = [], myWheel, currentPurchaseAmount, mySpin;
        let wheelId = 0, spinIndex = 0;
        let sectors = [];
        let wheel;
        let onlyShow = true, initFlag = true;
        @foreach($colors as $color)
        colors.push("{{$color->value}}")
        @endforeach

        const getLocalTime = (t) => {
            let a = moment.tz(t, timezone);
            return a.clone().tz(myTimezone).format('YYYY-MM-DD HH:mm')
        }

        const myAlertAward = (sector) => {
            $("#winner").text(sector.label);
            $("#giftImage").attr("src", "{{asset("/")}}" + myWheel.wheel_prize[0].digital_asset.image);
            $("#giftPrice").text(`$ ${myWheel.wheel_prize[0].digital_asset.price}`)
            $('#awardModal').modal("show");
        }

        const liftOff = () => {
            $("#wheel").removeClass("init");
            $.ajax({
                url: "{{url("/wheel/spin/winner/")}}" + "/" + mySpin.id,
                type: "GET",
                success: function (res) {
                    let index = mySpin.spinners.findIndex(e => e.user_id == res.winner);
                    wheel.start(index)
                }
            })
        }

        const selectWheel = (obj) => {
            let $this = $(obj);
            wheelId = $this.data("id") * 1;
            if ($this.hasClass("bg-default")) {
                let a = $this.parent().find("div.card.mb-1.cursor-pointer.bg-white");
                a.removeClass("bg-white").addClass("bg-default")
                $this.removeClass("bg-default").addClass("bg-white")
                spinIndex = 0;
                $('#countdown').countdown('destroy')
                render()
            }
        }

        const selectSpin = (obj) => {
            let $this = $(obj);
            spinIndex = $this.data("index") * 1;
            if ($this.hasClass("bg-default")) {
                let a = $this.parent().find("div.card.mb-1.cursor-pointer.bg-white");
                a.removeClass("bg-white").addClass("bg-default")
                $this.removeClass("bg-default").addClass("bg-white")
                render()
            }
        }

        const renderSpin = () => {
            let content = ''
            myWheel.spins.map((e, k) => {
                content += `<div class="card mb-1 cursor-pointer ${k == spinIndex ? 'bg-white' : 'bg-default'}" data-index="${k}" onclick="selectSpin(this)">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="badge rounded-circle" style="height: 30px;width: 30px;background-color: ${e.color}">
                                    </div>
                                    <div>
                                       <span style="color: ${e.color}"><span style="font-size: 18px;font-weight: bold">${e.spinners.length}</span> <span>spinners</span></span>
                                    </div>
                                </div>
                            </div>
                        </div>`;
            })
            $("#spinWrapper").html(content)
        }

        const renderWheels = () => {
            let content = ''
            allWheels.map(e => {
                content += `<div class="card mb-1 cursor-pointer ${e.id == wheelId ? 'bg-white' : 'bg-default'}" data-id="${e.id}" onclick="selectWheel(this)">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span><b>${e.title}</b></span>
                                    <span>
                                        <span class="badge bg-danger">$${e.min}</span> ~ <span
                                            class="badge bg-success">$${e.max}</span>
                                    </span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <span class="badge bg-danger">$${e.type}</span>
                                    </div>
                                    <div>
                                        <span><b>${e.startTime}</b></span>
                                    </div>
                                </div>
                            </div>
                        </div>`
            })
            $("#wheelWrapper").html(content);
        }

        const render = () => {
            myWheel = allWheels.find(e => e.id == wheelId)
            if (myWheel.spins.length < (spinIndex + 1)) spinIndex = 0;
            mySpin = myWheel.spins[spinIndex]
            if (!mySpin) {
                if (initFlag) loading.out()
                return Swal.fire({title: 'Wrong!', text: 'Nothing spin', icon: 'error'});
            }

            renderWheels(), renderSpin(), setTimer();

            let temp = []
            mySpin.spinners.map((e, k) => {
                // console.log(e, k);

                temp.push({
                    id: e.user_id,
                    color: colors[k % colors.length],
                    text: textColor,
                    label: e.user.username
                })
            })

            sectors = temp;
            if (!sectors.length) return Swal.fire({title: 'Wrong!', text: 'Nothing spinners', icon: 'error'});
            if (initFlag) {
                let spinEl = document.querySelector("#spin")
                let context = document.querySelector("#wheel").getContext("2d");
                // console.log(sectors, spinEl, context, myAlertAward);

                wheel = new Wheel({sectors, element: spinEl, context, callback: myAlertAward})
                wheel.init()
            } else {
                wheel.update(sectors)
            }
        }

        const getRandomColor = () => {
            let index = Math.floor((Math.random() * 10) % colors.length)
            console.log(index)
            console.log(colors)
            return colors[index - 1];
        }

        const setTimer = () => {
            let shortly = new Date(getLocalTime(myWheel.startTime));
            if(!initFlag)$('#countdown').countdown("destroy")
            $('#countdown').countdown({
                until: shortly,
                compact: true,
                layout: '<span class="image{d100}"></span>' +
                    '<span class="image{d10}"></span>' +
                    '<span class="image{d1}"></span>' +
                    '<span class="imageDay"></span>' +
                    '<span class="imageSpace"></span>' +
                    '<span class="image{h10}"></span>' +
                    '<span class="image{h1}"></span>' +
                    '<span class="imageSep"></span>' +
                    '<span class="image{m10}"></span>' +
                    '<span class="image{m1}"></span>' +
                    '<span class="imageSep"></span>' +
                    '<span class="image{s10}"></span>' +
                    '<span class="image{s1}"></span>',
                onExpiry: liftOff
            })
        }

        const updateWheels = (callback) => {
            $.ajax({
                url: "{{url("/api/get/wheels")}}",
                type: "GET",
                success: function (res) {
                    if (res.length) {
                        allWheels = res;
                        let index = res.findIndex(e => e.id == wheelId)
                        if (index < 0) wheelId = res[0].id
                        callback();
                    } else {
                        loading.out()
                        Swal.fire({title: 'Wrong!', text: 'Nothing wheel', icon: 'error'});
                    }
                }
            })
        }

        $(function () {
            createUpdateWheelChannel.bind('update-wheel-event', function (data) {
                updateWheels(() => {
                    render()
                })
            }).bind('update-transaction-event', function (data) {
                updateWheels(() => {
                    render()
                })
            }).bind('pusher:subscription_succeeded', function (members) {
                updateWheels(() => {
                    render()
                    loading.out()
                    initFlag = false;
                });
            });
            $("#awardModal").on("hidden.bs.modal",function () {
                location.reload()
            })
        })
    </script>
@endsection