@extends('admin.layouts.container')

@section('content')

<div class="row">
    @for ($i = 1; $i < 13 ; $i++)
        @if (array_key_exists($i, $monthVisitCounts))
            @continue
        @endif
        @php $monthVisitCounts[$i] = 0; @endphp
    @endfor

    @php ksort($monthVisitCounts); @endphp



    @foreach ($monthVisitCounts as $month => $count)
            <input type="hidden" name="{{$month}}" value="{{$count}}" class="monthVisitCounts">
    @endforeach



    <!-- ------------ line chart ------------- -->
    <section class="cont_section col-12">
        <div class="content border_items text-center">
            <h5>The Event Begins In ...</h5>
            <ul>
                <li><span id="days"></span>Days</li>
                <li><span id="hours"></span>Hours</li>
                <li><span id="minutes"></span>Minutes</li>
                <!--<li><span id="seconds"></span>Seconds</li>-->
            </ul>
        </div>
        <div class="index_content_cont">
            <div class="row mt-4 mb-4">
                <div class="col-lg-5">
                    <a href="#" class="cont_item border-0">
                        <h6> <img src="{{asset('/assets/group.png')}}" alt=""> <span>Total Subscribers</span> </h6>
                        <h2><span class="counter">{{$all}}</span></h2>
                    </a>
                </div>
                <div class="col-lg-7">
                    <div class="row">
                        <div class="col-lg-6">
                            <a href="#" class="cont_item">
                                <h6> <img src="{{asset('/assets/user.png')}}" alt=""> <span>Total Attendees</span> </h6>
                                <h2> <span class="counter">{{$attend}}</span></h2>
                            </a>
                        </div>
                        <div class="col-lg-6">
                            <a href="#" class="cont_item">
                                <h6> <img src="{{asset('/assets/user_2.png')}}" alt=""> <span>Total Non Attendees</span> </h6>
                                <h2> <span class="counter">{{$notattend}}</span></h2>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <input type="hidden" value="{{$allVisitorCounts}}" class="allVisitorCounts">
    <div class="col-lg-12">
        <!--<h5 class="text-uppercase font-weight-bold">Website Views in this year</h5>-->
        <!--<canvas class="border-item lineChart" width="400" height="150"></canvas>-->
    </div>

{{--    <div class="col-lg-6">--}}
{{--        <div class="new-users border-item">--}}
{{--            <div class="datatitle">--}}
{{--                <h6>The proportion of new users</h6>--}}
{{--                <p>2019-06-13 ~ 2019-06-19 | Last 7 days</p>--}}
{{--            </div>--}}
{{--            <div class="chartjs-wrapper"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>--}}
{{--                <canvas id="chartjs-4" class="chartjs" width="962" height="550" style="display: block; height: 500px; width: 770px;"></canvas>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}


    

</div>
@endsection

@section('inner_js')
{{--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>--}}
<script src="{{asset('assets/admin/js/lib/Chart.min.js')}}"></script>
<script>
    $(document).ready(function () {
        let months = [],
            month_visits = [],
            allVisitorCounts = $('.allVisitorCounts').val(),
            ChartHtml = $('.lineChart').html('2d');

        $('.monthVisitCounts').each(function () {
            months.push($(this).attr('name'));
            month_visits.push($(this).val());
        });

        month_visits.push(allVisitorCounts);

        new Chart(ChartHtml, {
            type: 'line',
            data: {
                labels: months,
                datasets: [{
                    label: ' people',
                    data: month_visits,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    })
</script>


{{--<script>--}}
{{--    new Chart(document.getElementById("chartjs-4"), {--}}
{{--        "type": "doughnut",--}}
{{--        "data": {--}}
{{--            "labels": ["completed Profiles", "uncompleted Profiles", "waiting Approval"],--}}
{{--            "datasets": [{--}}
{{--                "label": "My First Dataset",--}}
{{--                "data": [180, 90, 120],--}}
{{--                "backgroundColor": ["rgb(33, 255, 13)", "rgb(220, 53, 69)", "rgb(21, 97, 203)"]--}}
{{--            }]--}}
{{--        }--}}
{{--    });--}}
{{--</script>--}}

<script>
const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24,
        week = hour * 24 * 7;

    let countDown = new Date('{{settings("date")}}').getTime(),
        x = setInterval(function() {

            let now = new Date().getTime(),
                distance = countDown - now;

            document.getElementById('days').innerText = Math.floor(distance / (day)),
                document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
                document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
                document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);

            //do something later when date is reached
            //if (distance < 0) {
            //  clearInterval(x);
            //  'IT'S MY BIRTHDAY!;
            //}

        }, second);
        
</script>

@endsection