@extends('layouts.main')
@push('styles')
<link href='{{asset('css/redtrack.css')}}' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="{{asset('DataTables/datatables.min.css')}}">
@endpush
@section('content')
<div class="">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">                   
                <div class="panel-heading">
                    <h1>
                        {{ __('strings.statistics') }}
                    </h1>
                </div>
                <div class="cc-selector panel-body">
                    
        <div class="content">
            <div class="row">
                <div class="col-md-3">
                    <div class="card p-4">
                        <div class="card-body d-flex justify-content-between align-items-center">
                            <div>
                                <span class="h4 d-block font-weight-normal mb-2" id='trips_in_route'><i class="fas  fa-spin  fa-sync-alt"></i></span>
                                <span class="font-weight-light">{{__('strings.trips_in_route')}}</span>
                            </div>

                            <div class="h2 text-muted">
                                <i class="icon icon-android-locate"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card p-4">
                        <div class="card-body d-flex justify-content-between align-items-center">
                            <div>
                                <span class="h4 d-block font-weight-normal mb-2" id='trips_completed'><i class="fas  fa-spin  fa-sync-alt"></i></span>
                                <span class="font-weight-light">{{__('strings.trips_completed')}}</span>
                            </div>

                            <div class="h2 text-muted">
                                <i class="icon icon-android-checkmark-circle"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card p-4">
                        <div class="card-body d-flex justify-content-between align-items-center">
                            <div>
                                <span class="h4 d-block font-weight-normal mb-2" id='trips_canceled'><i class="fas  fa-spin  fa-sync-alt"></i></span>
                                <span class="font-weight-light">{{__('strings.trips_canceled')}}</span></span>
                            </div>

                            <div class="h2 text-muted">
                                <i class="icon icon-android-close"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card p-4">
                        <div class="card-body d-flex justify-content-between align-items-center">
                            <div>
                                <span class="h4 d-block font-weight-normal mb-2" id='trips_total'><i class="fas  fa-spin  fa-sync-alt"></i></span>
                                <span class="font-weight-light">{{__('strings.trips_total')}}</span></span>
                            </div>

                            <div class="h2 text-muted">
                                <i class="icon icon-android-globe"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body p-5">
                            <div class="text-center">
                                <span class="h4 d-block font-weight-normal mb-2"><span id='avg_trips_ratings'><i class="fas  fa-spin  fa-sync-alt"></i></span> <i class="icon icon-android-star"></i></span>
                                <span class="font-weight-light">Calificacion promedio en Viajes</span>
                            </div>

                            <div class="mt-4">
                                <div class="progress">
                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"  id='progress_avg_trips_ratings'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body p-5">
                            <div class="text-center">
                            <span class="h4 d-block font-weight-normal mb-2"><span id='avg_driver_ratings'><i class="fas  fa-spin  fa-sync-alt"></i></span> <i class="icon icon-android-star"></i></span>
                                <span class="font-weight-light">Calificación promedio en Conductores</span>
                            </div>

                            <div class="mt-4">
                                <div class="progress">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" id='progress_avg_driver_ratings'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body p-5">
                            <div class="text-center">
                                <span class="h4 d-block font-weight-normal mb-2"><span id='avg_trips_count'><i class="fas  fa-spin  fa-sync-alt"></i></span> </span>
                                <span class="font-weight-light">Viajes Calificados</span>
                            </div>

                            <div class="mt-4">
                                <div class="progress">
                                    <div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" id='progress_avg_trips_count'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body p-5">
                            <div class="text-center">
                                <span class="h4 d-block font-weight-normal mb-2"><span id='avg_driver_count'><i class="fas  fa-spin  fa-sync-alt"></i></span> </span>
                                <span class="font-weight-light">Conductores Calificados</span>
                            </div>

                            <div class="mt-4">
                                <div class="progress">
                                    <div class="progress-bar bg-dark" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" id='progress_avg_driver_count'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
            <div class="col-md-12">
                <h1>
                    {{__('strings.last_10_trips')}}
                </h1>
            </div>
                <div class="col-md-4">
                    <div class="card bg-danger border-0">
                        <div class="card-body d-flex justify-content-between text-white flex-column">
                            <div class="font-weight-bold">
                                <span>Precio <i class="fas fa-question-circle" data-toggle="tooltip" title="Valor promedio de los diez viajes"></i></span>
                                <span class="float-right" id='today_avg_price'><i class="fas  fa-spin  fa-sync-alt"></i></span> </span>
                            </div>

                            <div class="small mb-3">
                                <span>Último <i class="fas fa-question-circle" data-toggle="tooltip" title="Registro más reciente"></i></span>
                                <span class="float-right" id='today_percentage_diff'><i class="fas  fa-spin  fa-sync-alt"></i></span></span>
                            </div>

                            <canvas class="widget-line-chart" width="100%" height="30" id='today_avg_price_chart'></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bg-primary border-0">
                        <div class="card-body d-flex justify-content-between text-white flex-column">
                            <div class="font-weight-bold">
                                <span>Tiempo</span>
                                <span class="float-right" id='today_avg_time'><i class="fas  fa-spin  fa-sync-alt"></i></span> </span>
                            </div>

                            <div class="small mb-3">
                                <span>Último</span>
                                <span class="float-right" id='today_time_diff'><i class="fas  fa-spin  fa-sync-alt"></i></span></span>
                            </div>

                            <canvas class="widget-line-chart" width="100%" height="30" id='today_avg_time_chart'></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bg-success border-0">
                        <div class="card-body d-flex justify-content-between text-white flex-column">
                            <div class="font-weight-bold">
                                <span>Distancia</span>
                                <span class="float-right" id='today_avg_distance'><i class="fas  fa-spin  fa-sync-alt"></i></span> </span>
                            </div>

                            <div class="small mb-3">
                                <span>Último</span>
                                <span class="float-right" id='today_distance_diff'><i class="fas  fa-spin  fa-sync-alt"></i></span></span>
                            </div>

                            <canvas class="widget-line-chart" width="100%" height="30" id='today_avg_distance_chart'></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
                </div>
                <!--
                <hr>
                <div class="panel-body">                
                    <button id="request_driver" type="button" class="btn btn-primary" onclick="">{{ __('strings.add_new_card') }}</button>                    
                </div>
                -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<script src="{{asset('vendor/chart.js/chart.min.js')}}"></script>
<script>

$(window).load(function(){
    setTimeout(() => {
        getStatistics();
        $('[data-toggle="tooltip"]').tooltip();   

    }, 500);
});

function getStatistics() {
    $.post("{{route('api_quiq_user_statistics')}}", 
    {
        token:"{{Auth::user()->SECURE_TOKEN}}"
    }, function(response){
        console.log(response);
        updateTripsStatistics(response.data);
        updatePriceStatistics(response.data);
        updateTimeStatistics(response.data);
        updateDistanceStatistics(response.data);
    }).fail(function(error){            
        console.log(error);
    });
}

function updateTripsStatistics(data) {
    const {
        trips_in_route, 
        trips_completed, 
        trips_canceled, 
        trips_total,
        trips_statistics
    } = data;
    setTimeout(() => {
        $('#trips_in_route').text(trips_in_route); 
    }, 200);
    setTimeout(() => {
        $('#trips_completed').text(trips_completed);    
    }, 400);
    setTimeout(() => {
        $('#trips_canceled').text(trips_canceled);  
    }, 600);
    setTimeout(() => {
        $('#trips_total').text(trips_total);
    }, 800);

    // set trip averages
    setTimeout(() => {
        $('#avg_trips_ratings').text(parseFloat(trips_statistics.avg_trips_ratings).toFixed(2)); 
        const _progress = (trips_statistics.avg_trips_ratings * 100 / 5) + '%';
        $('#progress_avg_trips_ratings').css({width: _progress}); 
    }, 200);
    setTimeout(() => {
        $('#avg_driver_ratings').text(parseFloat(trips_statistics.avg_driver_ratings).toFixed(2));   
        const _progress = (trips_statistics.avg_driver_ratings * 100 / 5) + '%';
        $('#progress_avg_driver_ratings').css({width: _progress});  
    }, 400);
    setTimeout(() => {
        $('#avg_trips_count').text(trips_statistics.avg_trips_count + '/' +  trips_statistics.trips_total);  
        const _progress = (trips_statistics.avg_trips_count * 100 / trips_statistics.trips_total) + '%';
        $('#progress_avg_trips_count').css({width: _progress});  
    }, 600);
    setTimeout(() => {
        $('#avg_driver_count').text(trips_statistics.avg_driver_count + '/' +  trips_statistics.trips_total);
        const _progress = (trips_statistics.avg_driver_count * 100 / trips_statistics.trips_total) + '%';
        $('#progress_avg_driver_count').css({width: _progress});  
    }, 800);
}

function updatePriceStatistics(data){
    try {
        const {last10Trips} = data;
        if(last10Trips && last10Trips.length) {

            const todayPrice =  last10Trips[0]?.TRIP_FARE?.rate||0;
            const avgPrice =  last10Trips.reduce((acc, item) => acc + (item?.TRIP_FARE?.rate||0), 0)  / last10Trips.length ;

            // calculate incremental / decremental percent for price
            const priceDiff =  todayPrice - avgPrice;
            const pricePercent = ( priceDiff / avgPrice) * 100;


            $('#today_avg_price').text('$' + parseFloat(avgPrice).toFixed(2));
            $('#today_percentage_diff').text('$' + getNumberWithSign(parseFloat(priceDiff).toFixed(2)) + ' (' + getNumberWithSign(parseInt(pricePercent)) + '%)');

        

            console.log('avgPrice', avgPrice, 'todayPrice', todayPrice, 'priceDiff', priceDiff, 'pricePercent', pricePercent);

            const labels = last10Trips.map(item => 'ID: ' + item.ID_ROUTE);
            const dataset = last10Trips.map(item => item?.TRIP_FARE?.rate||0);

            /**
             * Widget Line Chart
             */
            var wLineChart = $('#today_avg_price_chart');
            new Chart(wLineChart, {
                    type: 'line',
                    data: {
                        labels: labels.reverse(),
                        datasets: [{
                            label: 'Price',
                            data: dataset.reverse(),
                            borderColor: '#fff',
                            borderWidth: 1,
                            fill: false,
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    display: false,
                                },
                                gridLines: {
                                    display: false,
                                    drawBorder: false,
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    display: false,
                                },
                                gridLines: {
                                    display: false,
                                    drawBorder: false,
                                }
                            }]
                        }
                    }
                });
    }
    } catch(err) {
        console.log(err);
    }

}

function updateTimeStatistics(data){
    try {
        const {last10Trips} = data;
        if(last10Trips && last10Trips.length) {

            const todayTime =  last10Trips[0]?.TRIP_FARE?.time||0;
            const avgTime =  last10Trips.reduce((acc, item) => acc + (item?.TRIP_FARE?.time||0), 0)  / last10Trips.length ;

            // calculate incremental / decremental percent for price
            const _diff =  todayTime - avgTime;
            const _diffPercent = ( _diff / avgTime) * 100;


            $('#today_avg_time').text(moment.duration(avgTime, 'seconds').format('HH:mm:ss'));
            $('#today_time_diff').text(moment.duration(_diff, 'seconds').format('HH:mm:ss') + ' (' + getNumberWithSign(parseInt(_diffPercent)) + '%)');

            const labels = last10Trips.map(item => 'ID: ' + item.ID_ROUTE);
            const dataset = last10Trips.map(item => parseInt(item?.TRIP_FARE?.time||0));

            /**
             * Widget Line Chart
             */
            var wLineChart = $('#today_avg_time_chart');
            new Chart(wLineChart, {
                    type: 'line',
                    data: {
                        labels: labels.reverse(),
                        datasets: [{
                            label: 'Tiempo (s)',
                            data: dataset.reverse(),
                            borderColor: '#fff',
                            borderWidth: 1,
                            fill: false,
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    display: false,
                                },
                                gridLines: {
                                    display: false,
                                    drawBorder: false,
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    display: false,
                                },
                                gridLines: {
                                    display: false,
                                    drawBorder: false,
                                }
                            }]
                        }
                    }
                });
    }
    } catch(err) {
        console.log(err);
    }

}

function updateDistanceStatistics(data){
    try {
        const {last10Trips} = data;
        if(last10Trips && last10Trips.length) {

            const todayDistance =  last10Trips[0]?.TRIP_FARE?.km||0;
            const avgDistance =  last10Trips.reduce((acc, item) => acc + (item?.TRIP_FARE?.km||0), 0)  / last10Trips.length ;

            // calculate incremental / decremental percent for price
            const _diff =  todayDistance - avgDistance;
            const _diffPercent = ( _diff / avgDistance) * 100;


            $('#today_avg_distance').text(parseFloat(avgDistance).toFixed(2) + ' km');
            $('#today_distance_diff').text(getNumberWithSign(parseFloat(_diff).toFixed(2)) + 'km (' + getNumberWithSign(parseInt(_diffPercent)) + '%)');

            const labels = last10Trips.map(item => 'ID: ' + item.ID_ROUTE);
            const dataset = last10Trips.map(item => parseFloat(item?.TRIP_FARE?.km||0).toFixed(2));

            /**
             * Widget Line Chart
             */
            var wLineChart = $('#today_avg_distance_chart');
            new Chart(wLineChart, {
                    type: 'line',
                    data: {
                        labels: labels.reverse(),
                        datasets: [{
                            label: 'KM',
                            data: dataset.reverse(),
                            borderColor: '#fff',
                            borderWidth: 1,
                            fill: false,
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    display: false,
                                },
                                gridLines: {
                                    display: false,
                                    drawBorder: false,
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    display: false,
                                },
                                gridLines: {
                                    display: false,
                                    drawBorder: false,
                                }
                            }]
                        }
                    }
                });
    }
    } catch(err) {
        console.log(err);
    }

}

function getNumberWithSign(input) {
  if (input === 0) {
    return ""
  }

  const sign = input < 0 ? '-' : '+';

  return `${sign}${Math.abs(input)}`;
}


</script>
@endpush