<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>
        </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;">
                                <div class="col-lg-3">
                                    <input type="text" class="form-control" id="txtCampaignProfileID">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Company Code:</label>
                                <div class="col-lg-4">
                                    <input type="text" class="form-control" id="txtCampaignProfileCode" onchange="checkCampaignProfileCode(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="chkCampaignProfileActive" checked="checked"> Active
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Company Name:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCampaignProfileName" onchange="checkCampaignProfileCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-lg-4">
                            <form>
                                <div class="form-group col-sm-12" style="padding-left:0px;margin-left:0px;">
                                    <div class="col-sm-6" style="padding-left:0px;">
                                        <label for="txtCampaignProfileLogo" class="col-sm-12" style="padding: 0px;">Company Logo</label>
                                        <div class="col-sm-12" style="padding: 0px;">
                                            <input type="file" class="form-control" id="txtCampaignProfileLogo" name="txtCampaignProfileLogo" onchange="encodeImageFileAsURLCampaignProfileLogo(event);"><br>
                                            <input type="hidden" class="form-control" id="txtCampaignProfileLogoFilename">
                                            <input type="hidden" class="form-control" id="txtCampaignProfileLogoFileExt">
                                            <textarea style="display: none;" id="txtCampaignProfileLogoFileBase64" cols="30" rows="10"></textarea>
                                            <div class="row" style="margin-left: 0px;">
                                                <!-- <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;min-width: 100px;max-width: 100px" type="button" id="btnLedgerSettingUploadBULogo" onclick="uploadInvoiceBULogo();">Upload</button> -->
                                                <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;min-width: 100px;max-width: 100px" type="button" id="btnCampaignProfileRemoveLogo" onclick="removeCampaignProfileLogo();">Remove</button>
                                            </div>
                                            <div style="margin-top:10px;display:none;">
                                                <div><span id="setting_upload_mesg">Uploading file .....</span></div>
                                                <div style="margin-top:10px"><img src="image/uploading.gif"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6" style="max-width: 200px;padding: 0;">
                                        <div class="col-sm-12" style="padding: 0px;">
                                            <img id="imgCampaignProfileLogo" src="../web/picture/default/default.png" alt="logo" style="max-height: 160px;width:200px;object-fit: contain;">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Company Website Url:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCampaignProfileUrl">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-lg-4">
                            <form>
                                <div class="form-group col-sm-12" style="padding-left:0px;margin-left:0px;">
                                    <div class="col-sm-6" style="padding-left:0px;">
                                        <label for="txtCampaignProfileSignature" class="col-sm-12" style="padding: 0px;">Company Signature</label>
                                        <div class="col-sm-12" style="padding: 0px;">
                                            <input type="file" class="form-control" id="txtCampaignProfileSignature" name="txtCampaignProfileSignature" onchange="encodeImageFileAsURLCampaignProfileSignature(event);"><br>
                                            <input type="hidden" class="form-control" id="txtCampaignProfileSignatureFilename">
                                            <input type="hidden" class="form-control" id="txtCampaignProfileSignatureFileExt">
                                            <textarea style="display: none;" id="txtCampaignProfileSignatureFileBase64" cols="30" rows="10"></textarea>
                                            <div class="row" style="margin-left: 0px;">
                                                <!-- <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;min-width: 100px;max-width: 100px" type="button" id="btnLedgerSettingUploadBUSignature" onclick="uploadInvoiceBUSignature();">Upload</button> -->
                                                <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;min-width: 100px;max-width: 100px" type="button" id="btnCampaignProfileRemoveSignature" onclick="removeCampaignProfileSignature();">Remove</button>
                                            </div>
                                            <div style="margin-top:10px;display:none;">
                                                <div><span id="setting_upload_mesg">Uploading file .....</span></div>
                                                <div style="margin-top:10px"><img src="image/uploading.gif"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6" style="max-width: 200px;padding: 0;">
                                        <div class="col-sm-12" style="padding: 0px;">
                                            <img id="imgCampaignProfileSignature" src="../web/picture/default/default.png" alt="logo" style="max-height: 160px;width:200px;object-fit: contain;">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-md-12">
                            <hr>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-sm-12">
                            <label class="col-sm-12" style="padding: 0px; padding-bottom: 15px;"> <strong>Email</strong></label>
                        </div>
                        <div class="col-lg-3">
                            <label class="col-lg-4 col-form-label" style="padding: 0px; padding-bottom: 15px;">Use Microsoft 365 OAuth:</label>
                            <div class="col-lg-8">
                                <input type="hidden" class="form-control" id="cobCampaignProfileClientID" value="<?php echo MicrosoftOAuth::ClientID; ?>" disabled>
                                <select class="form-control" id="cobCampaignProfileOAuth" onchange="onchangeCampaignOAuth()">
									<option value="NO">NO</option>
									<option value="YES">YES</option>
								</select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row showOAuth" style="display: none;">
                        <div class="col-lg-3">
                            <label class="col-lg-4 col-form-label" style="padding: 0px; padding-bottom: 15px;">Tenant ID:</label>
                            <div class="col-lg-8" style="padding-bottom: 15px;">
                                <input type="text" class="form-control" id="txtCampaignProfileTenantID">
                                <span class="form-text text-muted"></span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row showNormal">
                        <div class="col-lg-3">
                            <label class="col-lg-4 col-form-label" style="padding: 0px; padding-bottom: 15px;">Mail Server:</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" id="txtCampaignProfileMailServer">
                                <span class="form-text text-muted"></span>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <label class="col-lg-4 col-form-label" style="padding: 0px; padding-bottom: 15px;">Port:</label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="txtCampaignProfilePort">
                                <span class="form-text text-muted"></span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-lg-3">
                            <label class="col-lg-4 col-form-label" style="padding: 0px; padding-bottom: 15px;">Mail Sender:</label>
                            <div class="col-lg-8" style="padding-bottom: 15px;">
                                <input type="text" class="form-control" id="txtCampaignProfileMailSender" >
                                <span class="form-text text-muted"></span>
                            </div>
                        </div>
                        <div class="col-lg-3 showNormal">
                            <label class="col-lg-4 col-form-label" style="padding: 0px; padding-bottom: 15px;">Mail Password:</label>
                            <div class="col-lg-8" style="padding-bottom: 15px;">
                                <input type="password" class="form-control" id="txtCampaignProfileMailPassword">
                                <span class="form-text text-muted"></span>
                            </div>
                        </div>
                        <div class="col-lg-3 showNormal">
                            <div class="kt-checkbox-inline">
                                <label class="kt-checkbox kt-checkbox--brand">
                                    <input type="checkbox" id="chkCampaignProfileEA" /> Enable Authentication
                                    <span></span>
                                </label>
                            </div>
                            <span class="form-text text-muted"></span>
                        </div>
                        <div class="col-lg-3 showNormal">
                            <div class="kt-checkbox-inline">
                                <label class="kt-checkbox kt-checkbox--brand">
                                    <input type="checkbox" id="chkCampaignProfileSSL" /> Enable SSL
                                    <span></span>
                                </label>
                            </div>
                            <span class="form-text text-muted"></span>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="form-group col-sm-6" >
                            <button class="btn btn-secondary showOAuth" style="background-color:grey;color:white;margin-right: 10px;min-width: 120px;display: none;" id="btnGrantPermission" onclick="javascript:settingGrantPermission();">Grant Permission</button>
                            <button class="btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;min-width: 120px;" id="btnEmailTest" onclick="javascript:showEmailTestModal();">Test Mail Config</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body row">
                <div class="col-md-12">
                </div>
            </div>
            <!--end::Form-->
            <div class="col-md-8" style="margin-top: 20px;clear: both;">
                <button class="col-sm-2 btn btn-secondary btnSaveCampaignProfile" 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="cancelCampaignProfileEntry();">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- Email Test Modal -->
<div class="modal fade" id="emailTestModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="emailTestModalTitle">Email Testing</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="flaticon-times"></i></button>
            </div>
            <div class="modal-body">
                <div id="emailTestModalContent">
                    <div class="row" style="margin-left:5%;margin-right:5%;margin-bottom:5px;">
                        <label for="" class="col-md-3 control-label" style="padding-top:7px;">Email To</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="emailTestSubmitTo">
                        </div>
                        <label style="text-align:left; white-space: nowrap; color:red; font-size:11px;" class="col-sm-12 control-label">*Please save your changes first before sending email for the changes to reflect in the test email.</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div id="emailTestModalButtonContent">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" id="btnSendEmailTest" class="btn btn-success" onclick="submitCampaignEmailTest()">Send</button>
                </div>
            </div>
        </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 reactivatescreen() {
        swal2("activation screen [index]");
    }
</script>