<?php

use Core\Config;
use Location\Loto;

if (!defined('GAME')) {
    die();
}

if ($u->room['file'] != 'loto2') {
    return;
}

$loto = new Loto();

?>
<TABLE width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top" id="centerBlockLoto">
            <div align="center" class="pH3"><h1>Платная Рулетка</h1></div>
            <br/>

            <div id="winDiv">
                <p class="testDiv">Ваш приз: <span id="win"></span></p>
                <div id="imgWin"></div>
            </div>

            <div class="wraper">
                <div class="arrowup"></div>
                <div class="arrowdown"></div>
                <div class="window">
                    <ul class="list"></ul>
                </div>
            </div>
            <p id="ekrMessage">Стоимость платной прокрутки - 5 Еврокредитов! У Вас в наличии - <b id="ekr">---</b>
                Екр.<br>
                <?php if ($u->info['money2'] >= 5): ?>
                    <button class="buttonRuletka" formmethod="get">Запустить игру!</button>
                <?php endif; ?>
                <button class="buttonsElements">Предметы и шансы</button>
            <div id="tableItemChange" hidden>
                <table>
                    <tr>
                        <th colspan="2">Предмет</th>
                        <th>Шанс выпадения</th>
                    </tr>
                    <?= $loto->getPrizeListByRarity() ?>
                </table>
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script>
                let img = "<?= Config::get('img2') ?>/i/items";
                let prizesArray = <?= json_encode($loto->getPrizes()) ?>;
                let arrLiImg = [];

                prizesArray.forEach(function (elem, key) {
                    arrLiImg.push(`<li><img src="${img}/${elem[0]}" title="${elem[1]}" alt="${elem[1]}" type="id${key}"></li>`);
                });

                let ulImg = document.getElementsByClassName("list")[0]

                let ekrB = document.getElementById("ekr")
                var testQ = 0

                run()

                async function run() {
                    let response = await fetch("/lotoworkekr.php", {
                        method: "POST",
                        body: "ekr"
                    })
                    ekrB.textContent = await response.text()
                }

                let finallyLiImg = arrLiImg.sort(() => 0.5 - Math.random())

                for (let key of finallyLiImg) {
                    let htmlElementsMessage = new DOMParser().parseFromString(key, "text/html").getElementsByTagName("li")[0];
                    ulImg.append(htmlElementsMessage)
                }

                var $button = document.getElementsByClassName("buttonRuletka")[0]
                var $winWindow = document.getElementById("winDiv")
                var $win = document.getElementById("win")
                var $wrapper = document.getElementsByClassName("wraper")[0]
                var $imgWin = document.getElementById("imgWin")

                $wrapper.style.marginTop = "110px"
                $winWindow.hidden = true

                var timeOutWin

                $(document).ready(function () {
                    for (i = 0; i < 3; i++) {
                        $(".list li").clone().appendTo(".list");
                    }
                    $button.onclick = async function () {

                        $wrapper.style.marginTop = "110px"

                        if (timeOutWin) {
                            clearTimeout(timeOutWin)
                            $imgWin.innerHTML = ""
                            $winWindow.hidden = true
                        }

                        $imgWin.innerHTML = ""
                        $button.textContent = "Ожидание..."
                        $button.disabled = true

                        $('.window').css({
                            right: "0"
                        })
                        $('.list li').css({
                            border: '4px solid transparent'
                        })


                        var response = await fetch("/lotoworkekr.php", {
                            method: "POST",
                            body: <?= $u->info['id'] ?>
                        })

                        var textFromResponse = await response.text()
                        var resultRegexp = textFromResponse.match(/\b[0-9]{0,2}\b/);
                        var idItem = '';

                        if (resultRegexp && resultRegexp[0] && resultRegexp[0] >= 0 && resultRegexp[0] <= 29) {
                            idItem = resultRegexp[0];
                        } else {
                            return ($button.textContent = 'Ошибка, нажмите F5!');
                        }

                        var elemRul = 0
                        var $winImg

                        for (var i = 60; i < 90; i++) {
                            if ($('.list li:eq(' + i + ')')[0].children[0].getAttribute("type") == `id${idItem}`) {
                                elemRul = $('.list li:eq(' + i + ')')[0].children[0].offsetLeft
                                $winImg = $('.list li:eq(' + i + ')')[0]
                            }
                        }


                        $('.window').animate({
                            right: elemRul - 452.5
                        }, 10000, () => {
                            setTimeout(() => {

                                var idThing = $winImg.children[0].getAttribute("type")
                                var titleThing = $winImg.children[0].getAttribute("title")
                                $button.disabled = false
                                $wrapper.style.marginTop = "0px"
                                $winWindow.hidden = false
                                $button.textContent = "Запустить игру!"
                                run()

                                $win.textContent = titleThing

                                var $img = document.createElement("img")
                                $img.src = $winImg.children[0].getAttribute("src")
                                $imgWin.append($img)

                                timeOutWin = setTimeout(() => {
                                    $imgWin.innerHTML = ""
                                    $winWindow.hidden = true
                                    $wrapper.style.marginTop = "110px"
                                }, 10000)
                            }, 300)
                        })
                        // }) ;
                    }
                });

                var $buttonsElements = document.getElementsByClassName("buttonsElements")[0]
                var $tableItemChange = document.getElementById("tableItemChange")

                $buttonsElements.onclick = function (event) {
                    var contentIsHidden = $tableItemChange.hidden;

                    $tableItemChange.hidden = !contentIsHidden;
                    event.target.textContent = !contentIsHidden ? 'Предметы и шансы' : 'Скрыть шансы';
                }
            </script>
            <style>
                #centerBlockLoto {
                    display: flex;
                    flex-direction: column;
                }

                * {
                    padding: 0;
                    margin: 0;
                }

                li {
                    list-style: none;
                    display: inline-block;
                    float: left;
                }

                #tableItemChange table {
                    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
                    font-size: 14px;
                    text-align: center;
                    margin: auto;
                }

                #tableItemChange table td, th {
                    border-style: solid;
                    border-width: 1px;
                    border-collapse: collapse;
                    border-color: rgb(47, 1, 1);
                    padding: 3px 5px;
                }

                #tableItemChange table tr th {
                    font-size: 16px;
                }

                #tableItemChange {
                    text-align: center;
                    border: 1px solid #1a96bf;
                    width: 70%;
                    margin-left: auto;
                    margin-right: auto;
                    padding: 5px;
                }

                .buttonsElements {
                    font-size: 17px;
                    padding: 5px;
                    width: 200px;
                    border: 1px solid #1a96bf;
                    background: rgba(182, 114, 4, 0.3);
                }

                .window {
                    padding: 5px 0;
                    overflow: hidden;
                    position: relative;
                    width: 25000px;
                    height: 82px;
                    right: 0;
                }

                .wraper {
                    position: relative;
                    margin: auto;
                    width: 982px;
                    overflow-x: hidden;
                    overflow-y: hidden;
                    border: 4px solid #1a96b7;
                    border-radius: 2px;
                }

                .list {
                    position: relative;
                    margin-left: 0;
                    display: inline-block;
                }

                .list li {
                    border: 4px solid transparent;
                }

                .list li img {
                    width: 75px;
                    height: 75px;
                }

                .arrowup {
                    position: absolute;
                    bottom: 0;
                    left: 487.5px;
                    margin-left: auto;
                    margin-right: auto;
                    z-index: 1;
                    width: 0;
                    height: 0;
                    border-bottom: 20px solid #1a96bf;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                }

                .arrowdown {
                    position: absolute;
                    top: 0;
                    left: 487.5px;
                    z-index: 1;
                    width: 0;
                    height: 0;
                    border-top: 20px solid #1a96bf;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                }

                .buttonRuletka {
                    font-size: 17px;
                    padding: 5px;
                    width: 200px;
                    border: 1px solid #1a96bf;
                    background: rgba(0, 149, 25, 0.33);
                    margin: 10px 0;
                }

                .buttonRuletka:hover, .buttonsElements:hover {
                    background: rgba(0, 102, 149, 0.33);
                }

                #winDiv {
                    text-align: center;
                    border-radius: 3px;
                    border: 1px solid #000;
                    width: auto;
                    margin: 10px auto 5px;
                    padding: 7px;
                }

                .testDiv {
                    font-size: 16px;
                }

                #win {
                    font-weight: 600;
                }

                #ekrMessage {
                    text-align: center;
                    font-size: 16px;
                    margin-top: 5px;
                }

            </style>
        <td width="50" valign="top">
            <TABLE cellspacing="0" cellpadding="0">
                <tr>
                    <TD width="100%">&nbsp;</TD>
                    <TD>
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tr align="right" valign="top">
                                <td>
                                    <?= $goLis; ?>
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td nowrap="nowrap"></td>
                                        </tr>
                                        <tr>
                                            <td bgcolor="#D3D3D3">
                                                <img src="<?= Config::get('img2') ?>/i/move/links.gif" width="9"
                                                     height="7">
                                            </td>
                                            <td bgcolor="#D3D3D3" nowrap>
                                                <a
                                                        href="#"
                                                        id="greyText"
                                                        class="menutop"
                                                        onclick="location='main.php?loc=1.180.0.371&rnd=<?= PassGen::intCode(
                                                        ) ?>';"
                                                        title="<?php thisInfRm('1.180.0.371', 1); ?>">
                                                    Бесплатное Лото
                                                </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<br/><br>
<div id="textgo" style="visibility:hidden;"></div>