@include('common.header')
<style>
.my-custom-scrollbar {
  position: relative;
  height: 150px;
  overflow: auto;
}
.table-wrapper-scroll-y {
  display: block;
}
</style>
<section class="content">
  <div class="col-lg-12" id="load-overlay" name="load-overlay" style="display:none;">
        <div id="loader" ></div>
        <div id="overlay"></div>
  </div>
  <div class="box nav-tabs-custom">

    <div class="box-header with-border">
    <div id="title">
    </div>
    <div class="box-tools pull-right">
    <a class="btn btn-primary" href="{{ url('/home/shipment_add_v2') }}"><i class="fa fa-file"></i> NEW (Esc)</a>
    <a class="btn btn-primary" onClick="printA4WaybillAction()"><i class="fa fa-print"></i> Print A4</a>
    <a class="btn btn-primary" onClick="printA6WaybillAction()"><i class="fa fa-print"></i> Print A6</a>
    </div>
    </div>

    <div class="box-body">
     
        <div class="row">
          <div class="col-md-3">
            <b>Shipper Information</b>
            <br/>

            <div class="form-group">
            <label class="v2waybillLable">Account No</label>
            <i class="fa fa-circle-o-notch fa-spin" id="account_no-spinner"></i>
            <select class="form-control input-sm select2" id="account_no"></select>
            </div>
         
            <div class="form-group validation-required" id="error-shipper_name">
            <label class="v2waybillLable">Shipper Name *</label>
            <input class="form-control input-sm" type="text" placeholder="" id="shipper_name">
            <span class="help-block" id="error-message-shipper_name" style="display:none;"></span>
            </div>


            <div class="form-group validation-required" id="error-shipper_address">
            <label class="v2waybillLable">Address *</label>
            <textarea class="form-control input-sm" rows="3" wrap="hard" maxlength="150" id="shipper_address"></textarea>
            <span class="help-block" id="error-message-shipper_address" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-shipper_state">
            <label class="v2waybillLable">Select State</label>
            <select class="form-control input-sm state-options" id="shipper_state"></select>
            <span class="help-block" id="error-message-shipper_state" style="display:none;"></span>
            </div>
            
            <div class="form-group validation-required" id="error-shipper_postcode">
            <label class="v2waybillLable">Postcode*</label>
            <input class="form-control input-sm" type="number" id="shipper_postcode">
            <span class="help-block" id="error-message-shipper_postcode" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-shipper_contact_name">
            <label class="v2waybillLable">Contact Person Name</label>
            <input class="form-control input-sm" type="text" id="shipper_contact_name">
            <span class="help-block" id="error-message-shipper_contact_name" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-shipper_contact_number">
            <label class="v2waybillLable">Contact Person PH*</label>
            <input class="form-control input-sm" type="text" id="shipper_contact_number">
            <span class="help-block" id="error-message-shipper_contact_number" style="display:none;"></span>
            </div>
          </div>
          <div class="col-md-3">
            <b>Consignee Information</b>
            <br/>
            <div class="form-group validation-required" id="error-consignee_name">
            <label class="v2waybillLable">Consignee Name *</label>
            <input class="form-control input-sm" type="text" id="consignee_name">
            <span class="help-block" id="error-message-consignee_name" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-consignee_address">
            <label class="v2waybillLable">Address *</label>
            <textarea class="form-control input-sm" rows="3" wrap="hard" maxlength="150" id="consignee_address"></textarea>
            <span class="help-block" id="error-message-consignee_address" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-consignee_state">
            <label class="v2waybillLable">Select State</label>
            <select class="form-control input-sm state-options" id="consignee_state"></select>
            <span class="help-block" id="error-message-consignee_state" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-consignee_postcode">
            <label class="v2waybillLable">Postcode*</label>
            <input class="form-control input-sm" type="number" id="consignee_postcode">
            <span class="help-block" id="error-message-consignee_postcode" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-consignee_contact_name">
            <label class="v2waybillLable">Contact Person Name</label>
            <input class="form-control input-sm" type="text" id="consignee_contact_name">
            <span class="help-block" id="error-message-consignee_contact_name" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-consignee_contact_number">
            <label class="v2waybillLable">Contact Person PH*</label>
            <input class="form-control input-sm" type="text" id="consignee_contact_number">
            <span class="help-block" id="error-message-consignee_contact_number" style="display:none;"></span>
            </div>
          </div>
          <div class="col-md-3">
            <br>
            <div class="form-group validation-required" id="error-parcel_type">
            <label class="v2waybillLable">Parcel Type</label>
            <select class="form-control input-sm document-type-select2" id="parcel_type"></select>
            <span class="help-block" id="error-message-parcel_type" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-pc">
            <label class="v2waybillLable">Total Pcs *</label>
            <input class="form-control input-sm" type="number" id="pc" value="0">
            <span class="help-block" id="error-message-pc" style="display:none;"></span>
            </div>

            <div class="form-group validation-required" id="error-actual_weight">
            <label class="v2waybillLable">Weight Kgs *</label>
            <input class="form-control input-sm" type="number" id="actual_weight" value="0">
            <span class="help-block" id="error-message-actual_weight" style="display:none;"></span>
            </div>
          </div>

          <div class="col-md-3">
            <br>
            <div class="form-group validation-required" id="error-cn_no">
            <label class="v2waybillLable">#CN ex: 60XXXXXXX</label>
            <input class="form-control input-lg" type="text" id="cn_no">
            <span class="help-block" id="error-message-cn_no" style="display:none;"></span>
            </div>

            <!-- <div class="form-group validation-required" id="error-babyCodes">
            <label class="v2waybillLable">Scan All Baby Code Here</label>
            <textarea class="form-control" rows="6" placeholder="BB1001&#x0a;BB1002&#x0a;BB1003&#x0a;BB1004&#x0a;BB1005" id="babyCodes"></textarea>
            <span class="help-block" id="error-message-babyCodes" style="display:none;"></span>
            </div> -->

            <div class="form-group">
            <label class="v2waybillLable">Remarks</label>
            <textarea class="form-control input-sm" rows="3" id="remark"></textarea>
            </div>

            <div class="form-group">
            <label class="v2waybillLable">Reference Number (Trackable)</label>
            <input class="form-control input-sm" type="text" id="ref1">
            </div>

            <div class="form-group validation-required" id="error-tnc">
            <label class="v2waybillLable">Shipping Agreement</label>
            <label>
              <input type="checkbox" class="flat-red" id="tnc" name="tnc" value="agree" checked/> I/WE AGREE TERM AND CONDITION APPLY TO THIS SHIPMENT AVAILABLE AT <a href="https://www.bbbgroup.com.my/termsandconditions" target="_blank">bbbgroup.com.my/home/termandcondition</a>
              <span class="help-block" id="error-message-tnc" style="display:none;"></span>
            </label>
            </div>
          </div>
        </div>

    </div>
</section>

<button class="btn btn-primary pull-right save-button" id='save-button' >SAVE</button>

@include('common.footer')
@include('waybill_template.a6_waybill')
@include('common.location_services_api_call')

<script>
//defined variable 

//for display customer option drop down 
var customersArray = JSON.parse(JSON.stringify(