@extends('admin.layout.app')
@section('style')
<style>
    .text-muted {
        color: #000 !important;
    }

    .morris-hover.morris-default-style {
        position: absolute;
    }

</style>
<script src="{{ asset('/adminto/assets/js/modernizr.min.js')}}"></script>
@endsection
@section('content')
<div class="title-page sub-header-title-custom">
    <h5 style="color: inherit;">
        <a href="{{url('/dashboard')}}"><span>الرئيسية </span><i class="fa fa-angle-left"
                style="padding: 0 5px; color:inherit;"></i></a>
        {{-- <a href="www"><span>wwwwww </span><i class="fa fa-angle-left" style="padding: 0 5px; color:inherit;"></i></a> --}}
        <span> Welcome {{auth()->user()->name}} </span>
    </h5>

    <ul>




    </ul>
</div>



<div class="col-lg-3 col-md-6 {!! (CheckPermission('users_show'))? '' : 'hidden'  !!}">
    <div class="card-box" style="background-color: #c2daf4;">


        <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" style="color: #000; !important">إجمالي عدد العملاء</p>
            </div>
        </div>
    </div>
</div>



<div class="col-lg-3 col-md-6 {!! (CheckPermission('orders_show'))? '' : 'hidden'  !!}">

    <div class="card-box" style="background-color: #c2daf4;">


        <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>
</div>

<div class="col-lg-3 col-md-6 {!! (CheckPermission('cars_show'))? '' : 'hidden'  !!}">

    <div class="card-box" style="background-color: #c2daf4;">


        <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\Car::count()}}</h2>
                <p class="text-muted"> عدد السيارات إجمالي </p>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 {!! (CheckPermission('drivers_show'))? '' : 'hidden'  !!}">

    <div class="card-box" style="background-color: #c2daf4;">


        <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"> عدد السائقين إجمالي </p>
            </div>
        </div>
    </div>
</div>

<br>
<br>






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

    <div class="col-lg-4 {!! (CheckPermission('users_show'))? '' : 'hidden'  !!}">
        <div class="card-box">
            <h4 class="header-title m-t-0">مستخدمي التطبيق</h4>
            <div id="morris-bar-example" style="height: 280px;"></div>
        </div>
    </div><!-- end col -->
    <div class="col-lg-4 {!! (CheckPermission('orders_show'))? '' : 'hidden'  !!}">
        <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-4 {!! (CheckPermission('orders_show'))? '' : 'hidden'  !!}">
        <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 {!! (CheckPermission('orders_show'))? '' : 'hidden'  !!}">
    @foreach (OrderStatus() as $key => $value)

    <div class="col-lg-3 col-md-4">
        <div class="card-box" style="background-color: {{scolors($key)}};">


            <h4 class="header-title m-t-0 m-b-30" style="color: #000;"> {{$value}}</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','=',$key)->count()}} </h2>
                    <a href="{{url('/dashboard/orders?status='.$key)}}">
                        <p class="text-muted"> {{$value}} </p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endforeach
    
    <div class="col-lg-3 col-md-4">
        <a href="{{url('/dashboard/orders-today')}}">
        <div class="card-box" style="background-color: #fff;">


            <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;">
                        ( {{ \DB::table('orders')->WhereNull('deleted_at')->whereDate('day_date', \Carbon\Carbon::now())->whereIn('status', ['pending', 'driver_on_the_way', 'washing_car'])->count() }} ) </h2>
                        <p class="text-muted"> عدد الطلبات اليوم </p>
                    
                </div>
            </div>
        </div>
        </a>
    </div>
    <!--<div class="col-lg-3 col-md-4">-->
    <!--    <div class="card-box" >-->


    <!--        <a href="{{url('/dashboard/orders-today')}}">-->
    <!--        {{-- <h4 class="header-title m-t-0 m-b-30" style="color: #000;"> طلبات اليوم</h4> --}}-->

    <!--        <div class="widget-chart-1">-->
    <!--            <div class="widget-detail-1">-->
    <!--                <h2 class="p-t-10 m-b-0" style="color: #000; text-align:center;">-->
                          
    <!--                </h2>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </a>-->
    <!--    </div>-->
    <!--</div>-->


</div>


{{-- table of orders --}}
<div class="row {!! (CheckPermission('orders_show'))? '' : 'hidden'  !!}">

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

                <div class="col-lg-12">
                    <div class="box-tebal">
                        <h4>حجوزات اليوم بتايخ {{\Carbon\Carbon::today()->toDateString()}}</h4>
                        <div role="tabpanel" class="tab-pane " style="overflow-x: scroll;">
                            <table class="table table-striped table-bordered">
                                <thead>
                                    @php
                                    $i = 1;
                                    @endphp
                                    <tr>

                                        <th>#</th>
                                        <th>رقم الحجز </th>
                                        <th> اسم العميل </th>
                                        <th> رقم جوال العميل </th>
                                        {{--  <th>   مكان الحجز </th>  --}}
                                        <th> نوع الخدمة </th>
                                        <th> نوع السياره </th>
                                        <th> اسم السائق </th>
                                        <th> رقم جوال السائق </th>
                                        <th> تاريخ تنفيذ الحجز </th>
                                        <th> وقت البداية </th>
                                        <th> وقت الانتهاء </th>
                                        <th> الحاله </th>
                                        <th> المبلغ المستحق </th>
                                        {{--  <th>  وقت الحجز </th>
                                    <th> الخصم </th> --}}
                                        <th> طريقه الدفع </th>
                                        <th> تاريخ انشاء الحجز </th>
                                        <th> العمليات </th>


                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach($orders as $item)

                                    <tr style="" id="id-{{$i}}">
                                        <td>{{$i++}} </td>
                                        <td>{{$item->id }} </td>
                                        <td>{{$item->User->name ?? ''}} </td>
                                        <td>{{$item->User->phone ?? ''}} </td>
                                        {{--  <td>{{$item->}} </td> --}}
                                        <td>{{$item->Service->name ?? ''}} </td>
                                        <td>{{$item->Car->name ?? ''}} </td>
                                        <td>{{$item->Driver->name ?? ''}} </td>
                                        <td>{{$item->Driver->phone ?? ''}} </td>
                                        <td>{{$item->day_date ?? ''}} </td>
                                        <td>{{$item->start_time ?? ''}} </td>
                                        <td>{{$item->end_time ?? ''}} </td>
                                        <td>{{getStatus($item->status, 'ar')}} </td>
                                        <td>{{$item->total}} </td>
                                        <td>{{$item->payment_type}} </td>
                                        <td>{{$item->created_at}} </td>


                                        <td class="btns">
                                            <a href="{{route('orders.destroy',$item)}}" type="button" title="حذف"
                                                id="delete-btn"
                                                class="btn btn-danger delete-btn  waves-effect waves-light m-b-5 btn-xs {!! (CheckPermission('orders_delete'))? '' : 'hidden'  !!}">
                                                <i class="fa fa-times"></i> </a>
                                            <a href="/dashboard/orders/{{$item->id}}" type="button" title="عرض"
                                                class="btn btn-info   waves-effect waves-light m-b-5 btn-xs" > <i
                                                    class="fa fa-eye"></i> </a>

                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div><!-- end col -->
</div>


<!-- end row -->
<div class="row {!! (CheckPermission('drivers_show'))? '' : 'hidden'  !!}">

    <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 -->
{{-- <script src="/adminto/assets/pages/jquery.dashboard.js"></script> --}}
@include('admin.chartjs')
<!-- 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=AIzaSyChq8_qMp50WI17K6p7-IjZQLUW8n1-334&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>
@if (false)
    <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 $barData = JSON.parse('{!! $users_chart !!}');
                    this.createBarChart('morris-bar-example', $barData, 'y', ['a'], ['العدد'], ['#188ae2']);
                    //creating bar chart
                    var $barData2 = JSON.parse('{!! $orders_chart !!}');
                    this.createBarChart('morris-bar-example2', $barData2, 'y', ['a'], ['عدد الحجزات'], ['#188ae2']);

                    //create line charthart
                    //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>

@endif

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

{{-- <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.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-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 src="https://www.gstatic.com/firebasejs/8.6.8/firebase-analytics.js"></script> --}}
<!-- The core Firebase JS SDK is always required and must be listed first -->
{{-- <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.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/8.6.8/firebase-analytics.js"></script> --}}

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyCUPprEbO25z-DXpDwe-0sA4FNwc7rI6Q0",
    authDomain: "sprayapp-2dddd.firebaseapp.com",
    databaseURL: "https://sprayapp-2dddd-default-rtdb.europe-west1.firebasedatabase.app",
    projectId: "sprayapp-2dddd",
    storageBucket: "sprayapp-2dddd.appspot.com",
    messagingSenderId: "138917804928",
    appId: "1:138917804928:web:cfcf73be01d09ee827df65",
    measurementId: "G-GXVQ3DKK6J"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  firebase.auth().signInAnonymously()
  .then(() => {
    // Signed in..
    console.log('auth');
        //   var db = firebase.database();
        // var db = firebase.firestore();
        var db = firebase.database();
        console.log(db);
    var docRef = db.ref('drivers');
    var ref = firebase.database().ref();

        ref.on("drivers", function(snapshot) {
        console.log('ss',snapshot.val());
        }, function (error) {
        console.log("Error: " + error.code);
        });
        // db.ref("drivers").get().then((querySnapshot) => {
        //     querySnapshot.forEach((doc) => {
        //         console.log(`${doc.id}` , doc.data());
        //     });
        // });
        // db.ref("drivers").onSnapshot((querySnapshot) => {
        //         var aarr = [];
        //         var i = 0;
        //     querySnapshot.forEach((doc) => {
        //         if (doc.data().l !== 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);
        // });
    console.log(docRef);
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    console.log('no auth');
    // ...
  });

    //     //   var db = firebase.database();
    // var db = firebase.firestore();
    // var docRef = db.collection("drivers");
    //     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().l !== 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