@extends('layouts.admin')

@section('content')
<div class="formswrap">
  <section class="forms-basic consearchbasic">
    <form class="form-floating form-validate" id="orderpickupchangesreportsearchform" name="orderpickupchangesreportsearchform">
	{{ csrf_field() }}
	<div class="row m-b-40">
	  <div class="col-md-12">
		<div class="well white">
			<fieldset>
				<input type="hidden" name="search" id="search" value="true">
				<div class="form-group col-md-6 padding-left">
					<label for="search_from_date" class="control-label">FROM DATE</label>
					<input type="text" class="form-control datepicker" name="search_from_date" id="search_from_date" value="@if(isset($searchData['from_date'])){{ $searchData['from_date']}}@endif" autocomplete="off">
				</div>
				<div class="form-group col-md-6 padding-left">
					<label for="search_to_date" class="control-label">TO DATE</label>
					<input type="text" class="form-control datepicker" name="search_to_date" id="search_to_date" value="@if(isset($searchData['to_date'])){{ $searchData['to_date']}}@endif" autocomplete="off">
				</div>
				<div class="clearfix"></div>
				<div class="form-group">
					<label for="search_order" class="control-label">ORDER #</label>
					<input type="text" class="form-control" name="search_order" id="search_order" value="@if(isset($searchData['order'])){{ $searchData['order']}}@endif">
				</div>
				<div class="form-group">
					<label for="search_client" class="control-label">CLIENT</label>
					<input type="text" class="form-control" name="search_client" id="search_client" value="@if(isset($searchData['client'])){{ $searchData['client']}}@endif">
				</div>
			</fieldset>
		</div>
	  </div>
	<div class="newcontbtn">
			<input class="btn btn-sm btn-danger contbtnnew" type="submit" name="orderpickupchangesreport-search" id="orderpickupchangesreport-search" value="Search">
			<input type="hidden" name="search_clear" id="search_clear" value="">
			<input class="btn btn-sm btn-danger contbtnnew" type="button" name="orderpickupchangesreport-clear" id="orderpickupchangesreport-clear" value="Clear">
			{!! AuthUser::canExport('admin/report/orderpickupchangesexport', 'orderpickupchangesexport-export') !!}
		</div>
	</div>
	</form>
  </section>
</div>
<div class="card">
  <div>
	<div class="datatables shipmenttable">
	  <table id="orderpickupchangesreport-table" class="table table-full table-full-small" cellspacing="0" width="100%">
		<thead>
		  <tr>
		  	<th></th>
			<th>Order #</th>
			<th># of Changes</th>
			<th>Days Late</th>
			<th>Current Pickup Date</th>
			<th>Original Pickup Date</th>
			<th>Change 1</th>
			<th>Change 2</th>
			<th>Change 3</th>
			<th>Change 4</th>
			<th>Change 5</th>
		  </tr>
		</thead>
		<tbody>
		</tbody>
	  </table>
	</div>
  </div>
  <div class="clearfix"></div>
  <div class="newcontbtn">
	<input class="btn btn-sm btn-danger" id="change-pickup" type="button" name="change-pickup" value="CHANGE PICKUP" />
  </div>
</div>

<!-- Change Pickup Modal -->
<div class="modal fade" id="changePickupModal" role="dialog">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <button type="button" class="close" data-dismiss="modal">&times;</button>
		  <h4 class="modal-title firstTime" id="marktitle">Change Pickup</h4>
		</div>
		<form class="form-floating" id="changepickupform" name="changepickupform">
		<div class="modal-body">
			  <div class="col-md-12" id="changePickupBox">
			  </div>
			  <div class="clearfix"></div>
		</div>
		<div class="modal-footer firstTime_footer">
		  {{ csrf_field() }}
		  <input class="btn btn-sm btn-danger" type="button" name="Submit" value="Submit" id="change-save"></input>
		</div>
		</form>
	  </div>  
	</div>
</div>
<!-------------------->

<style>
.ui-datepicker-calendar td{
vertical-align:top;
}

.ui-datepicker-calendar td a[data-custom],.ui-datepicker-calendar td a {
  position: relative;
  background:transparent !important;
  border:0px !important;
  text-align:center !important;
}
.ui-datepicker-calendar td a[data-custom]::after {
  /*STYLE THE CUSTOME DATA HERE*/
  content: attr(data-custom);
  display: block;
  font-size: 9px;
  background-color: #ec5155;
  text-align:center;
  color:#ffffff;
  width:100%;
  border-radius: 5px;
  line-height: 12px;
}
</style>
@endsection

@section('styles')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@endsection

@section('scripts')
<script>
var pickupCounts = {!! json_encode($pickupCounts) !!};
</script>
<script>
	$('#search_client').autocomplete({
		serviceUrl: baseUrl+"/common/suggest/clientnames",
		dataType: 'json',
		minChars: 3,
		transformResult: function(response) {
			return {
				suggestions: $.map(response, function(dataItem) {
					return { value: dataItem.name, data: dataItem.name, id:dataItem.id, name: dataItem.name, reference_code: dataItem.reference_code};
				})
			};
		},
		onSearchStart: function (query) {
			$(this).addClass('fieldloader');
		},
		onSearchComplete: function (query, suggestions) {
			$(this).removeClass('fieldloader');
		}
	});
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script charset="utf-8" src="{{asset('backend/js/services/reports/orderPickupChangesReport.js?v=1.5')}}"></script>
@endsection