@extends('layouts.admin')

@section('content')
<div class="row  m-b-40">
	<div class="col-md-12">
		<div class="well white">
		  <form class="form-floating" id="driverFormSearch" name="driverFormSearch">
		    {{ csrf_field() }}
			<fieldset>
				<div class="form-group col-md-6 padding-left">
					<label for="search_name" class="control-label">Name</label>
					<input type="text" data-provide="typeahead" class="form-control" name="search_name" id="search_name" autocomplete="off">
				</div>
				<div class="form-group col-md-6 padding-left">
					<label for="search_licence" class="control-label">Licence#</label>
					<input type="text" data-provide="typeahead" class="form-control" name="search_licence" id="search_licence" autocomplete="off">
				</div>
				<input class="btn btn-sm btn-danger" type="submit" name="search" value="Search">
			</fieldset>
		  </form>
		</div>
	 </div>
	<form class="form-floating form-validate form-ajax" id="driverForm" name="driverForm" action="{{url('admin/driver')}}">
	{{ csrf_field() }}
	<input type="hidden" id="id" name="id" class="hidden-field" value="">
	<div class="col-md-6 vendorinsurewrap">
		<div class="well white">
			<fieldset>
				<legend style="border-bottom:none;"></legend>
				<div class="form-group">
					<label for="name" class="control-label">Name</label>
					<input type="text" class="form-control" name="name" id="name" data-validation="required">
				</div>
				<div class="form-group">
					<label for="inputcref" class="control-label">Address</label>
					<input type="text" class="form-control" name="address" id="address" data-validation="required">
				</div>
				<div class="form-group">
					<label for="city" class="control-label">City</label>
					<input type="text" class="form-control cityField" name="city" id="city" data-validation="required">
				</div>
				<div class="form-group">
					<label for="zip" class="control-label">Zip</label>
					<input type="text" class="form-control zipcode" name="zip" id="zip" zid="driver" maxlength="7" data-validation="length, validzip" data-validation-length="min5">
				</div>
				<div class="form-group">
					<label for="state" class="control-label">State</label>
					<input type="text" class="form-control state" name="state" id="state" zid="driver" data-validation="required" readonly>
				</div>
				<div class="form-group">
					<label for="country" class="control-label">Country</label>
					<input type="text" class="form-control country" name="country" id="country" zid="driver" data-validation="required" readonly>
				</div>
				<div class="form-group">
					<label for="home_phone" class="control-label">Home Phone</label>
					<input type="text" class="form-control" name="home_phone" id="home_phone">
				</div>
				<div class="form-group">
					<label for="cell_phone" class="control-label">Cell Phone</label>
					<input type="text" class="form-control" name="cell_phone" id="cell_phone">
				</div>
				<div class="form-group">
					<label for="company_phone" class="control-label">Company Phone</label>
					<input type="text" class="form-control" name="company_phone" id="company_phone">
				</div>
				<div class="form-group">
					<label for="email" class="control-label">Email</label>
					<input type="text" class="form-control" name="email" id="email" data-validation="email" data-validation-optional="true">
				</div>
				<div class="form-group">
					<label for="licence" class="control-label">Licence</label>
					<input type="text" class="form-control" name="licence" id="licence" data-validation="required">
				</div>
				<div class="form-group filled always-filled">
					<label class="control-label">Licence State</label>
					{!! FormField::select2('licence_state', $states, false, true) !!}
				</div>
				<div class="form-group">
					<label for="licence_expiration" class="control-label">Licence Expiration</label>
					<input type="text" class="form-control datepicker" name="licence_expiration" id="licence_expiration" data-validation="required">
				</div>
				<div class="form-group">
					<label for="driver_birthday" class="control-label">Driver Birthday</label>
					<input type="text" class="form-control datepicker" name="driver_birthday" id="driver_birthday">
				</div>
				<div class="form-group">
					<label for="last_physical_date" class="control-label">Last Physical Date</label>
					<input type="text" class="form-control datepicker" name="last_physical_date" id="last_physical_date">
				</div>
				<div class="form-group">
					<label for="next_physical_date" class="control-label">Next Physical Date</label>
					<input type="text" class="form-control datepicker" name="next_physical_date" id="next_physical_date">
				</div>
				<div class="form-group">
					<div class="checkbox">
					<label><input type="checkbox" name="eligible_1099" id="eligible_1099" value="1" > 1099 Applicable </label>
					</div>
				</div>
				<div class="form-group">
					<div class="checkbox">
					<label><input type="checkbox" name="remittance" id="remittance" value="1" > Remittance is Different </label>
					</div>
				</div>
				<div id="remittance-box" style="display:none;">
				<div class="form-group">
					<label for="remittance_name" class="control-label">Name/Company</label>
					<input type="text" class="form-control" name="remittance_name" id="remittance_name" data-validation="required" data-validation-depends-on="remittance">
				</div>
				<div class="form-group">
					<label for="remittance_address" class="control-label">Address</label>
					<input type="text" class="form-control" name="remittance_address" id="remittance_address" data-validation="required" data-validation-depends-on="remittance">
				</div>
				<div class="form-group">
					<label for="remittance_city" class="control-label">City</label>
					<input type="text" class="form-control cityField" name="remittance_city" id="remittance_city" data-validation="required" data-validation-depends-on="remittance">
				</div>
				<div class="form-group">
					<label for="remittance_zip" class="control-label">Zip</label>
					<input type="text" class="form-control zipcode" name="remittance_zip" id="remittance_zip" zid="rdriver" maxlength="7" data-validation="length, validzip" data-validation-length="min5" data-validation-depends-on="remittance">
				</div>
				<div class="form-group">
					<label for="remittance_state" class="control-label">State</label>
					<input type="text" class="form-control state" name="remittance_state" id="remittance_state" zid="rdriver" data-validation="required" data-validation-depends-on="remittance" readonly>
				</div>
				<div class="form-group">
					<label for="remittance_country" class="control-label">Country</label>
					<input type="text" class="form-control country" name="remittance_country" id="remittance_country" zid="rdriver" data-validation="required" data-validation-depends-on="remittance" readonly>
				</div>
				</div>
				<div class="form-group">
					<label for="inputcref" class="control-label">Username</label>
					<input type="text" class="form-control" name="username" id="username" data-validation="required">
				</div>
				<div class="form-group">
					<label for="inputcref" class="control-label">Password</label>
					<input type="password" class="form-control" name="password" id="password" data-validation="length" data-validation-length="min6" data-validation-optional="false" >
				</div>
				<div class="clearfix"></div>
			</fieldset>
		</div>
	  </div>	
	<div class="col-md-6">
		<div class="well white">
			<fieldset>
				<div class="form-group filled always-filled">
					<label class="control-label">Driver Status</label>
					{!! FormField::select2('status', $driverStatuses, false, true) !!}
				</div>
				<div class="form-group filled always-filled">
					<label class="control-label">Driver Type</label>
					{!! FormField::select2('type', $driverTypes, false, true) !!}
				</div>
				<div class="form-group filled always-filled">
					<label class="control-label">Operations Assignment</label>
					{!! FormField::select2('operation_user', $users, false, true) !!}
				</div>
			</fieldset>
		</div>

		<div class="well white documentsContainer" style="display:none;">
			<div class="">
				<div class="table-responsive white">
					<h3 class="table-title p-v-20">Documents</h3>
					<div id="doc-div">
					<table class="table table-bordered table-full table-full-small custom-bordered-table">
					  <thead>
						<tr>
						  <th>Type</th>
						  <th>Document</th>
						  <th>Date</th>
						  <th></th>
						</tr>
					  </thead>
					  <tbody id="documents-body">
					  	<tr id="no-document-row">
					  		<td colspan="4">
					  			No documents found.
					  		</td>
					  	</tr>
					  </tbody>
					</table>
					</div>
					<input class="btn btn-sm btn-danger m-t-15" type="button" id="attach-document" name="attach-document" value="ADD">
					<input class="btn btn-sm btn-danger m-t-15 pull-right" type="button" id="print-documents" name="print-documents" value="PRINT">
				</div>
			</div>
		</div>


		<div class="well white compensationContainer" style="display:none;">
			<input class="btn btn-danger w-100" type="button" id="manage-compensation-setup" name="manage-compensation-setup" value="MANAGE COMPENSATION SETUP">
		</div>


		<div class="well white deductionsContainer" style="display:none;">
			<div class="">
				<div class="table-responsive white">
					<h3 class="table-title p-v-20">Deductions</h3>
					<div id="deduction-div">
					<table class="table table-bordered table-full table-full-small custom-bordered-table">
					  <thead>
						<tr>
						  <th>Type</th>
						  <th>Amount</th>
						  <th>Frequency</th>
						  <th>Exp Date</th>
						  <th>Status</th>
						  <th></th>
						</tr>
					  </thead>
					  <tbody id="deductions-body">
					  	<tr id="no-deduction-row">
					  		<td colspan="4">
					  			No deductions found.
					  		</td>
					  	</tr>
					  </tbody>
					</table>
					</div>
					<input class="btn btn-sm btn-danger m-t-15" type="button" id="add-deduction" name="add-deduction" value="ADD">
					<input class="btn btn-sm btn-danger m-t-15 pull-right" type="button" id="print-deductions" name="print-deductions" value="PRINT">
				</div>
			</div>
		</div>



	</div>	
	  <div class="clearfix"></div>
	  <div class="newcontbtn" style="margin-left:0px;">
		<input class="btn btn-sm btn-danger" type="submit" id="add-btn" name="add" value="Add">
		<input class="btn btn-sm btn-danger hide" type="submit" id="update-btn" name="update" value="Update">
		<input class="btn btn-sm btn-danger hide" type="button" id="delete-btn" name="delete" value="Delete">
		<input class="btn btn-sm btn-danger hide" type="button" id="cancel-btn" name="cancel" value="Cancel">
	  </div>
	</form>
</div>


<!-- Attach Modal -->
<div class="modal fade" id="attachModal" 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">Attach Document</h4>
		</div>
		<form class="form-floating form-validate form-ajax" id="attachform" name="attachform">
		<div class="modal-body" style="overflow:hidden;">
			  <div class="col-md-12">
				<fieldset>
					<div class="form-group" style="width:538px;margin-top: 35px;">
						<label for="document_type" class="control-label normal">Document Type</label>
						{!! FormField::select('document_type', $documentTypes, null, true, 'Please Select') !!}
					</div>
					<div class="form-group">
						<div id="dragbox">
							<p class="dropmessage">Drop files here or click to upload.</p>
							<p class="fileselect" id="filename"></p>
						</div>
					</div>
				</fieldset>
			  </div>
			  <div class="clearfix"></div>
		</div>
		<div class="modal-footer firstTime_footer">
		  <input class="btn btn-sm btn-danger" type="button" name="attach" value="Attach" id="attach"></input>
		</div>
		</form>
	  </div>  
	</div>
</div>
<!-------------------->



<!-- Compensation Modal -->
<div class="modal fade" id="compensationModal" role="dialog">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <button type="button" class="close" data-dismiss="modal" id="compensation-close">&times;</button>
		  <h4 class="modal-title firstTime">Compensation</h4>
		</div>
		<form class="form-floating form-validate form-ajax" id="compensationform" name="compensationform" action="{{url('admin/driver/compensation')}}">
		{{ csrf_field() }}
		<div class="modal-body" style="overflow:hidden;">
			  <div class="col-md-12">
				<fieldset>
					<legend>Compensation Type</legend>
					<div class="form-group filled always-filled">
						<select name="compensation_type" id="compensation_type" class="form-control" data-validation="required">
							<option value="" >Please Select</option>
							<option value="PERMILE" >PER MILE</option>
							<option value="PERCENTAGE" >PERCENTAGE</option>
							<option value="HOURLY" >HOURLY</option>
						</select>
					</div>
					

					<div class="form-group compensation-PERMILE ct-fields filled always-filled" style="display:none;">
						<label for="mile_pay_type" class="control-label">On what Miles is Pay Calculated</label>
						<select name="mile_pay_type" id="mile_pay_type" class="form-control"  data-validation="required" data-validation-depends-on="compensation_type" data-validation-depends-on-value="PERMILE">
							<option value="" >Please Select</option>
							<option value="LOADMILES" >Load Miles</option>
							<option value="ALLMILES" >All Miles</option>
						</select>
					</div>
					<div class="form-group compensation-PERMILE ct-fields" style="display:none;">
						<label for="rate" class="control-label">Rate Per A Mile to be Paid</label>
						<input type="text" class="form-control" id="rate" name="rate"  data-validation="required" data-validation-depends-on="compensation_type" data-validation-depends-on-value="PERMILE">
					</div>
					<div class="form-group compensation-PERCENTAGE ct-fields" style="display:none;">
						<label for="linehaul_percentage" class="control-label">% Of Line Haul</label>
						<input type="text" class="form-control" id="linehaul_percentage" name="linehaul_percentage"  data-validation="required" data-validation-depends-on="compensation_type" data-validation-depends-on-value="PERCENTAGE">
					</div>
					<div class="form-group compensation-PERCENTAGE ct-fields" style="display:none;">
						<label for="fuel_percentage" class="control-label">% Of Fuel Surcharge</label>
						<input type="text" class="form-control" id="fuel_percentage" name="fuel_percentage"  data-validation="required" data-validation-depends-on="compensation_type" data-validation-depends-on-value="PERCENTAGE">
					</div>
					<div class="form-group compensation-HOURLY ct-fields" style="display:none;">
						<label for="hourly_wage" class="control-label">Hourly Wage</label>
						<input type="text" class="form-control" id="hourly_wage" name="hourly_wage"  data-validation="required" data-validation-depends-on="compensation_type" data-validation-depends-on-value="HOURLY">
					</div>
					<div class="form-group compensation-HOURLY ct-fields" style="display:none;">
						<label for="minimum_hd" class="control-label">Minimum Hour/Day</label>
						<input type="text" class="form-control" id="minimum_hd" name="minimum_hd"  data-validation="required" data-validation-depends-on="compensation_type" data-validation-depends-on-value="HOURLY">
					</div>
					<hr>
					<div class="clearfix"></div>
					<legend>% of Accessorials</legend>
					<div class="form-group filled always-filled col-md-8 padding-left">
						<label class="control-label">Accessorial</label>
						<select name="accessorial_type" id="accessorial_type" class="select2 form-control" style="width:100%;">
						{!! FormField::dropDownOptions('accessorial_type', $accessorialTypes, false) !!}
						</select>
					</div>
					<div class="form-group col-md-3 padding-left" style="margin-top: 16px;">
						<input type="text" placeholder="% Charge" id="accessorial_rate" name="accessorial_rate" class="form-control">
					</div>
					 <div class="form-group col-md-1 padding-left">
						<input class="btn btn-sm btn-danger add-accessorial" type="button" name="+" value="+">
					 </div>
					<div class="clearfix"></div>
					<div class="col-md-12 no-padding">
						<div class="table-responsive">
							<table id="accessorials-table" class="table table-full table-full-small">
							  <thead>
								<tr>
								  <th>Accessorial</th>
								  <th>Percentage</th>
								  <th></th>
								</tr>
							  </thead>
							  <tbody id="accessorial-items">				  
							  </tbody>
							</table>
						</div>
					</div>
					<div class="clearfix"></div>
					<legend style="margin-top:30px;">Additional Fields</legend>
					<div class="form-group">
						<label for="available_advance" class="control-label">Available Advance %</label>
						<input type="text" class="form-control" id="available_advance" name="available_advance" data-validation-optional="true" data-validation="number" data-validation-allowing="float,negative">
					</div>
					<div class="form-group">
						<label for="card_number" class="control-label">Card Number</label>
						<input type="text" class="form-control" id="card_number" name="card_number" data-validation-optional="true" data-validation="number">
					</div>
					<div class="form-group filled always-filled">
						<label for="card_status" class="control-label l-t-15">Card Status</label>
						<select name="card_status" id="card_status" class="form-control">
							<option value="" >Please Select</option>
							<option value="1" >Active</option>
							<option value="0" >Inactive</option>
						</select>
					</div>
					<div class="form-group filled always-filled">
						<label for="company" class="control-label l-t-15">Company</label>
						<select name="company" id="company" class="form-control">
							<option value="" >Please Select</option>
							<option value="COMDATA" >ComData</option>
							<option value="EFS" >EFS</option>
						</select>
					</div>
					<div class="form-group">
						<label for="no_vacation_days" class="control-label">Number Of Vacation Days</label>
						<input type="text" class="form-control" id="no_vacation_days" name="no_vacation_days" data-validation-optional="true" data-validation="number">
					</div>
					<div class="form-group">
						<label for="rem_vacation_days" class="control-label">Remaining Vacation Days</label>
						<input type="text" class="form-control" id="rem_vacation_days" name="rem_vacation_days" data-validation-optional="true" data-validation="number">
					</div>
					<div class="form-group">
						<label for="no_sick_days" class="control-label">Number Of Sick Days</label>
						<input type="text" class="form-control" id="no_sick_days" name="no_sick_days" data-validation-optional="true" data-validation="number">
					</div>
					<div class="form-group">
						<label for="rem_sick_days" class="control-label">Remaining Sick Days</label>
						<input type="text" class="form-control" id="rem_sick_days" name="rem_sick_days" data-validation-optional="true" data-validation="number">
					</div>
					<div class="form-group">
						<label for="compensation_start_date" class="control-label">Start Time</label>
						<input type="text" class="form-control datepicker" id="compensation_start_date" name="compensation_start_date">
					</div>
					<div class="form-group filled always-filled">
						<label for="holiday_pay_type" class="control-label l-t-15">Holiday Pay Type</label>
						<select name="holiday_pay_type" id="holiday_pay_type" class="form-control">
							<option value="" >Please Select</option>
							<option value="AVERAGEDAILY" >Average Daily</option>
							<option value="FLAT" >Flat Amount</option>
							<option value="NONE" >None</option>
						</select>
					</div>
					<div class="form-group">
						<label for="holiday_pay_value" class="control-label">Holiday Pay Amount</label>
						<input type="text" class="form-control" id="holiday_pay_value" name="holiday_pay_value" data-validation-optional="true" data-validation="number" data-validation-allowing="float,negative">
					</div>
					<div class="form-group filled always-filled">
						<label for="vacation_pay_type" class="control-label l-t-15">Vacation Pay Type</label>
						<select name="vacation_pay_type" id="vacation_pay_type" class="form-control">
							<option value="" >Please Select</option>
							<option value="AVERAGEDAILY" >Average Daily</option>
							<option value="FLAT" >Flat Amount</option>
							<option value="NONE" >None</option>
						</select>
					</div>
					<div class="form-group">
						<label for="vacation_pay_value" class="control-label">Vacation Pay Amount</label>
						<input type="text" class="form-control" id="vacation_pay_value" name="vacation_pay_value" data-validation-optional="true" data-validation="number" data-validation-allowing="float,negative">
					</div>
				</fieldset>
			  </div>
			  <div class="clearfix"></div>
		</div>
		<div class="modal-footer firstTime_footer">
		  <input class="btn btn-sm btn-danger" type="submit" name="compensation-save" value="Save" id="compensation-save"></input>
		</div>
		</form>
	  </div>  
	</div>
</div>
<!-------------------->




<!-- Deduction Modal -->
<div class="modal fade" id="deductionModal" role="dialog">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <button type="button" class="close" data-dismiss="modal" id="deduction-close">&times;</button>
		  <h4 class="modal-title firstTime">Deduction</h4>
		</div>
		<form class="form-floating form-validate form-ajax" id="deductionform" name="deductionform" action="{{url('admin/driver/deduction')}}">
		{{ csrf_field() }}
		<input type="hidden" name="deduction_id" id="deduction_id">
		<div class="modal-body" style="overflow:hidden;">
			  <div class="col-md-12">
				<fieldset>
					<div class="form-group">
						<label for="description" class="control-label">Description</label>
						<input type="text" class="form-control" id="description" name="description" data-validation="required">
					</div>
					<div class="form-group filled always-filled">
						<label for="account" class="control-label l-t-15">Account</label>
						<select name="account" id="account" class="form-control" data-validation="required">
							<option value="" >Please Select</option>
							<option value="CHARGE" >Charge</option>
							<option value="DEBT" >Debt</option>
							<option value="ADVANCE" >Advance</option>
						</select>
					</div>
					<div class="form-group deduction-DEBT dt-fields" style="display:none;">
						<label for="intial_principal" class="control-label">Initial Principal</label>
						<input type="text" class="form-control" id="intial_principal" name="intial_principal"  data-validation="required" data-validation-depends-on="account" data-validation-depends-on-value="DEBT">
					</div>
					<div class="form-group deduction-DEBT dt-fields" style="display:none;">
						<label for="rem_prinicipal" class="control-label">Rate Per A Mile to be Paid</label>
						<input type="text" class="form-control" id="rem_prinicipal" name="rem_prinicipal"  data-validation="required" data-validation-depends-on="account" data-validation-depends-on-value="DEBT">
					</div>
					<div class="form-group filled always-filled">
						<label for="type" class="control-label l-t-15">Type</label>
						<select name="type" id="type" class="form-control" data-validation="required">
							<option value="" >Please Select</option>
							<option value="PERCENTAGE" >Percentage</option>
							<option value="FLAT" >Flat</option>
						</select>
					</div>
					<div class="form-group filled always-filled">
						<label for="payable" class="control-label l-t-15">Payable Party</label>
						<select name="payable" id="payable" class="form-control" data-validation="required">
							<option value="REDDOG" >Red Dog</option>
						</select>
					</div>
					<div class="form-group">
						<label for="amount" class="control-label">Amount</label>
						<input type="text" class="form-control" id="amount" name="amount" data-validation="required">
					</div>
					<div class="form-group filled always-filled">
						<label for="frequency" class="control-label l-t-15">Frequency</label>
						<select name="frequency" id="frequency" class="form-control" data-validation="required">
							<option value="" >Please Select</option>
							<option value="PAYPERIOD" >Pay Period</option>
							<option value="MONTLHLY" >Monthly</option>
							<option value="WEEKLY" >Weekly</option>
							<option value="ONETIME" >ONETIME</option>
						</select>
					</div>
					<div class="form-group">
						<label for="start_date" class="control-label">Time</label>
						<input type="text" class="form-control datepicker" id="start_date" name="start_date" data-validation="required">
					</div>
					<div class="form-group">
						<label for="expiry_date" class="control-label">Expiry Time</label>
						<input type="text" class="form-control datepicker" id="expiry_date" name="expiry_date" data-validation="required">
					</div>
					<div class="form-group filled always-filled">
						<label for="status" class="control-label l-t-15">Status</label>
						<select name="status" id="status" class="form-control" data-validation="required">
							<option value="1" >Active</option>
							<option value="0" >Inactive</option>
						</select>
					</div>
				</fieldset>
			  </div>
			  <div class="clearfix"></div>
		</div>
		<div class="modal-footer firstTime_footer">
		  <input class="btn btn-sm btn-danger" type="submit" name="deduction-save" value="Save" id="deduction-save"></input>
		</div>
		</form>
	  </div>  
	</div>
</div>



@endsection

@section('scripts')
<script>var documentTypes = {!! json_encode($documentTypes) !!};</script>
<script charset="utf-8" src="{{asset('backend/js/services/drivers.js')}}"></script>
@endsection