@extends('layouts.default')

@section('page_css')
        @include('includes.portal-css')	
@stop
        
 @section('content')
   
  <!-- Breadcroumbs start -->
  <div class="wshipping-content-block wshipping-breadcroumb track-banner">
    <div class="container">
      <div class="row">
         <div class="col-12 col-lg-6">
            <h1>Tracking</h1>
            <a href="{{URL('/')}}" title="Home">Home</a> / Tracking
         </div>
         <div class="col-12 col-lg-6 text-right">
          <h4>We freight to all over the world,
            The best logistic company, <span>FAST</span> and <span>SAFELY!</span></h4>
          </div>
      </div>
    </div>
  </div>
  <!-- Breadcroumbs end -->
  
  <!-- Tracking start -->
  <div class="wshipping-content-block">
    <div class="container">
      <div class="row">
         <div class="col-12 col-lg-6 offset-lg-3">
            <div class="section-title wow fadeInUp">
               <h2>Track a shipment</h2>
               <p>Track your LTL, truckload, or intermodal shipment by entering your <span>Track number</span> below to get instant freight tracking information.</p>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-12 col-lg-12">
            <div class="tracking-block">
              @include('includes.laravel-responce-message-block') 
               <ul class="nav nav-tabs" role="tablist">
                 <li class="nav-item"><a class="nav-link active" href="#track-by-number" aria-controls="track-by-number" role="tab" data-toggle="tab">Track by Number</a></li>
<!--                  <li class="nav-item"><a class="nav-link" href="#track-by-reference" aria-controls="track-by-reference" role="tab" data-toggle="tab">Track by Reference</a></li> -->
              </ul>
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="track-by-number">
                 <h3>Air Freight Tracking</h3>
                 <div class="put-track-number">

                 <form action="{{ route('ups-shipment-track') }}" method="get" data-parsley-validate> 
                  <div class="form-group track-input mr-2">

                   <input type="text" class="form-control track-id" name="trackid" placeholder="Track ID" data-parsley-required maxlength="34" minlength="7"  />

                  </div>
                  <div class="form-group track-btn">
                   <button type="submit" class="btn btn-track btn-1">Track</button>
                   <!-- <button type="button" class="btn btn-track btn-1">Track</button> -->
                  </div>
                 </form>
                </div>
                <div class="track-bottom-link"><a href="{{URL('/contact')}}">Need Help?</a> <span>|</span> <a href="{{URL('/ups/shipment/list')}}">Your Order list</a></div>
               </div>
               <div role="tabpanel" class="tab-pane" id="track-by-reference">
                <div class="put-reference-number">
                 <form action="customer-register.html">
                  <div class="form-group">
                    <div class="row">
                      <div class="col-12 col-md-6 col-lg-4">
                       <label>Shipment Reference (BOL or PO):</label>
                       <input type="text" class="form-control" name="RefNumber" required />
                      </div>
                      <div class="col-12 col-md-6 col-lg-4">
                       <label>Shipment Date Start:</label>
                       <div class="input-group date" data-provide="datepicker">
                         <input type="text" class="form-control" name="startDate" required />
                         <div class="input-group-addon"><span class="glyphicon glyphicon-th"></span></div>
                       </div>
                      </div>
                      <div class="col-12 col-md-6 col-lg-4">
                       <label>Shipment Date End:</label>
                       <div class="input-group date" data-provide="datepicker">
                         <input type="text" class="form-control" name="EndDate" required />
                         <div class="input-group-addon"><span class="glyphicon glyphicon-th"></span></div>
                      </div>
                      </div>
                    </div>    
                  </div>
                  <div class="form-group">
                    <div class="row">
                      <div class="col-12 col-md-6 col-lg-6">
                       <label>Origin Country:</label>
                       <select class="form-control" name="OriginCountry">
                        <option>United State</option>
                        <option>Canada</option>
                        <option>Maxico</option>
                        <option>Caina</option>
                      </select>
                      </div>
                      <div class="col-12 col-md-6 col-lg-6">
                       <label>Origin ZIP/Postal Code:</label>
                       <input type="text" class="form-control" name="OriginZip" required />
                      </div>
                    </div>    
                  </div>
                  <div class="form-group">
                    <div class="row">
                      <div class="col-12 col-md-6 col-lg-6">
                       <label>Destination Country: </label>
                       <select class="form-control" name="dcountry">
                        <option>United State</option>
                        <option>Canada</option>
                        <option>Maxico</option>
                        <option>Caina</option>
                      </select>
                      </div>
                      <div class="col-12 col-md-6 col-lg-6">
                       <label>Destination ZIP/Postal Code:</label>
                       <input type="text" class="form-control" name="DZip" required />
                      </div>
                    </div>    
                  </div>
                  <button type="submit" class="btn btn-submit">Track</button>
                </form> 
                </div>
               </div>
             </div> 
            </div>
         </div>
         <!-- Right sidebar start --> 
         <!-- <div class="col-12 col-lg-3">
            <div class="right-block left-menu menu-with-title mt40">
               <h4 class="title-with-bg">Select Your Freight</h4>
               <ul>
                  <li class="active"><a href="" title="Air Freight Tracking">Air Freight Tracking</a></li>
                  <li><a href="" title="Ocean Freight Tracking">Ocean Freight Tracking</a></li>
                  <li><a href="" title="Road & Rail Freight Tracking">Road & Rail Freight Tracking</a></li>
               </ul>
            </div>
         </div> -->
         <!-- Right sidebar end --> 
      </div>
    </div>
  </div>
  <!-- Tracking end --> 
  
  <!-- Send free quote start -->  
  <div class="wshipping-content-block get-quote">
    <div class="container">
      <div class="row">
        <div class="col-md-8"><h4>We Are Always In Here, <span>Need any Help?</span></h4></div>
        <div class="col-md-4 text-right"><a href="{{URL('/contact')}}" title="" class="wshipping-button btn-1">Contact With Us</a></div>
      </div>
    </div>
  </div>  
  <!-- Send free quote end -->  
  
 @section('javascript')
  @include('includes.portal-script')	
@stop
@endsection