@extends('layouts.app')
@section('content')

@php
$start_date = Request::has('start_date') ? Request::get('start_date') : '';
$end_date = Request::has('end_date') ? Request::get('end_date') : '';
@endphp

<div role="main" class="main">
    
    <section class="section bg-light-5 p-5">

        <div class="container-fluid">

            <div class="row"> 
				
				<form class="form-control" action="{{ route('search-results', [ 'menu' => 'reports' ]) }}" method="POST" enctype="multipart/form-data">
				
					<div class="row" style="padding: 10px 10px">
						<div class="col-lg-3 text-center">
							<h5>Search By Date Range</h5>
						</div>
						
						<div class="col-lg-3 text-left">					
							<div class="input-group date datepicker" data-provide="datepicker" data-date-format="dd MM yyyy">
								<input type="text" name="start_date" value="{{ $start_date }}" class="form-control" autocomplete="off" placeholder="Start Date">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-th"></span>
								</div>
							</div>
						</div>
						
						<div class="col-lg-3 text-left">					
							<div class="input-group date datepicker" data-provide="datepicker" data-date-format="dd MM yyyy">
								<input type="text" name="end_date" value="{{ $end_date }}" class="form-control" autocomplete="off" placeholder="End Date">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-th"></span>
								</div>
							</div>
						</div>
						{{ csrf_field() }}
						<div class="col-lg-2 text-bottom">
							<button type="submit" class="form-control btn-dark">SUBMIT</button>
						</div>
						
						<div class="col-lg-1 text-center">
							@if(Request::has('start_date'))
							<h5><a href="{{ route('results-excel', [ 'start_date' => $start_date, 'end_date' => $end_date ])  }}"><span class="lnr lnr-download"> </span></a></h5>
							@endif
						</div>
					</div>
				</form>
				
				<br><br>
				<hr width="100%">
				
				@include('system.partials.staffPerformanceReports')
				
             </div>
            
        </div>

    </section>
	<section class="section bg-light-1">
		<div class="container">
            <div class="row"> 	
				<div class="col-md-12 mb-12 mb-md-0">
					<div class="text-center">
						<h4 class="mb-4"><i class="lnr lnr-user"></i><br>Individual Staff Performance Reports</h4>
					</div>

					<ul class="nav nav-tabs nav-tabs-default" id="tabDefault" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="default-tab-1" data-toggle="tab" href="#default-1" role="tab" aria-controls="default-1" aria-expanded="true">Daily Intake</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="default-tab-2" data-toggle="tab" href="#default-2" role="tab" aria-controls="default-2">Waiting Time</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="default-tab-3" data-toggle="tab" href="#default-3" role="tab" aria-controls="default-3">Promised Time Achieved</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="default-tab-4" data-toggle="tab" href="#default-4" role="tab" aria-controls="default-4">Gantung Time</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="default-tab-5" data-toggle="tab" href="#default-5" role="tab" aria-controls="default-5">Repair Time</a>
						</li>
					</ul>
					<div class="tab-content" id="tabDefaultContent">
						<div class="tab-pane fade pt-4 pb-4 show active" id="default-1" role="tabpanel" aria-labelledby="default-tab-1">
							@include('system.partials.totalDailyIntakeReport')
						</div>
						<div class="tab-pane fade pt-4 pb-4" id="default-2" role="tabpanel" aria-labelledby="default-tab-2">
							@include('system.partials.waitingTimeReports')
						</div>
						<div class="tab-pane fade pt-4 pb-4" id="default-3" role="tabpanel" aria-labelledby="default-tab-3">
							@include('system.partials.promisedTimeReports')
						</div>
						<div class="tab-pane fade pt-4 pb-4" id="default-4" role="tabpanel" aria-labelledby="default-tab-4">
							@include('system.partials.gantungTimeReports')
						</div>
						<div class="tab-pane fade pt-4 pb-4" id="default-5" role="tabpanel" aria-labelledby="default-tab-5">
							@include('system.partials.repairTimeReports')
						</div>
					</div>				
				</div>						
			</div>
		</div>
	</section>
</div>

@endsection

@section('css')   
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
@endsection

@section('js')  
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" type="text/javascript"></script> 

<script>
    $(document).ready(function() {
        $('#DataTable1').DataTable( {
			"order": [[ 0, "desc" ]],
			"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
		} );
    } );
</script>

<script>
    $(document).ready(function() {
        $('#DataTable2').DataTable( {
			"order": [[ 0, "desc" ]],
			"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
		} );
    } );
</script>

<script>
    $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

<script>
    $('.datepicker').datepicker({
		 format: 'dd MM yyyy',
		 orientation: 'bottom left'
	});
</script>

@endsection