@extends('layaout.layaout')
@extends('layaout.head')
@extends('layaout.menu')
@section('content')
<!-- BEGIN PAGE CONTENT -->
	<div class="page-content">
		<div class="container">
			<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
			<div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Modal title</h4>
						</div>
						<div class="modal-body">
							 Widget settings form goes here
						</div>
						<div class="modal-footer">
							<button type="button" class="btn blue">Save changes</button>
							<button type="button" class="btn default" data-dismiss="modal">Close</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!-- /.modal -->
			<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
			<!-- BEGIN PAGE BREADCRUMB -->
				{{-- <ul class="page-breadcrumb breadcrumb">
					<li>
						<a href="#">Home</a><i class="fa fa-circle"></i>
					</li>
					<li>
						<a href="form_wizard.html">UI Components</a>
						<i class="fa fa-circle"></i>
					</li>
					<li class="active">
						Form Wizard
					</li>
				</ul> --}}
			<!-- END PAGE BREADCRUMB -->
			<!-- BEGIN PAGE CONTENT INNER -->
			<div class="row">
				<div class="col-md-12">
					<div class="portlet light" id="form_wizard_1">
						<div class="portlet-title">
							{{-- <div class="caption">
								<img src="{{asset('static/logo/spotship_logo.png')}}" alt="logo" class="logo-default" height="200px" width="200px">
							</div> --}}
						</div>
						<div class="portlet-body form">
							<form action="javascript:;" class="form-horizontal" id="submit_form" method="POST">
								<div class="form-wizard">
									<div class="form-body">
										<ul class="nav nav-pills nav-justified steps" hidden>
											<li>
												<a href="#tab1" data-toggle="tab" class="step">
												<span class="number">
												1 </span>
												<span class="desc">
												<i class="fa fa-check"></i> Loading Date </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> Type of service </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> Shipping from </span>
												</a>
											</li>
											<li>
												<a href="#tab4" data-toggle="tab" class="step active">
												<span class="number">
												4 </span>
												<span class="desc">
												<i class="fa fa-check"></i> Shipping to </span>
												</a>
											</li>
											<li>
												<a href="#tab5" data-toggle="tab" class="step active">
												<span class="number">
												5 </span>
												<span class="desc">
												<i class="fa fa-check"></i> Packages </span>
												</a>
											</li>
											<li>
												<a href="#tab6" data-toggle="tab" class="step">
												<span class="number">
												6 </span>
												<span class="desc">
												<i class="fa fa-check"></i> Confirm </span>
												</a>
											</li>
											<li>
												<a href="#tab7" data-toggle="tab" class="step">
												<span class="number">
												7 </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">
											<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">
												<h3 class="block" align="center">Start your Quote</h3>
												<div class="row">
													<div class="col-md-3">
														<label>Requested Pick Up date</label>
														<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)">
																</div>
															</div>
														</div>
													</div>
													{{-- <div class="col-md-3">
														<label>Origin (Zip Code)</label>
														<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="origin_zipcode" name="origin_zipcode" maxlength="5" required>
																</div>
															</div>
														</div>
													</div> --}}
													{!! csrf_field() !!}
													<div class="col-md-3">
														<div class="row" id="list_pu_zipcodes">
															<label>Origin (Zip Code / City)</label>
															<div class="col-md-12">
																<div class="form-group">
																	<input type="text" class="form-control" placeholder="Ship From Zip Code or City" id="origin_zipcode" name="origin_zipcode" list="pu_zipcodes">                                 
																</div>
																<datalist id="pu_zipcodes">
																	
																</datalist>
															</div>
														</div>
													</div>

													<div class="col-md-3">
														<label>Requested Delivery date</label>
														<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)">
																</div>
															</div>
														</div>
													</div>
													<div class="col-md-3">
														<div class="row" id="list_del_zipcodes">
															<label>Destination (Zip Code / City)</label>
															<div class="col-md-12">
																<div class="form-group">
																	<input type="text" class="form-control" placeholder="Ship From Zip Code or City" id="destination_zipcode" name="destination_zipcode" list="del_zipcodes">                                 
																</div>
																<datalist id="del_zipcodes">
																	
																</datalist>
															</div>
														</div>
													</div>
													{{-- <div class="col-md-3">
														<label>Destination (Zip Code)</label>
														<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="destination_zipcode" name="destination_zipcode" maxlength="5" required>
																</div>
															</div>
														</div>
													</div> --}}
												</div>
											</div>
											<div class="tab-pane" id="tab2">
												<h3 class="block" align="center">Type of service</h3>
												<div class="row">
													<div class="col-md-12">
														{{-- <label>Type of service</label> --}}
														<div class="row">
															<div class="col-md-4" align="center">
																<div class="form-group">
																	<a onclick="changeColorIcon(1)" class="icon-btn" style="width: 200px; height: 200px"  id="icon_ltl">
																		{{-- <i class="fa fa-truck" id="icon_ltl" style="font-size: 34px; padding-top:50px;"></i> --}}
																		<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;">
																			LTL
																			<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																				Less than truckload, hazmat and trade show quotes
																			</div>
																		</div>
																		</a>
																</div>
															</div>
															<div class="col-md-4" align="center" >
																<div class="form-group">
																	<a onclick="changeColorIcon(2)" class="icon-btn" style="width: 200px; height: 200px" id="icon_small_parcel">
																		{{-- <i class="fa fa-envelope" style="font-size: 34px; padding-top:50px;""></i> --}}
																		<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;">
																			Small Parcel
																			<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																				Quotes for booking with a small parcel carrier
																			</div>
																		</div>
																		</a>
																</div>
															</div>
															<div class="col-md-4" align="center" >
																<div class="form-group" >
																	<a onclick="changeColorIcon(3)" class="icon-btn" style="width: 200px; height: 200px" id="icon_tl">
																		{{-- <i class="fa fa-truck" id="icon_tl" style="font-size: 34px; padding-top:50px;"></i> --}}
																		<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;">
																				Quotes for dry van, flatbed, and temp controlled
																			</div>
																		</div>
																	</a>
																</div>
															</div>
															<input type="hidden" id="type_service">
														</div>
													</div>
												</div>
											</div>
											<div class="tab-pane" id="tab3">
												<h3 class="block" align="center">Shipping From</h3>
												<a id="APITEST"> ___</a>
												<div class="row">
													<div class="col-md-12">
														<div class="col-md-5">
															<label>Address</label>
															<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">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-3">
															<label>City</label>
															<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_city" name="from_city" style="text-transform:uppercase">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-2">
															<label>State</label>
															<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_state" name="from_state" style="text-transform:uppercase">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-2">
															<label>Zipcode</label>
															<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_zipcode" name="from_zipcode">
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-4" align="center">
														<div class="form-group">
															<a onclick="changeFromType(1)" class="icon-btn" style="width: 200px; height: 200px" id="icon_from_business">
																{{-- <i class="fa fa-bank" id="icon_from_business" style="font-size: 34px; padding-top:50px;"></i> --}}
																<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;"">
																	Business
																	<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																		Commercial buildings and areas
																	</div>
																</div>
																</a>
														</div>
													</div>
													<div class="col-md-4" align="center" >
														<div class="form-group">
															<a onclick="changeFromType(2)" class="icon-btn" style="width: 200px; height: 200px" id="icon_from_residential">
																{{-- <i class="fa fa-home" id="icon_from_residential" style="font-size: 34px; padding-top:50px;""></i> --}}
																<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;">
																		Home and home businesses
																	</div>
																</div>
																</a>
														</div>
													</div>
													<div class="col-md-4" align="center" >
														<div class="form-group" >
															<a onclick="changeFromType(3)" class="icon-btn" style="width: 200px; height: 200px" id="icon_from_carrier">
																{{-- <i class="fa fa-truck" id="icon_from_carrier" style="font-size: 34px; padding-top:50px;"></i> --}}
																<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 style="font-size:12px;padding-top:10px;font-weight:normal;">
																		Save money and skip the pickup services
																	</div>
																</div>
															</a>
														</div>
													</div>
													<input type="hidden" id="from_type">
												</div>
												<div class="row"">
													<div class="col-md-12" align="left">
														<label style="color: blue">Does this location match additional types? (optional)</label>
														<div class="form-group">
															<div class="col-md-4" align="left">
																<div class="checkbox-list">
																	<label class="checkbox">
																	<input type="checkbox" value="option1" id="chk_from_no_dock"> No Dock / Tight Space </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option2" id="chk_from_school"> School / University </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option3" id="chk_from_airport"> Airport </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option4" id="chk_from_military"> Military / Goverment </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option5" id="chk_from_gated"> Gated </label>
																</div>
															</div>
															<div class="col-md-4" align="left">
																<div class="checkbox-list">
																	<label class="checkbox">
																	<input type="checkbox" value="option4" id="chk_from_self_storage"> Self storage facility</label>
																	<label class="checkbox">
																	<input type="checkbox" value="option5" id="chk_from_farm"> Farm / Rural </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option6" id="chk_from_hotel"> Hotel </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option6" id="chk_from_police"> Police station / Prision </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option6" id="chk_from_apartment"> Apartment </label>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-12">
														<label style="color: blue">Do you need additional services at the <b>pick up location</b>?</label>
													</div>
													<div class="col-md-4" align="center">
														<div class="form-group">
															<a onclick="pickUpLiftGate()" class="icon-btn" style="width: 200px; height: 200px" id="icon_from_liftgate">
																{{-- <i class="fa fa-bank" id="icon_from_liftgate" style="font-size: 34px; padding-top:50px;"></i> --}}
																<img src="{{asset('static/assets/global/img/icon/delivery.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																<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;padding-top:25px;font-weight:normal;">
																		When the location doesn't have a loading dock and your shipment is too heavy to lift without assistance
																	</div>
																</div>
																<input type="hidden" id="chk_puLiftgate" value="0">
															</a>
														</div>
													</div>
													<div class="col-md-4" align="center" >
														<div class="form-group">
															<a onclick="pickUpInside(2)" class="icon-btn" style="width: 200px; height: 200px" id="icon_from_inside">
																{{-- <i class="fa fa-home" id="icon_from_inside" style="font-size: 34px; padding-top:50px;""></i> --}}
																<img src="{{asset('static/assets/global/img/icon/inside_delivery.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																<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 the location
																	<div style="font-size:12px;padding-top:5px;font-weight:normal;">
																		When the driver needs to move the shipment from somewhere other than directly behind the truck
																	</div>
																</div>
																<input type="hidden" id="chk_puInside" value="0">
															</a>
														</div>
													</div>
													
												</div>
											</div>
											<div class="tab-pane" id="tab4">
												<h3 class="block" align="center">Shipping To</h3>
												<div class="row">
													<div class="col-md-12">
														<div class="col-md-5">
															<label>Address</label>
															<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">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-3">
															<label>City</label>
															<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_city" name="to_city" style="text-transform:uppercase">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-2">
															<label>State</label>
															<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_state" name="to_state" style="text-transform:uppercase">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-2">
															<label>Zipcode</label>
															<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_zipcode" name="to_zipcode">
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-4" align="center">
														<div class="form-group">
															<a onclick="changeToType(1)" class="icon-btn" style="width: 200px; height: 200px" id="icon_to_business">
																{{-- <i class="fa fa-bank" id="icon_from_business" style="font-size: 34px; padding-top:50px;"></i> --}}
																<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;"">
																	Business
																	<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																		Commercial buildings and areas
																	</div>
																</div>
																</a>
														</div>
													</div>
													<div class="col-md-4" align="center" >
														<div class="form-group">
															<a onclick="changeToType(2)" class="icon-btn" style="width: 200px; height: 200px" id="icon_to_residential">
																{{-- <i class="fa fa-home" id="icon_from_residential" style="font-size: 34px; padding-top:50px;""></i> --}}
																<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;">
																		Home and home businesses
																	</div>
																</div>
																</a>
														</div>
													</div>
													<div class="col-md-4" align="center" >
														<div class="form-group" >
															<a onclick="changeToType(3)" class="icon-btn" style="width: 200px; height: 200px" id="icon_to_carrier">
																{{-- <i class="fa fa-truck" id="icon_from_carrier" style="font-size: 34px; padding-top:50px;"></i> --}}
																<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 style="font-size:12px;padding-top:10px;font-weight:normal;">
																		Save money and skip the delivery services
																	</div>
																</div>
															</a>
														</div>
													</div>
													<input type="hidden" id="to_type">
												</div>
												<div class="row"">
													<div class="col-md-12" align="left">
														<label style="color: blue">Does this location match additional types? (optional)</label>
														<div class="form-group">
															<div class="col-md-4" align="left">
																<div class="checkbox-list">
																	<label class="checkbox">
																	<input type="checkbox" value="option1" id="chk_to_no_dock"> No Dock / Tight Space </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option2" id="chk_to_school"> School / University </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option3" id="chk_to_airport"> Airport </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option4" id="chk_to_military"> Military / Goverment </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option5" id="chk_to_gated"> Gated </label>
																</div>
															</div>
															<div class="col-md-4" align="left">
																<div class="checkbox-list">
																	<label class="checkbox">
																	<input type="checkbox" value="option4" id="chk_to_self_storage"> Self storage facility</label>
																	<label class="checkbox">
																	<input type="checkbox" value="option5" id="chk_to_farm"> Farm / Rural </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option6" id="chk_to_hotel"> Hotel </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option6" id="chk_to_police"> Police station / Prision </label>
																	<label class="checkbox">
																	<input type="checkbox" value="option6" id="chk_to_apartment"> Apartment </label>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-12">
														<label style="color: blue">Do you need additional services at the <b>delivery location</b>?</label>
													</div>
													<div class="col-md-4" align="center">
														<div class="form-group">
															<a onclick="deliveryLiftGate()" class="icon-btn" style="width: 200px; height: 200px" id="icon_to_liftgate">
																{{-- <i class="fa fa-bank" id="icon_from_liftgate" style="font-size: 34px; padding-top:50px;"></i> --}}
																<img src="{{asset('static/assets/global/img/icon/delivery.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																<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;padding-top:25px;font-weight:normal;">
																		When the location doesn't have a loading dock and your shipment is too heavy to lift without assistance
																	</div>
																</div>
																<input type="hidden" id="chk_delLiftgate" value="0">
															</a>
														</div>
													</div>
													<div class="col-md-4" align="center" >
														<div class="form-group">
															<a onclick="deliveryInside()" class="icon-btn" style="width: 200px; height: 200px" id="icon_to_inside">
																{{-- <i class="fa fa-home" id="icon_from_inside" style="font-size: 34px; padding-top:50px;""></i> --}}
																<img src="{{asset('static/assets/global/img/icon/inside_delivery.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																<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 the location
																	<div style="font-size:12px;padding-top:5px;font-weight:normal;">
																		When the driver needs to move the shipment from somewhere other than directly behind the truck
																	</div>
																</div>
																<input type="hidden" id="chk_delInside" value="0">
															</a>
														</div>
													</div>
													<div class="col-md-4" align="center" >
														<div class="form-group">
															<a onclick="deliveryAppointment()" class="icon-btn" style="width: 200px; height: 200px" id="icon_appointment">
																{{-- <i class="fa fa-home" id="icon_appointment" style="font-size: 34px; padding-top:50px;""></i> --}}
																<img src="{{asset('static/assets/global/img/icon/appointment.png')}}" style="height: 50px; width: 50px;margin-top: 20px;">
																<div id="txt_appointment" style="font-size: 16px;padding-top:12px;font-weight:bold;font-family:'Open Sans', sans-serif;">
																	Appointment Fee
																	<div style="font-size:12px;padding-top:25px;font-weight:normal;">
																		When the carrier is required to contact final delivery location for specific appointment window
																	</div>
																</div>
																<input type="hidden" id="chk_delAppointment" value="0">
															</a>
														</div>
													</div>													
												</div>
											</div>
											<div class="tab-pane" id="tab5">
												<h3 class="block" align="center">Package Information</h3>
												<div class="row" id="item_1">
													<div class="col-md-12">
														<div class="col-md-6">
															<label>Item Description</label>
															<div class="col-md-12">
																<div class="form-group">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="text" class="form-control" id="item_description" name="item_description">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-3">
															<div class="form-group">
																<label>Item Condition</label>
																<div class="radio-list">
																	<label class="radio-inline">
																	<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> New </label>
																	<label class="radio-inline">
																	<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Used </label>
																</div>
															</div>
														</div>
														<div class="col-md-3">
															<div class="form-group">
																<label>Is item hazardous?</label>
																<div class="radio-list">
																	<label class="radio-inline">
																	<input type="radio" name="optionsRadios1" id="optionsRadios11" value="option1"> Yes </label>
																	<label class="radio-inline">
																	<input type="radio" name="optionsRadios1" id="optionsRadios12" value="option2" checked> No </label>
																</div>
															</div>
														</div>
													</div>
													<div class="col-md-12">
														<div class="col-md-6">
															<div class="col-md-12">
																<div class="form-group">
																	<label>Packaging Type</label>
																	<select class="form-control" onchange="changeDimensions()" id="packaging_type">
																		<option></option>
																		<option value="1">Pallet (48 x 40)</option>
																		<option value="2">Pallet (48 x 48)</option>
																		<option value="3">Box</option>
																		<option value="4">Crate</option>
																		<option value="5">Roll</option>
																		<option value="6">Bale</option>
																	</select>
																</div>
															</div>
														</div>
														<div class="col-md-2">
															<div class="col-md-12">
																<div class="form-group">
																	<label>Length</label>
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="text" class="form-control" id="item_length" name="item_length">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-2">
															<div class="col-md-12">
																<div class="form-group">
																	<label>Width</label>
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="text" class="form-control" id="item_width" name="item_width">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-2">
															<div class="col-md-12">
																<div class="form-group">
																	<label>Heigth</label>
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="text" class="form-control" id="item_heigth" name="item_heigth">
																	</div>
																</div>
															</div>
														</div>
													</div>
													<div class="col-md-12">
														<div class="col-md-3">
															<label>Number of packages</label>
															<div class="col-md-12">
																<div class="form-group">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="text" class="form-control" id="item_number" name="item_number">
																	</div>
																</div>
															</div>
														</div>
														<div class="col-md-3">
															<label>Total weight</label>
															<div class="col-md-12">
																<div class="form-group">
																	<div class="input-icon">
																		<i class="fa fa-cube"></i>
																		<input type="text" class="form-control" id="item_weight" name="item_weight">
																	</div>
																</div>
															</div>
														</div>
														{{-- <div class="col-md-6">
															<div class="col-md-12">
																<label style="color: blue">Shipment: 1 Pallet (48 x 48), Weight: 500 lbs</label>
															</div>
														</div> --}}
													</div>
													{{-- <div class="col-md-12">
														<div class="col-md-12" align="center">
															<button type="button" class="btn btn-circle btn-danger" onclick="newItem()">Add Item</button>
														</div>
													</div> --}}
												</div>
											</div>
											<div class="tab-pane" id="tab6">
												<h3 class="block" align="center">Shipment Confirmation</h3>
												<div class="row">
													<div class="col-md-4">
														<div class="form-group">
															<label class="control-label col-md-6">Type of service:</label>
															<div class="col-md-6">
																<p class="form-control-static" id="lbl_type_of_service"></p>
															</div>
														</div>
													</div>
													<div class="col-md-4">
														<div class="form-group">
															<label class="control-label col-md-4">Pick Up Date:</label>
															<div class="col-md-8">
																<p class="form-control-static" id="lbl_pickup_date"></p>
															</div>
														</div>
													</div>
													<div class="col-md-4">
														<div class="form-group">
															<label class="control-label col-md-4">Delivery Date:</label>
															<div class="col-md-8">
																<p class="form-control-static" id="lbl_delivery_date"></p>
															</div>
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-6">
														<h4 class="form-section">Pick Up Information</h4>
														<div class="form-group">
															<label class="control-label col-md-4">Address:</label>
															<div class="col-md-8">
																<p class="form-control-static" id="lbl_pickup_address"></p>
															</div>
														</div>
														<div class="form-group">
															<label class="control-label col-md-4">Location Type:</label>
															<div class="col-md-8">
																<p class="form-control-static" id="lbl_pickup_location_type"></p>
															</div>
														</div>
														<div class="form-group">
															<label class="control-label col-md-4">Additional Pick Up Services:</label>
															<div class="col-md-8">
																<p class="form-control-static" id="lbl_pickup_add_services"></p>
															</div>
														</div>
													</div>
													<div class="col-md-6">
														<h4 class="form-section">Delivery Information</h4>
														<div class="form-group">
															<label class="control-label col-md-4">Address:</label>
															<div class="col-md-8">
																<p class="form-control-static" id="lbl_delivery_address"></p>
															</div>
														</div>
														<div class="form-group">
															<label class="control-label col-md-4">Location Type:</label>
															<div class="col-md-8">
																<p class="form-control-static" id="lbl_delivery_location_type"></p>
															</div>
														</div>
														<div class="form-group">
															<label class="control-label col-md-4">Additional Delivery Services:</label>
															<div class="col-md-8">
																<p class="form-control-static" id="lbl_delivery_add_services"></p>
															</div>
														</div>
													</div>
												</div>
												<div class="row">
													<h4 class="form-section">Packaging Information</h4>
													<div class="col-md-12">
														<div class="col-md-4">
															<div class="form-group">
																<label class="control-label col-md-5">Item Description:</label>
																<div class="col-md-7">
																	<p class="form-control-static" id="lbl_item_description"></p>
																</div>
															</div>
														</div>
														<div class="col-md-4">
															<div class="form-group">
																<label class="control-label col-md-4">Package Type:</label>
																<div class="col-md-6">
																	<p class="form-control-static" id="lbl_package_type"></p>
																</div>
															</div>
														</div>
														<div class="col-md-4">
															<div class="form-group">
																<label class="control-label col-md-6">Condition:</label>
																<div class="col-md-6">
																	<p class="form-control-static" id="lbl_condition_package"></p>
																</div>
															</div>
														</div>
													</div>
													<div class="col-md-12">
														<div class="col-md-4">
															<div class="form-group">
																<label class="control-label col-md-6">Is hazardous material?:</label>
																<div class="col-md-6">
																	<p class="form-control-static" id="lbl_hazardous_package"></p>
																</div>
															</div>
														</div>
														<div class="col-md-4">
															<div class="form-group">
																<label class="control-label col-md-6">Number of Package:</label>
																<div class="col-md-6">
																	<p class="form-control-static" id="lbl_number_packages"></p>
																</div>
															</div>
														</div>
														<div class="col-md-4">
															<div class="form-group">
																<label class="control-label col-md-6">Weigth:</label>
																<div class="col-md-6">
																	<p class="form-control-static" id="lbl_weight_package"></p>
																</div>
															</div>
														</div>
														
													</div>
												</div>
												
											</div>
											<div class="tab-pane" id="tab7">
												<h3 class="block" align="center">Your Pre-Quote is Ready</h3>
												<div class="row" align="center">
														<div class="col-lg-3 margin-bottom-10">&nbsp;</div>
														<div class="col-lg-6 margin-bottom-10">
															<a class="dashboard-stat dashboard-stat-light blue-madison" href="javascript:;">
															<div class="visual">
																<i class="fa fa-truck fa-icon-medium"></i>
															</div>
															<div class="details">
																<div class="number" id="QuoteAPITEST">

																	

																</div>
																<div class="desc" id="lbl_quote_from_to">
																	From - Los Angeles to San Diego<br>
																	LTL Service
																</div>
															</div>
															</a>
														</div>
														
												
												</div>
														
													
												</div>
												
											</div>
										</div>
									</div>
									<div class="form-actions">
										<div class="row">
											<div class="col-md-12 col-md-9" align = "center">
												<a href="javascript:;" class="btn default button-previous">
												<i class="m-icon-swapleft"></i> Back </a>
												<a href="javascript:;" class="btn blue button-next" onclick="updateView()">
												Continue <i class="m-icon-swapright m-icon-white"></i>
												</a>
												<button class="btn green button-submit">
												Submit <i class="m-icon-swapright m-icon-white"></i>
												</button>
											</div>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!-- END PAGE CONTENT INNER -->
		</div>
	</div>
	<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
@endsection