@extends('admin.layouts.container')

@section('content')

<!-- ------------ charts ------------- -->
<section class="charts_container">
    <div class="row">
        
        <div class="col-lg-12">
            <div class="chart_box">
                <div class="chart_head mb-4">
                    <div class="row">
                        <div class="col-lg-12">
                            <h5> أرادات المتجر ( الفواتير التى تم دفعها لشراء المنتجات ) </h5>
                        </div>
                    </div>
                </div>
                <div id="bar_chart3">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ------------ general-report ------------- -->
<section class="general-report">
    <!------------------------->
    <div class="sub_title mb-4 pb-3 mt-5 border-bottom">
        <h4> الزيارات </h4>
    </div>
    <div class="row">  
        <div class="col-lg-3">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-success m-0">
                        <i class="bi bi-eye"></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-3">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-success m-0">
                        <i class="bi bi-eye"></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-3">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-success m-0">
                        <i class="bi bi-eye"></i>
                    </span>
                    
                </div>

                <div class="bottom">
                    <div>
                        <p>إجمالى الزيارات الشهر</p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$monthWebsiteVisitors}}</h2>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3">
            <div class="items">
                <div class="top mb-3">
                    <span class="icon alert alert-success m-0">
                        <i class="bi bi-eye"></i>
                    </span>
                    
                </div>

                <div class="bottom">
                    <div>
                        <p>إجمالى الزيارات العام</p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$monthWebsiteVisitors}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!------------------------->
    <div class="sub_title mb-4 pb-3 mt-5 border-bottom">
        <h4> المستخدمين </h4>
    </div>
    
    <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-person"></i>
                        </span>
                        
                    </div>
    
                    <div class="bottom">
                        <div>
                            <p>إجمالى المستخدمين الجدد لهذا الشهر </p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">{{$new_members_month}}</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-person"></i>
                    </span>
                    
                </div>
    
                <div class="bottom">
                    <div>
                        <p>إجمالى المشتركين الجدد لهذا الشهر </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$new_subscribe_month}}</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-person"></i>
                    </span>
                    
                </div>
    
                <div class="bottom">
                    <div>
                        <p>إجمالى الاشتراكات </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$all_subs}}</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-person"></i>
                    </span>
                    
                </div>
    
                <div class="bottom">
                    <div>
                        <p>إجمالى الغير مشتركين </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$all_non_subs}}</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-person"></i>
                    </span>
                    
                </div>
    
                <div class="bottom">
                    <div>
                        <p>إجمالى  المشتركين (مرة واحدة) </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$all_sub_one}}</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-person"></i>
                    </span>
                    
                </div>
    
                <div class="bottom">
                    <div>
                        <p>إجمالى  المشتركين (مرتين) </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$all_sub_twice}}</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-person"></i>
                    </span>
                    
                </div>
    
                <div class="bottom">
                    <div>
                        <p>إجمالى  المشتركين (ثلاث مرات او اكثر) </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$all_sub_three_more}}</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-person"></i>
                    </span>
                    
                </div>
    
                <div class="bottom">
                    <div>
                        <p>إجمالى عدد طلبات تعديل البروفايل </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$all_edit_profile}}</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-person"></i>
                    </span>
                    
                </div>
    
                <div class="bottom">
                    <div>
                        <p>إجمالى عدد طلبات  تواصل معنا </p>
                        <h2 class="counter mb-0 mt-1 fnt_rpt">{{$all_contactus}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!------------------------->
    <div class="sub_title mb-4 pb-3 mt-5 border-bottom">
        <h4> المطعم </h4>
    </div>

    
    <!------------------------->
    <!--<div class="sub_title mb-4 pb-3 mt-5 border-bottom">-->
    <!--    <h4> طلبات المطعم </h4>-->
    <!--</div>-->
    
    <!------------------------->
    <!--<div class="sub_title mb-4 pb-3 mt-5 border-bottom">-->
    <!--    <h4>  مبيعات المطعم </h4>-->
    <!--</div>-->

</section>


<!-- -------------- best_arrangement ----------------- -->
<section class="best_arrangement">
    <div class="row">
        <div class="col-lg-6">
            <div class="table_box mt-4">
                <div class="table_title mb-4">
                    <div class="row align-items-center">
                        <div class="col-lg-7">
                            <h6> الباقات الأكثر أشتراك </h6>
                        </div>
                        <div class="col-lg-5">
                            <div class="form-group ml-3">
                                <select name="" onchange="selectChart(this)" data-id="most"  id="" class="form-control input_gray">
                                    <option value="month"> عرض اخر 30 يوم </option>
                                    <option value="two">عرض اخر شهرين</option>
                                    <option value="year">عرض اخر سنة</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table_content" id="subscriptionmost">
                    <div class="item_row">
                        <p> الترتيب </p>
                        <p> أسم الباقة </p> 
                        <p> النوع </p> 
                        <p> أسم البراند </p> 
                        <p> عدد مرات الاشتراك </p> 
                    </div>
                    @foreach($top_request_packages as $key=>$package)
                    <div class="item_row" style="background-color: #6f71f655">
                        <p> {{$key+1}} </p>
                        <p> {{$package->package->descriptions()->name}} </p> 
                        <p> {{__('web.'.$package->package->gender)}} </p> 
                        <p> {{$package->package->section->descriptions()->name}} </p> 
                        <p> {{$package->count}} مرات اشتراك </p> 
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="table_box mt-4">
                <div class="table_title mb-4">
                    <div class="row align-items-center">
                        <div class="col-lg-7">
                            <h6> الباقات الأقل أشتراك </h6>
                        </div>
                        <div class="col-lg-5">
                            <div class="form-group ml-3">
                                <select name="" onchange="selectChart(this)" data-id="less" id="" class="form-control input_gray">
                                    <option value="month"> عرض اخر 30 يوم </option>
                                    <option value="two">عرض اخر شهرين</option>
                                    <option value="year">عرض اخر سنة</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table_content" id="subscriptionless">
                    <div class="item_row">
                        <p> الترتيب </p>
                        <p> أسم الباقة </p> 
                        <p> النوع </p> 
                        <p> أسم البراند </p> 
                        <p> عدد مرات الاشتراك </p> 
                    </div>
                    @foreach($less_request_packages as $key=>$package)
                    <div class="item_row" style="background-color: #e9686855">
                        <p> {{$key+1}} </p>
                        <p> {{$package->descriptions()->name}} </p> 
                        <p> {{__('web.'.$package->gender)}} </p> 
                        <p> {{$package->section->descriptions()->name}} </p> 
                        <p> {{$package->used('month')}} مرات اشتراك </p> 
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ------------ dishes_best_seller ------------- -->
<section class="dishes_best_seller mt-5">
    <h4 class="mb-4"> الأطباق الأكثر طلبا </h4>
    <div class="row">
        @foreach($most_meal_request as $row)
        <div class="col-lg-3">
            <div class="dish_card">
                <div class="img">
                    <img src="{{asset($row->meal->image)}}" alt="">
                </div>
                <div class="info">
                    <h6> {{$row->meal->descriptions()->name}} </h6>
                    <p> عدد مرات الطلب  <span class="num"> {{$row->count}} </span></p>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</section>
    


<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">
<section class="general-report">
    <div class="row">  
       
    </div>
</section>
</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>
      
    var options = {
        series: [44, 55, 41],
        labels: [" دجاج "," لحم "," جمبري "],
        colors:['#6f71f6', '#6f71f677', '#6f71f633'],
        chart: {
        type: 'donut',
      
    },
    tooltip: {
        enabled: false,
    },
    legend: {
      show: true,
      position: 'bottom',
    },
    responsive: [{
      breakpoint: 480,
      options: {
        chart: {
          width: 200
        },
        legend: {
          position: 'bottom'
        }
      }
    }]
    };

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

<script>
let orders_year = {!! json_encode($ordersYear) !!}
let orders_month = {!! json_encode($ordersYear) !!}
let orders_week = {!! json_encode($ordersYear) !!}
let orders_day = {!! json_encode($ordersYear) !!}
    var bar_chart_options = {
        series: [{
            name:  'الايرادات ',
            data: [ orders_year , orders_month , orders_week , orders_day ]
        }],
        colors: ['#6f71f6'],
        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_chart3"), bar_chart_options);
    chart.render();
</script>
<script>
    function selectChart(elem)
    {
        let data_val = $(elem).val();
        let data_type = $(elem).attr('data-id');
        
        $.ajax({
          url : {!! json_encode(url('admin/selectChart')) !!},
          type : 'GET',
          data : 'value='+data_val+'&type='+data_type,
         
          success:function(data)
          {
            $('#subscription'+data_type).html(data);
          }
        })
    }
</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