<style>
.datepicker {
	z-index: 1110; /* must set here to let date picker display on top */
}
input[type=number] { 
    text-align: right; 
}

</style>

<div class="form-horizontal">
   <div id="formGoodsReceiving">
        <div class="row">
            <div class="col-md-12">
                <label style="text-align:left;" for="cobGRLoc" class="col-sm-2 control-label">Goods Receiving Loc.</label>
                <div class="col-sm-2">
                    <select id="cobGRLoc" class="form-control" style='width:100%;height:100%'>
                        <?php echo $this->getLocationOption();?>
                    </select>
                </div>
                <label style="text-align:left;padding-left:30px;width:138px;" for="txtLoginPerson" class="col-sm-2 control-label">Login person</label>
                <div class="col-sm-2">
                    <input style="display:none;" id="txtLoginId" value="<?php echo $loginId; ?>" maxlength="100" type="text" class="form-control" disabled>
                    <input style="display:none;" id="txtLoginCoyId" value="<?php echo $coyId; ?>" maxlength="100" type="text" class="form-control" disabled>
                    <input id="txtLoginName" value="<?php echo $name; ?>" maxlength="100" type="text" class="form-control" disabled>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <i class="fa fa-phone col-sm-1" style="text-align:left;color:black;margin-top: 10px;width:10px;padding-left:30px;"></i>
            <div class="col-sm-2">
                <input id="txtLoginPhone" value="<?php echo $phone; ?>" maxlength="100" type="text" class="form-control">
            </div>
            <i class="fa fa-envelope col-sm-1" style="text-align:left;color: black;margin-top: 10px;width:10px;"></i>
            <div class="col-sm-2">
                <input id="txtLoginEmail" value="<?php echo $email; ?>" maxlength="100" type="text" class="form-control">
            </div>
        </div>
        <br>
        <br>

        <ul class="nav nav-tabs">
            <li class="active"><a href="#tabGeneral" data-toggle="tab">Customer</a></li>
            <li><a href="#tabCommunication" data-toggle="tab">Communication</a></li>
            <li><a href="#tabInquiry" style="display:none" data-toggle="tab">Inquiry</a></li>
        </ul>
       
        <div class="tab-content clearfix">
            <div class="tab-pane active" id="tabGeneral">
                <br>
                <div class="row" style="<?php echo ($use_bu == 1 ? '' : 'display:none' ) ;?>">
                    <div class="col-md-6">
                        <label style="text-align:left;" for="cmbGRBU" class="col-sm-4 control-label">BU</label>
                        <div class="col-sm-7" >
                            <select id="cmbGRBU" class="form-control">
                                <?php echo $this->getCustomerOption(); ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label style="text-align:left;" for="cmbGRBUCoy" class="col-md-4 control-label">Company Name</label>
                        <div class="col-sm-7">
                             <input id="cmbGRBUCoy" maxlength="100" type="text" class="form-control" readonly>
                        </div>
                    </div>
                </div>
                <hr style="<?php echo ($use_bu == 1 ? '' : 'display:none' ) ;?>">

                <div class="col-md-12">
                <div class="col-md-9" style="padding-right: 0px;border-right:1px solid #d6d6d6">
                    <div class="col-md-12">
                        <label id="divComLabel" style="text-align:left;" for="cmbCustCoyName" class="col-sm-2 control-label">Cust. Co. Name</label>
                        <div class="col-sm-6" id="divCom">
                            <select id="cmbCustCoyName" class="form-control" style='width:100%;height:100%'>
                                <?php echo $this->getCustomerOption();?>
                            </select>
                        </div>
                        <label id="divProsLabel" style="text-align:left;display:none;" for="txtProsName" class="col-sm-2 control-label">Prospect Name</label>
                        <div class="col-sm-4" id="divPros" style="display:none">
                            <input id="txtProsName" maxlength="20" type="text" class="form-control" value="" placeholder="Name...">
                        </div>
                        <div class="col-sm-2">
                            <input  id="toggle-one" data-width="100" checked type="checkbox" onchange="changeProspect()">
                        </div>
                    </div>
                    <br>
                    <div class="col-md-12" style="margin-top: 10px;">
                        <label style="text-align:left;" for="txtContactName" class="col-sm-2 control-label">Contact Name</label>
                        <div class="col-sm-3">
                            <input id="txtContactName" maxlength="20" type="text" class="form-control" value="">
                        </div>
                        <i class="fa fa-phone col-sm-1" style="text-align:left;color:black;margin-top: 10px;width:10px;"></i>
                        <div class="col-sm-2" style="width:22%">
                            <input id="txtContactPhone" maxlength="20" type="text" class="form-control">
                        </div>
                        <i class="fa fa-envelope col-sm-1" style="text-align:left;color: black;margin-top: 10px;width:10px;"></i>
                        <div class="col-sm-3">
                            <input id="txtContactEmail" maxlength="55" type="text" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                        <label style="text-align:left;" for="txtGRID" class="col-sm-5 control-label">GRN ID</label>
                        <div class="col-sm-6">
                            <input id="txtGRID" maxlength="20" type="text" class="form-control" value="" placeholder="Auto" disabled>
                            <br>
                        </div>
                        <br>
                        <label style="text-align:left;" for="txtGRDate" class="col-sm-5 control-label">Date</label>
                        <div class="col-sm-6" >
                            <input style="width:120px;" type="text" class="form-control" id="txtGRDate" value="<?php echo date_create('now')->format('d/m/Y'); ?>">
                            <br>
                        </div>
                        <br>
                        <label style="text-align:left;" for="txtGRTime" class="col-sm-5 control-label">Time</label>
                        <div class="col-sm-6">
                            <div class="input-group bootstrap-timepicker timepicker" style="width:120px;">
                                    <input style="padding-right:5px;" id="txtGRTime" type="text" class="form-control input-small">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                </div>
                        </div>
                </div>
            </div>

                <div class="form-group" id="">
                    <div class="col-sm-2" style="display:none">
                        <select id="cmbItemCodeOpt" class="form-control cmbItemCodeOpt"  style='width:100%;height:100%'>
                        <?php echo $this->getItemOption(); ?>
                        </select>
                    </div>
                </div>
                <div class="form-group" id="">
                    <div class="col-sm-2" style="display:none">
                        <select id="cmbItemDescOpt" class="form-control cmbItemDescOpt">
                        <?php echo $this->getItemDescOption(); ?>
                        </select>
                    </div>
                </div>
                <div class="form-group" id="">
                    <div class="col-sm-2" style="display:none">
                        <select id="cmbItemBrandOpt" class="form-control cmbItemBrandOpt">
                        <?php echo $this->getItemBrandOption(); ?>
                        </select>
                    </div>
                </div>
                <hr>

                <div class="col-sm-12">
                    <table class="table" id="goodsreceivingItemTable" >
                        <thead>
                            <tr>
                                <th width="1%">No.</th>
                                <th width="15%">Item Code</th>
                                <th width="39%">Description</th>
                                <th width="15%">Brand</th>
                                <th width="13%">Serial Number</th>
                                <th width="9%"></th>
                                <th width="15%"> Qty</th>
                                <th width="5%"></th>
                            </tr>
                        </thead>
                        <tbody id="goodsreceivingItemTableBody">
                        </tbody>
                    </table>
                    <button style="float:right;" onclick="javascript:addGoodsReceivingDetail(this);" class="btn btn-success btnAddDetail">+</button>
                </div>
            </div>

            <div style="clear:both;" class="tab-pane" id="tabCommunication">
                <br>
                <div class="panel panel-primary" id="communicationPanel" style="display:none;">
                    <div class="panel-heading" style="height:35px!important;">
                        <i class="fa fa-times" style="color:white;float:right;" onclick="return closeCommunicationForm();"></i>
                    </div>
                    <div style="clear:both;" id="communicationPanelBody" class="panel-body">
                        <div class="form-group">
                            <label style="padding-left: 30px;text-align:left;" for="cmbComMethod" class="col-sm-2 control-label">Communication Method</label>
                            <div class="col-sm-2">
                                <select id="cmbComMethod" class="form-control"  onchange="changeMethod()">
                                    <option value="1">Call</option>
                                    <option value="2">Email</option>
                                </select>
                            </div>
                            <label style="text-align:left;width:55px;padding-right: 0px;margin-left: 30px;" for="txtComDate" class="col-sm-1 control-label">Date</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="txtComDate" value="<?php echo date_create('now')->format('d/m/Y'); ?>">
                            </div>
                        </div>
                        <div class="form-group">
                            <label style="padding-left: 30px;text-align:left;" for="txtComCustName" class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-2">
                                <input id="txtComCustName" maxlength="100" type="text" class="form-control" value="" >
                            </div>
                            <div class="col-sm-1">
                                <label id="lblComPhone">
                                    <i class="fa fa-phone"  style="text-align:left;color:black;margin-top: 10px;margin-left: 40px;"></i>
                                </label>
                                <label id="lblComEmail" style="display:none">
                                    <i class="fa fa-envelope" style="text-align:left;color:black;margin-top: 10px;margin-left: 40px;"></i>
                                </label>
                            </div>
                            <div class="col-sm-2">
                                <input id="txtComCustContact" class="form-control">
                            </div>
                            <div class="col-sm-2">
                                <button class="btn btn-primary" id="btnAddCommunication" onclick="return addCommunication();">Add</button><br>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <table class="table table-striped" style="width: 100%; max-width: 100%; margin-bottom: 20px;" id="communication-table">
                    <thead>
                        <tr>
                            <th width="2%" style="min-width:100px;max-width:120px;">Date</th>
                            <th width="20%" style="min-width:120px">Customer Name</th>
                            <th width="20%" style="min-width:100px;max-width:120px;">Contact Mobile</th>
                            <th width="5%" style="min-width:100px;max-width:120px;">Status</th>
                            <th width="10%" style="min-width:100px;max-width:120px;"><button id="btnInsertCommunication" class="btn btn-primary" onclick="return showCommunicationForm();"> New Entry</button></th>
                            <th width="20%" ></th>
                        </tr>
                    </thead>
                    <tbody style="" id="communication-table-body">
                    </tbody>
                </table>
            </div>

            <div class="tab-pane" id="tabInquiry">
                <br>
                <div class="form-group">
                    <div class="col-sm-2" style="padding-left: 30px;text-align:left;">
                        <select class="form-control" id="dateFilterGRNInquiry">
                           <?php echo $this->getDateFilterOption() ?>
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <button class="btn btn-primary" id="btnInquiryFilter">Filter</button><br>
                    </div>
                </div>
                <br>
                <table class="table table-striped" style="width: 100%; max-width: 100%; margin-bottom: 20px;" id="inquiry-table">
                    <thead>
                        <tr>
                            <th width="2%" style="min-width:100px;max-width:120px;">Date</th>
                            <th width="5%" style="min-width:100px;max-width:120px;">Status</th>
                            <th width="5%" style="min-width:100px;max-width:120px;"></th>
                            <th width="30%" ></th>
                        </tr>
                    </thead>
                    <tbody id="inquiry-table-body">
                        <tr>
                            <td>
                                21 May 2020
                            </td>
                            <td>
                                Goods Received
                            </td>
                            <td></td>
                        </tr>
                         <tr>
                            <td>
                                21 May 2020
                            </td>
                            <td>
                                Agent Finished
                            </td>
                            <td></td>
                        </tr>
                         <tr>
                            <td>
                                21 May 2020
                            </td>
                            <td>
                                Item Confisticated
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
          
        </div>
   </div>
</div>

<script>
$(document).ready(function () {
    $('#txtGRDate').datepicker({
        format: "dd/mm/yyyy"
    });
    $('#txtGRDate').on('changeDate', function(ev){
        $(this).datepicker('hide');
    });

    $('#txtComDate').datepicker({
        format: "dd/mm/yyyy"
    });
    $('#txtComDate').on('changeDate', function(ev){
        $(this).datepicker('hide');
    });

    $('#txtGRTime').timepicker({
        minuteStep:1
    });

    

});
</script>

<script>
  $(function() {
    $('#toggle-one').bootstrapToggle({
      on: 'Cust',
      off: 'Prospect',
      width: '75px',
        size: 'small'
    });
  })
</script>

<script type="text/javascript">
 $(document).ready(function(){

   
});
</script>