Checkout Delivery

URL:

/user/order/deliverydetail?orderId%5B0%5D=00000

Progress Bar

<div class="delivery-top-sec">
   <div class="container">
      <div class="checkout-top-processbar">
         <div class="order-prcs-tmln-sec active1">
            <span class="prcs-icon prcs-icon-1">DELIVERY</span>
            <span class="tmln tmln1"></span>
            <span class="prcs-icon prcs-icon-2">REVIEW</span>
            <span class="tmln tmln2"></span>
            <span class="prcs-icon prcs-icon-3">PAY</span>
         </div>
      </div>
   </div>
</div>

Already Register ?

<div class="container">
<div class="delivery-top-white-box">
   <div class="cart-top-sec-left">
      <p>Already registered with us?</p>
   </div>
   <div class="cart-top-sec-right">
      <a href="#" class="btn-black-cmn gust-sign-in"
         id="register-modal-checkout">
      SIGN IN NOW</a>
   </div>
</div>
</div>

Buyers Info

<div class="container">
<div class="delivery-top-white-box"> … </div>
<div class="delivery_white_section">
<div class="delivery-setting">
   <div class="item-form-group">
      <div class="col-md-6">
         <label>FIRST NAME</label>
         <input name="first-name" class="required"
            id="FirstName" type="text" value="Grezia">
      </div>
      <div class="col-md-6">
         <label>LAST NAME</label>
         <input name="last-name" class="required" id="LastName"
            type="text" value="Clarkson">
      </div>
   </div>
   <div class="item-form-group">
      <div class="col-md-6">
         <label>NOTIFICATION EMAIL</label>
         <input name="notification-email" class="required
            emailOnly" id="notification-email" type="text"
            value="grez@gmail.com">
      </div>
      <div class="col-md-6">
         <label>CONTACT NUMBER</label>
         <input name="contact-number" class="required
            numbersOnly" id="ContactNumber" type="text"
            value="12345678">
      </div>
   </div>
</div>
</div>
</div>

Guest Delivery Address

<div class="container">
<div class="delivery-top-white-box"> … </div>
<div class="delivery_white_section">
   …
   <div class="delivery-address-sec">
      <div class="item-form-group">
         <div class="col-md-6">
            <label>ADDRESSEE FIRST NAME</label>
            <input name="ads-first-name" class="required"
               id="addresseeViewModel_AddresseeFirstName"
               type="text" value="">
         </div>
         <div class="col-md-6">
            <label>ADDRESSEE LAST NAME</label>
            <input name="ads-last-name" class="required"
               id="addresseeViewModel_AddresseeLastName" type="text"
               value="">
         </div>
      </div>
      <div class="item-form-group">
         <div class="col-md-12">
            <label>ADDRESS</label>
            <input name="address" class="big-textbox required"
               id="addresseeViewModel_Address" type="text" value="">
         </div>
      </div>
      <div class="item-form-group">
         <div class="col-md-6">
            <label>COUNTRY</label>
            <input type="hidden" id="countryValue">
            <select name="country" class="required" id="country">
               <option value="">SELECT COUNTRY</option>
               <option value="AF">Afghanistan</option>
               <option value="AL">Albania</option>
               <!--List of countries-->
            </select>
         </div>
         <div class="col-md-6">
            <label>STATE</label>
            <input type="text" name="state" id="state" class="">
         </div>
      </div>
      <div class="item-form-group">
         <div class="col-md-6">
            <label>CITY</label>
            <input type="text" name="city" id="city" class="required">
         </div>
         <div class="col-md-6">
            <label>POSTAL CODE</label>
            <input name="postalcode" class="required"
               id="addresseeViewModel_PostalCode" type="text"
               value="">
         </div>
      </div>
   </div>
</div>
</div>

Saved Address

<div class="delivery_white_section">
<div class="delivery-address-sec">
<div class="saved-address">
   <div data-id="51161" class="address-box col-md-4 col-sm-6 gutter-30">
      <div class="svd-adrsbox-inner active">
         <div class="description">
            Martin Rahardja<br>
            address <br>
            Albania<br>
            state<br>
            city<br>
            postal
         </div>
         <div class="action">
            <span class="fancy-radio address-sel">
            <input type="radio" id="delivery1"
               name="delivery-method" checked="checked"
               addressid="51161">
            <label class="selected_address"
               for="delivery1">SELECTED</label>
            </span>
            <span class="remove-address">
            <a href="javascript:void(0);"
               onclick="remove_address(51161)">
            <i class="icon icon-remove"></i>
            </a>
            </span>
         </div>
      </div>
   </div>
</div>
</div>
</div>

Add new button

<div class="delivery_white_section">
<div class="delivery-address-sec">
…
<div id="add-new-ads" align="center" style="display: block;">
   <a href="javascript:void(0)" onclick="ShowNewAdsSec()"
      class="btn-black-small-cmn">
   ADD NEW</a>
</div>
</div>
</div>

User Delivery Address

<div class="delivery_white_section">
<div class="delivery-address-sec">
   …
   <div id="add-new-delivery-ads" class="border-on-top" style="display: none;">
      <div class="item-form-group">
         <div class="col-md-6">
            <label>ADDRESSEE FIRST NAME</label>
            <input name="ads-first-name" class="required"
               id="addresseeViewModel_AddresseeFirstName"
               type="text" value="">
         </div>
         <div class="col-md-6">
            <label>ADDRESSEE LAST NAME</label>
            <input name="ads-last-name" class="required"
               id="addresseeViewModel_AddresseeLastName" type="text"
               value="">
         </div>
      </div>
      <div class="item-form-group">
         <div class="col-md-12">
            <label>ADDRESS</label>
            <input name="address" class="big-textbox required"
               id="addresseeViewModel_Address" type="text" value="">
         </div>
      </div>
      <div class="item-form-group">
         <div class="col-md-6">
            <label>COUNTRY</label>
            <input type="hidden" id="countryValue">
            <select name="country" class="required" id="country">
               <option value="">SELECT COUNTRY</option>
               <option value="AF">Afghanistan</option>
               <option value="AL">Albania</option>
               <!--List of countries-->
            </select>
         </div>
         <div class="col-md-6">
            <label>STATE</label>
            <input type="text" name="state" id="state" class="">
         </div>
      </div>
      <div class="item-form-group">
         <div class="col-md-6">
            <label>CITY</label>
            <input type="text" name="city" id="city" class="required">
         </div>
         <div class="col-md-6">
            <label>POSTAL CODE</label>
            <input name="postalcode" class="required"
               id="addresseeViewModel_PostalCode" type="text"
               value="">
         </div>
      </div>
      <div align="center">
         <a href="javascript:void(0)" class="chk-add-btn
            btn-black-small-cmn">SAVE</a>
      </div>
   </div>
</div>
</div>

Next Button

<div class="container">
   <div class="delivery-top-white-box"> … </div>
   <div class="delivery_white_section"> … </div>
   <div class="next-tab-area">
      <a class="my-btn btn-red" id="next-tab" href="javascript:void(0);">NEXT</a>
   </div>
</div>