<tr>
    <td>
        <h3><?= GetMessage("skyweb24.popuppro_VIEWS_STEP_1") ?> </h3>
        <div class="slide_type">
            <?
            $formType = '';

            foreach ($types as $nextType) {

                $activeClass = '';
                if (!empty($nextType['active']) && $nextType['active'] == true) {
                    $activeClass = ' active';
                    $formType = $nextType['code'];
                } ?>

                <a href="javascript:void(0);" data-id="<?= $nextType['code'] ?>"
                   data-target="<?= $nextType['target'] ?>"
                   data-description="<?= $nextType['description'] ?>" class="slide<?= $activeClass ?>"
                   title="<?= $nextType['name'] ?>">
                    <h4><?= $nextType['name'] ?></h4>
                    <img src="/bitrix/themes/.default/<?= $module_id ?>/types/<?= $nextType['code'] ?>.jpg"
                         alt="<?= $nextType['name'] ?>"/>
                </a>
                <?
            } ?>
        </div>
        <input type="hidden" name="type" value="<?= $formType ?>"/>
        <div class="window_description">
            <p><b><?= GetMessage("skyweb24.popuppro_TYPE_DESCRIPTION") ?>:</b> <span
                    id="subslider_desc"><?= GetMessage("skyweb24.popuppro_TYPE_NAME_BANNER_DESCRIPTION") ?></span>
            </p>
            <p><b><?= GetMessage("skyweb24.popuppro_TYPE_TARGET") ?>:</b> <span
                    id="subslider_target"><?= GetMessage("skyweb24.popuppro_TYPE_NAME_BANNER_TARGET") ?></span>
            </p>
        </div>
        <h3><?= GetMessage("skyweb24.popuppro_VIEWS_STEP_2") ?></h3>
        <div class="select_block">
            <header>
                <div id="templates_list"></div>
                <div id="edit_view"></div>
            </header>
            <h3><?= GetMessage("skyweb24.popuppro_VIEWS_STEP_DEMO") ?></h3>
            <section class="preview">
                <? /*--new preview--*/
                ?>
                <div id="detail_template_area_outer">
                    <div class="bx-editor-block-panel preview-panel" style="">
                        <div class="bx-block-editor-preview-container" style="display: block;">
                            <div class="shadow">
                                <div class="edit-text"></div>
                                <div class="error-text"></div>
                            </div>
                            <div class="devices">
                                <div class="device phone" data-bx-preview-device-class="phone"
                                     data-bx-preview-device-width="337"
                                     data-bx-preview-device-height="480">
                                    <span><?= GetMessage("skyweb24.popuppro_PREVIEW_PHONE") ?></span>
                                </div>
                                <div class="device tablet" data-bx-preview-device-class="tablet"
                                     data-bx-preview-device-width="537"
                                     data-bx-preview-device-height="716">
                                    <span><?= GetMessage("skyweb24.popuppro_PREVIEW_TABLET") ?></span>
                                </div>
                                <div class="device desktop" data-bx-preview-device-class="desktop"
                                     data-bx-preview-device-width="1024"
                                     data-bx-preview-device-height="768">
                                    <span><?= GetMessage("skyweb24.popuppro_PREVIEW_DESKTOP") ?></span>
                                </div>
                            </div>
                            <center>
                                <div class="iframe-wrapper" id="iframe-wrapper"
                                     style="margin-bottom:20px;">
                                    <div class="iframe_background_wrapper"
                                         style="position:absolute;width: 100%;height: 100%;">
                                        <div class="background_opacity" id="overlay_simulator"
                                             style="height: 100%;width: 100%;background: #00000075; position:absolute;z-index: 1;"></div>
                                        <iframe src="/" frameborder="0" sandbox="allow-same-origin"
                                                class="site_background"
                                                style="width: 100%;height: 100%;position:relative;"
                                                scrolling="no"></iframe>
                                    </div>

                                    <iframe name="preview_iframe"
                                            src="/bitrix/js/skyweb24.popuppro/iframe.html"
                                            class="preview-iframe" scrolling="no"
                                            style="z-index: 2;position:relative;width: 768px; height: 1024px; pointer-events: none;"></iframe>
                                </div>
                                <div class="btn-group">
                                    <a href="javascript:void(0);"
                                       class="button action-show"><?= GetMessage("skyweb24.popuppro_BTN_WINDOW_SHOW"); ?></a>
                                    <a href="javascript:void(0);"
                                       class="button action-hide"><?= GetMessage("skyweb24.popuppro_BTN_WINDOW_HIDE"); ?></a>
                                </div>

                            </center>

                        </div>
                        <div style="clear:both;"></div>
                    </div>
                </div>
                <script>

                </script>
                <? /*--e. o. new preview--*/
                ?>
                <div id="detail_template_area"></div>
            </section>
            <h3><?= GetMessage("skyweb24.popuppro_VIEWS_STEP_3") ?></h3>
            <section>


                <div id="edit_content"></div>
                <?
                $db_iblock_type = CIBlockType::GetList();
                $iblockTypes = [];
                while ($ar_iblock_type = $db_iblock_type->Fetch()) {
                    $arIBType = CIBlockType::GetByIDLang($ar_iblock_type["ID"], LANG);
                    $iblockTypes[$ar_iblock_type['ID']] = $arIBType['NAME'];
                }

                $res = CIBlock::GetList(['TYPE' => 'ASC', 'NAME' => 'ASC'], [], false);
                $avIblocks = [];
                $tmpType = '';
                while ($ar_res = $res->Fetch()) {
                    if ($tmpType != $ar_res['IBLOCK_TYPE_ID']) {
                        $tmpType = $ar_res['IBLOCK_TYPE_ID'];
                    }
                    $avIblocks[$tmpType][$ar_res['ID']] = $ar_res['NAME'];
                }

                $editArr = $editableWindow->getConditions();

                $checkSaveToList = (!empty($editArr['contact']['emailList'])) ? ' checked="checked"' : '';
                $checkRegister = (!empty($editArr['contact']['register'])) ? ' checked="checked"' : '';
                $checkSaveToIblock = (!empty($editArr['contact']['iblock'])) ? ' checked="checked"' : '';
                $checkSendToManager = $templateLink = '';


                if (!empty($editArr['contact']['posttemplate'])) {
                    $checkSendToManager = ' checked="checked"';
                    $templateLink = ' &nbsp; <a href="/bitrix/admin/message_edit.php?ID=' . $editArr['contact']['posttemplate'] . '" target="_blank">' . GetMessage("skyweb24.popuppro_CONTACT_EMAIL_TEMPLATE") . ' #' . $editArr['contact']['posttemplate'] . '</a>';
                }
                ?>


                <div class="block timer">

                    <div class="info"><?= GetMessage("skyweb24.popuppro_TIMER_NAME") ?></div>
                    <label class="pref">
                        <span><?= GetMessage("skyweb24.popuppro_TIMER_ENABLE") ?></span>
                        <span class="skwb24-item-hint" id="hint_timer_enable">?</span>
                        <script>
                            new top.BX.CHint({
                                parent: top.BX("hint_timer_enable"),
                                show_timeout: 10,
                                hide_timeout: 200,
                                dx: 2,
                                preventHide: true,
                                min_width: 400,
                                hint: '<?=GetMessage("skyweb24.popuppro_TIMER_ENABLE_HINT")?>'
                            });
                        </script>
                        <? $checkTimer = ($editArr['timer']['enabled'] == 'Y') ? 'checked="checked"' : ''; ?>
                        <input type="checkbox" name="timer_enable" value="Y" <?= $checkTimer ?>>
                    </label>

                    <? // ��� �������
                    ?>
                    <label class="pref toggle">
                        <span><?= GetMessage("skyweb24.popuppro_TIMER_IS_DAILY") ?></span>
                        <span class="skwb24-item-hint" id="hint_timer_daily">?</span>
                        <script>
                            new top.BX.CHint({
                                parent: top.BX("hint_timer_daily"),
                                show_timeout: 10,
                                hide_timeout: 200,
                                dx: 2,
                                preventHide: true,
                                min_width: 400,
                                hint: '<?=GetMessage("skyweb24.popuppro_TIMER_IS_DAILY_HINT")?>'
                            });
                        </script>
                        <? $checkDaily = ($editArr['timer']['daily'] == 'Y') ? 'checked="checked"' : ''; ?>
                        <input type="checkbox" name="timer_daily" value="Y" <?= $checkDaily ?>>
                    </label>
                    <label class="pref toggle">
                        <span><?= GetMessage("skyweb24.popuppro_TIMER_DAILY_TIME") ?></span>
                        <span class="skwb24-item-hint" id="hint_daily_time_hint">?</span>
                        <script>
                            new top.BX.CHint({
                                parent: top.BX("hint_daily_time_hint"),
                                show_timeout: 10,
                                hide_timeout: 200,
                                dx: 2,
                                preventHide: true,
                                min_width: 400,
                                hint: '<?=GetMessage("skyweb24.popuppro_TIMER_DAILY_TIME_HINT")?>'
                            });
                        </script>
                        <div class="adm-input-wrap adm-input-wrap-calendar">
                            <input class="adm-input adm-input-calendar" type="time" name="daily_time"
                                   value="<?= $editArr['timer']['daily_time'] ?>">
                        </div>
                    </label>
                    <? // ��� �������
                    ?>

                    <label class="pref toggle">
                        <span><?= GetMessage("skyweb24.popuppro_TIMER_TIME") ?></span>
                        <span class="skwb24-item-hint" id="hint_time_hint">?</span>
                        <script>
                            new top.BX.CHint({
                                parent: top.BX("hint_time_hint"),
                                show_timeout: 10,
                                hide_timeout: 200,
                                dx: 2,
                                preventHide: true,
                                min_width: 400,
                                hint: '<?=GetMessage("skyweb24.popuppro_TIMER_TIME_HINT")?>'
                            });
                        </script>
                        <div class="adm-input-wrap adm-input-wrap-calendar">
                            <input class="adm-input adm-input-calendar" type="text" name="timer_date"
                                   value="<?= $editArr['timer']['date'] ?>">
                            <span class="adm-calendar-icon"
                                  title="<?= GetMessage("skyweb24.popuppro_TIMER_TIME_TITLE") ?>"
                                  onclick="BX.calendar({node:this,field:'timer_date',form:'',bTime:true,bHideTime:false})"></span>
                        </div>
                    </label>

                    <label class="pref toggle">
                        <span><?= GetMessage("skyweb24.popuppro_SERVER_TIME") ?></span>
                        <span class="skwb24-item-hint" id="hint_server_time_hint">?</span>
                        <script>
                            new top.BX.CHint({
                                parent: top.BX("hint_server_time_hint"),
                                show_timeout: 10,
                                hide_timeout: 200,
                                dx: 2,
                                preventHide: true,
                                min_width: 400,
                                hint: '<?=GetMessage("skyweb24.popuppro_SERVER_TIME_HINT")?>'
                            });
                        </script>
                        <div class="dateServer">
                            <?
                            $today = date("d.m.Y H:i:s");
                            echo $today;
                            ?>
                        </div>
                    </label>
                    <label class="pref toggle">
                        <span><?= GetMessage("skyweb24.popuppro_TIMER_TEXT") ?></span>
                        <span class="skwb24-item-hint" id="hint_timer_text">?</span>
                        <script>
                            new top.BX.CHint({
                                parent: top.BX("hint_timer_text"),
                                show_timeout: 10,
                                hide_timeout: 200,
                                dx: 2,
                                preventHide: true,
                                min_width: 400,
                                hint: '<?=GetMessage("skyweb24.popuppro_TIMER_TEXT_HINT")?>'
                            });
                        </script>
                        <input type="text" name="timer_text"
                               value="<? echo (!empty($editArr['timer']['text'])) ? $editArr['timer']['text'] : GetMessage("skyweb24.popuppro_TIMER_TEXT_DEFAULT") ?>">
                    </label>
                    <label class="pref">
                        <span><?= GetMessage("skyweb24.popuppro_TIMER_LEFT") ?></span>
                        <? $checkTimerLeft = ($editArr['timer']['left'] == 'Y' || empty($editArr['timer']['left'])) ? 'checked="checked"' : ''; ?>
                        <input type="checkbox" value="Y" <?= $checkTimerLeft ?>>

                        <input type="hidden" name="timer_left"
                               value="<?= (!empty($editArr['timer']['left'])) ? $editArr['timer']['left'] : 'Y' ?>">
                    </label>
                    <label class="pref">
                        <span><?= GetMessage("skyweb24.popuppro_TIMER_RIGHT") ?></span>
                        <? $checkTimerRight = ($editArr['timer']['right'] == 'Y') ? 'checked="checked"' : ''; ?>
                        <input type="checkbox" value="Y" <?= $checkTimerRight ?>>

                        <input type="hidden" name="timer_right"
                               value="<?= (!empty($editArr['timer']['right'])) ? $editArr['timer']['right'] : 'N' ?>">
                    </label>
                    <label class="pref">
                        <span><?= GetMessage("skyweb24.popuppro_TIMER_TOP") ?></span>
                        <? $checkTimerTop = ($editArr['timer']['top'] == 'Y' || empty($editArr['timer']['top'])) ? 'checked="checked"' : ''; ?>
                        <input type="checkbox" value="Y" <?= $checkTimerTop ?>>

                        <input type="hidden" name="timer_top"
                               value="<?= (!empty($editArr['timer']['top'])) ? $editArr['timer']['top'] : 'Y' ?>">
                    </label>
                    <label class="pref">
                        <span><?= GetMessage("skyweb24.popuppro_TIMER_BOTTOM") ?></span>
                        <? $checkTimerBottom = ($editArr['timer']['bottom'] == 'Y') ? 'checked="checked"' : ''; ?>
                        <input type="checkbox" value="Y" <?= $checkTimerBottom ?>>

                        <input type="hidden" name="timer_bottom"
                               value="<?= (!empty($editArr['timer']['bottom'])) ? $editArr['timer']['bottom'] : 'N' ?>">
                    </label>
                </div>

                <? include "table_roulette.php"; ?>
                <? include "table_thimbles.php"; ?>


                <div class="exampleWindow main-wp" style="display:none;">
                    <div class="exampleWindowHeader">
                        <div class="exampleWindowHeaderButtons">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="exampleWindowHeaderSearch"></div>
                    </div>
                    <div class="positionBlockAnimator">
                        <div class="left top"
                             title="<?= GetMessage("skyweb24.popuppro_POSITION_LeftTop") ?>"></div>
                        <div class="top"
                             title="<?= GetMessage("skyweb24.popuppro_POSITION_Top") ?>"></div>
                        <div class="right top"
                             title="<?= GetMessage("skyweb24.popuppro_POSITION_RightTop") ?>"></div>
                        <div class="left"
                             title="<?= GetMessage("skyweb24.popuppro_POSITION_Left") ?>"></div>
                        <div class="center"
                             title="<?= GetMessage("skyweb24.popuppro_POSITION_Center") ?>"></div>
                        <div class="right"
                             title="<?= GetMessage("skyweb24.popuppro_POSITION_Right") ?>"></div>
                        <div class="bottom left"
                             title="<?= GetMessage("skyweb24.popuppro_POSITION_LeftBottom") ?>"></div>
                        <div class="bottom"
                             title="<?= GetMessage("skyweb24.popuppro_POSITION_Bottom") ?>"></div>
                        <div class="bottom right"
                             title="<?= GetMessage("skyweb24.popuppro_POSITION_RightBottom") ?>"></div>
                    </div>
                </div>

                <div class="positionTimer toggle" style="display:none;">
                    <div class="left top"
                         title="<?= GetMessage("skyweb24.popuppro_POSITION_LeftTop") ?>"></div>
                    <div class="right top"
                         title="<?= GetMessage("skyweb24.popuppro_POSITION_RightTop") ?>"></div>
                    <div class="examplePopup">
                        <p><?= GetMessage("skyweb24.popuppro_POPUP_example") ?></p></div>
                    <div class="bottom left"
                         title="<?= GetMessage("skyweb24.popuppro_POSITION_LeftBottom") ?>"></div>
                    <div class="bottom right"
                         title="<?= GetMessage("skyweb24.popuppro_POSITION_RightBottom") ?>"></div>
                </div>


            </section>

        </div>


        <div id="popuppro_manager_files" style="display:none">

            <div id="popuppro_img_list"></div>
            <? $APPLICATION->IncludeComponent("bitrix:main.file.input", "drag_n_drop",
                [
                    "INPUT_NAME"       => "UPLOAD_IMG_POPUPPRO",
                    "MULTIPLE"         => "N",
                    "MODULE_ID"        => $module_id,
                    //"MODULE_ID"=>'iblock',
                    "MAX_FILE_SIZE"    => "5000000",
                    "ALLOW_UPLOAD"     => "F",
                    //"ALLOW_UPLOAD_EXT"=>array("jpeg", "jpg", "png", "gif")
                    "ALLOW_UPLOAD_EXT" => "jpeg,jpg,png,gif"
                ],
                false
            ); ?>
        </div>

        <div class="personalizationList" style="display:none;">
            <div class="personalizationListDesc"><?= GetMessage("skyweb24.popuppro_PERSONALISATION_LINK_DESC"); ?></div>
            <? $personalize = Skyweb24\Popuppro\Tools::getPersonalization();
            foreach ($personalize as $keyPersonal => $nextPersonal) {
                ?>
                <p><b>#<?= $keyPersonal ?>#</b> - <span><?= $nextPersonal ?></span></p>
                <?
            } ?>
        </div>
    </td>
</tr>