<style type="text/css">
    label {
        font-weight: normal !important;
    }

    #analysis-schedule-body-table tr {
        cursor: pointer;
    }

    /* tbody > tr.highlight > td {
	    background: #3c8dbc!important;
	} */
    /* tbody > tr.highlight > td input {
	    background: #3c8dbc!important;
	} */

    .tableFixHead {
        overflow: auto;
        height: 100px;
    }

    .tableFixHead thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: grey;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        padding: 8px 16px;
    }

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

    td.numericalValue {
        vertical-align: middle !important;
        padding: 0px !important;
        text-align: right !important;
        background-color: #eee;
    }

    td input,
    td select {
        border-radius: 0px !important;
        border-color: transparent !important;
        background-color: white;
    }

    tbody>tr.highlight>th {
        background: #aed1ea !important;
        color: #333 !important;
    }

    .toggle-on {
        line-height: 20px !important;
    }

    .toggle-off {
        line-height: 20px !important;
    }
</style>
<div id="screen[index]" style="padding-top: 20px;">
    <div class="col-lg-12">
        <!-- Code Tab Here -->
        <ul class="nav nav-tabs nav-tabs-line nav-tabs-line-brand" id="myTab" role="tablist">
            <li class="nav-item active">
                <a class="nav-link" id="general-tab" data-toggle="tab" style="padding-top:0" href="#general" aria-controls="general">
                    <i class="flaticon2-box-1"></i>General
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" style="padding-top:0" href="#contact" aria-controls="contact">
                    <i class="flaticon2-box-1"></i>Contact
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="branch-tab" data-toggle="tab" style="padding-top:0" href="#branch" aria-controls="branch">
                    <i class="flaticon2-box-1"></i>Branch
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="software-tab" data-toggle="tab" style="padding-top:0" href="#software" aria-controls="software">
                    <i class="flaticon2-box-1"></i>Software
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="policy-tab" data-toggle="tab" style="padding-top:0" href="#policy" aria-controls="policy">
                    <i class="flaticon2-box-1"></i>Attachment
                </a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <br>
            <!-- GENERAL TAB -->
            <div class="tab-pane fade active in" id="general" role="tabpanel" aria-labelledby="general-tab">
                <!--begin::Form-->
                <form class="form">
                    <div class="card-body row">
                        <div class="col-lg-4">
                            <div class="form-group row" style="display: none;">
                                <label class="col-lg-3 col-form-label">Customer ID:</label>
                                <div class="col-lg-3">
                                    <input type="text" class="form-control" id="txtCustomerID">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Customer Code:</label>
                                <div class="col-lg-4">
                                    <input type="text" class="form-control" id="txtCustomerCode" onchange="checkCustomerCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                                <div class="col-lg-4" style="align-self: center;">
                                    <label class="checkbox">
                                        <input type="checkbox" id="chkCustomerActive" checked="checked"> Active
                                    </label>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Billing Cycle:</label>
                                <div class="col-lg-4">
                                    <input type="text" class="form-control" id="txtCustomerBillingCycle" onchange="checkCustomerCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Address:</label>
                                <div class="col-lg-8">
                                    <textarea type="text" rows="7" class="form-control" id="txtCustomerAddress"></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">Customer Name:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerName">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">GL Account code:</label>
                                <div class="col-lg-4">
                                    <input type="text" class="form-control" id="txtCustomerAccount">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Remarks:</label>
                                <div class="col-lg-8">
                                    <textarea type="text" rows="7" class="form-control" id="txtCustomerRemarks"></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">Company Reg No:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerCompanyRegNo">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Telephone:</label>
                                <div class="col-lg-4">
                                    <input type="text" class="form-control" id="txtCustomerCompanyTelephone">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-12"><br><br></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">Industry:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerIndustry" onchange="checkCustomerCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Sales Turnover:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerSalesTurnOver" onchange="checkCustomerCode(this);">
                                    <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">Business Sector:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerBusinessSector" onchange="checkCustomerCode(this);">
                                    <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">No. People:</label>
                                <div class="col-lg-4">
                                    <input type="text" class="form-control" id="txtCustomerNoPeople" onchange="checkCustomerCode(this);">
                                    <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" style="white-space: nowrap;">Sunsystem Version:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerSunsystemVersion" onchange="checkCustomerCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Windows Server Version:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerWindowsServerVersion" onchange="checkCustomerCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Product Conversation:</label>
                                <div class="col-lg-8">
                                    <textarea type="text" rows="7" class="form-control" id="txtCustomerProductConversation"></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">MSSQL Version:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerMSSQLVersion" onchange="checkCustomerCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Software Info:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerSoftwareInfo" onchange="checkCustomerCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Company Policy:</label>
                                <div class="col-lg-8">
                                    <textarea type="text" rows="7" class="form-control" id="txtCustomerCompanyPolicy"></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">QA Version:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerQAVersion" onchange="checkCustomerCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Supporting Partner:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCustomerSupportingPartner" onchange="checkCustomerCode(this);">
                                    <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">Primary Remote Access:</label>
                                <div class="col-lg-4">
                                    <select class="form-control" id="cobCustomerPrimaryRemoteAccess">
                                        <option value="0">---- Select one ---</option>
                                        <option value="1">Anydesk</option>
                                        <option value="2">Teamviewer</option>
                                        <option value="3">Webex</option>
                                        <option value="4">Teams</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Primary Video Message:</label>
                                <div class="col-lg-4">
                                    <select class="form-control" id="cobCustomerPrimaryVideoMessage">
                                        <option value="0">---- Select one ---</option>
                                        <option value="1">Zoom</option>
                                        <option value="2">Teams</option>
                                        <option value="3">Skype</option>
                                        <option value="4">Google Meet</option>
                                        <option value="5">Jitsi</option>
                                        <option value="6">Slack</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Secondary Remote Access:</label>
                                <div class="col-lg-4">
                                    <select class="form-control" id="cobCustomerSecondaryRemoteAccess">
                                        <option value="0">---- Select one ---</option>
                                        <option value="1">Anydesk</option>
                                        <option value="2">Teamviewer</option>
                                        <option value="3">Webex</option>
                                        <option value="4">Teams</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Secondary Video Message:</label>
                                <div class="col-lg-4">
                                    <select class="form-control" id="cobCustomerSecondaryVideoMessage">
                                        <option value="0">---- Select one ---</option>
                                        <option value="1">Zoom</option>
                                        <option value="2">Teams</option>
                                        <option value="3">Skype</option>
                                        <option value="4">Google Meet</option>
                                        <option value="5">Jitsi</option>
                                        <option value="6">Slack</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <!--end::Form-->
                <div class="col-md-8" style="margin-top: 20px;clear: both;">
                    <button class="col-sm-2 btn btn-secondary btnSaveCustomer" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal">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>

            <!-- CONTACT TAB -->
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <?php include(PATH_CODE . "views/customer/tabs/contact.php"); ?>
            </div>

            <!-- BRANCH TAB -->
            <div class="tab-pane fade" id="branch" role="tabpanel" aria-labelledby="branch-tab">
                <?php include(PATH_CODE . "views/customer/tabs/branch.php"); ?>
            </div>
            
            <!-- SOFTWARE TAB -->
            <div class="tab-pane fade" id="software" role="tabpanel" aria-labelledby="software-tab">
                <?php include(PATH_CODE . "views/customer/tabs/software.php"); ?>
            </div>

            <!-- POLICY TAB -->
            <div class="tab-pane fade" id="policy" role="tabpanel" aria-labelledby="policy-tab">
                <?php include(PATH_CODE . "views/customer/tabs/policy.php"); ?>
            </div>
        </div>
    </div>

    <!-- BUTTON -->

    <div class="col-md-12">
        <hr>
    </div>
    <div class="col-md-12" id="errorShow"></div>

    <!-- button to trigger the things -->
    <button id="activatebuttonscreen[index]" onclick='reactivatescreen();' style="display: none;">activate screen button</button>
</div>

<div id="screen[index]a"></div>

<!-- //================================================================= -->

<!-- the function index that you want to run -->
<script type="text/javascript">
    $(function() {
        $('#txtCustomerToggle').bootstrapToggle({
            on: 'New',
            off: 'Existing'
        });
    })

    function reactivatescreen() {
        swal2("activation screen [index]");
    }
</script>