@php
$order_count=$data['order_count'];
@endphp	
@extends('layouts.app')

    @section('styles')

    @endsection

        @section('content')

                        <!-- PAGE-HEADER -->
                        <div class="page-header">
                            <h1 class="page-title">Dashboard</h1>
                            <div>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                                </ol>
                            </div>
                        </div>
                        <!-- PAGE-HEADER END -->

                        <!-- ROW-1 -->
                        @hasanyrole('Super Admin|Admin')
                        <div class="row">
                            
                               <!-- COL END -->
                            <div style="cursor:pointer;" onclick="redirect('{{url('/')}}/admin/notification')" class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                <div class="card bg-indigo img-card box-info-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font counter">{{$data['notification_count']}}</h2>
                                                <p class="text-white mb-0">Notifications</p>
                                            </div>
                                            <div class="ms-auto"> <i class="fa fa-bell-o text-white fs-30 me-2 mt-2"></i> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- COL END -->
                            
                                      <!-- COL END -->
                            <div style="cursor:pointer;" onclick="redirect('{{url('/')}}/admin/orders-list')" class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                <div class="card bg-gray-dark img-card box-info-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font counter">{{$data['order_count']}}</h2>
                                                <p class="text-white mb-0">Orders</p>
                                            </div>
                                            <div class="ms-auto"> <i class="fa fa-truck text-white fs-30 me-2 mt-2"></i> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- COL END -->
                                     <!-- COL END -->
                            <div style="cursor:pointer;" onclick="redirect('{{url('/')}}/admin/products')" class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                <div class="card  bg-success img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font counter">{{$data['product_count']}}</h2>
                                                <p class="text-white mb-0"> Products</p>
                                            </div>
                                            <div class="ms-auto"> <i class="fa fa-archive text-white fs-30 me-2 mt-2"></i> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- COL END -->
                                  <!-- COL END -->
                             <div style="cursor:pointer;" onclick="redirect('{{url('/')}}/admin/category')" class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                <div class="card bg-secondary img-card box-secondary-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font counter">{{$data['category_count']}}</h2>
                                                <p class="text-white mb-0 ">Categories</p>
                                            </div>
                                            <div class="ms-auto"> <i class="fa fa-cubes text-white fs-30 me-2 mt-2"></i> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                               <!-- COL END -->
                               
                                <div style="cursor:pointer;" onclick="redirect('{{url('/')}}/admin/customers')" class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                <div class="card bg-info img-card box-info-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font counter">{{$data['customers']}}</h2>
                                                <p class="text-white mb-0">Customers</p>
                                            </div>
                                            <div class="ms-auto"> <i class="fa fa-users text-white fs-30 me-2 mt-2"></i> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- COL END -->
                            
                            
                            <div style="cursor:pointer;" onclick="redirect('{{url('/')}}/admin/manage-admins')" class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                <div class="card bg-primary img-card box-primary-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font counter">{{$data['user_count']}}</h2>
                                                <p class="text-white mb-0">Admins </p>
                                            </div>
                                            <div class="ms-auto"> <i class="fa fa-user-o text-white fs-30 me-2 mt-2"></i> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                       
                   
                           
                            
                  
                            
                            
                         


                                </div>
                                
                                  <div class="row">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-9">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">Order Analytics</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex mx-auto text-center justify-content-center mb-4">
                                
                                            <div class="d-flex text-center justify-content-center"><span
                                                    class="dot-label bg-indigo my-auto"></span>Total Orders</div>
                                        </div>
                                        <div class="chartjs-wrapper-demo">
                                            <canvas id="transactions" class="chart-dropshadow"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- COL END -->
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-3">
                                <div class="card overflow-hidden">
                                    <div class="card-body pb-0 bg-recentorder">
                                        <h3 class="card-title text-white">Recent Orders</h3>
                                        <div class="chartjs-wrapper-demo">
                                            <canvas id="recentorders" class="chart-dropshadow"></canvas>
                                        </div>
                                    </div>
                                    <div id="flotback-chart" class="flot-background"></div>
                                    <div class="card-body">
                                       <!-- <div class="d-flex mb-4 mt-3">
                                            <div
                                                class="avatar avatar-md bg-secondary-transparent text-secondary bradius me-3">
                                                <i class="fe fe-check"></i>
                                            </div>
                                            <div class="">
                                                <h6 class="mb-1  mt-2 fw-semibold">Payment  Success</h6>
                                            
                                            </div>
                                            <div class=" ms-auto my-auto">
                                                <p class="fw-bold fs-20">{{$data['order_success_count']}} </p>
                                            </div>
                                        </div>-->
                                        <div class="d-flex mb-4 mt-3">
                                            <div class="avatar avatar-md bg-secondary-transparent text-secondary bradius me-3">
                                                <!--<i class="fe fe-x"></i>-->
                                                <i class="fe fe-check"></i>
                                            </div>
                                            <div class="">
                                                <h6 class="mb-1  mt-2 fw-semibold">COD</h6>
                                        
                                            </div>
                                            <div class=" ms-auto my-auto">
                                                <p class="fw-bold fs-20 mb-0"> {{$data['order_failed_count']}} </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- COL END -->
                        </div>
                                @endhasanyrole  
                     
                   
             
                        </div>
                        

                     

            
        @endsection

    @section('scripts')

    <script>
    // ######################Order Graph Section#############
    var graph_max_size={{$data['graph_max_size']}};
    var graph_setp_size={{$data['graph_setp_size']}};
     var chart_label=null;
    var order_array = null;
    //################End OF Order Graph Section ##################
    </script>
    <!-- SPARKLINE JS-->
    <script src="{{asset('assets/plugins/jquery-sparkline/jquery.sparkline.min.js')}}"></script>

    <!-- CHART-CIRCLE JS-->
    <script src="{{asset('assets/plugins/circle-progress/circle-progress.min.js')}}"></script>

    <!-- INTERNAL SELECT2 JS -->
    <script src="{{asset('assets/plugins/select2/select2.full.min.js')}}"></script>
    <script src="{{asset('assets/js/select2.js')}}"></script>

    <!-- PIETY CHART JS-->
    <script src="{{asset('assets/plugins/peitychart/jquery.peity.min.js')}}"></script>
    <script src="{{asset('assets/plugins/peitychart/peitychart.init.js')}}"></script>

    <!-- INTERNAL CHARTJS CHART JS-->
    <script src="{{asset('assets/plugins/chart/Chart.bundle.js')}}"></script>
    <script src="{{asset('assets/plugins/chart/rounded-barchart.js')}}"></script>
    <script src="{{asset('assets/plugins/chart/utils.js')}}"></script>

    <!-- INTERNAL SELECT2 JS -->
    <script src="{{asset('assets/plugins/select2/select2.full.min.js')}}"></script>

    <!-- INTERNAL Data tables js-->
    <script src="{{asset('assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/plugins/datatable/js/dataTables.bootstrap5.js')}}"></script>
    <script src="{{asset('assets/plugins/datatable/dataTables.responsive.min.js')}}"></script>

    <!-- INTERNAL APEXCHART JS -->
    <script src="{{asset('assets/js/apexcharts.js')}}"></script>
    <script src="{{asset('assets/plugins/apexchart/irregular-data-series.js')}}"></script>

    <!-- C3 CHART JS -->
    <script src="{{asset('assets/plugins/charts-c3/c3-chart.js')}}"></script>
    <script src="{{asset('assets/plugins/charts-c3/d3.v5.min.js')}}"></script>

    <!-- CHART-DONUT JS -->
    <script src="{{asset('assets/js/charts.js')}}"></script>

    <!-- INTERNAL Flot JS -->
    <script src="{{asset('assets/plugins/flot/jquery.flot.js')}}"></script>
    <script src="{{asset('assets/plugins/flot/jquery.flot.fillbetween.js')}}"></script>
    <script src="{{asset('assets/plugins/flot/chart.flot.sampledata.js')}}"></script>
    <script src="{{asset('assets/plugins/flot/dashboard.sampledata.js')}}"></script>

    <!-- INTERNAL Vector js -->
    <script src="{{asset('assets/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js')}}"></script>
    <script src="{{asset('assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js')}}"></script>

    <!-- INTERNAL INDEX JS -->
    <script src="{{asset('assets/js/index.js')}}"></script>
    <script src="{{asset('assets/js/index1.js')}}"></script>


    

    <!-- COUNTERS JS-->
    <script src="{{asset('assets/plugins/counters/counterup.min.js')}}"></script>
    <script src="{{asset('assets/plugins/counters/waypoints.min.js')}}"></script>
    <script src="{{asset('assets/plugins/counters/counters-1.js')}}"></script>

<script>
         ///// Token Status Refreshing
         var token = $("meta[name=csrf-token]").attr("content");  

function redirect(url){
    window.location.replace(url);

}
function t(e, o, r, t) {
          var a = document.getElementById("transactions");
          a.height = "330";
          var l = a.getContext("2d"),
            n = l.createLinearGradient(0, 80, 0, 280);
          n.addColorStop(0, e || "rgba(108, 95, 252, 0.8)"),
            n.addColorStop(1, o || "rgba(108, 95, 252, 0.2) ");
          var c = l.createLinearGradient(0, 80, 0, 280);
          c.addColorStop(0, r || "rgba(5, 195, 251, 0.8)"),
            c.addColorStop(1, r || "rgba(5, 195, 251, 0.2) ");
          new Chart(a, {
            type: "line",
            data: {
              labels: [
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "June",
                "July",
                "Aug",
                "Sep",
                "Oct",
                "Nov",
                "Dec",
              ],
              type: "line",
              datasets: [
                {
                  label: "Total Sales",
                  data: [
                    100, 210, 180, 454, 454, 230, 230, 656, 656, 350, 350, 210,
                  ],
                  backgroundColor: n,
                  borderColor: t || "#6c5ffc",
                  pointBackgroundColor: "#fff",
                  pointHoverBackgroundColor: n,
                  pointBorderColor: t || "#6c5ffc",
                  pointHoverBorderColor: n,
                  pointBorderWidth: 0,
                  pointRadius: 0,
                  pointHoverRadius: 0,
                  borderWidth: 3,
                  fill: "origin",
                },
                {
                  label: "Total Orders",
                  data: [
                    200, 530, 110, 110, 480, 520, 780, 435, 475, 738, 454, 454,
                  ],
                  backgroundColor: "transparent",
                  borderColor: "#05c3fb",
                  pointBackgroundColor: "#fff",
                  pointHoverBackgroundColor: c,
                  pointBorderColor: "#05c3fb",
                  pointHoverBorderColor: c,
                  pointBorderWidth: 0,
                  pointRadius: 0,
                  pointHoverRadius: 0,
                  borderWidth: 3,
                  fill: "origin",
                },
              ],
            },
            options: {
              responsive: !0,
              maintainAspectRatio: !1,
              tooltips: { enabled: !1 },
              legend: { display: !1, labels: { usePointStyle: !1 } },
              scales: {
                xAxes: [
                  {
                    display: !0,
                    gridLines: {
                      display: !1,
                      drawBorder: !1,
                      color: "rgba(119, 119, 142, 0.08)",
                    },
                    ticks: { fontColor: "#b0bac9", autoSkip: !0 },
                    scaleLabel: {
                      display: !1,
                      labelString: "Month",
                      fontColor: "transparent",
                    },
                  },
                ],
                yAxes: [
                  {
                    ticks: {
                      min: 0,
                      max: 1050,
                      stepSize: 150,
                      fontColor: "#b0bac9",
                    },
                    display: !0,
                    gridLines: {
                      display: !0,
                      drawBorder: !1,
                      zeroLineColor: "rgba(142, 156, 173,0.1)",
                      color: "rgba(142, 156, 173,0.1)",
                    },
                    scaleLabel: {
                      display: !1,
                      labelString: "sales",
                      fontColor: "transparent",
                    },
                  },
                ],
              },
              title: { display: !1, text: "Normal Legend" },
            },
          });
        }
</script>
    @endsection