<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 style="display:none;" class="nav-item">
                <a class="nav-link" id="delivery-tab" data-toggle="tab" style="padding-top:0" href="#delivery" aria-controls="delivery">
                    <i class="flaticon2-box-1"></i>Delivery
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="email-tab" data-toggle="tab" style="padding-top:0" href="#email" aria-controls="email">
                    <i class="flaticon2-box-1"></i>Email
                </a>
            </li>
            <!-- <li class="nav-item">
                <a class="nav-link" id="recipient-tab" data-toggle="tab" style="padding-top:0" href="#recipient" aria-controls="recipient">
                    <i class="flaticon2-box-1"></i>Recipient
                </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" id="form_attachment" action="#" enctype="multipart/form-data">
                    <div class="card-body row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="display: none;">
                                <div class="col-lg-3">
                                    <input type="text" class="form-control" id="txtCampaignID">
                                    <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;">Campaign Name:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCampaignName" onchange="checkCampaignCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3" style="align-self: center;">
                            <label class="checkbox">
                                <input type="checkbox" id="chkCampaignActive" checked="checked"> Active
                            </label>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label" style="white-space: nowrap;">Start Date:</label>
                                <div class="col-lg-3">
                                    <input type="date" class="form-control" id="txtCampaignDateFrom">
                                    <span class="form-text text-muted"></span>
                                </div>
                                <label class="col-lg-2 col-form-label">End Date:</label>
                                <div class="col-lg-3">
                                    <input type="date" class="form-control" id="txtCampaignDateTo">
                                    <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 btnCampaignSave"style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal" onclick="addCampaign();">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="cancelCampaignEntry();">Cancel</button>
                        </div>
                    </div>
                    <br>
                    <div class="card-body row">
                        <div class="col-md-3">
                            <div class="tableFixHead" style="height: 600px;overflow: auto;">
                                <table class="table table-bordered" id="campaign-table">
                                    <thead style="background-color: grey;color:white;">
                                        <tr>
                                            <th width="95%">Filename</th> 
                                            <th width="5%"></th> 
                                        </tr>                                
                                    </thead>
                                    <tbody id="campaign-attach-table-body">
                                        <tr id="row_attach_1">
                                            <td id="col_attachment1">
                                                <input type="file" class="form-control" id="txtCampaignAttachment1" name="txtCampaignAttachment1" onchange="onCampaignAttachmentUpload(this, 1);" />
                                                <input type="hidden" class="form-control" id="txtCampaignAttachmentFilename1"/>
                                            </td>
                                            <td id="col_action1" style="padding: 5px !important;">
                                                <button type="button" class="btn btn btn-icon btn-success btn-sm btn-icon-md" onclick="uploadCampaignAttachment(1);"><i class="fa fa-upload"></i></button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="tab-pane fade" id="email" role="tabpanel" aria-labelledby="email-tab">
                <form class="form">
                    <div class="card-body row">
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label class="col-lg-2 col-form-label" style="white-space: nowrap;">Campaign Name:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCampaignName2" disabled>
                                    <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-sm-12">
                            <label class="col-sm-12" style="padding: 0px; padding-bottom: 15px;"> <strong>Email</strong></label>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label class="col-lg-2 col-form-label" style="white-space: nowrap;">Email Subject:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCampaignEmailSubject">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label class="col-lg-2 col-form-label" style="white-space: nowrap;">Email Content:</label>
                                <div class="col-lg-8">
                                    <textarea type="text" class="form-control" id="txtCampaignEmailContent"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label class="col-lg-2 col-form-label" style="white-space: nowrap;">Email Footer:</label>
                                <div class="col-lg-8">
                                    <textarea type="text" class="form-control" id="txtCampaignEmailFooter"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-lg-4">
                            <button class="col-sm-2 btn btn-secondary" type="button" id="btnSaveCampaignTestEmail" style="background-color:grey;color:white;margin-right: 10px;width:130px;" onclick="showCampaignTestEmailModal()">Test Email</button>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-md-12">
                            <hr>
                        </div>
                    </div>
                    <div class="card-body row" id="campaignEmailHeaderImageDiv">
                        <div class="col-sm-12">
                            <label class="col-sm-12" style="padding: 0px; padding-bottom: 15px;"> <strong>Email Header Image</strong></label>
                        </div>
                    </div>
                    <div class="col-md-8" style="margin-top: 20px;clear: both;">
                        <button class="col-sm-2 btn btn-secondary btnCampaignSave"style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal" onclick="addCampaign();">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="cancelCampaignEntry();">Cancel</button>
                    </div>
                </form>
            </div>
            <!--end::Form-->
        </div>
    </div>
</div>

<!-- Email Test Modal -->
<div class="modal fade" id="emailTestModal" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#eb8015;">
                <h5 class="modal-title" id="emailTestModalTitle" style="color:white;">Email Testing</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body" style="padding: 15px; padding-bottom: 0px;">
                <div class="row" style="padding:0px 15px 0px 15px;">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label style="text-align:left; white-space: nowrap;" class="col-sm-4 control-label">Send From:</label>
                            <div class="col-sm-6">
                                <select class="form-control" id="cobCampaignTestEmailFrom">
                                    <?php echo $this->getCompanyFromOption();?>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label style="text-align:left; white-space: nowrap;" class="col-sm-4 control-label">Email To:</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="cobCampaignTestEmailTo">
                            </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>
            <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="sendCampaignTestingEmail()">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]");
    }

    $(document).ready(function () {
        $('#campaign-recipient-table thead th').on('click', function () {
            const table = $(this).closest('table');
            const tbody = table.find('tbody');
            const index = $(this).index();
            const type  = $(this).data('type') || 'string';

            const asc   = $(this).data('asc') !== true;
            $(this).data('asc', asc).siblings().removeData('asc');

            const rows = tbody.find('tr').get();

            rows.sort(function (a, b) {
                let A = $(a).children('td').eq(index).text().trim();
                let B = $(b).children('td').eq(index).text().trim();

                A = A.toLowerCase();
                B = B.toLowerCase();

                return asc
                    ? A.localeCompare(B)
                    : B.localeCompare(A);
            });

            $.each(rows, function (_, row) {
                tbody.append(row);
            });
        });

        $('#cobCampaignRecipientCustomer').select2({
            width: '100%'
        });
    });
</script>