@extends('public.layaout.layaout')
@extends('public.layaout.navbar')
@extends('public.layaout.sidebar')
@section('content')
<!-- BEGIN PAGE CONTENT -->
			<div class="row">
				<div class="col-md-12">
					<div class="portlet light" id="form_wizard_1">
						<div class="portlet-body form">
							<form class="form-horizontal" id="submit_form" method="POST">
								<div class="col-md-12">
								<div class="form-wizard">
									<div class="form-body">
										<ul class="nav nav-pills nav-justified steps" >
											<li>
												<a href="#tab1" data-toggle="tab" class="step">
												<span class="number">
												1 </span>
												<span class="desc">
												<i class="fa fa-check"></i> Shipment information </span>
												</a>
											</li>
											<li>
												<a href="#tab2" data-toggle="tab" class="step">
												<span class="number">
												2 </span>
												<span class="desc">
												<i class="fa fa-check"></i> Service & Shipping Information</span>
												</a>
											</li>
											<li>
												<a href="#tab3" data-toggle="tab" class="step active">
												<span class="number">
												3 </span>
												<span class="desc">
												<i class="fa fa-check"></i> Additional Services </span>
												</a>
											</li>
											<li>
												<a href="#tab4" data-toggle="tab" class="step">
												<span class="number">
												4 </span>
												<span class="desc">
												<i class="fa fa-check"></i> Confirm </span>
												</a>
											</li>
											<li>
												<a href="#tab5" data-toggle="tab" class="step">
												<span class="number">
												5 </span>
												<span class="desc">
												<i class="fa fa-check"></i> Your Quote </span>
												</a>
											</li>
										</ul>
										<div id="bar" class="progress progress-striped" role="progressbar" hidden>
											<div class="progress-bar progress-bar-success">
											</div>
										</div>

										<div class="tab-content">
											@if($FlagOrigin == 1 or $FlagDestination == 1)
											<div class="alert alert-danger" align="center">
												<button class="close" data-dismiss="alert"></button>
												<b>{{$MessageErrorOrigin}}<br>{{$MessageErrorDestination}}</b>
											</div>
											@endif
											<div class="alert alert-danger display-none">
												<button class="close" data-dismiss="alert"></button>
												You have some form errors. Please check below.
											</div>
											<div class="alert alert-success display-none">
												<button class="close" data-dismiss="alert"></button>
												Your form validation is successful!
											</div>
											<div class="tab-pane active" id="tab1">
												<h1 class="block" align="center">Start Your Free Freight Quote</h1>
												<button id="btn_quote" hidden>Quote</button>
												<button data-toggle="modal" href="#price_modal" onclick="createQuoteTable()" hidden >Quote Modal</button>
												{!! csrf_field() !!}
												<div class="row">
													<div class="col-md-1">&nbsp;</div>
													<div class="col-md-10">
														<div class="col-md-5">
															<h2 align="center">Pick Up From</h2>
															<div class="col-md-12">
																<div class="form-group">
																	<div class="input-icon">
																		<i class="fa fa-calendar"></i>
																		<input type="date" class="form-control" id="pickup_date" name="pickup_date" onchange="validateDate(1)" required value="{{$LoadingDate}}">
																	</div>
																</div>
															</div>
															<div class="form-group">
															<div class="col-md-8">
																	<div class="input-icon">
																		<i class="fa fa-user"></i>
																		<input type="text" class="form-control" id="from_sender" name="from_sender" style="text-transform:uppercase" placeholder="Shipper" required>
																	</div>
															</div>
															<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-phone"></i>
																		<input type="text" class="form-control phone_us" id="from_sender_phone" name="from_sender_phone" style="text-transform:uppercase" placeholder="Phone" required>
																	</div>
																</div>
															</div>
															<div class="col-md-12">
																<div class="form-group">
																	<div class="input-icon">
																		<i class="fa fa-map-marker"></i>
																		<input type="text" class="form-control" id="from_address" name="from_address" style="text-transform:uppercase" placeholder="From Address" required>
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-4">
																		<div class="input-icon">
																			<i class="fa fa-map-marker"></i>
																			<input type="text" class="form-control" id="from_city" name="from_city" style="text-transform:uppercase" placeholder="From City" required value="{{$OriginCity}}">
																		</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-map-marker"></i>
																		<input type="text" class="form-control" id="from_state" name="from_state" style="text-transform:uppercase" placeholder="From State" maxlength="2" required value="{{$OriginState}}">
																	</div>
																</div>
																<div class="col-md-4">
																	<div id="list_pu_zipcodes">
																		<input type="text" class="form-control" placeholder="FROM ZIP CODE" id="origin_zipcode" name="origin_zipcode" list="pu_zipcodes" maxlength="5" minlength="5" value="{{$OriginZipCode}}">
																		<datalist id="pu_zipcodes"></datalist>
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-4" align="center">
																	<a onclick="changeFromType(1)" class="icon-btn" style="width: 100%; height: 200px;background: #4B8DF8" id="icon_from_business">
																		<img src="{{asset('static/assets/global/img/icon/store.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																		<div id="txt_from_business" style="font-size: 18px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif; color:white">
																			Business
																			<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																				Commercial buildings and areas
																			</div>
																		</div>
																	</a>
																</div>
																<div class="col-md-4" align="center" >
																	<a onclick="changeFromType(2)" class="icon-btn" style="width: 100%; height: 200px" id="icon_from_residential">
																		<img src="{{asset('static/assets/global/img/icon/house.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																		<div id="txt_from_residential" style="font-size: 18px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Residential
																			<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																				Private Homes and Apartment Buildings <br> (No inside delivery)
																			</div>
																		</div>
																	</a>
																</div>
																<div class="col-md-4" align="center" >
																	<a onclick="changeFromType(3)" class="icon-btn" style="width: 100%; height: 200px" id="icon_from_carrier">
																		<img src="{{asset('static/assets/global/img/icon/warehouse.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																		<div id="txt_from_carrier" style="line-height: normal;font-size: 18px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Drop off at a Carrier Terminal
																		</div>
																	</a>
																</div>
																<input type="hidden" id="from_type" value="1">
															</div>
														</div>
														<div class="col-md-2">&nbsp;</div>
														<div class="col-md-5">
															<h2 align="center">Ship To</h2>
															<div class="col-md-12">
																<div class="form-group">
																	<div class="input-icon">
																		<i class="fa fa-calendar"></i>
																		<input type="date" class="form-control" id="delivery_date" name="delivery_date" onchange="validateDate(2)" value="{{$DeliveryDate}}">
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-8">
																	<div class="input-icon">
																		<i class="fa fa-user"></i>
																		<input type="text" class="form-control" id="to_receiver" name="to_receiver" style="text-transform:uppercase" placeholder="Receiver">
																	</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-user"></i>
																		<input type="text" class="form-control phone_us" id="to_receiver_phone" name="to_receiver_phone" style="text-transform:uppercase" placeholder="Phone">
																	</div>
																</div>
															</div>
															<div class="col-md-12">
																<div class="form-group">
																	<div class="input-icon">
																		<i class="fa fa-map-marker"></i>
																		<input type="text" class="form-control" id="to_address" name="to_address" style="text-transform:uppercase" placeholder="TO ADDRESS">
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-map-marker"></i>
																		<input type="text" class="form-control" id="to_city" name="to_city" style="text-transform:uppercase" placeholder="TO CITY" value="{{$DestinationCity}}">
																	</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-map-marker"></i>
																		<input type="text" class="form-control" id="to_state" name="to_state" style="text-transform:uppercase" placeholder="TO STATE" maxlength="2" value="{{$DestinationState}}">
																	</div>
																</div>

																<div class="col-md-4">
																	<div id="list_del_zipcodes">
																		<input type="text" class="form-control" placeholder="TO ZIP CODE" id="destination_zipcode" name="destination_zipcode" list="del_zipcodes" minlength="5" maxlength="5" required value="{{$DestinationZipCode}}">
																		<datalist id="del_zipcodes"></datalist>
																	</div>
																</div>
															</div>
																<div class="form-group">
																	<div class="col-md-4" align="center">
																		<a onclick="changeToType(1)" class="icon-btn" style="width: 100%; height: 200px; background:#4B8DF8" id="icon_to_business">
																			<img src="{{asset('static/assets/global/img/icon/store.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																			<div id="txt_to_business" style="font-size: 18px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif;color:white">
																				Business
																				<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																					Commercial buildings and areas
																				</div>
																			</div>
																		</a>
																	</div>
																	<div class="col-md-4" align="center" >
																		<a onclick="changeToType(2)" class="icon-btn" style="width: 100%; height: 200px" id="icon_to_residential">
																			<img src="{{asset('static/assets/global/img/icon/house.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																			<div id="txt_to_residential" style="font-size: 18px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																				Residential
																				<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																					Private Homes and Apartment Buildings <br> (No inside delivery)
																				</div>
																			</div>
																		</a>
																	</div>
																	<div class="col-md-4" align="center" >
																		<a onclick="changeToType(3)" class="icon-btn" style="width: 100%; height: 200px" id="icon_to_carrier">
																			<img src="{{asset('static/assets/global/img/icon/warehouse.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																			<div id="txt_to_carrier" style="line-height: normal;font-size: 18px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																				Pick Up at a Carrier Terminal
																			</div>
																		</a>
																	</div>
																	<input type="hidden" id="to_type" value="1">
																</div>
														</div>
													</div>
												</div>
											</div>
											<div class="tab-pane" id="tab2">
												<h1 class="block" align="center">Service & Shipping Information</h1>
												<div class="row">
													<div class="col-md-1">&nbsp;</div>
													<div class="col-md-10">
														<div class="col-md-5">
															<h2 class="block" align="center">Type of Service</h2>
															<div class="form-group" >
																<div class="col-md-4" align="center">
																	<a onclick="changeColorIcon(1)" class="icon-btn" style="width: 100%; height: 200px; background:#4B8DF8" id="icon_ltl">
																		<img src="{{asset('static/assets/global/img/icon/delivery.png')}}" style="height: 50px; width: 50px;">
																		<div id="txt_ltl" style="font-size: 18px;padding-top:25px;font-weight:bold;font-family:'Open Sans', sans-serif;color:white">
																			LTL
																			<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																				Less than truckload
																			</div>
																		</div>
																	</a>
																</div>
																<div class="col-md-4" align="center" >
																	<a onclick="changeColorIcon(2)" class="icon-btn" style="width: 100%; height: 200px" id="icon_small_parcel">
																	<img src="{{asset('static/assets/global/img/icon/package.png')}}" style="height: 50px; width: 50px;">
																		<div id="txt_small_parcel" style="font-size: 18px;padding-top:25px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Parcel Orders
																			<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																				Packages that weight under 100 lbs. each
																			</div>
																		</div>
																	</a>
																</div>
																<div class="col-md-4" align="center" >
																	<a onclick="changeColorIcon(3)" class="icon-btn" style="width: 100%; height: 200px" id="icon_tl">
																		<img src="{{asset('static/assets/global/img/icon/trailer.png')}}" style="height: 50px; width: 50px;">
																		<div id="txt_tl" style="font-size: 18px;padding-top:25px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Truck Load
																			<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																				Trailer 53 ft. Dry Van dedicated
																			</div>
																		</div>
																	</a>
																</div>
																<input type="hidden" id="type_service" value="1">
															</div>
															{{-- <h2 class="block" align="center">Package</h2>
															<div class="form-group" >
																<div class="col-md-12">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="text" class="form-control" id="item_description" name="item_description" style="text-transform:uppercase" placeholder="DESCRIPTION" required>
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-4">
																	<select class="form-control select2me" onchange="changeImagePackageType()" id="packaging_type" required>
																		<option value="0" selected>PACKAGE TYPE</option>
																		<option value="1">PALLET</option>
																		<option value="2">BOX</option>
																		<option value="3">OTHER</option>
																	</select>
																</div>
																<div class="col-md-4">
																	<select class="form-control select2me" id="package_condition">
																		<option value="0" selected>CONDITION</option>
																		<option value="1">NEW</option>
																		<option value="2">USED</option>
																	</select>
																</div>
																<div class="col-md-4">
																	<select class="form-control select2me" id="package_hazardous">
																		<option value="0" selected>IS HAZARDOUS?</option>
																		<option value="2">NO</option>
																		<option value="1">YES</option>
																	</select>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_length" name="item_length" placeholder="LENGTH" max="96"required>
																	</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_width" name="item_width" placeholder="WIDTH" max="96" required>
																	</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_heigth" name="item_heigth" placeholder="HEIGHT" max="84" required>
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_number" name="item_number" placeholder="TOTAL PACKAGES" min="1" max="30" required>
																	</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_weight" name="item_weight" placeholder="TOTAL WEIGHT" min="1" max="10000" required>
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-12">
																	<textarea name="package_info" id="package_info" rows="3" style="width:100%" placeholder="ADDITIONAL INFO ABOUT PACKAGE"></textarea>
																</div>
															</div> --}}
														</div>
														<div class="col-md-2">&nbsp;</div>
														<div class="col-md-5">
															<h2 class="block" align="center">Shipment Details</h2>
															<div class="form-group" >
																<div class="col-md-12">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="text" class="form-control" id="item_description" name="item_description" style="text-transform:uppercase" placeholder="DESCRIPTION" required>
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-4">
																	<select class="form-control select2me" onchange="changeImagePackageType()" id="packaging_type" required>
																		{{-- <option value="0" selected>SHIPMENT TYPE</option> --}}
																		<option value="1">PALLET</option>
																		<option value="2">BOX</option>
																		<option value="3">TRUCKLOAD</option>
																	</select>
																</div>
																<div class="col-md-4">
																	<select class="form-control select2me" id="package_condition">
																		<option value="1" selected>CONDITION</option>
																		<option value="1">NEW</option>
																		<option value="2">USED</option>
																	</select>
																</div>
																<div class="col-md-4">
																	<select class="form-control select2me" id="package_hazardous">
																		<option value="2" selected>IS IT HAZARDOUS?</option>
																		<option value="2">NO</option>
																		<option value="1">YES</option>
																	</select>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_length" name="item_length" placeholder="LENGTH" value="48" max="96"required>
																	</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_width" name="item_width" placeholder="WIDTH" value="40" max="96" required>
																	</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_heigth" name="item_heigth" placeholder="HEIGHT" value="40" max="84" required>
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_number" name="item_number" placeholder="PIECES" min="1" max="30" required>
																	</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="number" class="form-control" id="item_weight" name="item_weight" placeholder="WEIGHT" min="1" max="10000" required>
																	</div>
																</div>
																<div class="col-md-4">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="text" class="form-control" id="cargo_insurance" name="cargo_insurance" placeholder="OPTIONAL INSURANCE*">
																	</div>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-12">
																	<textarea name="package_info" id="package_info" rows="3" style="width:100%" placeholder="ADDITIONAL SHIPMENT INFORMATION. "></textarea>
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-12">
																<b>*OPTIONAL DECLARED VALUE INSURANCE AT AN ADDITIONAL COST OF 5% OVER COVERAGE OF $ 300.00</b><br>
																<b>*FAK WILL BE CLASSIFIED AS CLASS 50.</b>
																</div>
															</div>
															<div class="form-group" >
																<div id="img_pallet" align="center" style="display: none;visibility:hidden">
																	<img src="{{asset('static/form_img/Standard_Pallet.png')}}" style="width:50%;height:200px">
																</div>
																<div id="img_box" align="center" style="display: none;visibility:hidden">
																	<img src="{{asset('static/form_img/Standard_Box.png')}}" style="width:50%;height:200px">
																</div>
																<div id="img_ftl" align="center" style="display: none;visibility:hidden">
																	<img src="{{asset('static/form_img/FTL.png')}}" style="width:75%;height:250px">
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="tab-pane" id="tab3">
												<h1 class="block" align="center">Additional Services</h1>
												<div class="row">
													<div class="col-md-1">&nbsp;</div>
													<div class="col-md-10">
														<div class="col-md-5">
															<h2 class="block" align="center">Additional Pick Up Services</h2>
															<div class="form-group" >
																<div class="col-md-4" align="center">
																	<a onclick="pickUpLiftGate(1)" class="icon-btn" style="width: 100%; height: 200px" id="icon_from_liftgate">
																		<img src="{{asset('static/assets/global/img/icon/delivery.png')}}" style="height: 50px; width: 50px;margin-top: 50px;">
																		<div id="txt_from_liftgate" style="font-size: 16px;padding-top:12px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Lift Gate
																			<div style="font-size:12px;font-weight:normal;">
																				<br>(Used if-no loading or Unloading dock)
																			</div>
																		</div>
																		<input type="hidden" id="chk_puLiftgate" value="0">
																	</a>
																</div>
																<div class="col-md-4" align="center" >
																	<a onclick="pickUpInside(2)" class="icon-btn" style="width: 100%; height: 200px" id="icon_from_inside">
																		<img src="{{asset('static/assets/global/img/icon/inside_delivery.png')}}" style="height: 50px; width: 50px;margin-top: 50px;">
																		<div id="txt_from_inside" style="line-height: normal;font-size: 16px;padding-top:12px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Pick up inside origin location
																			<div style="font-size:12px;font-weight:normal;">
																				(Businesses Only)
																			</div>
																		</div>
																	</a>
																	<input type="hidden" id="chk_puInside" value="0">
																</div>
																<div class="col-md-4" align="center" >
																	<a onclick="pickAppointment(3)" class="icon-btn" style="width: 100%; height: 200px" id="icon_from_appointment">
																		<img src="{{asset('static/assets/global/img/icon/appointment.png')}}" style="height: 50px; width: 50px;margin-top: 50px;">
																		<div id="txt_from_appointment" style="font-size: 16px;padding-top:12px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Appointment Fee
																		</div>
																	</a>
																	<input type="hidden" id="chk_puAppointment" value="0">
																</div>
															</div>
															<div class="form-group">
																<div class="col-md-12">
																	<textarea name="pickup_instructions" id="pickup_instructions" rows="5" style="width:100%" placeholder="SPECIAL INSTRUCTIONS AT PICK UP"></textarea>
																</div>
															</div>
														</div>
														<div class="col-md-2">&nbsp;</div>
														<div class="col-md-5">
															<h2 class="block" align="center">Additional Delivery Services</h2>
															<div class="form-group" >
																<div class="col-md-4" align="center">
																	<a onclick="deliveryLiftGate(1)" class="icon-btn" style="width: 100%; height: 200px" id="icon_to_liftgate">
																		<img src="{{asset('static/assets/global/img/icon/delivery.png')}}" style="height: 50px; width: 50px;margin-top: 50px;">
																		<div id="txt_to_liftgate" style="font-size: 16px;padding-top:12px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Lift Gate
																			<div style="font-size:12px;font-weight:normal;">
																				<br>(Used if-no loading or Unloading dock)
																			</div>
																		</div>
																	</a>
																	<input type="hidden" id="chk_delLiftgate" value="0">
																</div>
																<div class="col-md-4" align="center" >
																	<a onclick="deliveryInside(2)" class="icon-btn" style="width: 100%; height: 200px" id="icon_to_inside">
																		<img src="{{asset('static/assets/global/img/icon/inside_delivery.png')}}" style="height: 50px; width: 50px;margin-top: 50px;">
																		<div id="txt_to_inside" style="line-height: normal;font-size: 16px;padding-top:12px;padding-top:5px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Delivery inside destination
																			<div style="font-size:12px;font-weight:normal;">
																				(Businesses Only)
																			</div>
																		</div>
																	</a>
																	<input type="hidden" id="chk_delInside" value="0">
																</div>
																<div class="col-md-4" align="center" >
																	<a onclick="deliveryAppointment(3)" class="icon-btn" style="width: 100%; height: 200px" id="icon_appointment">
																		<img src="{{asset('static/assets/global/img/icon/appointment.png')}}" style="height: 50px; width: 50px;margin-top: 50px;">
																		<div id="txt_appointment" style="font-size: 16px;padding-top:12px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																			Appointment Fee
																		</div>
																	</a>
																	<input type="hidden" id="chk_delAppointment" value="0">
																</div>

															</div>
															<div class="form-group">
																<div class="col-md-12">
																	<textarea name="delivery_instructions" id="delivery_instructions" rows="5" style="width:100%" placeholder="SPECIAL INSTRUCTIONS AT DELIVERY"></textarea>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="tab-pane" id="tab4">
												<h3 class="block" align="center">Shipment Confirmation</h3>
												<div class="row">
													<div class="col-md-1">&nbsp;</div>
													<div class="col-md-10">
														<div class="row">
															<div class="col-md-4">
																<h4 class="form-section" align="center">Pick Up Information</h4>
																<div class="form-group">
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Pick Up Date:</label>
																		<p class="form-control-static col-md-8" id="lbl_pickup_date">04/05/2025</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Shipper:</label>
																		<p class="form-control-static col-md-8" id="lbl_pickup_sender">DAVID DE LOS SANTOS</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Phone:</label>
																		<p class="form-control-static col-md-8" id="lbl_pickup_phone">(664) 331-5092</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Address:</label>
																		<p class="form-control-static col-md-8" id="lbl_pickup_address">10205 PAINTER AVE CA, 90670</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Location Type:</label>
																		<p class="form-control-static col-md-8" id="lbl_pickup_location_type">BUSINESS</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Pick Up Services:</label>
																		<p class="form-control-static col-md-8" id="lbl_pickup_add_services">LIFT GATE</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Pick Up Instructions:</label>
																		<p class="form-control-static col-md-8" id="lbl_pickup_instructions">PLEASE CALL BEFORE PICK UP</p>
																	</div>
																</div>
															</div>
															<div class="col-md-4">
																<h4 class="form-section" align="center">Delivery Information</h4>
																<div class="form-group">
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Delivery Date:</label>
																		<p class="form-control-static col-md-8" id="lbl_delivery_date">04/20/2025</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Receiver:</label>
																		<p class="form-control-static col-md-8" id="lbl_to_receiver">IVAN FUENTEVILLA</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Phone:</label>
																		<p class="form-control-static col-md-8" id="lbl_delivery_phone">(664) 331-5092</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Address:</label>
																		<p class="form-control-static col-md-8" id="lbl_delivery_address">1225 EXPOSITION WAY SAN DIEGO CA, 92154</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Location Type:</label>
																		<p class="form-control-static col-md-8" id="lbl_delivery_location_type">RESIDENTIAL</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Delivery Services:</label>
																		<p class="form-control-static col-md-8" id="lbl_delivery_add_services"></p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Delivery Instructions:</label>
																		<p class="form-control-static col-md-8" id="lbl_delivery_instructions">DROP OFF IN FRONT DOOR</p>
																	</div>
																</div>
															</div>
															<div class="col-md-4">
																<h4 class="form-section" align="center">Shipment Details</h4>
																<div class="form-group">
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Service Requested:</label>
																		<p class="form-control-static col-md-8" id="lbl_type_of_service">LESS THAN TRUCK (LTL)</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Shipment Description:</label>
																		<p class="form-control-static col-md-8" id="lbl_item_description">PALLET OF WATER</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Shipment Type:</label>
																		<p class="form-control-static col-md-8" id="lbl_item_type">PALLET OF WATER</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Measurements (LxWxH):</label>
																		<p class="form-control-static col-md-8" id="lbl_item_measure">48 x 40 x 36</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Condition:</label>
																		<p class="form-control-static col-md-8" id="lbl_item_condition">NEW</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Is It Hazardous?:</label>
																		<p class="form-control-static col-md-8" id="lbl_item_hazardous">NO</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Pieces & Weight:</label>
																		<p class="form-control-static col-md-8" id="lbl_item_pieces_weight">1 - 1500 LBS</p>
																	</div>
																	<div class="col-md-12">
																		<label class="control-label col-md-4">Additional Info:</label>
																		<p class="form-control-static col-md-8" id="lbl_item_info">1 - 1500 LBS</p>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="tab-pane" id="tab5">
												<h3 class="block" align="center">Your Pre-Quote is Ready</h3>
												<div class="row" align="center">
													<div class="col-md-4">&nbsp;</div>
													<div class="col-md-4">
														<a class="dashboard-stat dashboard-stat-light blue-madison"  data-toggle="modal" href="#price_modal" >
															<div class="visual">
																<i class="fa fa-truck fa-icon-medium"></i>
															</div>
															<div class="details">
																<div class="number" id="shipment_price">

																</div>
																<div class="desc" id="lbl_quote_from_to">

																</div>
															</div>
														</a>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="form-actions">
										<div class="row">
											<div class="col-md-offset-3 col-md-9">
												<a href="javascript:;" class="btn default button-previous" onclick="hideBtnConfirm()">
												<i class="m-icon-swapleft"></i> Back </a>
												<a href="javascript:;" class="btn blue button-next" id="btn_continue" onclick="updateView();">
												Continue <i class="m-icon-swapright m-icon-white"></i>
												</a>
												<a class="btn green" id="btn_confirm_quote" onclick="confirmQuote();" style="visibility:hidden">
												Confirm Quote <i class="m-icon-swapright m-icon-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!-- END PAGE CONTENT INNER -->

			<div class="modal fade small" id="price_modal" tabindex="-1" role="basic" aria-hidden="true">
				<form action="" method="POST">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
								<h4 class="modal-title">Quote Details</h4>
							</div>
							<div class="modal-body">
								<div class="row">
									<div class="col-md-6">
										<h4>Ship From</h4>
									</div>
									<div class="col-md-6">
										<h4>Ship To</h4>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<label class="control-label" id="lbl_modal_from"></label>
									</div>
									<div class="col-md-6">
										<label class="control-label" id="lbl_modal_to"></label>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<label class="control-label" id="lbl_modal_pdate"></label>
									</div>
									<div class="col-md-6">
										<label class="control-label" id="lbl_modal_ddate"></label>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12" >
										<div id="myDynamicTable">
										</div>
										<input type="hidden" id="store_price">
										<input type="hidden" id="store_fuel">
										<input type="hidden" id="store_over_miles">
										<input type="hidden" id="store_over_weight">
										<input type="hidden" id="store_accesorials">
										<input type="hidden" id="store_miles">
										<input type="hidden" id="store_iRate">
										<input type="hidden" id="store_InterState">
									</div>
								</div>
							</div>

							<div class="modal-footer">
								<button type="button" class="btn default" data-dismiss="modal">Close</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
				</form>
				<!-- /.modal-dialog -->
			</div>

			<div class="modal fade small" id="loading_modal" tabindex="-1" role="basic" aria-hidden="true">
				<div class="modal-dialog">
					<img src="{{asset('static/logo/loading.gif')}}" class="img-responsive"/>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>

			<div class="modal fade small" id="confirm_modal" tabindex="-1" role="basic" aria-hidden="true">
				<form action="" method="POST">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
								<h4 class="modal-title">Please Complete your Info!!</h4>
							</div>
							<div class="modal-body">
								<div class="row">
									<div class="col-md-12">
										<label>Full Name</label>
										<div class="form-group">
											<div class="input-icon">
												<i class="fa fa-user"></i>
												<input type="text" class="form-control" id="full_name" name="full_name" value="{{session('Name')}}" style="text-transform:uppercase" required>
											</div>
										</div>
									</div>
									<div class="col-md-12">
										<label>Phone</label>
										<div class="form-group">
											<div class="input-icon">
												<i class="fa fa-envelope"></i>
												<input type="email" class="form-control phone_us" id="contact_phone" name="contact_phone" value="{{session('Phone')}}" required>
											</div>
										</div>
									</div>
									<div class="col-md-12">
										<label>Email</label>
										<div class="form-group">
											<div class="input-icon">
												<i class="fa fa-envelope"></i>
												<input type="email" class="form-control" id="email_address" name="email_address" value="{{session('Email')}}" required>
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-lg-12 margin-bottom-10">
										<a class="dashboard-stat dashboard-stat-light" style="background: #6B8068">
											<div class="visual">
												<i class="fa fa-money fa-icon-medium" style="color:white"></i>
											</div>
											<div class="details">
												<div class="number" id="shipment_price_confirm" style="color:white">

												</div>
											</div>
										</a>
									</div>
								</div>
							</div>

							<div class="modal-footer">
								<button type="button" class="btn default" data-dismiss="modal">Close</button>
								<button type="button" class="btn green" id="btn_store_quote">Finish</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
				</form>
				<!-- /.modal-dialog -->
			</div>

			<div class="modal fade small" id="contact_modal" tabindex="-1" role="basic" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
							<h4 class="modal-title">Alert!!</h4>
						</div>
						<div class="modal-body">
							<div class="row">
								<div class="form-group" >
									<h2 align="center">Please contact us</h2>
									<div class="col-md-6 col-sm-12" align="center">
										<a class="icon-btn" style="width: 100%; height: 200px;" id="icon_phone">
											<img src="{{asset('static/assets/global/img/icon/phone.png')}}" style="height: 50px; width: 50px;">
											<div id="txt_ltl" style="font-size: 18px;padding-top:25px;font-weight:bold;font-family:'Open Sans', sans-serif;">
												Phone
												<div style="font-size:14px;padding-top:25px;font-weight:normal;">
													Talk to a member of our sales team.<br><br><b style="text-size:16px">800-717-5093</b>
												</div>
											</div>
										</a>
									</div>
									<div class="col-md-6 col-sm-12" align="center" >
										<a class="icon-btn" style="width: 100%; height: 200px" id="icon_email">
										<img src="{{asset('static/assets/global/img/icon/email.png')}}" style="height: 50px; width: 50px;">
											<div id="txt_small_parcel" style="font-size: 18px;padding-top:25px;font-weight:bold;font-family:'Open Sans', sans-serif;">
												Email
												<div style="font-size:14px;padding-top:25px;font-weight:normal;">
													Email us with any questions or inquiries.<br><br><b style="text-size:16px">sales@spotship.com</b>.
												</div>
											</div>
										</a>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn default" data-dismiss="modal">Close</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>

			<div class="modal fade lg" id="coverage_modal" tabindex="-1" role="basic" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
							<h4 class="modal-title">UCFS Coverage!!</h4>
						</div>
						<div class="modal-body">
							<div class="row">
								<div class="form-group" >
									<h2 align="center">Consult SPOTSHIP Coverage</h2>
									<div class="col-md-12 col-sm-12" align="center">
										<table class="table table-striped table-bordered table-hover" id="sample_1">
											<thead>
												<tr>
													<th>City</th>
													<th>Zip Code</th>
													<th>Service By</th>
													<th hidden></th>
													<th hidden></th>
													<th hidden></th>

												</tr>
											</thead>
											<tbody>
												@foreach ($Coverage as $postalcode)
												<tr>
													<td style="text-align: center">
														{{$postalcode->City}}
													</td>
													<td style="text-align: center">
														{{$postalcode->ZipCode}}
													</td>
													<td style="text-align: center">
														{{$postalcode->Depot}}
													</td>
													<td hidden></td>
													<td hidden></td>
													<td hidden></td>
												</tr>
												@endforeach
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn default" data-dismiss="modal">Close</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
		</div>
	</div>
	<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
</html>@endsection