@extends('admin.layout.app')
@section('style')
<script src="{{ asset('/adminto/assets/js/modernizr.min.js')}}"></script>
@endsection
@section('header')
<!-- Page title -->
<ul class="nav navbar-nav navbar-left">
    <li>
        <button class="button-menu-mobile  ">
            <i class="zmdi zmdi-menu"></i>
        </button>
    </li>
    <li>
        <h4 class="page-title">
            الرئيسية </h4>
    </li>
</ul>
@endsection
@section('content')
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card-box" style="background-color: #abd8f5;">
            <a href="{{route('users.index')}}">
            <h4 class="header-title m-t-0 m-b-30" style="color: #000;">عدد المستخدمين</h4>
            <div class="widget-chart-1">
                <div class="widget-chart-box-1">
                    <i class="fa fa-building-o" aria-hidden="true"></i>
                </div>
                <div class="widget-detail-1">
                    <h2 class="p-t-10 m-b-0" style="color: #000;"> {{\App\Models\User::count()}} </h2>
                    <p class="text-muted"> عدد المستخدمين </p>
                </div>
            </div>
        </div>
    </a>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card-box" style="background-color: #abd8f5;">
            <a href="{{route('drivers.index')}}">
            <h4 class="header-title m-t-0 m-b-30" style="color: #000;">عدد السائقين</h4>
            <div class="widget-chart-1">
                <div class="widget-chart-box-1">
                    <i class="fa fa-building-o" aria-hidden="true"></i>
                </div>
                <div class="widget-detail-1">
                    <h2 class="p-t-10 m-b-0" style="color: #000;"> {{\App\Models\Driver::count()}} </h2>
                    <p class="text-muted" style="color: #000 !important;">عدد السائقين الاون لاين {{\App\Models\Driver::where('online', '1')->count()}}</p>
                </div>
            </div>
        </div>
    </a>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card-box" style="background-color: #abd8f5;">
            <a href="{{route('orders.index')}}">
            <h4 class="header-title m-t-0 m-b-30" style="color: #000;">عدد الطلبات</h4>
            <div class="widget-chart-1">
                <div class="widget-chart-box-1">
                    <i class="fa fa-building-o" aria-hidden="true"></i>
                </div>
                <div class="widget-detail-1">
                    <h2 class="p-t-10 m-b-0" style="color: #000;"> {{\App\Models\Order::count()}}</h2>
                    <p class="text-muted"> عدد الطلبات إجمالي </p>
                </div>
            </div>
        </div>
    </a>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card-box" style="background-color: #abd8f5;">
            <a href="{{route('banks.index')}}">
            <h4 class="header-title m-t-0 m-b-30" style="color: #000;">عدد الحسابات البنكية</h4>
            <div class="widget-chart-1">
                <div class="widget-chart-box-1">
                    <i class="fa fa-building-o" aria-hidden="true"></i>
                </div>
                <div class="widget-detail-1">
                    <h2 class="p-t-10 m-b-0" style="color: #000;"> {{\App\Models\BankAccount::count()}} </h2>
                    <p class="text-muted"> عدد الحسابات البنكية </p>
                </div>
            </div>
        </div>
    </a>
    </div>

    <div class="col-lg-6">
        <div class="card-box">
            <h4 class="header-title m-t-0">عدد الطلبات</h4>
            <div id="morris-bar-example2" style="height: 280px;"></div>
        </div>
    </div><!-- end col -->
    <div class="col-lg-6">
        <div class="card-box">

            <h4 class="header-title m-t-0"> الطلبات من حيث الحالات </h4>

            <div class="widget-chart text-center">
                <div id="morris-donut-example" style="height: 245px;"></div>
            </div>
        </div>
    </div><!-- end col -->
</div>
<div class="row">
    @foreach (OrderStatus() as $item => $val)

    <div class="col-lg-4 col-md-6">
        <div class="card-box" style="">


            <h4 class="header-title m-t-0 m-b-30" style="color: #000;"> الطلبات {{$val}}</h4>

            <div class="widget-chart-1">
                <div class="widget-chart-box-1">
                    <i class="fa fa-building-o" aria-hidden="true"></i>
                </div>
                <div class="widget-detail-1">
                    <h2 class="p-t-10 m-b-0" style="color: #000;">
                        {{\App\Models\Order::where('status','=',$item)->count()}} </h2>
                    <a href="{{url('/dashboard/orders?status='.$item)}}">
                        <p class="text-muted"> {{$val}} </p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endforeach


</div>

<!-- end row -->
<div class="row">

    <div class="col-sm-12">
        <div class="card-box text-left">
            <div class="row">

                <div class="col-lg-12">
                    <div class="box-tebal">
                        <div id="map" style="width: 100%; height: 600px;"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    var resizefunc = [];
</script>

<script>
    var resizefunc = [];
</script>

<!-- jQuery  -->
<script src="/adminto/assets/js/jquery.min.js"></script>
<script src="/adminto/assets/js/bootstrap-rtl.min.js"></script>
<script src="/adminto/assets/js/detect.js"></script>
<script src="/adminto/assets/js/fastclick.js"></script>
<script src="/adminto/assets/js/jquery.blockUI.js"></script>
<script src="/adminto/assets/js/waves.js"></script>
<script src="/adminto/assets/js/jquery.nicescroll.js"></script>
<script src="/adminto/assets/js/jquery.slimscroll.js"></script>
<script src="/adminto/assets/js/jquery.scrollTo.min.js"></script>

<!-- KNOB JS -->
<!--[if IE]>
    <script type="text/javascript" src="/adminto/assets/plugins/jquery-knob/excanvas.js"></script>
    <![endif]-->
<script src="/adminto/assets/plugins/jquery-knob/jquery.knob.js"></script>

<!--Morris Chart-->
<script src="/adminto/assets/plugins/morris/morris.min.js"></script>
<script src="/adminto/assets/plugins/raphael/raphael-min.js"></script>
<!-- Toastr js -->
<script src="{{ asset('/adminto/assets/plugins/toastr/toastr.min.js')}}"></script>

<!-- adminto/init -->

<!-- App js -->
<script src="/adminto/assets/js/jquery.core.js"></script>
<script src="/adminto/assets/js/jquery.app.js"></script>

@if(session()->has('warning'))
<script type="text/javascript">
    toastr["error"]("{{session()->get('warning')}}")

    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-top-right",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "500",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }
</script>
@endif
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyCob-v1r_8bpOUPIm4TiaxrD3roc_XLFFo&language=ar">
</script>
<script type="text/javascript">
    var locations = [
        ['Driver 1', -33.890542, 151.274856, 4],
        ['Driver 2 , orders: 25', -33.923036, 151.259052, 5],
        ['Driver 3 , orders: 5', -34.028249, 151.157507, 3],
        ['Driver 4 , orders: 20 <br> done:2', -33.80010128657071, 151.28747820854187, 2],
    ];
    var markers = [];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(24.7255553, 47.1027146),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/info-i_maps.png",
            map: map
        });
        markers.push(marker);

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
</script>
    <script>

/**
* Theme: Adminto Admin Template
* Author: Coderthemes
* Dashboard
*/

!function($) {
    "use strict";

    var Dashboard1 = function() {
    	this.$realData = []
    };

    //creates Bar chart
    Dashboard1.prototype.createBarChart  = function(element, data, xkey, ykeys, labels, lineColors) {
        Morris.Bar({
            element: element,
            data: data,
            xkey: xkey,
            ykeys: ykeys,
            labels: labels,
            hideHover: 'auto',
            resize: true, //defaulted to true
            gridLineColor: '#eeeeee',
            barSizeRatio: 0.2,
            barColors: lineColors
        });
    },

    //creates line chart
    Dashboard1.prototype.createLineChart = function(element, data, xkey, ykeys, labels, opacity, Pfillcolor, Pstockcolor, lineColors) {
        Morris.Line({
          element: element,
          data: data,
          xkey: xkey,
          ykeys: ykeys,
          labels: labels,
          fillOpacity: opacity,
          pointFillColors: Pfillcolor,
          pointStrokeColors: Pstockcolor,
          behaveLikeLine: true,
          gridLineColor: '#eef0f2',
          hideHover: 'auto',
          resize: true, //defaulted to true
          pointSize: 0,
          lineColors: lineColors
        });
    },

    //creates Donut chart
    Dashboard1.prototype.createDonutChart = function(element, data, colors) {
        Morris.Donut({
            element: element,
            data: data,
            resize: true, //defaulted to true
            colors: colors
        });
    },


    Dashboard1.prototype.init = function() {

        //creating bar chart
        var $barData2  = JSON.parse('{!! $orders_chart !!}');
        this.createBarChart('morris-bar-example2', $barData2, 'y', ['a'], ['عدد الطلبات'], ['#188ae2']);

        //create line chart

        //create line chart
        //creating donut chart
        var $donutData = [
                {label: "Download Sales", value: 12},
                {label: "In-Store Sales", value: 30},
                {label: "Mail-Order Sales", value: 20}
            ];

        var $donutData  = JSON.parse('{!! $order_statuses_chart !!}');
        var $colorData  = JSON.parse('{!! $order_statuses_colors !!}');
        this.createDonutChart('morris-donut-example', $donutData, $colorData);
    },
    //init
    $.Dashboard1 = new Dashboard1, $.Dashboard1.Constructor = Dashboard1
}(window.jQuery),

//initializing
function($) {
    "use strict";
    $.Dashboard1.init();
}(window.jQuery);
</script>

<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script>
{{--
<script>
  // Your web app's Firebase configuration

   var firebaseConfig = {
    apiKey: "AIzaSyASV6ryM8d7tfsgxEULmT9j3GIqEM0O7rY",
    authDomain: "madarexpress.firebaseapp.com",
    databaseURL: "https://madarexpress.firebaseio.com",
    projectId: "madarexpress",
    storageBucket: "madarexpress.appspot.com",
    messagingSenderId: "306328789253",
    appId: "1:306328789253:web:c874611b2b87e13bedd76c",
    measurementId: "G-S8PYJ0VE2T"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
//   var db = firebase.database();
  var db = firebase.firestore();
    // var ref = db.ref("/");
    // ref.on("value", function(snapshot) {
    //     var objOfObjs = snapshot.val().Drivers;
    //     var arrayOfObj = Object.entries(objOfObjs).map((e) => ( { [e[0]]: e[1] } ));
    //     var aarr = [];
    //     var i = 0;
    //     jQuery.each(arrayOfObj, function(key, value ) {
    //     jQuery.each(value, function(key2, value2 ) {
    //         aarr[i++] = [ '#'+key2 + '', value2.lat, value2.long ];

    //     });

    //     });
    //     for(var i=0; i < markers.length; i++){
    //         markers[i].setMap(null);
    //     }
    //     markers = [];
    //     changeMarkers(aarr, map, markers);
    //     console.log(markers);
    // });
    var docRef = db.collection("drivers");
//     function(doc) {
//     if (doc.exists) {
//         console.log("Document data:", doc.data());
//     } else {
//         // doc.data() will be undefined in this case
//         console.log("No such document!");
//     }
// }
db.collection("drivers").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id}` , doc.data());
    });
});
db.collection("drivers").onSnapshot((querySnapshot) => {
        var aarr = [];
        var i = 0;
    querySnapshot.forEach((doc) => {
        if (doc.data().locations !== undefined) {
            console.log(`${doc.id}` , doc.data().locations[0]);
            aarr[i++] = [ '#'+doc.data().name + ' <br> ' + doc.data().phone, doc.data().locations[0].lat, doc.data().locations[0].long ];
        }
    });
    for(var i=0; i < markers.length; i++){
        markers[i].setMap(null);
    }
    markers = [];
    changeMarkers(aarr, map, markers);
    console.log(markers);
});
// docRef.get().then((querySnapshot) => {
//     const tempDoc = querySnapshot.docs.map((doc) => {
//         if (doc.exists) {
//         console.log("Document data:", doc.data());
//     } else {
//         // doc.data() will be undefined in this case
//         console.log("No such document!");
//     }
//       })
// }).catch(function(error) {
//     console.log("Error getting document:", error);
// });

function changeMarkers(locations,map, markers){

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            icon: "https://madarex.sa/Location.png",
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
        markers.push(marker);
    }
}
// ref.once("value", function(snapshot) {
//     console.log(snapshot.val());
// });
</script> --}}
@endsection