<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;
    }

    #delivery-list-table td input[type=text],
    #delivery-list-table td select {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        border: none;
        padding: 10px;
        box-sizing: border-box;
    }

    #delivery-list-table table {
        border-collapse: collapse;
        width: 100%;
    }

    #delivery-list-table th, td {
        padding: 8px 16px;
    }

    #delivery-list-table td {
        vertical-align: middle !important;
        padding: 0px !important;
        text-align: center !important;
        background-color: #eee;
    }

    #delivery-list-table td {
        position: relative;
    }
</style>

<div class="row">
    <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">Code:</label>
                    <div class="col-lg-8" id="divCustomerBranchCode">
                        <input type="text" class="form-control" id="txtCustomerBranchCode">
                        <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">Name:</label>
                    <div class="col-lg-8" id="divCustomerBranchName">
                        <input type="text" class="form-control" id="txtCustomerBranchName">
                        <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">Branch Type:</label>
                    <div class="col-lg-8" id="divCustomerBranchType">
                        <select class="form-control" id="cobCustomerBranchType">
                            <option value="0">--- Select one ---</option>
                            <option value="1">HQ</option>
                            <option value="2">Branch</option>
                        </select>
                    </div>
                </div>
            </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">Address:</label>
                    <div class="col-lg-8" id="divCustomerBranchAddress">
                        <textarea type="text" rows="7" class="form-control" id="txtCustomerBranchAddress"></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">Web:</label>
                    <div class="col-lg-8" id="divCustomerBranchWeb">
                        <input type="text" class="form-control" id="txtCustomerBranchWeb">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Email:</label>
                    <div class="col-lg-8" id="divCustomerBranchEmail">
                        <input type="text" class="form-control" id="txtCustomerBranchEmail">
                        <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-8" id="divCustomerBranchTelephone">
                        <input type="text" class="form-control" id="txtCustomerBranchTelephone">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Branch Contact:</label>
                    <div class="col-lg-8" id="divCustomerBranchEmailContact">
                        <select class="form-control" id="cobCustomerBranchContact">
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Fax:</label>
                    <div class="col-lg-8" id="divCustomerBranchFax">
                        <input type="text" class="form-control" id="txtCustomerBranchFax">
                        <span class="form-text text-muted"></span>
                    </div>
                </div>
            </div>
            <div class="col-md-8" style="margin-top: 20px;clear: both;">
                <button class="col-sm-2 btn btn-secondary" id="btnCustomerBranch" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal" onclick="saveCustomerBranch('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>
    <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="currencymaster-table">
                <thead style="background-color: grey;color:white;">
                    <tr>
                        <th width="10%">Code</th> 
                        <th width="15%">Name</th> 
                        <th width="15%">Branch Type</th>
                        <th width="15%">Telephone</th>
                        <th width="15%">Email</th>
                        <th width="5%">Action</th>
                        <!-- <th width="20%">Option</th>  -->
                    </tr>                                
                </thead>
                <tbody id="customer-branch-table-body">
                </tbody>
            </table>
        </div>
    </div>
</div>