@extends('layouts.master')
@section('title')
    @lang('translation.wallet')
@endsection
@section("css")
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css"/>
    <!--Datatable Responsive CSS -->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet"
          type="text/css"/>
    <link rel="stylesheet" type="text/css" href="{{asset("wheels/assets/css/jquery.countdown.css")}}"/>
    <link href="{{asset("wheels/assets/perfect-scrollbar/perfect-scrollbar.css")}}" rel="stylesheet"/>
    <style>
        @media (min-width: 768px) {
            #countdown span {
                display: block;
                float: left;
                width: 24px;
                height: 50px;
                background: url({{asset("wheels/assets/img/312_50.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;
            }
        }

        @media (min-width: 300px) {
            #countdown span {
                display: block;
                float: left;
                width: 22px;
                height: 46px;
                background: url({{asset("wheels/assets/img/286_46.png")}}) no-repeat 0px 0px;
            }

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

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

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

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

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

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

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

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

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

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

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

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

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

    </style>
@endsection
@section('content')
    <!-- Digital Assets Balance -->
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title d-flex justify-content-between align-items-center">
                        <span>Wheel information : {{$wheel->id}}</span>
                        <a href="{{url("/wheel/settings")}}" class="btn btn-danger">BACK</a>
                    </h1>
                </div>
                <div class="card-body">
                    <div class="form-group mb-3">
                        <div class="row">
                            <div class="col-6">
                                <label for="uname">Title :</label>
                                <input type="text" class="form-control custom-input" id="title"
                                       value="{{$wheel->title}}">
                            </div>
                            <div class="col-3">
                                <label for="">Type :</label>
                                <select class="form-control custom-input" id="type" onchange="changeType(this.value)">
                                    <option value="everyday" {{$wheel->type == "everyday" ? 'selected':''}}>everyday
                                    </option>
                                    <option value="manual" {{$wheel->type == "manual" ? 'selected':''}}>manual</option>
                                </select>
                            </div>
                            <div class="col-3">
                                <label for="">Status :</label>
                                <select class="form-control custom-input" id="state">
                                    <option value="on" {{$wheel->status == "on" ? 'selected':''}}>ON</option>
                                    <option value="off" {{$wheel->status == "off" ? 'selected':''}}>OFF</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3 {{$wheel->type == "everyday" ? '':'d-none'}}" id="everydayOptions">
                        <div class="row">
                            <div class="col">
                                <label>Start : </label>
                                <input type="time" class="form-control custom-input" id="start" value="{{$wheel->start}}"/>
                            </div>
                            <div class="col">
                                <label>End : </label>
                                <input type="time" class="form-control custom-input" id="end" value="{{$wheel->end}}"
                                       onchange="setStartTime(this.value)"/>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3 {{$wheel->type == "manual" ? '':'d-none'}}" id="manualOptions">
                        <div class="row">
                            <div class="col">
                                <label for="uname">From : </label>
                                <input type="datetime-local" class="form-control custom-input" id="from"
                                       value=""/>
                            </div>
                            <div class="col">
                                <label for="uname">To : </label>
                                <input type="datetime-local" class="form-control custom-input" id="to"
                                       value=""/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <div class="row">
                            <label for="uname">Purchase Amount : </label>
                            <div class="col">
                                <input type="number" class="form-control custom-input" id="min"
                                       value="{{$wheel->min}}">
                            </div>
                            <div class="col">
                                <input type="number" class="form-control custom-input" id="max"
                                       value="{{$wheel->max}}">
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label for="other"></label>
                        <div class="row" id="other">
                            <div class="col">
                                <label for="startat">Start time</label>
                                <input type="datetime-local" class="form-control custom-input" id="startat"
                                       value="{{$wheel->startTime}}"/>

                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-8">
                                <label for="">Prize :</label>
                                <select class="form-control custom-input" name="prize">
                                    <option value="">Select prize asset</option>
                                    @foreach($digital_assets as $item)
                                        <option value="{{$item->id}}">{{$item->name}} (${{$item->price}})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-4">
                                <label for="">Limit :</label>
                                <input type="number" class="form-control custom-input" id="limit" name="limit"
                                       value="{{$wheel->limit}}">
                            </div>
                        </div>
                    </div>
                    <div class="mt-2 border-top">
                        <div class="d-flex justify-content-between" id="prizeWrapper" style="max-height: 150px">
                            <table class="table table-borderless table-striped">
                                <tbody id="prizeList">
                                <tr>
                                    <td colspan="4" class="text-center">
                                        All wheels must be set to prize
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button class="btn btn-success" type="button" onclick="submit()">SAVE</button>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <div class="" id="countdown"></div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12 col-md-7">
                            <p class="text-center">Purchaser (<span id="purchaseAmount">0</span>) </p>
                            <table class="table table-borderless table-hover table-striped">
                                <tbody id="purchasers">

                                </tbody>
                            </table>
                        </div>
                        <div class="col-sm-12 col-md-5">
                            <p class="text-center">Refferal Bonuss information</p>
                            <div class="card">
                                <div class="card-body border d-flex justify-content-center align-items-center"
                                     style="min-height: 150px;">
                                    <img src="{{asset($wheel->wheel_prize[0]->digital_asset->image)}}"
                                         style="width: 50%;"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{asset("wheels/assets/js/jquery.plugin.js")}}"></script>
    <script src="{{asset("wheels/assets/js/jquery.countdown.js")}}"></script>

    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="{{ URL::asset('assets/js/pages/datatables.init.js') }}"></script>


    <script src="{{asset("/wheels/assets/js/moment.min.js")}}"></script>
    {{--    <script src="{{asset("/wheels/assets/js/moment-timezone.min.js")}}"></script>--}}
    <script src="{{asset("/wheels/assets/js/moment-timezone-with-data.min.js")}}"></script>

    <script src="{{asset("wheels/assets/perfect-scrollbar/perfect-scrollbar.js")}}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        const timezone = "{{config('app.timezone')}}", localTimezone = moment.tz.guess();
        const serverFrom = "{{$wheel->from}}", serverTo = "{{$wheel->to}}", serverStartat = "{{$wheel->startTime}}";
        let setPrize = [], digital_assets = [];

        @foreach($digital_assets as $item)
        digital_assets.push({
            id: "{{$item->id}}" * 1,
            name: "{{$item->name}}",
            price: "{{$item->price}}" * 1,
        });
        @endforeach
        @foreach($wheel->wheel_prize as $prize)
        setPrize.push({
            id: "{{$prize->digital_asset->id}}",
            name: "{{$prize->digital_asset->name}}",
            price: "{{$prize->digital_asset->price}}" * 1,
            amount: "{{$prize->amount}}" * 1
        })
        @endforeach

        let purchasers;

        const wheelPusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
            cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
            encrypted: true,
        });
        const wheelUpdateChannel = wheelPusher.subscribe("update-wheel-channel")


        const convertTime = (t, zone) => {
            return moment(t).tz(zone).format('YYYY-MM-DD HH:mm')
        }

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

        const renderPurchasers = () => {
            let htmlContent = '';
            if (purchasers !== undefined) {
                purchasers.map((v, k) => {
                    htmlContent += `<tr>
                                    <td class="text-center">${k + 1}</td>
                                    <td class="text-center">${v.user.username}</td>
                                    <td class="text-center">$${v.total}</td>
                                </tr>`
                })
            }
            $("#purchasers").html(htmlContent)
        }

        const getPurchasers = () => {
            $.ajax({
                url: "{{url('/wheel/settings/'.$wheel->id)}}",
                method: "POST",
                data: {
                    _token: $('meta[name="csrf_token"]').attr("content")
                }, success: function (data) {
                    console.log(data)
                    purchasers = data;
                    renderPurchasers()
                    $("#purchaseAmount").text(purchasers.length)
                }
            })
        }

        const changePrizeItem = (val) => {
            let item = digital_assets.find(e => e.id == val);
            if (item) {
                setPrize.push({
                    ...item,
                    amount: 1
                })
                renderPrizeItems()
            }
        }

        const deletePrizeItem = (obj, id) => {
            let $this = $(obj);
            let index = setPrize.findIndex(e => e.id == id);
            setPrize.splice(index, 1)
            $this.parent().parent().remove()
            $("#prize").val(JSON.stringify(setPrize))
            if (!setPrize.length) {
                $('#prizeList').html(`<td colspan="4" class="text-center">
                                            All wheels must be set to prize
                                        </td>`);
            }
        }

        const changeAmount = (obj, id) => {
            let $this = $(obj);
            let index = setPrize.findIndex(e => e.id == id);
            if ($this.val() * 1 < 1) $this.val(1), setPrize[index].amount = 1;
            else setPrize[index].amount = $this.val() * 1;
            renderPrizeItems()
        }
        const changeType = (val) => {
            if (val == "everyday") {
                $("#manualOptions").addClass("d-none");
                $("#everydayOptions").removeClass("d-none").addClass("d-block");
                $("#from").val(""), $("#to").val("");
            } else if (val == "manual") {
                $("#start").val(""), $("#end").val("");
                $("#everydayOptions").addClass("d-none");
                $("#manualOptions").removeClass("d-none").addClass("d-block")
            }
        }

        const setStartTime = (val) => {
            let time = new Date();
            $("#startat").val(`${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${val}`)
        }
        const renderPrizeItems = () => {
            if (setPrize.length) {
                let content = '';
                setPrize.map(e => {
                    content += `<tr>
                                <td class="text-center">${e.name} ( $${e.price})</td>
                                <td class="text-center">$ ${e.price * e.amount}</td>
                                <td class="text-center" style="width: 100px">
                                    <input type="number" class="form-control custom-input" value="${e.amount}" onchange="changeAmount(this,${e.id})">
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-danger" onclick="deletePrizeItem(this,${e.id});">DEL</button>
                                </td>
                            </tr>`
                })
                $("#prizeList").html(content);
            }
        }

        const submit = () => {
            let title = $("#title").val();
            if (title == undefined || title == "") return iziToast['error']({
                message: 'Please input all fields correctly!',
                position: "topRight"
            });
            let status = $("#state").val();
            let type = $("#type").val();
            let start = $("#start").val(), end = $("#end").val();
            let from = $("#from").val(), to = $("#to").val()

            if (type == "everyday") {
                if (start == undefined || start == "") return iziToast['error']({
                    message: 'Please input all fields correctly!',
                    position: "topRight"
                });
                start = convertTime(start,timezone)

                if (end == undefined || end == "") return iziToast['error']({
                    message: 'Please input all fields correctly!',
                    position: "topRight"
                });
                end = convertTime(end,timezone)
            } else if (type == "manual") {
                if (from == undefined || from == "") return iziToast['error']({
                    message: 'Please input all fields correctly!',
                    position: "topRight"
                });
                from = convertTime(from,timezone)
                if (to == undefined || to == "") return iziToast['error']({
                    message: 'Please input all fields correctly!',
                    position: "topRight"
                });
                to = convertTime(to,timezone)
            }

            let min = $("#min").val();
            if (!min) return iziToast['error']({
                message: 'Please input all fields correctly!',
                position: "topRight"
            });

            let max = $("#max").val();
            if (!max) return iziToast['error']({
                message: 'Please input all fields correctly!',
                position: "topRight"
            });

            let startat = $("#startat").val();
            if (startat == undefined || startat == "") return iziToast['error']({
                message: 'Please input all fields correctly!',
                position: "topRight"
            });
            startat = convertTime(startat, timezone)
            let limit = $("#limit").val()
            if (!setPrize.length) return iziToast['error']({
                message: 'Please input all fields correctly!',
                position: "topRight"
            });

            $.ajax({
                url: "{{url("wheel/".$wheel->id)}}",
                type: "POST",
                data: {
                    _token: "{{csrf_token()}}",
                    title,
                    status,
                    type,
                    start,
                    end,
                    from,
                    to,
                    min,
                    max,
                    startat,
                    limit,
                    prize: setPrize
                }, success: function (res) {
                    iziToast['success']({
                        message: 'Successfully',
                        position: "topRight"
                    });
                    if (res) setTimeout(() => {
                        location.reload();
                    }, 1000)
                }, error: function (err) {
                    iziToast['error']({
                        message: "error",
                        position: "topRight"
                    });
                }
            })
        }
        $(function () {
            renderPrizeItems();
            $("#from").val(getLocalTime(serverFrom))
            $("#to").val(getLocalTime(serverTo))

            $("#startat").val(getLocalTime(serverStartat))

            wheelUpdateChannel.bind("update-transaction-event", function () {
                getPurchasers()
            }).bind("pusher:subscription_succeeded", function () {
                getPurchasers()
            })

            let shortly = new Date(getLocalTime(serverStartat));
            $('#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>',
            })
        })
    </script>
@endsection