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

    input[type="checkbox"] {
        transform: scale(1.5);
    }
</style>
<div id="screen[index]" style="padding-top: 20px;">
    <div class="col-lg-12">
        <!-- Code Tab Here -->
        <div class="tab-content" id="myTabContent">
            <!-- BASIC INFO TAB -->
            <form class="form">
                <div class="card-body row">
                    <div class="col-lg-4">
                        <h4 style="font-weight: bold;">Basic Info</h4><br>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-lg-4">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">User Group Code:</label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="txtUserGroupCode">
                                <span class="form-text text-muted"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">User Group Name:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control" id="txtUserGroupName">
                                <input type="hidden" class="form-control" id="txtUserGroupID">
                                <span class="form-text text-muted"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!--Marketing Access Permission-->
                <div class="card-body row">
                    <div class="col-lg-4">
                        <h4 style="font-weight: bold;">Marketing Access Permission</h4><br>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-marketing-entity" name="usergroup-marketing-entity">
                            <div class="col-lg-6" id="divusergroup-marketing-entity">
                                <label for="usergroup-marketing-entity"> Entity</label>
                            </div>
                        </div>
                    </div>
                </div>
                <hr style="margin-top: 0px; margin-bottom: 10px;" />
                <div class="card-body row">
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-marketing-view-others" name="usergroup-marketing-view-others">
                            <div class="col-lg-6" id="divusergroup-marketing-view-others">
                                <label for="usergroup-marketing-view-others"> View Others</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3" style="display: none;">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-marketing-edit-others" name="usergroup-marketing-edit-others">
                            <div class="col-lg-6" id="divusergroup-marketing-edit-others">
                                <label for="usergroup-marketing-edit-others"> Edit Others</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!--Sales Access Permission-->
                <div class="card-body row">
                    <div class="col-lg-4">
                        <h4 style="font-weight: bold;">Sales Access Permission</h4><br>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-sales-account" name="usergroup-sales-account">
                            <div class="col-lg-6" id="divusergroup-sales-account">
                                <label for="usergroup-sales-account"> Account</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-sales-suspect" name="usergroup-sales-suspect">
                            <div class="col-lg-6" id="divusergroup-sales-suspect">
                                <label for="usergroup-sales-suspect"> Suspect</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-sales-prospect" name="usergroup-sales-prospect">
                            <div class="col-lg-6" id="divusergroup-sales-prospect">
                                <label for="usergroup-sales-prospect"> Prospect</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-sales-opportunity" name="usergroup-sales-opportunity">
                            <div class="col-lg-6" id="divusergroup-sales-opportunity">
                                <label for="usergroup-sales-opportunity"> Opportunity</label>
                            </div>
                        </div>
                    </div>
                </div>
                <hr style="margin-top: 0px; margin-bottom: 10px;" />
                <div class="card-body row">
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-sales-view-others" name="usergroup-sales-view-others">
                            <div class="col-lg-6" id="divusergroup-sales-view-others">
                                <label for="usergroup-sales-view-others"> View Others</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3" style="display: none;">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-sales-edit-others" name="usergroup-sales-edit-others">
                            <div class="col-lg-6" id="divusergroup-sales-edit-others">
                                <label for="usergroup-sales-edit-others"> Edit Others</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!--Integration Access Permission-->
                <div class="card-body row">
                    <div class="col-lg-4">
                        <h4 style="font-weight: bold;">Integration Access Permission</h4><br>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-integration-customer" name="usergroup-integration-customer">
                            <div class="col-lg-6" id="divusergroup-integration-customer">
                                <label for="usergroup-integration-customer"> Customer</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-integration-prospect" name="usergroup-integration-prospect">
                            <div class="col-lg-6" id="divusergroup-integration-prospect">
                                <label for="usergroup-integration-prospect"> Prospect</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-integration-export-data" name="usergroup-integration-export-data">
                            <div class="col-lg-6" id="divusergroup-integration-export-data">
                                <label for="usergroup-integration-export-data"> Export Data</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-integration-destination-master" name="usergroup-integration-destination-master">
                            <div class="col-lg-6" id="divusergroup-integration-destination-master">
                                <label for="usergroup-integration-destination-master"> Destination Master</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!--Admin Access Permission-->
                <div class="card-body row">
                    <div class="col-lg-4">
                        <h4 style="font-weight: bold;">Admin Access Permission</h4><br>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-admin-user" name="usergroup-admin-user">
                            <div class="col-lg-6" id="divusergroup-admin-user">
                                <label for="usergroup-admin-user"> User</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-admin-user-group" name="usergroup-admin-user-group">
                            <div class="col-lg-6" id="divusergroup-admin-user-group">
                                <label for="usergroup-admin-user-group"> User Group</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-admin-industry" name="usergroup-admin-industry">
                            <div class="col-lg-6" id="divusergroup-admin-industry">
                                <label for="usergroup-admin-industry"> Industry</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-admin-business-sector" name="usergroup-admin-business-sector">
                            <div class="col-lg-6" id="divusergroup-admin-business-sector">
                                <label for="usergroup-admin-business-sector"> Business Sector</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-admin-business-nature" name="usergroup-admin-business-nature">
                            <div class="col-lg-6" id="divusergroup-admin-business-nature">
                                <label for="usergroup-admin-business-nature"> Business Nature</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-admin-software" name="usergroup-admin-software">
                            <div class="col-lg-6" id="divusergroup-admin-software">
                                <label for="usergroup-admin-software"> Software</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-admin-department" name="usergroup-admin-department">
                            <div class="col-lg-6" id="divusergroup-admin-department">
                                <label for="usergroup-admin-department"> Department Group</label>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Report Access Permission-->
                <div class="card-body row">
                    <div class="col-lg-4">
                        <h4 style="font-weight: bold;">Report Access Permission</h4><br>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-report-contact" name="usergroup-report-contact">
                            <div class="col-lg-6" id="divusergroup-report-contact">
                                <label for="usergroup-report-contact"> Customer Contact Listing</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-report-summary" name="usergroup-report-summary">
                            <div class="col-lg-6" id="divusergroup-report-summary">
                                <label for="usergroup-report-summary"> Corporate Gift Summary</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-report-inquiry" name="usergroup-report-inquiry">
                            <div class="col-lg-6" id="divusergroup-report-inquiry">
                                <label for="usergroup-report-inquiry"> Corporate Gift Inquiry</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-report-history" name="usergroup-report-history">
                            <div class="col-lg-6" id="divusergroup-report-history">
                                <label for="usergroup-report-history"> Corporate Gift History</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-report-conversation" name="usergroup-report-conversation">
                            <div class="col-lg-6" id="divusergroup-report-conversation">
                                <label for="usergroup-report-history"> Conversation Report</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="usergroup-report-all-account" name="usergroup-report-all-account">
                            <div class="col-lg-6" id="divusergroup-report-all-account">
                                <label for="usergroup-report-all-account"> All Account Report</label>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Report Access Permission-->
                <div class="card-body row">
                    <div class="col-lg-4">
                        <h4 style="font-weight: bold;">Corporate gift</h4><br>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="corporate-gift-company" name="corporate-gift-company">
                            <div class="col-lg-6" id="divcorporate-gift-company">
                                <label for="corporate-gift-company"> Company</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="corporate-gift-listing" name="corporate-gift-listing">
                            <div class="col-lg-6" id="divcorporate-gift-listing">
                                <label for="corporate-gift-listing"> Corporate Gift Listing</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="corporate-gift-master" name="corporate-gift-master">
                            <div class="col-lg-6" id="divcorporate-gift-master">
                                <label for="corporate-gift-master"> Corporate Gift Master</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-lg-4">
                        <h4 style="font-weight: bold;">Campaign</h4><br>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="campaign-company" name="campaign-company">
                            <div class="col-lg-6" id="divcampaign-company">
                                <label for="campaign-company"> Company</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="campaign-listing" name="campaign-listing">
                            <div class="col-lg-6" id="divcampaign-listing">
                                <label for="campaign-listing"> Campaign Listing</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group row">
                            <input type="checkbox" id="campaign-master" name="campaign-master">
                            <div class="col-lg-6" id="divcampaign-master">
                                <label for="campaign-master"> Campaign Master</label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- BUTTON -->
    <div class="col-md-8" style="margin-top: 20px;clear: both;">
        <button class="col-sm-2 btn btn-secondary" id="btnSaveUserGroup" 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="cancelUserGroupEntry();">Cancel</button>
    </div>

    <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 reactivatescreen() {
        swal2("activation screen [index]");
    }
</script>