@extends('backend.handoff.layouts.app')

@section('content')
<script src="{{ asset('public/js/jquery.min.js') }}"></script>

<script src="{{ asset('public/js/analytics.js') }}"></script>
<script src="{{ asset('public/js/bootstrap-select.js') }}"></script>

<link href="{{ asset('public/css/bootstrap-select.css') }}" rel="stylesheet">

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-default no-export">
			<div class="panel-heading" hidden><span class="panel-title">{{ _lang('Analytics') }}</span>
			<a class="btn btn-warning btn-sm pull-right ajax-modal" data-title="{{ _lang('Add User') }}" href="{{route('users.create')}}">{{ _lang('Add New') }}</a>
			</div>

			<div class="panel-body" style="background-color: #F9FAFD">
			 @if (\Session::has('success'))
			  <div class="alert alert-success">
				<p>{{ \Session::get('success') }}</p>
			  </div>
			  <br/>
			 @endif

			<!-- CONTENT AREA -->
			<br>

					<h3>	
						<p style="font-family: Rubik, sans-serif; margin-left: 0px; margin-bottom: 25px;" class="text-muted">Analytics Overview</p>
					</h3>		

							

							<!-- <button class="btn btn-info">
								<option value="1">Hour</option>
								<option value="2" selected>Day</option>
								<option value="3">Week</option>
								<option value="4">Monthly</option>
							</button> -->
				<form class="form-group" style="display: flex; justify-content: flex-end;">

                    		<!-- <div class="d-flex">
								<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"  style="margin-right: 50px;">
										<span class="selection">Period</span>
										<i class="fa fa-caret-down" style="margin-left: 10px;"></i>
								</button>

								<div class="dropdown-menu" id="dropdown" style="margin-right: 50px;">
                    				<li><a class="dropdown-item" style="color: black" href="#" data-value="hour">Hourly</a></li>
                    				<li><a class="dropdown-item" style="color: black" href="#" data-value="day">Daily</a></li>
									<li><a class="dropdown-item" style="color: black" href="#" data-value="week">Weekly</a></li>
									<li><a class="dropdown-item" style="color: black" href="#" data-value="month">Monthly</a></li>
								</div>
							</div>	 -->
							<label for="period" style="font-family: Roboto; padding-top: 5px; margin-left: -50px; margin-right: 10px;">Operator: </label>
    							<select name="operator_drop" id="operator_drop" style="width: 195px; margin-right: 25px">
    							  <option value="0" selected="selected">All</option>
								  @foreach($operators as $operator)
								  <option value="{{$operator->id}}">{{$operator->name}}</option>
								  @endforeach
    							</select>
							

							<label for="period" style="font-family: Roboto; padding-top: 5px; margin-right: 10px;">Period: </label>
    							<select name="period" id="period" style="margin-right: 25px">
    							  <option value="H">Hourly</option>
    							  <option value="d-M-Y" selected="selected">Daily</option>
    							  <option value="W">Weekly</option>
    							  <option value="M Y">Monthly</option>
    							</select>

							<label for="reportrange" style="font-family: Raleway; padding-top: 5px; margin-right: 10px;">Date: </label>
							
							<div id="reportrange" style="display: flex; justify-content: center; margin-right: 20px; background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 350px;">
  								<i class="fa fa-calendar" style="padding-top: 2px; padding-right: 10px"></i>&nbsp;
    							<span></span> <i class="fa fa-caret-down" style="padding-top: 2px; padding-left: 10px"></i>
							</div>

							<button type="button" class="btn-sm btn-danger" id="submit-filter" style="margin-right: 20px; background-color: #C30D13;" title="Submit filter.">Submit</button>
							<button type="button" class="btn-sm btn-warning" id="export" style="margin-right: 25px;" title="Export filters.">Export</button>
				</form>

			<br>

			

			<div class="card" style="width: 18rem; height: 20rem; margin: 35px; border-radius: 20px;">
			  <div class="card-body">
			  	<center><i class="fas fa-comments  fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  	<center><h1><span id='convo_average' style="font-family: Baloo, cursive;">{{$convo_average}}</span></h1></center>
			  	<center><small><b class="text-muted">Average Conversation Duration</b></small></center>
			  </div>
			</div>

			<div class="card" style="width: 18rem; height: 20rem; margin: 35px; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="fas fa-user-clock fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='waiting_average' style="font-family: Baloo, cursive;">{{$waiting_average}}</span></h1></center>
			  <center><small><b class="text-muted">Average <br>Waiting Time</b></small></center>
			  </div>
			</div>

			<div class="card" style="width: 18rem; height: 20rem; margin: 35px; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="far fa-comment-dots fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='answered_rate' style="font-family: Baloo, cursive;">{{$answered_rate[0]->average_answered}}</span></h1></center>
			  <center><small><b class="text-muted">Average <br>Answered Rate</b></small></center>
			  </div>
			</div>

			<div class="card" style="width: 18rem; height: 20rem; margin: 35px; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="fas fa-comment-slash fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='abandoned_rate' style="font-family: Baloo, cursive;">{{$abandoned_rate[0]->average_abandoned}}</span></h1></center>
			  <center><small><b class="text-muted">Overall <br>Abandoned Rate</b></small></center>
			  </div>
			</div>

			<br>

			<div class="card" style="width: 18rem; height: 20rem; margin: 35px; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="fas fa-phone fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='answered_count' style="font-family: Baloo, cursive;">{{$overall_answered_count}}</span></h1></center>
			  <center><small><b class="text-muted">Overall <br>Answered Count</b></small></center>
			  </div>
			</div>

			<div class="card" style="width: 18rem; height: 20rem; margin: 35px; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="fas fa-envelope fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='inactive_message' style="font-family: Baloo, cursive;">{{$inactive_message}}</span></h1></center>
			  <center><small><b class="text-muted">Inactive <br>Messages Sent</b></small></center>
			  </div>
			</div>

			<!-- <div class="card" style="width: 18rem; height: 20rem; margin: 35px; border-radius: 20px;">
			  <div class="card-body">
				<div class="dropdown">
					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #F7F8FB;">
						Sort by &nbsp;&nbsp;<span class="caret"></span>
					</button>
						<div class="dropdown-menu" id="dropdown-drop" aria-labelledby="dropdownMenu2" style="color: black;">
							<li> <a href="#" class="dropdown-item"	value="Day">Day</a></li>
							<li> <a href="#" class="dropdown-item" 	value="Week">Week</a></li>
							<li> <a href="#" class="dropdown-item" 	value="Month">Month</a></li>
						</div>
				</div>
			  <canvas id="myChart" width="400" height="150"></canvas>
			  </div>
			</div> -->

<br><br><br>

			<h3><p style="font-family: Rubik, sans-serif; margin-left: 20px; margin-bottom: 0px;" class="text-muted">Guest Connected</p></h3><br>
			<div class="card" style="border-radius: 20px;">
			  <div class="card-body" id="placeholder-chart">
            		<canvas id="myChart" style="height: 350px;"></canvas>
			  </div>
			</div>
			
<br><br><br><br>

			<h3><p style="font-family: Rubik, sans-serif; margin-left: 20px; margin-bottom: 0px;" class="text-muted">Guest Transfered</p></h3><br>
			<div class="card" style="border-radius: 20px;">
				<div class="card-body" id="placeholder-chart2">
            		<canvas id="myChart2" style="height: 350px;"></canvas>
			  </div>
			</div>

<br><br><br><br>

			<h3><p style="font-family: Rubik, sans-serif; margin-left: 20px; margin-bottom: 0px;" class="text-muted">Agent Form Rate</p></h3><br>
			<div class="card" style="border-radius: 20px;">
				<div class="card-body" id="placeholder-chart3">
					<canvas id="myChart3" style="height: 350px;"></canvas>
			  </div>
			</div>
				
			</div>
		</div>
	</div>
</div>



@endsection