@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



    <input type="hidden" value="{{$allVisitorCounts}}" class="allVisitorCounts">
    <div class="col-lg-12">
        <h5 class="text-uppercase font-weight-bold">مشاهدات الموقع هذا العام</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 class="col-lg-12">
<section class="general-report mt-5">
    <div class="row">                


        <div class="col-lg-4">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-warning m-0">
                        <i class="bi bi-bag-check"></i>
                    </span>
                    
                </div>

                <div class="bottom">
                    <div>
                        <p>عدد المشتركين في الباقات </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$subscribers}}</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-warning m-0">
                        <i class="bi bi-bag-check"></i>
                    </span>
                    
                </div>

                <div class="bottom">
                    <div>
                        <p>اجمالي اشتراكات الباقات </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$subscribes}}</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-warning m-0">
                        <i class="bi bi-bag-check"></i>
                    </span>
                    
                </div>

                <div class="bottom">
                    <div>
                        <p>عدد الاعضاء </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$users}}</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-warning m-0">
                        <i class="bi bi-bag-check"></i>
                    </span>
                    
                </div>

                <div class="bottom">
                    <div>
                        <p>اجمالي زيارات الموقع ( يوميا ) </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$dayVisitCounts}}</h2>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-warning m-0">
                        <i class="bi bi-bag-check"></i>
                    </span>
                    
                </div>

                <div class="bottom">
                    <div>
                        <p>اجمالي زيارات الموقع ( اسبوعيا ) </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$weekVisitorCounts}}</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-warning m-0">
                        <i class="bi bi-bag-check"></i>
                    </span>
                    
                </div>

                <div class="bottom">
                    <div>
                        <p>اجمالي زيارات الموقع ( سنويا ) </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$allVisitorCounts}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</div>
</div>

<!---------------- new dashboard ------------------->
<!-- ------------ charts ------------- -->
<!--<div class="charts_container">-->
<!--    <div class="row">-->
<!--        <div class="col-lg-6">-->
<!--            <div class="chart_box">-->
<!--                <div class="chart_head mb-4">-->
<!--                    <div class="row">-->
<!--                        <div class="col-lg-7">-->
<!--                            <h5>الايرادات الشهرية</h5>-->
<!--                        </div>-->
<!--                        <div class="col-lg-5">-->
<!--                            <input type="text" name="daterange" class="datarange fnt_rpt form-control input_gray" />-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div id="bar_chart">-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-lg-6">-->
<!--            <div class="chart_box">-->
<!--                <div class="chart_head mb-4">-->
<!--                    <div class="row">-->
<!--                        <div class="col-lg-7">-->
<!--                            <h5>الاعضاء</h5>-->
<!--                        </div>-->
<!--                        <div class="col-lg-5">-->
<!--                            <input type="text" name="daterange" class="datarange fnt_rpt form-control input_gray" />-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div id="line_chart">-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->



<!-- -------------- tabels ----------------- -->
<!--<div class="table_box mt-5">-->
<!--    <div class="table_title mb-4">-->
<!--        <div class="row align-items-center">-->
<!--            <div class="col-lg-4">-->
<!--                <h6>مزودى الخدمات الأكثر طلبا</h6>-->
<!--            </div>-->
<!--            <div class="col-lg-8">-->
<!--                <div class="table_select_filter justify-content-lg-end">-->
<!--                    <div class="form-group ml-3">-->
<!--                        <select name="" id="" class="form-control input_gray">-->
<!--                            <option value=""> العرض </option>-->
<!--                            <option value="">10</option>-->
<!--                            <option value="">15</option>-->
<!--                            <option value="">20</option>-->
<!--                        </select>-->
<!--                    </div>-->
<!--                    <div class="form-group ml-3">-->
<!--                        <select name="" id="" class="form-control input_gray">-->
<!--                            <option value=""> عرض اخر 30 يوم </option>-->
<!--                            <option value="">عرض اخر شهرين</option>-->
<!--                            <option value="">عرض اخر سنة</option>-->
<!--                        </select>-->
<!--                    </div>-->
<!--                    <div class="form-group search_input">-->
<!--                        <input type="text" class="form-control input_gray" placeholder=" بحث ">-->
<!--                        <button><i class="bi bi-search"></i></button>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="table-responsive">-->
<!--        <table class="table table-hover">-->
<!--            <thead>-->
<!--                <tr>-->
<!--                    <th scope="col">-->
<!--                        <form>-->
<!--                            <div class="custom-control custom-checkbox">-->
<!--                                <input type="checkbox" class="custom-control-input" id="selectall" name="example1">-->
<!--                                <label class="custom-control-label" for="selectall"> تحديد الكل </label>-->
<!--                            </div>-->
<!--                        </form>-->
<!--                    </th>-->
<!--                    <th scope="col">مزود الخدمة	</th>-->
<!--                    <th scope="col">عدد مرات الطلب	</th>-->
<!--                    <th scope="col">الحالة</th>-->
<!--                    <th scope="col">عمليات</th>-->
<!--                </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
                <!-- <tr>
<!--                    <th scope="row">-->
<!--                        <form>-->
<!--                            <input type="text" class="form-control" placeholder="">-->
<!--                        </form>-->
<!--                    </th>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <input type="text" id="datepicker" class="form-control" placeholder="">-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <select name="choose" class="form-control custom-select">-->
<!--                                <option selected>Choose</option>-->
<!--                                <option value="one">one</option>-->
<!--                                <option value="two">two</option>-->
<!--                                <option value="three">three</option>-->
<!--                            </select>-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <select name="choose" class="form-control custom-select">-->
<!--                                <option selected>Choose</option>-->
<!--                                <option value="one">one</option>-->
<!--                                <option value="two">two</option>-->
<!--                                <option value="three">three</option>-->
<!--                            </select>-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <select name="choose" class="form-control custom-select">-->
<!--                                <option selected>Choose</option>-->
<!--                                <option value="one">one</option>-->
<!--                                <option value="two">two</option>-->
<!--                                <option value="three">three</option>-->
<!--                            </select>-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <select name="choose" class="form-control custom-select">-->
<!--                                <option selected>Choose</option>-->
<!--                                <option value="one">one</option>-->
<!--                                <option value="two">two</option>-->
<!--                                <option value="three">three</option>-->
<!--                            </select>-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <select name="choose" class="form-control custom-select">-->
<!--                                <option selected>Choose</option>-->
<!--                                <option value="one">one</option>-->
<!--                                <option value="two">two</option>-->
<!--                                <option value="three">three</option>-->
<!--                            </select>-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <select name="choose" class="form-control custom-select">-->
<!--                                <option selected>Choose</option>-->
<!--                                <option value="one">one</option>-->
<!--                                <option value="two">two</option>-->
<!--                                <option value="three">three</option>-->
<!--                            </select>-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <select name="choose" class="form-control custom-select">-->
<!--                                <option selected>Choose</option>-->
<!--                                <option value="one">one</option>-->
<!--                                <option value="two">two</option>-->
<!--                                <option value="three">three</option>-->
<!--                            </select>-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <select name="choose" class="form-control custom-select">-->
<!--                                <option selected>Choose</option>-->
<!--                                <option value="one">one</option>-->
<!--                                <option value="two">two</option>-->
<!--                                <option value="three">three</option>-->
<!--                            </select>-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <form>-->
<!--                            <select name="choose" class="form-control custom-select">-->
<!--                                <option selected>Choose</option>-->
<!--                                <option value="one">one</option>-->
<!--                                <option value="two">two</option>-->
<!--                                <option value="three">three</option>-->
<!--                            </select>-->
<!--                        </form>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                        <button class="butn color small"><span><i class="fas fa-search"></i></span></button>-->
<!--                    </td>-->
<!--                </tr> -->
<!--                <tr>-->
<!--                    <th scope="row">-->
<!--                        <form>-->
<!--                            <div class="custom-control custom-checkbox">-->
<!--                                <input type="checkbox" class="custom-control-input selectOne" id="customCheck1" name="example1">-->
<!--                                <label class="custom-control-label" for="customCheck1">1</label>-->
<!--                            </div>-->
<!--                        </form>-->
<!--                    </th>-->
<!--                    <td>اسم مزود الخدمة</td>-->
<!--                    <td>15</td>-->
<!--                    <td>مفعلة</td>-->
<!--                    <td>-->
<!--                        <div class="dropdown">-->
<!--                            <button class="icon_dots dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">-->
<!--                                <i class="bi bi-three-dots-vertical"></i>-->
<!--                            </button>-->
<!--                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">-->
<!--                            <a class="dropdown-item" href="#"> <i class="bi bi-pen ml-1"></i> تعديل</a>-->
<!--                            <a class="dropdown-item" href="#"> <i class="bi bi-trash ml-1"></i> حذف</a>-->
<!--                            </div>-->
<!--                        </div>-->
                        <!-- <a href="#" class="icon"><i class="bi bi-pen"></i></a> -->
<!--                    </td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <th scope="row">-->
<!--                        <form>-->
<!--                            <div class="custom-control custom-checkbox">-->
<!--                                <input type="checkbox" class="custom-control-input selectOne" id="customCheck1" name="example1">-->
<!--                                <label class="custom-control-label" for="customCheck1">2</label>-->
<!--                            </div>-->
<!--                        </form>-->
<!--                    </th>-->
<!--                    <td>اسم مزود الخدمة</td>-->
<!--                    <td>15</td>-->
<!--                    <td>مفعلة</td>-->
<!--                    <td>-->
<!--                        <div class="dropdown">-->
<!--                            <button class="icon_dots dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">-->
<!--                                <i class="bi bi-three-dots-vertical"></i>-->
<!--                            </button>-->
<!--                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">-->
<!--                            <a class="dropdown-item" href="#"> <i class="bi bi-pen ml-1"></i> تعديل</a>-->
<!--                            <a class="dropdown-item" href="#"> <i class="bi bi-trash ml-1"></i> حذف</a>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </td>-->
<!--                </tr>-->
<!--            </tbody>-->
<!--        </table>-->
<!--    </div>-->
    <!--<div class="table_pagination mt-5">-->
    <!--    <a href="#" class="next_btn">-->
    <!--        <i class="bi bi-arrow-right"></i>-->
    <!--        <span>السابق</span>-->
    <!--    </a>-->
    <!--    <div class="numbers">-->
    <!--        <a href="#">1</a>-->
    <!--        <a href="#">2</a>-->
    <!--        <a href="#">3</a>-->
    <!--        <a href="#">4</a>-->
    <!--    </div>-->
    <!--    <a href="#" class="prev_btn">-->
    <!--        <span>التالى</span>-->
    <!--        <i class="bi bi-arrow-left"></i>-->
    <!--    </a>-->
    <!--</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>
<!-- ------- apex chart -------------- -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!-- ------- data table  -------------- -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<!-- ----------- datepicker ----------- -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


 <!-- ---------- charts ---------- -->
    <script>
        var bar_chart_options = {
            series: [{
                name: 'المنتجات',
                data: [44, 55, 57, 56, 61, 58, 63]
            }, {
                name: 'الايرادات',
                data: [35, 41, 36, 26, 45, 48, 52]
            }],
            colors: ['#aab0cf', '#A0D7E7'],
            chart: {
                type: 'bar',
                height: 350
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            xaxis: {
                categories: ['يناير','فبراير', 'مارس', 'ابريل', 'مايو', 'يونيو','يوليو','اغسطس'],
            },
            yaxis: {
                title: {
                    text: ''
                }
            },
            fill: {
                opacity: 1
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return val + " ريال"
                    }
                }
            },
        };
        var chart = new ApexCharts(document.querySelector("#bar_chart"), bar_chart_options);
        chart.render();
    </script>

    <script>
        var line_chart_options = {
          series: [{
          name: 'عضو عادى',
          data: [31, 40, 28, 51, 42, 109, 100]
        }, {
          name: 'عضو ادارى',
          data: [11, 32, 45, 32, 34, 52, 41]
        }],
          chart: {
          height: 350,
          type: 'area'
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        xaxis: {
                categories: ['يناير','فبراير', 'مارس', 'ابريل', 'مايو', 'يونيو','يوليو','اغسطس'],
            },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm'
          },
        },
        };

        var chart = new ApexCharts(document.querySelector("#line_chart"), line_chart_options);
        chart.render();
    </script>

    <!-- ---------- date range ---------- -->
    <script>
        $(function() {
            $('input.datarange').daterangepicker({
                opens: 'left',
            }, function(start, end, label) {
                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
            });
        });
    </script>

    <!-- ----------- table select ---------- -->
    <script>
        $(function() {
            $('#selectall').on('click', function() {
                $('.selectOne').prop('checked', this.checked);
            });

            $('.selectOne').change(function() {
                var check = ($('.selectOne').filter(":checked").length == $('.selectOne').length);
                $('#selectall').prop("checked", check);
            });
        });
    </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>--}}

@endsection