<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="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">
                <button style="display:none;" id="btnSaveCorporateGift">OK</button>
                <!--begin::Form-->
                <form class="form">
                    <div class="card-body row">
                        <div class="col-lg-3">
                            <div class="form-group row" style="display: none;">
                                <div class="col-lg-3">
                                    <input type="text" class="form-control" id="txtCorporateGiftID">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Gift Name:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCorporateGiftName" onchange="checkCorporateGiftCode(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="chkCorporateGiftActive" checked="checked"> Active
                            </label>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-lg-3" style="display:none"><!-- not in used anymore-->
                            <div class="form-group row">
                                <label class="col-lg-5 col-form-label" style="white-space: nowrap;">Delivery Date From:</label>
                                <div class="col-lg-6">
                                    <input type="date" class="form-control" id="txtCorporateGiftDateFrom">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3" style="display:none"><!-- not in used anymore-->
                            <div class="form-group row">
                                <label class="col-lg-5 col-form-label">Delivery Date To:</label>
                                <div class="col-lg-6">
                                    <input type="date" class="form-control" id="txtCorporateGiftDateTo">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group row">
                                <label class="col-lg-5 col-form-label">Delivery Cut Off:</label>
                                <div class="col-lg-6">
                                    <input type="date" class="form-control" id="txtCorporateGiftCutOff">
                                    <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>Item</strong></label>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Item Name:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCorporateGiftItemName">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                        <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="txtCorporateGiftItemImage" class="col-sm-12" style="padding: 0px;">Item Image</label> -->
                                        <div class="col-sm-12" style="padding: 0px;">
                                            <input type="file" class="form-control" id="txtCorporateGiftItemImage" name="txtCorporateGiftItemImage" onchange="encodeImageFileAsURLCorporateGiftItemImage(event);"><br>
                                            <input type="hidden" class="form-control" id="txtCorporateGiftItemImageFilename">
                                            <input type="hidden" class="form-control" id="txtCorporateGiftItemImageFileExt">
                                            <textarea style="display: none;" id="txtCorporateGiftItemImageFileBase64" 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="btnCorporateGiftRemoveItemImage" onclick="removeCorporateGiftItemImage();">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="imgCorporateGiftItemImage" 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-md-8" style="margin-top: 20px;clear: both;">
                            <button class="col-sm-2 btn btn-secondary btnSaveCorporateGift" 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="cancelCorporateGiftEntry();">Cancel</button>
                        </div>
                    </div>
                    <br>
                    <div class="card-body row">
                        <div class="col-md-3">
                            <div class="tableFixHead" id="testData" style="height: 600px;overflow: auto;">
                                <table class="table table-bordered" id="corporate-gift-table">
                                    <thead style="background-color: grey;color:white;">
                                        <tr>
                                            <th width="95%">Item</th> 
                                            <th width="5%"></th> 
                                        </tr>                                
                                    </thead>
                                    <tbody id="corporate-gift-table-body">
                                    </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-4">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Gift Name:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCorporateGiftName2" 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-4">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Email Subject:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCorporateGiftEmailSubject">
                                    <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">Email Button:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtCorporateGiftEmailButton">
                                    <span class="form-text text-muted"></span>
                                </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">Email Content:</label>
                                <div class="col-lg-8">
                                    <textarea type="text" class="form-control" id="txtCorporateGiftEmailContent"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Email Footer:</label>
                                <div class="col-lg-8">
                                    <textarea type="text" class="form-control" id="txtCorporateGiftEmailFooter"></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="btnSaveCorporateGiftTestEmail" style="background-color:grey;color:white;margin-right: 10px;" onclick="showCorporateGiftTestEmailModal()">Test Email</button>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-md-12">
                            <hr>
                        </div>
                    </div>
                    <div class="card-body row" id="corporateGiftEmailHeaderImageDiv">
                        <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" id="btnSaveCorporateGiftEmail" 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="cancelCorporateGiftEntry();">Cancel</button>
                    </div>
                </form>
            </div>
            <div class="tab-pane fade" id="delivery" role="tabpanel" aria-labelledby="delivery-tab">
                <form class="form">
                    <div class="card-body row">
                        <div class="col-md-6">
                            <div class="tableFixHead" id="testData" style="height: 600px;overflow: auto;">
                                <table class="table table-bordered" id="corporate-gift-delivery-table">
                                    <thead style="background-color: grey;color:white;">
                                        <tr>
                                            <th width="30%">Delivery Date</th> 
                                            <th width="35%">Delivery Time 1</th> 
                                            <th width="35%">Delivery Time 2</th> 
                                            <th width="4%"></th> 
                                        </tr>                                
                                    </thead>
                                    <tbody id="corporate-gift-delivery-table-body">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <button class="btn btn-success btn-sm btn-icon btn-icon-md" type="button" id="btnNewDelivery" onclick="addDelivery()">Add</button>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div class="col-md-8" style="margin-top: 20px;clear: both;">
                            <button class="col-sm-2 btn btn-secondary" id="btnSaveDeliveryTime" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal">OK</button>
                            <!-- <button class="col-sm-2 btn btn-secondary" id="btnAmendDeliveryTime" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal">Amend</button> -->
                            <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal" onclick="cancelCorporateGiftEntry();">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="tab-pane fade" id="recipient" role="tabpanel" aria-labelledby="recipient-tab">
                <form class="form">
                    <div class="card-body row">
                        <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-9">
                                    <select class="form-control" id="cobCorporateGiftRecipientCustomer" onchange="changeContactName()">
                                        <?php echo $this->getCustomerOption(); ?>
                                    </select>
                                    <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">Contact Name:</label>
                                <div class="col-lg-9">
                                    <select class="form-control" id="cobCorporateGiftRecipientContact">
                                        <option> -- Select Contact -- </option>
                                    </select>
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <button class="btn btn-success btn-sm btn-icon btn-icon-md" type="button" id="btnNewRecipient" onclick="addRecipient()">Add</button>
                        </div>
                    </div>
                    <br>
                    <div class="card-body row">
                        <div class="col-md-10">
                            <div class="tableFixHead" id="testData" style="height: 600px;overflow: auto;">
                                <table class="table table-bordered" id="corporate-gift-recipient-table">
                                    <thead style="background-color: grey;color:white;">
                                        <tr>
                                            <th data-index="0" data-type="string" style="display:none;"></th> 
                                            <th data-index="1" data-type="string" width="43%">Customer Name</th> 
                                            <th data-index="2" data-type="string" width="43%">Contact Name</th> 
                                            <th data-type="number" width="10%">Gift Amount</th> 
                                            <th width="4%">Action</th> 
                                        </tr>                                
                                    </thead>
                                    <tbody id="corporate-gift-recipient-table-body">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-8" style="margin-top: 20px;clear: both;">
                            <button class="col-sm-2 btn btn-secondary" id="btnSaveRecipient" 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="cancelCorporateGiftEntry();">Cancel</button>
                        </div>
                    </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="cobCorporateGiftTestEmailFrom">
                                    <?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="cobCorporateGiftTestEmailTo">
                            </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="sendTestingEmail()">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 () {
        $('#corporate-gift-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);
            });
        });

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