@extends('front')
@section('content')
@php 
    $colorArr = ['gold','silver','platinum','mercury','sodium','copper','king','queen','master'];
@endphp
    <section class="container main-block">

        <form>
        <div class="col-lg-2 col-sm-4  mx-auto mb-5">
            <input class="form-control " type="text" placeholder="select date" name="date" id="date" onchange="getOldresults()" data-setvalue="today"/>
        </div>
        </form>
        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table draw-table d-none" id="old_table">
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-12 text-center clockdiv d-none">
            <div id="clockdiv" class="mb-4">
                <div>
                    <span class="days"></span>
                    <div class="smalltext">Days</div>
                </div>
                <div>
                    <span class="hours"></span>
                    <div class="smalltext">Hours</div>
                </div>
                <div>
                    <span class="minutes"></span>
                    <div class="smalltext">Minutes</div>
                </div>
                <div>
                    <span class="seconds"></span>
                    <div class="smalltext">Seconds</div>
                </div>
            </div>
        </div>
        {{-- {{ dd($latestDraw) }} --}}
        <div class="new-data d-none">
            @if ($drawLen > 0)
            <h3 class="derby" ><span id="draw-header">{{$latestDraw['draws']['draw_name']}} {{$day}} {{$time}}</span></h3>
            <div class="row">
                <div class="col-md-8">
                    <div class="table-responsive" id="price-list-table">
                        <table class="table draw-table index-table">
                            <tr class="draw-no">
                                <td>Draw No</td>
                                <td>{{$latestDraw['draw_number']}}</td>
                            </tr>
                            <tr class="draw-date">
                                <td>Draw Date</td>
                                <td>{{$date}}</td>
                            </tr>
                            <tr>
                                <td>ABC</td>
                                <td>{{$latestDraw['first_price']}}</td>
                            </tr>
                            <tr>
                                <td>AB</td>
                                <td>{{$latestDraw['second_price']}}</td>
                            </tr>
                            <tr>
                                <td>BC</td>
                                <td>{{$latestDraw['third_price']}}</td>
                            </tr>
                            <tr>
                                <td>AC</td>
                                <td>{{$latestDraw['fourth_price']}}</td>
                            </tr>
                            <tr>
                                <td>A</td>
                                <td>{{$latestDraw['fifth_price']}}</td>
                            </tr>
                            <tr>
                                <td>B</td>
                                <td>{{$latestDraw['sixth_price']}}</td>
                            </tr>
                            <tr>
                                <td>C</td>
                                <td>{{$latestDraw['seven_price']}}</td>
                            </tr>
                        </table>
                        <table class="table draw-table ajax-table d-none">
                        </table>
                    </div>
                </div>
            @endif
                <div class="col-md-4">
                    @php $j = 0 @endphp
                    @if ($drawLen > 0)
                        @foreach ($draw as $k=>$v)
                            <button class="btn btn-derby get-draw-data class{{ $v->id }} {{ $colorArr[$k] }} {{($latestDraw->id == $v->id) ? 'active' : ''}}"  type="button" data-id ="{{ $v->id }}">
                                <span>{{ $v->draws->draw_name }}</span>
                                <span>{{ date('l', strtotime($v->draw_date))." ".date('h:i:s A', strtotime($v->draw_time)) }} </span>
                            </button>
                            @php $j = $k @endphp
                        @endforeach
                        @endif
                        @if($upcomingDraw != null)
                        <button class="btn btn-derby get-upcoming class{{ $upcomingDraw->id }} {{ $colorArr[$j+1]}}" type="button" data-id="{{ $upcomingDraw->id }}">
                            <span>{{ $upcomingDraw->draws->draw_name }}</span>
                            <div class="clockdiv-right ">
                                <div id="clockdiv-right" class="mb-4 mt-2 btn-timer">
                                    <div>
                                        <span class="days"></span>
                                        <div class="smalltext">Days</div>
                                    </div>
                                    <div>
                                        <span class="hours"></span>
                                        <div class="smalltext">Hours</div>
                                    </div>
                                    <div>
                                        <span class="minutes"></span>
                                        <div class="smalltext">Minutes</div>
                                    </div>
                                    <div>
                                        <span class="seconds"></span>
                                        <div class="smalltext">Seconds</div>
                                    </div>
                                </div>
                            </div>
                            <span id="draw-child-list"> </span>
                        </button>
                        @endif
                </div>
            </div>
        </div>
        <div class="error d-none" id="error">
            <div class="alert alert-danger"> <strong>Sorry </strong> No Draws found.</div>
        </div>
    </section>

    {{-- <footer id="footer" class="footer solid-bg empty-footer">
        <div id="bottom-bar" class="full-width-line logo-left" role="contentinfo">
            <div class="wf-wrap">
                <div class="wf-container-bottom">
                </div>
            </div>
        </div>
    </footer> --}}
    
    
    <a id="button" class="hvr-float-shadow" href=""><i class="fas fa-arrow-up"></i></i></a>
    
  
@endsection
@section('js')
<script>
    // const today_date = new Date();
    // const today_mm = today_date.getMonth() + 1;
    $('#date').val("{{date('Y-m-d')}}");

 duDatepicker('#date', { format: 'yyyy-mm-dd', maxDate: 'today' , setValue: 'today' });

function getOldresults()
{
        var date = $('#date').val();
            $.ajax({
                type: "POST",
                data: {
                    "date" : date,
                    "_token" : token
                    },
                    url: url + '/get-previous-data',
                    statusCode:{
                    202:function(response){
                        $('.new-data').addClass('d-none');
                        $('#old_table').addClass('d-none');
                        $('#error').removeClass('d-none');
                    },
                    201:function(response){
                        location.reload(); 
                    },
                    200:function(response){
                        html = `<tr>
                            <td>Draw No : <span id="draw_no">${response.data[0].draw_number}</span></td>
                            <td>Time</td>
                            <td>Result</td>
                            </tr>`;
                        $.each(response.data, function(k, v) {
                        html += `<tr class="draw_${v.id}" >
                                    <td>${v.draws.draw_name}</td>
                                    <td>${tConvert(v.draw_time)}</td>
                                    <td>${v.first_price}</td>
                                </tr>`;
                        });
                        $('#error').addClass('d-none');
                        $('.new-data').addClass('d-none');
                        $('#clockdiv').addClass('d-none');
                        $('#old_table').removeClass('d-none');
                        $('#old_table').html(html);
                        
                    }
                }
            });
}
    
    var draw_time = "{{ $upcomingDraw->draw_time ?? ''}}" ;
    var date = new Date(`${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()} ${draw_time}`);
    function getTimeRemaining(endtime) {
        var t = Date.parse(endtime) - Date.parse(new Date());
        var seconds = Math.floor((t / 1000) % 60);
        var minutes = Math.floor((t / 1000 / 60) % 60);
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
        var days = Math.floor(t / (1000 * 60 * 60 * 24));
    
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }

    function initializeClock(id, endtime) {
        // $(".clockdiv").removeClass('d-none');
        var clock = document.getElementById(id);
        var daysSpan = clock.querySelector('.days');
        var hoursSpan = clock.querySelector('.hours');
        var minutesSpan = clock.querySelector('.minutes');
        var secondsSpan = clock.querySelector('.seconds');

        function updateClock() {
            var t = getTimeRemaining(endtime);
            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                var id = $('.get-upcoming').data('id');
                $(".clockdiv").addClass('d-none');
                clearInterval(timeinterval);
                getDrawData(id);
            }
        }

        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
    }

    var deadline = date;
    initializeClock('clockdiv', deadline);

    function getDrawData(id = 0) {
        var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
       
        if(id == 0)
        {
            id = '';
        }
        
        $.ajax({
            type: "GET",
            url: url + '/get-draw-data/'+id,
            statusCode:{
                201:function(response){
                    location.reload(); 
                },
                200:function(xhr){
                var date = new Date(xhr.data.latestDraw.draw_date);
                var day = date.getDay();
                var time = xhr.data.latestDraw.draw_time;
                $('.index-table').addClass('d-none');
                $('.ajax-table').removeClass('d-none');
                    var html = `<tr class="draw-no">
                            <td>Draw No</td>
                            <td>${xhr.data.latestDraw.draw_number}</td>
                        </tr>
                        <tr class="draw-date">
                            <td>Draw Date</td>
                            <td>${xhr.data.latestDraw.draw_date}</td>
                        </tr>
                        <tr>
                            <td>ABC</td>
                            <td>${xhr.data.latestDraw.first_price}</td>
                        </tr>
                        <tr>
                            <td>AB</td>
                            <td>${xhr.data.latestDraw.second_price}</td>
                        </tr>
                        <tr>
                            <td>BC</td>
                            <td>${xhr.data.latestDraw.third_price}</td>
                        </tr>
                        <tr>
                            <td>AC</td>
                            <td>${xhr.data.latestDraw.fourth_price}</td>
                        </tr>
                        <tr>
                            <td>A</td>
                            <td>${xhr.data.latestDraw.fifth_price}</td>
                        </tr>
                        <tr>
                            <td>B</td>
                            <td>${xhr.data.latestDraw.sixth_price}</td>
                        </tr>
                        <tr>
                            <td>C</td>
                            <td>${xhr.data.latestDraw.seven_price}</td>
                        </tr>`;
                        
                    $('.ajax-table').html(html);
                    $('#draw-header').text(xhr.data.latestDraw.draws.draw_name+ ' ' +weekday[day]+ ' '+ tConvert(time));
                    console.log($('.btn-timer .days').text());
                    if($('.btn-timer .seconds').text() == 0){
                            $('#clockdiv-right').addClass('d-none');
                            $('#draw-child-list').text(weekday[day]+ ' '+ tConvert(time));
                        } 
                    // $('button[class^="class"').removeClass('data-class^="-active"')
                    $('.btn-derby').removeClass("active");
                    $('.class'+id).addClass("active");
                }
            }
        });
    }
    $(document).on('click','.get-draw-data',function(){
        var draw_id = $(this).data('id');
        getDrawData(draw_id)
    });
    if("{{ $drawLen }}" == 0){
        if($('#clockdiv .days').text() != "NaN"){

            $('.clockdiv').removeClass("d-none");
        }
    }
    else{
        $('.new-data').removeClass("d-none");
        $('.clockdiv').addClass("d-none");
        var draw_time_right = "{{ $upcomingDraw->draw_time ?? ''}}" ;
        deadline_right = new Date(`${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()} ${draw_time_right}`);
        initializeClock('clockdiv-right', deadline);
        // var latestDraw = "{{ $latestDraw }}";
        // console.log(latestDraw);
        // $('#draw-header').text('')
    }

</script>
@endsection