<style>
.window-description {
    overflow: hidden;
}
.window-description .select2-results__options {
    max-height: 135px !important;
}
.window-description .select2-container {
    width: 100% !important;
}

#divSelectTargetOptions .select2-container {
    width: 100% !important;
}

#divSelectTargetOptions .form-label {
    display: block;
    margin-bottom: 0.25rem;
}

.row.align-items-start [class*="col-"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


</style>

<div class="window-description">

<?php $languages = CE_Lib::getEnabledLanguages(true);
if(count($languages) > 1){ ?>
    <ul class="nav nav-pills mb-3" id="langTabs" role="tablist">
        <?php $active = true;
        foreach($languages as $key => $lang){ ?>
        <li class="nav-item" role="presentation">
            <button class="nav-link<?php if($active){echo ' active';$active=false;} ?>"
                data-lang="<?php echo $key;?>"
                type="button">
                <?php echo $lang;?>
            </button>
        </li>
        <?php } ?>
    </ul>
<?php } ?>

<div class="row g-3 align-items-end mb-3">
    <div class="col-md-6">
        <label for="mainlanguagetitle" class="form-label fw-semibold">
            <?php echo $this->user->lang('Title');?>
        </label>
        <?php if(count($languages) > 1){
            $active = true;
            foreach($languages as $key => $lang){ ?>
                <span class="language <?php echo $key; ?>" <?php if(!$active){echo 'style="display: none"';} $active=false; ?> >
                    <input type="text"
                        class="form-control required"
                        name="title<?php echo $key;?>"
                        id="<?php if($active){echo 'mainlanguagetitle';}?>"
                        value="<?php echo $this->escape($this->titleLanguages[$key]);?>">
                </span>
        <?php }} else { ?>
            <input type="text" class="form-control required" name="title" id="mainlanguagetitle" value="<?php echo $this->escape($this->title);?>">
        <?php } ?>
    </div>
    <div class="col-md-4 col-lg-3">
        <label for="inputDate" class="form-label fw-semibold">
            <?php echo $this->user->lang('Date');?>
        </label>
        <input type="text" class="form-control" id="date"  name="date" value="<?php echo $this->postDate; ?>" />
    </div>
    <div class="col-md-4 col-lg-3">
        <label for="inputTime" class="form-label fw-semibold">
            <?php echo $this->user->lang('Time');?>
        </label>
        <input type="time" class="form-control" id="time"  name="time" value="<?php echo date('H:i', strtotime($this->postTime)); ?>" data-default-time="<?php echo date('H:i', strtotime($this->postTime)); ?>" />
    </div>
</div>

<div class="mb-3">
    <label for="mainlanguageexcerpt" class="form-label fw-semibold">
        <?php echo $this->user->lang('Excerpt');?>
    </label>
    <?php if(count($languages) > 1){
        $active=true;
        foreach($languages as $key=>$lang){?>
        <span class="language <?php echo $key; ?>" <?php if(!$active){echo 'style="display: none"';} $active=false; ?> >
            <textarea name="excerpt<?php echo $key;?>"
                class="form-control required"
                rows="3"><?php echo $this->excerptLanguages[$key];?></textarea>
        </span>
    <?php }} else { ?>
        <textarea name="excerpt" id="mainlanguageexcerpt" class="form-control required" rows="3"><?php echo $this->excerpt;?></textarea>
    <?php } ?>
</div>

<div class="mb-4">
    <label for="mainlanguagecontent" class="form-label fw-semibold">
        <?php echo $this->user->lang('Content');?>
    </label>
    <?php if(count($languages) > 1){
        $active=true;
        foreach($languages as $key=>$lang){?>
        <span class="language <?php echo $key; ?>" <?php if(!$active){echo 'style="display: none"';} $active=false; ?> >
            <textarea name="content<?php echo $key;?>"
                class="form-control wysihtml5 required"
                data-parent-selector="#announcement-window"
                data-withembed="true"
                rows="8"><?php echo $this->contentLanguages[$key];?></textarea>
        </span>
    <?php }} else { ?>
        <textarea name="content" id="mainlanguagecontent" class="form-control wysihtml5 required" data-parent-selector="#announcement-window" data-withembed="true" rows="8"><?php echo $this->content;?></textarea>
    <?php } ?>
</div>

<div class="row g-3 align-items-start mb-4">
    <!-- Audience -->
    <div class="col-md-4 d-flex flex-column">
        <label for="selectRecipientType" class="form-label fw-semibold">
            <?php echo $this->user->lang('Audience'); ?>
        </label>
        <select name="recipientType" id="selectRecipientType" class="form-select select2 w-100">
            <option value="<?php echo $this->constant['RECIPIENTS_PUBLIC'];?>" <?php echo $this->recipientType==$this->constant['RECIPIENTS_PUBLIC']?'selected':'';?>>
                <?php echo $this->user->lang('Public Announcement');?>
            </option>
            <option value="<?php echo $this->constant['RECIPIENTS_CLIENT_STATUS'];?>" <?php echo $this->recipientType==$this->constant['RECIPIENTS_CLIENT_STATUS']?'selected':'';?>>
                <?php echo $this->user->lang('Select Client Statuses');?>
            </option>
            <option value="<?php echo $this->constant['RECIPIENTS_SERVERS'];?>" <?php echo $this->recipientType==$this->constant['RECIPIENTS_SERVERS']?'selected':'';?>>
                <?php echo $this->user->lang('Select Servers');?>
            </option>
            <option value="<?php echo $this->constant['RECIPIENTS_PRODUCT_GROUPS'];?>" <?php echo $this->recipientType==$this->constant['RECIPIENTS_PRODUCT_GROUPS']?'selected':'';?>>
                <?php echo $this->user->lang('Select Product Groups');?>
            </option>
            <option value="<?php echo $this->constant['RECIPIENTS_PRODUCTS'];?>" <?php echo $this->recipientType==$this->constant['RECIPIENTS_PRODUCTS']?'selected':'';?>>
                <?php echo $this->user->lang('Select Products');?>
            </option>
            <option value="<?php echo $this->constant['RECIPIENTS_CUSTOMER_GROUPS'];?>" <?php echo $this->recipientType==$this->constant['RECIPIENTS_CUSTOMER_GROUPS']?'selected':'';?>>
                <?php echo $this->user->lang('Select Client Groups');?>
            </option>
        </select>
    </div>

    <!-- Targets -->
    <div class="col-md-8 d-flex flex-column">
        <div id="divSelectTargetOptions" class="w-100">

            <div id="divSelectStatus" class="mb-2 visually-hidden">
                <label for="selectStatusTarget" class="form-label fw-semibold">
                    <?php echo $this->user->lang('Client Status');?>:
                </label>
                <select id="selectStatusTarget" name="statusTarget[]" multiple class="form-select select2 w-100"></select>
            </div>

            <div id="divSelectServer" class="mb-2 visually-hidden">
                <label for="selectServerTarget" class="form-label fw-semibold">
                    <?php echo $this->user->lang('Servers');?>:
                </label>
                <select id="selectServerTarget" name="serverTarget[]" multiple class="form-select select2 w-100"></select>
            </div>

            <div id="divSelectProductGroup" class="mb-2 visually-hidden">
                <label for="selectProductGroupTarget" class="form-label fw-semibold">
                    <?php echo $this->user->lang('Product Groups');?>:
                </label>
                <select id="selectProductGroupTarget" name="productGroupTarget[]" multiple class="form-select select2 w-100"></select>
            </div>

            <div id="divSelectProduct" class="mb-2 visually-hidden">
                <label for="selectProductTarget" class="form-label fw-semibold">
                    <?php echo $this->user->lang('Products');?>:
                </label>
                <select id="selectProductTarget" name="productTarget[]" multiple class="form-select select2 w-100"></select>
            </div>

            <div id="divSelectCustomerGroup" class="mb-2 visually-hidden">
                <label for="selectCustomerGroupTarget" class="form-label fw-semibold">
                    <?php echo $this->user->lang('Customer Groups');?>:
                </label>
                <select id="selectCustomerGroupTarget" name="customerGroupTarget[]" multiple class="form-select select2 w-100"></select>
            </div>

        </div>
    </div>
</div>



<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" name="pinned" id="inputPinned" <?php echo $this->pinned==1?'checked':'';?>>
    <label class="form-check-label" for="inputPinned"><?php echo $this->user->lang('Pin this announcement');?></label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" name="published" id="inputPublished" <?php echo $this->published==1?'checked':'';?>>
    <label class="form-check-label" for="inputPublished"><?php echo $this->user->lang('Publish this announcement to the recipients');?></label>
</div>
<div class="form-check form-check-inline" data-bs-toggle="tooltip" data-bs-title="<?php echo $this->user->lang('Checking this box will send this announcement to all recipients upon Submit.');?>">
    <input class="form-check-input" type="checkbox" name="sendEmail" id="inputSendEmail">
    <label class="form-check-label" for="inputSendEmail"><?php echo $this->user->lang('Email this announcement');?></label>
</div>
<div class="form-check form-check-inline ms-3" id="labelOverrideOptOut" style="display:none" data-bs-toggle="tooltip" data-bs-title="<?php echo $this->user->lang('Force emailing even if opted out.');?>">
    <input class="form-check-input" type="checkbox" name="overrideOptOut" id="inputOverrideOptOut">
    <label class="form-check-label text-decoration-underline" for="inputOverrideOptOut"><?php echo $this->user->lang('Override Opt-Out?');?></label>
</div>

</div>

<script>
$(function () {
    // Enable Bootstrap tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();

    // Language tab switching
    const langTabs = $('#langTabs button');
    langTabs.on('click', function () {
        const lang = $(this).data('lang');
        langTabs.removeClass('active');
        $(this).addClass('active');
        $('.language').hide();
        $('.language.' + lang).show();
    });

    // Recipient type toggle
    $('#selectRecipientType').on('change', function () {
        const val = parseInt($(this).val());
        $('#divSelectTargetOptions > div').removeClass('required').addClass('visually-hidden');
        switch (val) {
            case <?php echo $this->constant['RECIPIENTS_CLIENT_STATUS']; ?>:
                $('#divSelectStatus').addClass('required').removeClass('visually-hidden'); break;
            case <?php echo $this->constant['RECIPIENTS_SERVERS']; ?>:
                $('#divSelectServer').addClass('required').removeClass('visually-hidden'); break;
            case <?php echo $this->constant['RECIPIENTS_PRODUCT_GROUPS']; ?>:
                $('#divSelectProductGroup').addClass('required').removeClass('visually-hidden'); break;
            case <?php echo $this->constant['RECIPIENTS_PRODUCTS']; ?>:
                $('#divSelectProduct').addClass('required').removeClass('visually-hidden'); break;
            case <?php echo $this->constant['RECIPIENTS_CUSTOMER_GROUPS']; ?>:
                $('#divSelectCustomerGroup').addClass('required').removeClass('visually-hidden'); break;
        }
    });

    $('#selectRecipientType').change();

    // Show/Hide "Override Opt-Out"
    $('#inputSendEmail').on('change', function () {
        $('#labelOverrideOptOut').toggle(this.checked);
    });

    // --- Select2 Initialization ---
    const dropdownParent = $('#announcement-window .modal-content').length
        ? $('#announcement-window .modal-content')
        : $('body');

    const opts = {
        width: '100%',
        multiple: true,
        dropdownParent: dropdownParent,
        dropdownPosition: 'below'
    };

    $('#selectStatusTarget').select2({
        ...opts,
        placeholder: clientexec.lang('Select Statuses'),
        data: <?php echo $this->statusOptions; ?>
    });

    $('#selectServerTarget').select2({
        ...opts,
        placeholder: clientexec.lang('Select Servers'),
        data: <?php echo $this->serverOptions; ?>
    });

    $('#selectProductGroupTarget').select2({
        ...opts,
        placeholder: clientexec.lang('Select Package Groups'),
        data: <?php echo $this->packageGroupOptions; ?>
    });

    $('#selectProductTarget').select2({
        ...opts,
        placeholder: clientexec.lang('Select Packages'),
        data: <?php echo $this->packageOptions; ?>
    });

    $('#selectCustomerGroupTarget').select2({
        ...opts,
        placeholder: clientexec.lang('Select Client Groups'),
        data: <?php echo $this->customerGroupOptions; ?>
    });

    $('#selectRecipientType').select2({
        width: '100%',
        dropdownParent: dropdownParent,
        dropdownPosition: 'below'
    });

    $('#date').datepicker({
        format: parseDateFormat()
    });

    clientexec.postPageLoad('.richwindow');

    <?php if ($this->id > 0) {
    $encodedTargets = json_encode(array_column($this->recipientTargetIDs, 'id'));
    switch ($this->recipientType) {
        case $this->constant['RECIPIENTS_CLIENT_STATUS']:
            echo <<<JS
                $('#selectStatusTarget')
                    .addClass("required")
                    .val($encodedTargets)
                    .trigger('change');
            JS;
            break;

        case $this->constant['RECIPIENTS_SERVERS']:
            echo <<<JS
                $('#selectServerTarget')
                    .addClass("required")
                    .val($encodedTargets)
                    .trigger('change');
            JS;
            break;

        case $this->constant['RECIPIENTS_PRODUCT_GROUPS']:
            echo <<<JS
                $('#selectProductGroupTarget')
                    .addClass("required")
                    .val($encodedTargets)
                    .trigger('change');
            JS;
            break;

        case $this->constant['RECIPIENTS_PRODUCTS']:
            echo <<<JS
                $('#selectProductTarget')
                    .addClass("required")
                    .val($encodedTargets)
                    .trigger('change');
            JS;
            break;

        case $this->constant['RECIPIENTS_CUSTOMER_GROUPS']:
            echo <<<JS
                $('#selectCustomerGroupTarget')
                    .addClass("required")
                    .val($encodedTargets)
                    .trigger('change');
            JS;
            break;
    }
} ?>

});

    function parseDateFormat() {
        switch (clientexec.dateFormat) {
            case 'm/d/Y':
                return 'mm/dd/yyyy';
                break;
            case 'd/m/Y':
                return 'dd/mm/yyyy';
                break;
        }
    }


    function initTinyMCE() {
        tinymce.remove();
        tinymce.init({
            selector: '.wysihtml5',
            license_key: 'gpl',
            promotion: false,
            branding: false,
            statusbar: false,
            resize: false,
            menubar: false,
            setup: function (editor) {
                editor.on('change keyup', function () {
                    editor.save();
                });
            }
        });
    }

    $(document).on('shown.bs.modal', '.richwindow', function () {
        initTinyMCE();
    });
</script>