@extends('fleet.layout.base')

@section('title', 'Dashboard ')

@section('styles')
	<link rel="stylesheet" href="{{url('main/vendor/jvectormap/jquery-jvectormap-2.0.3.css')}}">
@endsection

@section('content')

<div class="content-area py-1">
<div class="container-fluid">
	<div class="row bg-title">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">@lang('admin.dashboard')</h4>
        </div>
    </div>
	<div class="row row-md">
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
			<div class="box box-block bg-white tile tile-3 m-b-2">
				<div class="t-icon right"><i class="ti-panel text-danger"></i></div>
				<div class="t-content">
					<h6 class="text-uppercase text-danger">@lang('admin.panel.total_no_rides')</h6>
					<h1 class="m-b-0">{{$rides->count()}}</h1>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
			<div class="box box-block bg-white tile tile-3 m-b-2">
				<div class="t-icon right"><i class="ti-bar-chart text-success"></i></div>
				<div class="t-content">
					<h6 class="text-uppercase text-success">@lang('admin.panel.revenue')</h6>
					<h1 class="m-b-0">{{currency($revenue)}}</h1>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
			<div class="box box-block bg-white tile tile-3 m-b-2">
				<div class="t-icon right"><i class="ti-view-grid text-primary"></i></div>
				<div class="t-content">
					<h6 class="text-uppercase text-primary">@lang('admin.panel.no_service_types')</h6>
					<h1 class="m-b-0">{{$service}}</h1>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
			<div class="box box-block bg-white tile tile-3 m-b-2">
				<div class="t-icon right"><i class="ti-alert text-warning"></i></div>
				<div class="t-content">
					<h6 class="text-uppercase text-warning">@lang('admin.panel.total_cancelled_rides')</h6>
					<h1 class="m-b-0">{{$cancel_rides}}</h1>
				</div>
			</div>
		</div>
	</div>
	<div class="row row-md mb-2">
		<div class="col-md-12">
				<div class="box bg-white">
					<div class="box-block clearfix">
						<h5 class="float-xs-left">@lang('admin.panel.rides')</h5>
						<div class="float-xs-right">
							<button class="btn btn-link btn-sm text-muted" type="button"><i class="ti-close"></i></button>
						</div>
					</div>
					<table class="table mb-md-0">
						<tbody>
						<?php $diff = ['-success','-info','-warning','-danger']; ?>
						@foreach($rides as $index => $ride)
							<tr>
								<th scope="row">{{$index + 1}}</th>
								<td>{{$ride->user->first_name}} {{$ride->user->last_name}}</td>
								<td>
									@if($ride->status != "CANCELLED")
										<a class="text-info" href="{{route('fleet.requests.show',$ride->id)}}"><span class="underline">@lang('admin.panel.view_ride_details')</span></a>
									@else
										<span>@lang('admin.panel.no_details_found')</span>
									@endif									
								</td>
								<td>
									<span class="text-muted">{{$ride->created_at->diffForHumans()}}</span>
								</td>
								<td>
									@if($ride->status == "COMPLETED")
										<span class="label label-table label-success">{{$ride->status}}</span>
									@elseif($ride->status == "CANCELLED")
										<span class="label label-table label-danger">{{$ride->status}}</span>
									@else
										<span class="label label-table label-primary">{{$ride->status}}</span>
									@endif
								</td>
							</tr>
							<?php if($index==10) break; ?>
						@endforeach
							
						</tbody>
					</table>
				</div>
			</div>

		</div>

	</div>
</div>
@endsection

@section('scripts')
	<script type="text/javascript" src="{{url('main/vendor/jvectormap/jquery-jvectormap-2.0.3.min.js')}}"></script>
	<script type="text/javascript" src="{{url('main/vendor/jvectormap/jquery-jvectormap-world-mill.js')}}"></script>

	<script type="text/javascript">
		$(document).ready(function(){

		        /* Vector Map */
		    $('#world').vectorMap({
		        zoomOnScroll: false,
		        map: 'world_mill',
		        markers: [
		        @foreach($rides as $ride)
		        	@if($ride->status != "CANCELLED")
		            {latLng: [{{$ride->s_latitude}}, {{$ride->s_longitude}}], name: '{{$ride->user->first_name}}'},
		            @endif
		        @endforeach

		        ],
		        normalizeFunction: 'polynomial',
		        backgroundColor: 'transparent',
		        regionsSelectable: true,
		        markersSelectable: true,
		        regionStyle: {
		            initial: {
		                fill: 'rgba(0,0,0,0.15)'
		            },
		            hover: {
		                fill: 'rgba(0,0,0,0.15)',
		            stroke: '#fff'
		            },
		        },
		        markerStyle: {
		            initial: {
		                fill: '#43b968',
		                stroke: '#fff'
		            },
		            hover: {
		                fill: '#3e70c9',
		                stroke: '#fff'
		            }
		        },
		        series: {
		            markers: [{
		                attribute: 'fill',
		                scale: ['#43b968','#a567e2', '#f44236'],
		                values: [200, 300, 600, 1000, 150, 250, 450, 500, 800, 900, 750, 650]
		            },{
		                attribute: 'r',
		                scale: [5, 15],
		                values: [200, 300, 600, 1000, 150, 250, 450, 500, 800, 900, 750, 650]
		            }]
		        }
		    });
		});
	</script>

@endsection