@extends('layouts.app')

	@section('breadcrumb')
		<ul class="breadcrumb">
	    <li><a href="/home">{!! trans('messages.home') !!}</a></li>
	    <li class="active">{!! trans('messages.real_time').' '.trans('messages.update') !!}</li>
		</ul>
	@stop

	@section('css')
		<style media="screen">
			.legend span { display: inline-block; min-width: 70px; }
		</style>
	@stop

	@section('content')
		<div class="row">
			<div class="col-sm-12">
				<div class="box-info full">
					<h2 style="display:flex; justify-content:space-between; align-items:center;">
						<div><b>{!! trans('messages.real_time') !!}</b> {!! trans('messages.update').' | '.showDate(\Carbon\Carbon::today()) !!}</div>
						<div>Refresh Timer | <span id="timer"></span></div>
					</h2>
					@include('global.datatable',['table' => $table_data['tour-transaction-table']])
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12">
				<div>
					<b>Legend:</b>
					<div class="legend"><span class="label label-primary">In progress</span> Officer still on patrol</div>
					<div class="legend"><span class="label label-success">Completed</span> Route has been completed with all checkpoints scanned</div>
					<div class="legend"><span class="label label-warning">Completed</span> Route has been completed with some skipped points</div>
					<div class="legend"><span class="label label-danger">Disrupted</span> Patrolling was disrupted</div>
				</div>
			</div>
		</div>
	@stop

	@section('js')
		<script>
			var distance = {{env('GUARDTOUR_DASHBOARD_TIMER')}};

			setInterval(function() {
			  // Time calculations for minutes and seconds
				var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
			  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

			  // Display the result in the element with id="timer"
			  document.getElementById("timer").innerHTML = minutes + "min " + seconds + "sec";

				// Reduce the distance
				distance = distance - 1000;

				if (distance < 0) {
					// Refresh datatable and reset the timer
					var table = $('#tour_transaction_table').DataTable();
					table.ajax.reload();
					// $('#tour_transaction_table').DataTable().ajax.reload(null, false);

					distance = {{env('GUARDTOUR_DASHBOARD_TIMER')}};
				}
			}, 1000);
    </script>
	@endsection