@extends('layouts.app')
@section('content')
    <div id="main-wrapper" class="page-wrapper" style="min-height: 207px;">

        <div class="container-fluid">

            <div class="card mb-3 business-analytics">

                <div class="card-body">

                    <div class="row flex-between align-items-center g-2 mb-3 order_stats_header">
                        <div class="col-sm-6">
                            <h4 class="d-flex align-items-center text-capitalize gap-10 mb-0">
                                {{ trans('lang.dashboard_today_trip') }}</h4>
                        </div>
                    </div>

                    <div class="row business-analytics_list">
                        <div class="col-md-4" onclick="location.href='{!! route('rides', 'today') !!}'">
                            <div class="card card-box-with-icon bg--15">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="total_rides_today">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_total_orders')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/total_rides.png') }}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4" onclick="location.href='{!! route('users.index', 'today') !!}'">
                            <div class="card card-box-with-icon bg--1">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="users_count_today">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_total_clients')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/home_users.png') }}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4" onclick="location.href='{!! route('drivers', 'today') !!}'">
                            <div class="card card-box-with-icon bg--5">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="driver_count_today">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_total_drivers')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/home_driver.png') }}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4" onclick="location.href='{!! route('rides', 'today_earning') !!}'">
                            <div class="card card-box-with-icon bg--24">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="earnings_count_today">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_total_earnings')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/total_earning.png') }}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-box-with-icon bg--14">
                                <div class="card-body d-flex justify-content-between align-items-center" onclick="location.href='{!! route('rides', 'today_earning') !!}'">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="admincommission_count_today">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_admin_commission')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/total_payment.png') }}"></span>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-4 mb-3">

                        </div>

                        <div class="col-sm-6 col-lg-3 mb-3" onclick="location.href='{!! route('rides', 'ride_placed') !!}'">
                            <div class="card-box">
                                <h5>{{ trans('lang.dashboard_ride_placed') }}</h5>
                                <h2 id="placed_count_today"></h2>
                                <h6 id="placed_count_today_intercity"></h6>
                                <i class="mdi mdi-check-circle"></i>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-3 mb-3" onclick="location.href='{!! route('rides', 'ride_active') !!}'">
                            <div class="card-box">
                                <h5>{{ trans('lang.dashboard_ride_active') }}</h5>
                                <h2 id="active_count_today"></h2>
                                <h6 id="active_count_today_intercity"></h6>
                                <i class="mdi mdi-car-connected"></i>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-3 mb-3" onclick="location.href='{!! route('rides', 'ride_completed') !!}'">
                            <div class="card-box">
                                <h5>{{ trans('lang.dashboard_ride_completed') }}</h5>
                                <h2 id="completed_count_today"></h2>
                                <h6 id="completed_count_today_intercity"></h6>
                                <i class="mdi mdi-check-circle-outline"></i>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-3 mb-3" onclick="location.href='{!! route('rides', 'ride_canceled') !!}'">
                            <div class="card-box">
                                <h5>{{ trans('lang.dashboard_ride_canceled') }}</h5>
                                <h2 id="canceled_count_today"></h2>
                                <h6 id="canceled_count_today_intercity"></h6>
                                <i class="mdi mdi-window-close"></i>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

            <div class="card mb-3 business-analytics">

                <div class="card-body">

                    <div class="row flex-between align-items-center g-2 mb-3 order_stats_header">
                        <div class="col-sm-6">
                            <h4 class="d-flex align-items-center text-capitalize gap-10 mb-0">
                                {{ trans('lang.dashboard_total_trip') }}</h4>
                        </div>
                    </div>

                    <div class="row business-analytics_list">
                    <div class="col-md-4" onclick="location.href='{!! route('rides') !!}'">
                            <div class="card card-box-with-icon bg--15">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="total_rides">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_total_orders')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/total_rides.png') }}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4" onclick="location.href='{!! route('users.index') !!}'">
                            <div class="card card-box-with-icon bg--1">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="users_count">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_total_clients')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/home_users.png') }}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4" onclick="location.href='{!! route('drivers') !!}'">
                            <div class="card card-box-with-icon bg--5">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="driver_count">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_total_drivers')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/home_driver.png') }}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-box-with-icon bg--24" onclick="location.href='{!! route('rides', 'total_earning') !!}'">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="earnings_count">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_total_earnings')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/total_earning.png') }}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-box-with-icon bg--14" onclick="location.href='{!! route('rides', 'total_earning') !!}'">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div class="card-box-with-content">
                                        <h4 class="text-dark-2 mb-1 h4" id="admincommission_count">00</h4>
                                        <p class="mb-0 small text-dark-2">{{trans('lang.dashboard_admin_commission')}}</p>
                                    </div>
                                    <span class="box-icon ab"><img src="{{ asset('images/total_payment.png') }}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-3">

                        </div>


                        <div class="col-sm-6 col-lg-3 mb-3" onclick="location.href='{!! route('rides', 'total_placed') !!}'">
                            <div class="card-box">
                                <h5>{{ trans('lang.dashboard_ride_placed') }}</h5>
                                <h2 id="placed_count"></h2>
                                <h6 id="placed_count_intercity"></h6>
                                <i class="mdi mdi-check-circle"></i>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-3 mb-3" onclick="location.href='{!! route('rides', 'total_active') !!}'">
                            <div class="card-box">
                                <h5>{{ trans('lang.dashboard_ride_active') }}</h5>
                                <h2 id="active_count"></h2>
                                <h6 id="active_count_intercity"></h6>
                                <i class="mdi mdi-car-connected"></i>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-3 mb-3" onclick="location.href='{!! route('rides', 'total_completed') !!}'">
                            <div class="card-box">
                                <h5>{{ trans('lang.dashboard_ride_completed') }}</h5>
                                <h2 id="completed_count"></h2>
                                <h6 id="completed_count_intercity"></h6>
                                <i class="mdi mdi-check-circle-outline"></i>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-3 mb-3" onclick="location.href='{!! route('rides', 'total_canceled') !!}'">
                            <div class="card-box">
                                <h5>{{ trans('lang.dashboard_ride_canceled') }}</h5>
                                <h2 id="canceled_count"></h2>
                                <h6 id="canceled_count_intercity"></h6>
                                <i class="mdi mdi-window-close"></i>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header no-border">
                            <div class="d-flex justify-content-between">
                                <h3 class="card-title">{{ trans('lang.dashboard_total_sales') }}</h3>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="position-relative">
                                <canvas id="sales-chart" height="200"></canvas>
                            </div>

                            <div class="d-flex flex-row justify-content-end">
                                <span class="mr-2"> <i class="fa fa-square" style="color:#80b140"></i>
                                    {{ trans('lang.dashboard_this_year') }} </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header no-border">
                            <div class="d-flex justify-content-between">
                                <h3 class="card-title">{{ trans('lang.dashboard_service_overview') }}</h3>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="flex-row">
                                <canvas id="service-overview" height="222"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header no-border">
                            <div class="d-flex justify-content-between">
                                <h3 class="card-title">{{ trans('lang.dashboard_sales_overview') }}</h3>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="flex-row">
                                <canvas id="sales-overview" height="222"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="row daes-sec-sec">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header no-border d-flex justify-content-between">
                            <h3 class="card-title">{{ trans('lang.dashboard_recent_rides') }}</h3>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-striped table-valign-middle">
                                <thead>
                                    <tr>
                                        <th style="text-align:center">{{ trans('lang.order_id') }}</th>
                                        <th>{{ trans('lang.dashboard_user') }}</th>
                                        <th>{{ trans('lang.dashboard_driver') }}</th>
                                        <th>{{ trans('lang.location_details') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="append_list_recent_rides">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header no-border d-flex justify-content-between">
                            <h3 class="card-title">{{ trans('lang.dashboard_top_drivers') }}</h3>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-striped table-valign-middle">
                                <thead>
                                    <tr>
                                        <th style="text-align:center">{{ trans('lang.image') }}</th>
                                        <th>{{ trans('lang.driver') }}</th>
                                        <th>{{ trans('lang.rating') }}</th>
                                        <th>{{ trans('lang.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="append_list_top_drivers">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                </div>
            </div>

        </div>

    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/chart.js') }}"></script>


    <script type="text/javascript">
         
        jQuery("#overlay").show();

        var database = firebase.firestore();

        var currency = database.collection('settings');
        const todayDate = new Date();
        todayDate.setHours(0, 0, 0, 0);

        var rides_data = [];
        var intercity_data = [];
        var currentCurrency = '';
        var currencyAtRight = false;
        var decimal_degits = 0;
        var refCurrency = database.collection('currency').where('enable', '==', true);
        refCurrency.get().then(async function(snapshots) {
            var currencyData = snapshots.docs[0].data();
            currentCurrency = currencyData.symbol;
            currencyAtRight = currencyData.symbolAtRight;
            if (currencyData.decimalDigits) {
                decimal_degits = currencyData.decimalDigits;
            }
        });
        $(document).ready(function() {

            {{-- jQuery("#overlay").show(); --}}
            //today records
            database.collection('orders').where('createdDate', '>', todayDate).get().then((snapshot) => {

                jQuery("#total_rides_today").empty();
                jQuery("#total_rides_today").text(snapshot.docs.length);
            });

            database.collection('orders_intercity').where('createdDate', '>', todayDate).get().then((snapshot) => {
                jQuery("#total_rides_today_intercity").empty();
                jQuery("#total_rides_today_intercity").text(
                    // "{{ trans('lang.intercity_ride_plural') }} / " + 
                    snapshot.docs.length);
            });

            database.collection('orders').where('status', '==', 'Ride Placed').where('createdDate', '>', todayDate)
                .get().then((snapshot) => {
                    jQuery("#placed_count_today").empty();
                    jQuery("#placed_count_today").text(snapshot.docs.length);
                });

            database.collection('orders_intercity').where('status', '==', 'Ride Placed').where('createdDate', '>',
                todayDate).get().then((snapshot) => {
                jQuery("#placed_count_today_intercity").empty();
                // jQuery("#placed_count_today_intercity").text(
                //     "{{ trans('lang.intercity_ride_plural') }} / " + snapshot.docs.length);
            });

            database.collection('orders').where('status', '==', 'Ride Active').where('createdDate', '>', todayDate)
                .get().then((snapshot) => {
                    jQuery("#active_count_today").empty();
                    jQuery("#active_count_today").text(snapshot.docs.length);
                });

            database.collection('orders_intercity').where('status', '==', 'Ride Active').where('createdDate', '>',
                todayDate).get().then((snapshot) => {
                jQuery("#active_count_today_intercity").empty();
                // jQuery("#active_count_today_intercity").text(
                //     "{{ trans('lang.intercity_ride_plural') }} / " + snapshot.docs.length);
            });

            database.collection('orders').where('status', '==', 'Ride Completed').where('createdDate', '>',
                todayDate).get().then((snapshot) => {
                jQuery("#completed_count_today").empty();
                jQuery("#completed_count_today").text(snapshot.docs.length);
            });

            database.collection('orders_intercity').where('status', '==', 'Ride Completed').where('createdDate',
                '>', todayDate).get().then((snapshot) => {
                jQuery("#completed_count_today_intercity").empty();
                // jQuery("#completed_count_today_intercity").text(
                //     "{{ trans('lang.intercity_ride_plural') }} / " + snapshot.docs.length);
            });

            database.collection('orders').where('status', '==', 'Ride Canceled').where('createdDate', '>',
                todayDate).get().then((snapshot) => {
                jQuery("#canceled_count_today").empty();
                jQuery("#canceled_count_today").text(snapshot.docs.length);
            });

            database.collection('orders_intercity').where('status', '==', 'Ride Canceled').where('createdDate', '>',
                todayDate).get().then((snapshot) => {
                jQuery("#canceled_count_today_intercity").empty();
                // jQuery("#canceled_count_today_intercity").text(
                //     "{{ trans('lang.intercity_ride_plural') }} / " + snapshot.docs.length);
            });

            database.collection('users').where('createdAt', '>', todayDate).get().then((snapshot) => {
                jQuery("#users_count_today").empty();
                jQuery("#users_count_today").text(snapshot.docs.length);
            });

            
            database.collection('driver_users').where('createdAt', '>', todayDate).get().then((snapshot) => {
                jQuery("#driver_count_today").empty();
                jQuery("#driver_count_today").text(snapshot.docs.length);

                if (snapshot.docs.length > 0) {
                    let inercityDriversToday = 0;
                    snapshot.docs.forEach((listval) => {
                        val = listval.data();
                        if (val.serviceId != null) {
                            database.collection('service').doc(val.serviceId).get().then((
                                snapshot) => {
                                let data = snapshot.data();
                                if (data != "" && data != undefined) {
                                    if (data.intercityType == true) {
                                        inercityDriversToday++;
                                        jQuery("#driver_count_today_intercity").text(
                                            "{{ trans('lang.intercity') }} / " +
                                            inercityDriversToday);
                                    }
                                }
                            })
                        }
                    })
                }
            });


            //todal records
            database.collection('orders').get().then((snapshot) => {
                jQuery("#total_rides").empty();
                jQuery("#total_rides").text(snapshot.docs.length);
            });

            database.collection('orders_intercity').get().then((snapshot) => {
                jQuery("#total_rides_intercity").empty();
                jQuery("#total_rides_intercity").text(
                    // "{{ trans('lang.intercity_ride_plural') }} / " +
                    snapshot.docs.length);
            });

            database.collection('users').get().then((snapshot) => {
                jQuery("#users_count").empty();
                jQuery("#users_count").text(snapshot.docs.length);
            });

            database.collection('driver_users').get().then((snapshot) => {
                jQuery("#driver_count").empty();
                jQuery("#driver_count").text(snapshot.docs.length);

                if (snapshot.docs.length > 0) {
                    let inercityDrivers = 0;
                    snapshot.docs.forEach((listval) => {
                        val = listval.data();
                        if (val.serviceId != null) {
                            database.collection('service').doc(val.serviceId).get().then((
                                snapshot) => {
                                let data = snapshot.data();
                                if (data != "" && data != undefined) {
                                    if (data.intercityType == true) {
                                        inercityDrivers++;
                                        jQuery("#driver_count_intercity").text(
                                            "{{ trans('lang.intercity') }} / " +
                                            inercityDrivers);
                                    }
                                }
                            })
                        }
                    })
                }
            });

            database.collection('orders').where('status', '==', 'Ride Placed').get().then((snapshot) => {
                jQuery("#placed_count").empty();
                jQuery("#placed_count").text(snapshot.docs.length);
            });

            database.collection('orders_intercity').where('status', '==', 'Ride Placed').get().then((snapshot) => {
                jQuery("#placed_count_intercity").empty();
                // jQuery("#placed_count_intercity").text(
                //     "{{ trans('lang.intercity_ride_plural') }} / " +
                //     snapshot.docs.length);
            });

            database.collection('orders').where('status', '==', 'Ride Active').get().then((snapshot) => {
                jQuery("#active_count").empty();
                jQuery("#active_count").text(snapshot.docs.length);
            });

            database.collection('orders_intercity').where('status', '==', 'Ride Active').get().then((snapshot) => {
                jQuery("#active_count_intercity").empty();
                // jQuery("#active_count_intercity").text("{{ trans('lang.intercity_ride_plural') }} / " +
                //     snapshot.docs.length);
            });

            database.collection('orders').where('status', '==', 'Ride Completed').get().then((snapshot) => {
                jQuery("#completed_count").empty();
                jQuery("#completed_count").text(snapshot.docs.length);
            });

            database.collection('orders_intercity').where('status', '==', 'Ride Completed').get().then((
                snapshot) => {
                jQuery("#completed_count_intercity").empty();
                // jQuery("#completed_count_intercity").text("{{ trans('lang.intercity_ride_plural') }} / " +
                //     snapshot.docs.length);
            });

            database.collection('orders').where('status', '==', 'Ride Canceled').get().then((snapshot) => {
                jQuery("#canceled_count").empty();
                jQuery("#canceled_count").text(snapshot.docs.length);
            });

            database.collection('orders_intercity').where('status', '==', 'Ride Canceled').get().then((
                snapshot) => {
                jQuery("#canceled_count_intercity").empty();
                // jQuery("#canceled_count_intercity").text("{{ trans('lang.intercity_ride_plural') }} / " +
                //     snapshot.docs.length);
            });

            getTotalEarnings();
            getTotalEarningsToday();


            var offest = 1;
            var pagesize = 5;
            var limit = parseInt(offest) * parseInt(pagesize);
            var append_list_recent_rides = document.getElementById('append_list_recent_rides');
            append_list_recent_rides.innerHTML = '';

            database.collection('orders').orderBy('createdDate', 'desc').where('status', 'in', ["Ride Placed",
                "Ride Active"
            ]).limit(limit).get().then((snapshots) => {
                html = '';
                html = buildRidesHTML(snapshots);
                if (html != '') {
                    append_list_recent_rides.innerHTML = html;
                }
            });

            var append_listtop_drivers = document.getElementById('append_list_top_drivers');
            append_listtop_drivers.innerHTML = '';
            database.collection('driver_users').orderBy('reviewsCount', 'desc').limit(limit).get().then((
                snapshots) => {
                html = '';
                html = buildDriverHTML(snapshots);
                if (html != '') {
                    append_listtop_drivers.innerHTML = html;
                }
            });
        });

        function buildRidesHTML(snapshots) {
            var html = '';
            snapshots.docs.forEach((listval) => {
                val = listval.data();
                val.id = listval.id;
                var ride_id = val.id.substring(0, 7);

                var ride_route = '