@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_v1') }}"><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>
    </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="accountNo-spinner"></i>
            <select class="form-control input-sm select2" id="accountNo"></select>
            </div>
         
            <div class="form-group validation-required" id="error-shipperName">
            <label class="v2waybillLable">Shipper Name *</label>
            <input class="form-control input-sm" type="text" placeholder="" id="shipperName">
            <span class="help-block" id="error-message-shipperName" style="display:none;"></span>
            </div>


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

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

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

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

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

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

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

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

            <div class="form-group validation-required" id="error-consigneeContactNumber">
            <label class="v2waybillLable">Contact Person PH*</label>
            <input class="form-control input-sm" type="text" id="consigneeContactNumber">
            <span class="help-block" id="error-message-consigneeContactNumber" style="display:none;"></span>
            </div>
          </div>
          <div class="col-md-3">
            <br>
            <div class="form-group validation-required" id="error-parcelType">
            <label class="v2waybillLable">Parcel Type</label>
            <select class="form-control input-sm document-type-select2" id="parcelType"></select>
            <span class="help-block" id="error-message-parcelType" 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-actualWeight">
            <label class="v2waybillLable">Weight Kgs *</label>
            <input class="form-control input-sm" type="number" id="actualWeight" value="0">
            <span class="help-block" id="error-message-actualWeight" style="display:none;"></span>
            </div>
          </div>

          <div class="col-md-3">
            <br>
            <div class="form-group validation-required" id="error-cnNo">
            <label class="v2waybillLable">#CN ex: 60XXXXXXX</label>
            <input class="form-control input-lg" type="text" id="cnNo">
            <span class="help-block" id="error-message-cnNo" 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')

<script>
//defined variable 

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