@extends('layouts.admin')
<style type="text/css">
	.highcharts-credits{
		display: none;
	}
</style>
@section('content')
<div class="formswrap">
  <section class="forms-basic consearchbasic">
	<!-- ltlform -->
    <form class="form-floating form-validate" id="ratequotesearchform" name="ratequotesearchform">
	<div class="row m-b-40">
	  <div class="col-md-12">
		<div class="well white consearcheight">
			<fieldset>
				{{ csrf_field() }}
				<input type="hidden" name="search" id="search" value="true">
				<div class="col-md-6 padding-left">
					<legend>ORIGIN</legend>
					<div class="form-group">
						<label for="shipfrom_zip" class="control-label">ZIP</label>
						<input type="text" class="form-control" name="shipfrom_zip" id="shipfrom_zip" data-validation="required" data-validation-optional-if-answered="shipfrom_city">
					</div>
					<div class="orsep">OR</div>			
					<div class="form-group">
						<label for="shipfrom_city" class="control-label">CITY</label>
						<input type="text" class="form-control cityField" name="shipfrom_city" id="shipfrom_city" data-validation="required" data-validation-optional-if-answered="shipfrom_zip">
					</div>
					<div class="form-group">
						<select name="shipfrom_state" id="shipfrom_state" class="select2 form-control" data-validation="required" data-validation-depends-on="shipfrom_city">
							{!! FormField::dropDownOptions('shipfrom_state', $states, false, 'STATE') !!}
						</select>
					</div>
				</div>
				<div class="col-md-6 padding-right">
					<legend>DESTINATION</legend>
					<div class="form-group">
						<label for="shipto_zip" class="control-label">ZIP</label>
						<input type="text" class="form-control" name="shipto_zip" id="shipto_zip" data-validation="required" data-validation-optional-if-answered="shipto_city">
					</div>
					<div class="orsep">OR</div>			
					<div class="form-group">
						<label for="shipto_city" class="control-label">CITY</label>
						<input type="text" class="form-control cityField" name="shipto_city" id="shipto_city" data-validation="required" data-validation-optional-if-answered="shipto_zip">
					</div>
					<div class="form-group">
						<select name="shipto_state" id="shipto_state" class="select2 form-control" data-validation="required" data-validation-depends-on="shipfrom_city">
							{!! FormField::dropDownOptions('shipto_state', $states, false, 'STATE') !!}
						</select>
					</div>
				</div>
				<div class="col-md-12 nopadding">
				<legend class="legend_in" style="margin-top: 30px;">EQUIPMENT</legend>
				<div class="form-group">
					<select class="form-control" id="equipment_id" name="equipment_id" data-validation="required">
						<option value="">Please Select</option>
						@foreach($equipments as $equipment)
						<option value="{{ $equipment->id }}" equipmenttype="{{ $equipment->type }}">
						{{ $equipment->name }}
						</option>
						@endforeach
					</select>
				</div>
				</div>
				
				<!------------------- sample tl selection box-------------------------->
				<div id="ltl-items-box" style="display:none;">		
				  <div class="col-md-12 no-padding">
					<div class="table-responsive">
						<table class="table table-full table-full-small ltl-table">
						  <thead>
							<tr>
							  <th>Description</th>
							  <th>Class</th>
							  <th>Unit</th>
							  <th>Length</th>
							  <th>Width</th>
							  <th>Height</th>
							  <th>Weight</th>
							  <th></th>
							</tr>
						  </thead>
						  <tbody id="ltl-items">
							<tr class="ltl-row">
							  <td>
								<input type="text" class="form-control ltl-field ltl-desc" name="ltlitems[description][]" data-validation="required" value="">
							  </td>
							  <td>
								<input type="text" class="form-control ltl-field ltl-class" name="ltlitems[class][]" data-validation="required" value="">
							  </td>
							  <td>
								<input type="text" class="form-control ltl-field ltl-unit" name="ltlitems[unit][]" data-validation="required, number" value="" >
							  </td>
							  <td>
								<input type="text" class="form-control ltl-field ltl-length" name="ltlitems[length][]" data-validation="required, number" data-validation-allowing="float" value="" >
							  </td>
							  <td>
								<input type="text" class="form-control ltl-field ltl-width" name="ltlitems[width][]" data-validation="required, number" data-validation-allowing="float" value="" >
							  </td>
							  <td>
								<input type="text" class="form-control ltl-field ltl-height" name="ltlitems[height][]" data-validation="required, number" data-validation-allowing="float" value="" >
							  </td>
							  <td>
								<input type="text" class="form-control ltl-field ltl-weight" name="ltlitems[weight][]" data-validation="required, number" data-validation-allowing="float" value="" >
							  </td>
							  <td>
								<input class="btn btn-sm btn-danger add-ltl-row" type="button" name="+" value="+">
							  </td>
							</tr>
						  </tbody>
						</table>
					  </div>
				  </div>
				</div>
				<!---------------------------------------------------------->
				
			</fieldset>
		</div>
	  </div>
	  <div class="clearfix"></div>
		<div class="newcontbtn">
			<input class="btn btn-sm btn-danger contbtnnew" type="submit" name="ratequote-search" id="ratequote-search" value="Search">
			<input type="hidden" name="search_clear" id="search_clear" value="">
			<input class="btn btn-sm btn-danger contbtnnew" type="button" name="ratequote-clear" id="ratequote-clear" value="Clear">
		</div>
	</div>
	</form>
  </section>
</div>

<div class="col-md-12 nopadding hide" id="sample-box">
	<div class="card no-margin">
		<div class="table-responsive white">
			<input class="btn btn-sm btn-danger contbtnnew pull-right m-r-10" type="button" name="new-quote" id="new-quote" value="NEW QUOTE">
			<div class="rate_quote_desc">
				<p><span class="quote_locate">ORIGIN:</span> <span id="s-org"></span></p>
				<p><span class="quote_locate">DESTINATION:</span> <span id="s-dest"></span></p>
				<p><span class="quote_locate">EQUIPMENT:</span> <span id="s-equp"></span></p>
			</div>
		</div>
		<div id="ltl-items-table">
		</div>
	</div>
	<div class="clearfix"></div><br/>
	<div id="sample-content">
	</div>
</div>
	
<div class="col-md-12 nopadding hide" id="rate-box">
	<!--
	<div class="well white">
		<pre id="rate-result">
		</pre>
	</div>
    -->
    <div class="card no-margin">
		<div class="table-responsive white">
          <table class="table table-bordered table-full table-full-small">
          	<colgroup>
            	<col class="auto-cell-size">
          	</colgroup>
            <thead>
              <tr>
                <th class="rate_cont_hd" colspan="2">SPOT RATE <h5>Miles: <span id="miles-r" class="rv"></span></h5></th>
              </tr>
            </thead>
            <tbody>
              <tr id="estimatedLinehaulRate-sr-tr">
                <td class="text-nowrap" scope="row">ESTIMATED LINE HAUL RATE</td>
                <td id="estimatedLinehaulRate-sr" class="rv"></td>
              </tr>
              <tr id="lowLinehaulRate-sr-tr">
                <td class="text-nowrap" scope="row">LOW LINE HAUL RATE</td>
                <td id="lowLinehaulRate-sr" class="rv"></td>
              </tr>
              <tr id="highLinehaulRate-sr-tr">
                <td class="text-nowrap" scope="row">HIGH LINE HAUL RATE</td>
                <td id="highLinehaulRate-sr" class="rv"></td>
              </tr>
              <tr id="estimatedLinehaulTotal-sr-tr">
                <td class="text-nowrap" scope="row">ESTIMATED LINE HAUL TOTAL</td>
                <td id="estimatedLinehaulTotal-sr" class="rv"></td>
              </tr>
              <tr id="lowLinehaulTotal-sr-tr">
                <td class="text-nowrap" scope="row">LOW LINE HAUL TOTAL</td>
                <td id="lowLinehaulTotal-sr" class="rv"></td>
              </tr>
              <tr id="highLinehaulTotal-sr-tr">
                <td class="text-nowrap" scope="row">HIGH LINE HAUL TOTAL</td>
                <td id="highLinehaulTotal-sr" class="rv"></td>
              </tr>
              <tr id="confidenceLevel-sr-tr">
                <td class="text-nowrap" scope="row">CONFIDENCE LEVEL</td>
                <td id="confidenceLevel-sr" class="rv"></td>
              </tr>
              <tr id="averageFuelSurchargeRate-sr-tr">
                <td class="text-nowrap" scope="row">AVERAGE FUEL SURCHARGE RATE</td>
                <td id="averageFuelSurchargeRate-sr" class="rv"></td>
              </tr>
              <tr id="daysBack-sr-tr">
                <td class="text-nowrap" scope="row">DAYS BACK</td>
                <td id="daysBack-sr" class="rv"></td>
              </tr>
              <tr id="contributors-sr-tr">
                <td class="text-nowrap" scope="row">CONTRIBUTORS</td>
                <td id="contributors-sr" class="rv"></td>
              </tr>
              <tr id="moves-sr-tr">
                <td class="text-nowrap" scope="row">MOVES</td>
                <td id="moves-sr" class="rv"></td>
              </tr>
              <tr id="ratedLane-sr-tr">
                <td class="text-nowrap" scope="row">RATED LANE</td>
                <td id="ratedLane-sr" class="td_spn">
                	<span class="title">ORIGIN GEOGRAPHY: <span id="originGeography-sr" class="rv"></span></span>
                	<span class="title">DESTINATION GEOGRAPHY: <span id="destinationGeography-sr" class="rv"></span></span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
    </div>
		<div class="card no-margin rate_contract">
			<div class="table-responsive white">
	          <table class="table table-bordered table-full table-full-small">
	          	<colgroup>
	            	<col class="auto-cell-size">
	          	</colgroup>
	            <thead>
	              <tr>
	                <th class="rate_cont_hd" colspan="2">CONTRACT RATE</th>
	              </tr>
	            </thead>
	            <tbody>
	              <tr id="estimatedLinehaulRate-cr-tr">
	                <td class="text-nowrap" scope="row">ESTIMATED LINE HAUL RATE</td>
	                <td id="estimatedLinehaulRate-cr" class="rv"></td>
	              </tr>
	              <tr id="lowLinehaulRate-cr-tr">
	                <td class="text-nowrap" scope="row">LOW LINE HAUL RATE</td>
	                <td id="lowLinehaulRate-cr" class="rv"></td>
	              </tr>
	              <tr id="highLinehaulRate-cr-tr">
	                <td class="text-nowrap" scope="row">HIGH LINE HAUL RATE</td>
	                <td id="highLinehaulRate-cr" class="rv"></td>
	              </tr>
	              <tr id="averageFuelSurchargeRate-cr-tr">
	                <td class="text-nowrap" scope="row">AVERAGE FUEL SURCHARGE RATE</td>
	                <td id="averageFuelSurchargeRate-cr" class="rv"></td>
	              </tr>
	              <tr id="averageAccessorialCharge-cr-tr">
	                <td class="text-nowrap" scope="row">AVERAGE ACCESSORIAL RATE</td>
	                <td id="averageAccessorialCharge-cr" class="rv"></td>
	              </tr>
	              <tr id="contributors-cr-tr">
	                <td class="text-nowrap" scope="row">CONTRIBUTORS</td>
	                <td id="contributors-cr" class="rv"></td>
	              </tr>
	              <tr id="moves-cr-tr">
	                <td class="text-nowrap" scope="row">MOVES</td>
	                <td id="moves-cr" class="rv"></td>
	              </tr>
	              <tr id="ratedLane-cr-tr">
	                <td class="text-nowrap" scope="row">RATED LANE</td>
	                <td id="ratedLane-cr" class="td_spn">
	                	<span class="title">ORIGIN GEOGRAPHY: <span id="originGeography-cr" class="rv"></span></span>
	                	<span class="title">DESTINATION GEOGRAPHY: <span id="destinationGeography-cr" class="rv"></span></span>
	                </td>
	              </tr>
	            </tbody>
	          </table>
	        </div>
		</div>
		<div class="card no-margin rate_contract">
			<div class="table-responsive white">
				<!-- <h1>Margin Chart</h1> -->
				<div id="marginChart"></div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('scripts')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script charset="utf-8" src="{{asset('backend/js/services/rateQuote.js')}}"></script>
@endsection