@if(DB::table('web_configurations')->where('meta_key' , '=', 'landing-table')->first()->meta_value == "on")
    <section class="container bg-color-1 px-3 py-4 mb-5">
        <div class="card card-custom card-stretch gutter-b">
            <div class="card-header text-center border-0">
                <h2 class="card-title text-dark font-weight-bolder mb-0">
                    <span>Last Winner Lucky Spin</span>
                </h2>
            </div>
            <div class="card-body px-0 py-0">
                <table class="table table-borderless bg-black mb-0">
                    <thead>
                        <tr>
                            <th width="33.333%" class="text-warning h4 text-left">Player</th>
                            <th width="33.333%" class="text-warning h4 text-center">Date</th>
                            <th width="33.333%" class="text-warning h4 text-right">Reward</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="card-body py-3 px-4 new-bg">
                <table class="w-100" id="desc" class="active">
                    @foreach($history as $numhst => $hst)
                        <tr>
                            <td width="33.333%" class="text-left">
                                <div class="counter py-2">
                                    <i data-final=''></i>                                </div>
                            </td>
                            <td width="33.333%" class="text-center">
                                <div class="counter py-2">
                                    <i data-final='0'></i><i data-final='1'></i><i data-final=' '></i><i data-final='J'></i><i data-final='a'></i><i data-final='n'></i><i data-final=' '></i><i data-final='1'></i><i data-final='9'></i><i data-final='7'></i><i data-final='0'></i>                                </div>
                            </td>
                            <td width="33.333%" class="text-right">
                                <div class="counter">
                                    <i data-final=''></i>                                </div>
                            </td>
                        </tr>
                    @endforeach
                </table>
                <table class="w-100" id="random">
                    @foreach($historyRandom as $numhst => $hstRandom)
                        <tr>
                            <td width="33.333%" class="text-left">
                                <div class="counter py-2">
                                    <i data-final=''></i>                                </div>
                            </td>
                            <td width="33.333%" class="text-center">
                                <div class="counter py-2">
                                    <i data-final='0'></i><i data-final='1'></i><i data-final=' '></i><i data-final='J'></i><i data-final='a'></i><i data-final='n'></i><i data-final=' '></i><i data-final='1'></i><i data-final='9'></i><i data-final='7'></i><i data-final='0'></i>                                </div>
                            </td>
                            <td width="33.333%" class="text-right">
                                <div class="counter">
                                    <i data-final=''></i>                                </div>
                            </td>
                        </tr>
                    @endforeach
                </table>
                <script>
                    function count() {
                        var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                        var numbers = "0123456789"
                        var string = numbers + letters;
                        var allCounters = document.querySelectorAll(".counter > i");

                        allCounters.forEach(function(el) {
                            duration = 1000 + Array.from(allCounters).indexOf(el) * 1000;
                            var interval = setInterval(function() {
                            //console.log(duration);            
                            if (duration > 0) {
                                el.innerText = string.charAt(Math.random() * string.length);
                                duration = duration - 50;      
                            } else {
                                clearInterval(interval);
                                el.innerText = el.getAttribute("data-final");
                            }
                            }, 50);
                        });

                        const element = document.querySelector("#desc");
                        const element2 = document.querySelector("#random");

                        if(element.classList.contains("active")){
                            element.classList.remove("active");
                            element2.classList.add("active");
                        }else{
                            element.classList.add("active");
                            element2.classList.remove("active");
                        }

                        setTimeout(function() {
                            count();
                        }, 10000);
                    }

                    count();
                </script>
            </div>
        </div>
    </section>
@endif