@extends('admin.layaouts.layaout')
@extends('admin.layaouts.navbar')
@extends('admin.layaouts.sidebar')
@section('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="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> Shipping Info </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 & Packaging</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">
                                <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 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-12">
                                            <div class="col-md-6">
                                                <h2 align="center">Ship 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>
                                                        </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="Sender" 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-6">
                                                        <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>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <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>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div id="list_pu_zipcodes">
                                                            <div class="input-icon">
                                                                <i class="fa fa-map-marker"></i>
                                                                <input type="text" class="form-control" placeholder="FROM ZIP CODE" id="origin_zipcode" name="origin_zipcode" list="pu_zipcodes" maxlength="5" minlength="5">
                                                                <datalist id="pu_zipcodes"></datalist>
                                                            </div>
                                                        </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
                                                                </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-6">
                                                <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)">
                                                        </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-phone"></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-6">
                                                        <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"">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <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">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div id="list_del_zipcodes">
                                                            <div class="input-icon">
                                                                <i class="fa fa-map-marker"></i>
                                                                <input type="text" class="form-control" placeholder="TO ZIP CODE" id="destination_zipcode" name="destination_zipcode" list="del_zipcodes" minlength="5" maxlength="5" required">
                                                                <datalist id="del_zipcodes"></datalist>
                                                            </div>
                                                        </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
                                                                    </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 & Packaging</h1>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="col-md-6">
                                                <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 quotes
                                                                </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-6">
                                                <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 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>
                                            </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-12">
                                            <div class="col-md-6">
                                                <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>
                                                            <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-6">
                                                <h1 class="block" align="center">Additional Delivery Services</h1>
                                                <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>
                                                        </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 DELIVEREY"></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-12">
                                            <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">Sender:</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 Instrucions:</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 Instrucions:</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">Service & Package</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">Package 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">Package 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">Measure (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 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 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>
<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>
@endsection