@extends('admin.layout.app')
@section('style')

<script src="/adminto/assets/js/modernizr.min.js"></script>
@endsection
@section('content')
@if(!auth()->guard('company')->check() && !auth()->guard('school')->check())
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-user">
            <div>
                <div class="box-icon">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </div>
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5"><a href="{{route('users.create')}}">إضافة ولى امر </a></h4>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-user">
            <div>
                <div class="box-icon">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </div>
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5"><a href="{{route('buses.create')}}">إضافة حافلة </a></h4>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-user">
            <div>
                <div class="box-icon">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </div>
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5"><a href="{{url('/dashboard/settings/admins')}}"> إضافه مستخدم </a></h4>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-user">
            <div>
                <div class="box-icon">
                    <i class="zmdi zmdi-notifications-none" aria-hidden="true"></i>
                </div>
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5"><a href="{{url('/dashboard/notifications')}}">ارسال اشعار </a></h4>
                </div>
            </div>
        </div>
    </div><!-- end col -->
</div>
<!-- end row -->


<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card-box">
            <!-- <div class="dropdown pull-right">
                                 <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown"
                                    aria-expanded="false">
                                     <i class="zmdi zmdi-more-vert"></i>
                                 </a>
                                 <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                 </ul>
                             </div> -->

            <h4 class="header-title m-t-0 m-b-30">عدد الاشتراكات </h4>

            <div class="widget-chart-1">
                <div class="widget-chart-box-1">
                    <i class="fa fa-hospital-o" aria-hidden="true"></i>
                </div>

                <div class="widget-detail-1">
                    <h2 class="p-t-10 m-b-0"> {{$orders_total = GetCount('orders','', '')}} </h2>
                    <p class="text-muted">عدد الاشتراكات </p>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box">
            <!-- <div class="dropdown pull-right">
                                 <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown"
                                    aria-expanded="false">
                                     <i class="zmdi zmdi-more-vert"></i>
                                 </a>
                                 <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                 </ul>
                             </div> -->

            <h4 class="header-title m-t-0 m-b-30">عدد الاشتراكات قيد الموافقه </h4>

            <div class="widget-box-2">
                <div class="widget-detail-2">
                    <span class="badge badge-success pull-left m-t-20"><i class="fa fa-compress" aria-hidden="true"></i>
                    </span>
                    <h2 class="m-b-0"> {{ $orders_init = GetCount('orders','status', 'init')}} </h2>
                    <p class="text-muted m-b-25">عدد الاشتراكات قيد الموافقه </p>
                </div>
                <div class="progress progress-bar-pink-alt progress-sm m-b-0">
                    <div class="progress-bar progress-bar-pink" role="progressbar"
                        aria-valuenow="{{($orders_total != 0)? round($orders_init / $orders_total * 100) : ''}}"
                        aria-valuemin="0" aria-valuemax="100"
                        style="width: {{($orders_total != 0)? round($orders_init / $orders_total * 100) : ''}}%;">
                        <span class="sr-only">{{($orders_total != 0)? round($orders_init / $orders_total * 100) : ''}}%
                            Complete</span>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box">
            <!-- <div class="dropdown pull-right">
                                 <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown"
                                    aria-expanded="false">
                                     <i class="zmdi zmdi-more-vert"></i>
                                 </a>
                                 <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                 </ul>
                             </div> -->

            <h4 class="header-title m-t-0 m-b-30">عدد الاشتراكات المفعله </h4>

            <div class="widget-chart-1">
                <div class="widget-chart-box-1">
                    @php $orders_confirmed = GetCount('orders','status', 'confirmed'); @endphp
                    <input data-plugin="knob" data-width="80" data-height="80" data-fgColor="#ffbd4a"
                        data-bgColor="#FFE6BA"
                        value="{{($orders_total != 0)? round($orders_confirmed / $orders_total * 100) : ''}}"
                        data-skin="tron" data-angleOffset="180" data-readOnly=true data-thickness=".15" />
                </div>
                <div class="widget-detail-1">
                    <h2 class="p-t-10 m-b-0"> {{ $orders_confirmed = GetCount('orders','status', 'confirmed')}} </h2>
                    <p class="text-muted">عدد الاشتراكات المفعله </p>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box">
            <!-- <div class="dropdown pull-right">
                                 <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown"
                                    aria-expanded="false">
                                     <i class="zmdi zmdi-more-vert"></i>
                                 </a>
                                 <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                 </ul>
                             </div> -->

            <h4 class="header-title m-t-0 m-b-30">عدد الاشتراكات المنتهيه </h4>

            <div class="widget-box-2">
                <div class="widget-detail-2">
                    <span class="badge badge-pink pull-left m-t-20"><i class="fa fa-list-ol" aria-hidden="true"></i>
                    </span>
                    <h2 class="m-b-0"> {{ $orders_finished = GetCount('orders','status', 'finished')}} </h2>
                    <p class="text-muted m-b-25"> اجمالى عدد الاشتراكات المنتهيه </p>
                </div>

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

</div>
<!-- end row -->

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

            <h4 class="header-title m-t-0 m-b-30">عدد اولياء الامور</h4>

            <div class="widget-chart-1">
                <div class="widget-chart-box-1">
                    <i class="fa fa-users" aria-hidden="true"></i>
                </div>

                <div class="widget-detail-1">
                    <h2 class="p-t-10 m-b-0">{{ GetCount('users','', '')}} </h2>
                    <p class="text-muted">مجموع عدد اولياء الامور </p>
                </div>
            </div>
        </div>
    </div><!-- end col -->

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

            <h4 class="header-title m-t-0 m-b-30">عدد اصحاب الحافلات </h4>

            <div class="widget-chart-1">
                <div class="widget-chart-box-1">
                    <i class="fa fa-handshake-o" aria-hidden="true"></i>
                </div>

                <div class="widget-detail-1">
                    <h2 class="p-t-10 m-b-0">{{ GetCount('buses','driver_id', null, '<>')}} </h2>
                    <p class="text-muted">مجموع عدد اصحاب الحافلات </p>
                </div>
            </div>
        </div>
    </div><!-- end col -->

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

            <h4 class="header-title m-t-0 m-b-30">عدد طلاب الحافلات</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"> {{ GetCount('order_sons','', '')}} </h2>
                    <p class="text-muted"> عدد طلاب الحافلات</p>
                </div>
            </div>
        </div>
    </div><!-- end col -->

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


<div class="row">
    <div class="col-lg-4 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>
                <ul class="list-inline chart-detail-list m-b-0">
                    <li>
                        <h5 style="color: #ff8acc;"><i class="fa fa-circle m-r-5"></i> داخل الجولات</h5>
                    </li>
                    <li>
                        <h5 style="color: #5b69bc;"><i class="fa fa-circle m-r-5"></i> لم يحضروا </h5>
                    </li>

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

    <div class="col-lg-6">
        <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-6">
        <div class="card-box">
            <h4 class="header-title m-t-0">أرباح النظام </h4>
            <div id="morris-line-example" style="height: 280px;"></div>
        </div>
    </div><!-- end col -->

</div>
<!-- end row -->


<div class="row">

    <div class="col-lg-12">
        <div class="card-box">

            <h4 class="header-title m-t-0 m-b-30"> احدث طلبات الاشتراك </h4>


            <div class="row">
                <form role="form">
                    <div class="col-lg-12">
                        <div class="f-box m-b-15">
                            <h4 class="header-title m-t-0 m-b-15">فلترة الاشتراكات </h4>

                            <div class="f-box-sm">

                                <label for="">حاله الاشتراك </label>
                                {!! Form::select("status",OrderStatusS(),(array_key_exists('status', $search))?
                                $search['status'] : null,['class'=>"form-control select2 ", 'id' => 'banks', 'style'
                                =>"width: 100%; display: inline-block;"])!!}
                            </div>

                            <div class="f-box-sm m-b-15">

                                <label for="">نوع الاشتراك </label>
                                {!! Form::select("trip_type",TripTypesS(),(array_key_exists('trip_type', $search))?
                                $search['trip_type'] : null,['class'=>"form-control select2 ", 'id' => 'banks', 'style'
                                =>"width: 100%; display: inline-block;"])!!}
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-12">
                        <div class="f-box m-b-15">
                            <div class="form-group">
                                <label class="control-label" for="example-input1-group2">عرض طلبات الاشتراك خلال ( عدد
                                    الأيام )</label>
                                <div class="input-group">

                                    <input type="text" id="example-input1-group2"
                                        value="{{(array_key_exists('days', $search))? $search['days'] : ''}}"
                                        name="days" class="form-control" placeholder="أدخل عدد الأيام هنا">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn waves-effect waves-light btn-primary"><i
                                                class="fa fa-search"></i></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="submit" class="btn btn-info" value="بحث">
            </div>
            </form>

            <div class=" table-custom" style="overflow: hidden;">
                <table class=" datatable-buttons table table-striped table-bordered ">
                    <thead>
                        <tr>
                            <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>
                            <td>{{$item->id}}</td>
                            <td> {{ $item->Parent->name ?? '' }} </td>
                            <td> {{ $item->Parent->phone ?? '' }} </td>
                            <td>{{__('dashboard.'.$item->trip_type)}}</td>
                            <td> {{ $item->BusClass->name ?? '' }} </td>
                            <td> {{ $item->BusType->name ?? '' }} </td>
                            <td> {{ $item->Bus->board_no ?? '' }} </td>
                            <td>{{ $item->source_address ?? '' }} </td>
                            <td>{{ $item->seats ?? '' }} </td>
                            <td> {{__('dashboard.'.$item->status)}} </td>
                            <td><a href="/dashboard/orders/{{$item->id}}"><i class="fa fa-eye  m-r-10"
                                        style="color: #188ae2;"></i> عرض</a></td>
                        </tr>
                        @endforeach



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

</div>
<!-- end row -->

@elseif(auth()->guard('school')->check())
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-user">
            <div>
                <div class="box-icon">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </div>
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5"><a href="{{route('school-drivers.create')}}">إضافة سائق </a></h4>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-user">
            <div>
                <div class="box-icon">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </div>
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5"><a href="{{route('school-buses.create')}}">إضافة حافلة </a></h4>
                </div>
            </div>
        </div>
    </div><!-- end col -->
</div>
@else
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-user">
            <div>
                <div class="box-icon">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </div>
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5"><a href="{{route('company-drivers.create')}}">إضافة سائق </a></h4>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-user">
            <div>
                <div class="box-icon">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </div>
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5"><a href="{{route('company-buses.create')}}">إضافة حافلة </a></h4>
                </div>
            </div>
        </div>
    </div><!-- end col -->
</div>
@endif
@endsection
@section('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.slimscroll.js"></script>
<script src="/adminto/assets/js/jquery.blockUI.js"></script>
<script src="/adminto/assets/js/waves.js"></script>
<script src="/adminto/assets/js/wow.min.js"></script>
<script src="/adminto/assets/js/jquery.nicescroll.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>

<!-- Dashboard init -->
<!-- <script src="/adminto/assets/pages/jquery.dashboard.js"></script> -->

<!-- Datatables-->
<script src="/adminto/assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/adminto/assets/plugins/datatables/dataTables.bootstrap.js"></script>
<script src="/adminto/assets/plugins/datatables/dataTables.buttons.min.js"></script>
<script src="/adminto/assets/plugins/datatables/buttons.bootstrap.min.js"></script>
<script src="/adminto/assets/plugins/datatables/jszip.min.js"></script>
<script src="/adminto/assets/plugins/datatables/pdfmake.min.js"></script>
<script src="/adminto/assets/plugins/datatables/vfs_fonts.js"></script>
<script src="/adminto/assets/plugins/datatables/buttons.html5.min.js"></script>
<script src="/adminto/assets/plugins/datatables/buttons.print.min.js"></script>
<script src="/adminto/assets/plugins/datatables/dataTables.fixedHeader.min.js"></script>
<script src="/adminto/assets/plugins/datatables/dataTables.keyTable.min.js"></script>
<script src="/adminto/assets/plugins/datatables/dataTables.responsive.min.js"></script>
<script src="/adminto/assets/plugins/datatables/responsive.bootstrap.min.js"></script>
<script src="/adminto/assets/plugins/datatables/dataTables.scroller.min.js"></script>
<script src="/adminto/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Datatable init js -->
<script src="/adminto/assets/pages/datatables.init.js"></script>

<!-- Plugins Js -->
<script src="/adminto/assets/plugins/switchery/switchery.min.js"></script>
<script src="/adminto/assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript" src="/adminto/assets/plugins/multiselect/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="/adminto/assets/plugins/jquery-quicksearch/jquery.quicksearch.js"></script>
<script src="/adminto/assets/plugins/select2/dist/js/select2.min.js" type="text/javascript"></script>
<script src="/adminto/assets/plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js" type="text/javascript">
</script>
<script src="/adminto/assets/plugins/bootstrap-inputmask/bootstrap-inputmask.min.js" type="text/javascript"></script>
<script src="/adminto/assets/plugins/moment/moment.js"></script>
<script src="/adminto/assets/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<script src="/adminto/assets/plugins/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="/adminto/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/adminto/assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="/adminto/assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js" type="text/javascript"></script>


<!-- App js -->
<script src="/adminto/assets/js/jquery.core.js"></script>
<script src="/adminto/assets/js/jquery.app.js"></script>
<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]),
            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 type="text/javascript">
    /**
     * 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  = [
                //     { y: '2010', a: 75 },
                //     { y: '2011', a: 42 },
                //     { y: '2012', a: 75 },
                //     { y: '2013', a: 38 },
                //     { y: '2014', a: 19 },
                //     { y: '2015', a: 93 }
                // ];
                var $barData = JSON.parse('{!! $users_chart !!}');
                this.createBarChart('morris-bar-example', $barData, 'y', ['a'], ['Statistics'], ['#188ae2']);

                //create line chart
                // var $data  = [
                //     { y: '2008', a: 50, b: 0 },
                //     { y: '2009', a: 75, b: 50 },
                //     { y: '2010', a: 30, b: 80 },
                //     { y: '2011', a: 50, b: 50 },
                //     { y: '2012', a: 75, b: 10 },
                //     { y: '2013', a: 50, b: 40 },
                //     { y: '2014', a: 75, b: 50 },
                //     { y: '2015', a: 100, b: 70 }
                //   ];
                var $data = JSON.parse('{!! $earnings_chart !!}');
                this.createLineChart('morris-line-example', $data, 'y', ['a', 'b'], ['Series A', 'Series B'], ['0.9'], [
                    '#ffffff'
                ], ['#999999'], ['#10c469', '#188ae2']);

                //creating donut chart
                var $donutData = [{
                        label: "Download Sales",
                        value: 12
                    },
                    {
                        label: "In-Store Sales",
                        value: 30
                    },
                    {
                        label: "Mail-Order Sales",
                        value: 20
                    }
                ];
                this.createDonutChart('morris-donut-example', $donutData, ['#ff8acc', '#5b69bc', "#35b8e0"]);
            },
            //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>
<!-- 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: "AIzaSyAfcZQqYilFNKw2vox7issn0O-m-1RhUgs",
    authDomain: "bustecc.firebaseapp.com",
    databaseURL: "https://bustecc.firebaseio.com",
    projectId: "bustecc",
    storageBucket: "bustecc.appspot.com",
    messagingSenderId: "910250236045",
    appId: "1:910250236045:web:c997d0bdba0a53c4e8aac4",
    measurementId: "G-Q1442084PJ"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  var db = firebase.database();
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);
});

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]),
            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