<style>
    .table-borderless th,
    .table-borderless td,
    .table-borderless thead th,
    .table-borderless tbody+tbody {
        padding: 4px;
    }

    .kt-datatable.kt-datatable--default>.kt-datatable__table>.kt-datatable__head .kt-datatable__row>.kt-datatable__cell,
    .kt-datatable.kt-datatable--default>.kt-datatable__table>.kt-datatable__body .kt-datatable__row>.kt-datatable__cell,
    .kt-datatable.kt-datatable--default>.kt-datatable__table>.kt-datatable__foot .kt-datatable__row>.kt-datatable__cell>.kt-marginless {
        padding: 4px;
    }
</style>
<div class="row" style="margin-top:10px;">
    <div class="col-lg-12">
        <div class="card-body row">
            <div class="col-lg-4">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Full Name:</label>
                    <div class="col-lg-6" id="divCustContactFullName">
                        <input type="hidden" class="form-control" id="txtCustomerContactCounter">
                        <input type="text" class="form-control" id="txtCustomerContactFullName">
                        <span class="form-text text-muted"></span>
                    </div>
                    <div class="col-lg-3" style="align-self: center;">
                        <label class="checkbox">
                            <input type="checkbox" id="chkCustomerContactActive" checked="checked"> Active
                        </label>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Salutation:</label>
                    <div class="col-lg-6" id="divCustContactFullName">
                        <select class="form-control" id="cobCustomerContactSalutation">
                            <option value="0">--- Select one ---</option>
                            <option value="1">Mr</option>
                            <option value="2">Ms</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Report To:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactReportTo">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label" style="white-space: nowrap;">Preferred Name:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactPreferredName">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label" style="white-space: nowrap;">Department Group:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <select id="cobCustomerContactDepartmentGroup" class="form-control">
                            <?php echo $this->getDepartmentGroupOption(); ?>
                        </select>
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Department:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactDepartment">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Designation:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactDesignation">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label" style="white-space: nowrap;">Job Description:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <textarea type="text" rows="7" class="form-control" id="txtCustomerContactJobDescription"></textarea>
                        <span class="form-text text-muted"></span>
                    </div>
                </div>      
            </div>
        </div>
        <div class="card-body row">
            <div class="col-md-12">
                <hr>
            </div>
        </div>
        <div class="card-body row">
            <div class="col-lg-4">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Email:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactEmail">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Communication Preference:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactCommunicationPreference">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Telephone:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactTelephone">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>                           
            </div>
            <div class="col-lg-4">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Mobile:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactMobile">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body row">
            <div class="col-md-12">
                <hr>
            </div>
        </div>
        <div class="card-body row">
            <div class="col-lg-4">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Hobbies:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                    <textarea type="text" rows="7" class="form-control" id="txtCustomerContactHobbies"></textarea>
                        <span class="form-text text-muted"></span>
                    </div>
                </div>                               
            </div>
            <div class="col-lg-4">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Character:</label>
                    <div class="col-lg-6" id="divCustAccountNew">
                        <textarea type="text" rows="7" class="form-control" id="txtCustomerContactCharacter"></textarea>
                        <span class="form-text text-muted"></span>
                    </div>
                </div>                            
            </div>
            <div class="col-lg-4">
                <!--Not in used anymore-->
                <div class="form-group row" style="display:none;">
                    <div  class="col-lg-4" style="align-self: center;">
                        <label class="checkbox" class="col-lg-2 col-form-label">
                            <input type="checkbox" id="chkCustomerContactSendMooncake"> Received Gift
                        </label>
                    </div>  
                    <label class="col-lg-2 col-form-label" style="padding-top:10px;">Receive Amount:</label>
                    <div class="col-lg-3" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactTotalMooncake">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
                <!--Not in used anymore-->
                <div class="form-group row">
                    <!--Not in used anymore-->
                    <div class="col-lg-4" style="align-self: center; display:none;">
                        <label class="checkbox" class="col-lg-3 col-form-label">
                            <input type="checkbox" id="chkCustomerContactChristmasCard"> Send Christmas Card
                        </label>
                    </div>
                    <!--Not in used anymore-->
                    <label class="col-lg-2 col-form-label" style="padding-top:10px;">Priority:</label>
                    <div class="col-lg-3" id="divCustAccountNew">
                        <input type="text" class="form-control" id="txtCustomerContactPriority" value="0">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body row">
            <div class="col-lg-8">
                <div class="form-group row" style="margin-bottom: 5px;">
                    <label class="col-lg-3 col-form-label">eSupport Primary Contact For:</label>
                </div>
                <div class="form-group row">
                    <div class="col-lg-3" style="align-self: center;">
                        <label class="checkbox">
                            <input type="checkbox" id="chkCustomerContacteSupportFin"> Finance 
                        </label>
                    </div>     
                    <div class="col-lg-3" style="align-self: center;">
                        <label class="checkbox">
                            <input type="checkbox" id="chkCustomerContacteSupportIT"> IT 
                        </label>
                    </div>     
                    <div class="col-lg-3" style="align-self: center;">
                        <label class="checkbox">
                            <input type="checkbox" id="chkCustomerContacteSupportProject"> Project Manager
                        </label>
                    </div>     
                    <div class="col-lg-3" style="align-self: center;">
                        <label class="checkbox">
                            <input type="checkbox" id="chkCustomerContacteSupportManagement"> Management
                        </label>
                    </div>     
                </div>
            </div>
        </div>
        <div class="card-body row">
            <div class="col-md-8" style="margin-top: 20px;clear: both;">
                <button class="col-sm-2 btn btn-secondary" id="btnCustomerContact" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal" onclick="saveCustomerContact('newline');">OK</button>
                <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal" onclick="cancelCustomerEntry();">Cancel</button>
            </div>    
        </div>
        <div class="card-body row">
            <div class="col-md-12">
                <hr>
            </div>
        </div>
        <div class="col-md-12">
            <div class="tableFixHead" id="testData" style="height: 600px;overflow: auto;">
                <table class="table table-bordered" id="customer-contact-table">
                    <thead style="background-color: grey;color:white;">
                        <tr>
                            <th data-field="preferred name" width="20%" id="col_name" name="customer-contact_sort_column" onclick="sortingColumn(this,'col_name','desc');">Preferred Name<i class="fa"></i></th> 
                            <th data-field="department" width="10%" id="col_dept" name="customer-contact_sort_column" onclick="sortingColumn(this,'col_dept','desc');">Department<i class="fa"></i></th>
                            <th data-field="email" width="15%" id="col_email" name="customer-contact_sort_column" onclick="sortingColumn(this,'col_email','desc');">Email<i class="fa"></i></th>
                            <th data-field="telephone" width="15%" id="col_telephone" name="customer-contact_sort_column" onclick="sortingColumn(this,'col_telephone','desc');">Telephone<i class="fa"></i></th>
                            <th data-field="mobile" width="15%" id="col_mobile" name="customer-contact_sort_column" onclick="sortingColumn(this,'col_mobile','desc');">Mobile<i class="fa"></i></th>
                            <th data-field="priority" width="5%" id="col_priority" name="customer-contact_sort_column" onclick="sortingColumn(this,'col_priority','desc');">Priority<i class="fa"></i></th>
                            <th data-field="status" width="10%" id="col_status" name="customer-contact_sort_column" onclick="sortingColumn(this,'col_status','desc');">Status<i class="fa"></i></th>
                            <th width="5%">Action</th>
                            <!-- <th width="20%">Option</th>  -->
                        </tr>                                
                    </thead>
                    <tbody id="customer-contact-table-body">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>