<?php

if (!defined('ABSPATH')) exit;
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only, no data changes
$gamadsmbai_edit_id = isset($_GET['edit_id']) ? intval($_GET['edit_id']) : 0;
$gamadsmbai_ad_main = null;

if ($gamadsmbai_edit_id > 0) {
    global $wpdb;
    $gamadsmbai_table_main = $wpdb->prefix . 'gamadsmbai_ads';
    /** @noinspection SqlResolve */
    /** @noinspection SqlNoDataSourceInspection */
    // phpcs:ignore WordPress.DB.PreparedSQL.InterpolatedNotPrepared,WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching,PluginCheck.Security.DirectDB.UnescapedDBParameter -- $gamadsmbai_table_main derived from $wpdb->prefix and escaped; No need of cache
    $gamadsmbai_ad_main = $wpdb->get_row($wpdb->prepare("SELECT * FROM $gamadsmbai_table_main WHERE id = %d", $gamadsmbai_edit_id));
}

// Fetch active ads data
global $wpdb;
$gamadsmbai_table_name_main = $wpdb->prefix . 'gamadsmbai_ads';

$license_key   = get_option('gamadsmbai_license_key', '');
$isManualModeActive = get_option('gamadsmbai_manual_mode', "0");
$token         = get_option('gamadsmbai_license_token', '');
$gamadsmbai_tokens      = get_option('gam_ads_ad_manager_and_ad_exchange_tokens', []);
$connected   = !empty($gamadsmbai_tokens['access_token']);

$gamadsmbai_ad_types = ['Banner', 'Interstitial', 'Anchor', 'Floater', 'Popup', 'Sticky', 'Push Down', 'Flying Carpet', 'Rewarded'];
$custom_ad_slug = 'Custom Ad';
// GAM OAuth NOT configured - Custom Ad first
if (!$connected && ($isManualModeActive !== "1")) {
    $gamadsmbai_ad_types = array_merge([$custom_ad_slug], $gamadsmbai_ad_types);
} elseif (empty($license_key) && empty($token)) {
    $gamadsmbai_ad_types = array_merge(
        array_slice($gamadsmbai_ad_types, 0, 6),
        [$custom_ad_slug],
        array_slice($gamadsmbai_ad_types, 6)
    );
} else {
    $gamadsmbai_ad_types = array_merge($gamadsmbai_ad_types, [$custom_ad_slug]);
}
/** @noinspection SqlResolve */
/** @noinspection SqlNoDataSourceInspection */
// phpcs:ignore WordPress.DB.PreparedSQL.InterpolatedNotPrepared,WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching,PluginCheck.Security.DirectDB.UnescapedDBParameter -- $table derived from $wpdb->prefix and escaped; No need of cache
$gamadsmbai_active_ads = $wpdb->get_results("SELECT ad_type, gam_ad_unit, is_active FROM $gamadsmbai_table_name_main WHERE is_active = 1");
$gamadsmbai_active_ads_map = [];

if ($gamadsmbai_active_ads) {
    foreach ($gamadsmbai_active_ads as $active_ad) {
        $gamadsmbai_slug = strtolower(str_replace(' ', '_', $active_ad->ad_type));
        $gamadsmbai_active_ads_map[$gamadsmbai_slug] = [
            'ad_unit'   => $active_ad->gam_ad_unit,
            'is_active' => (int) $active_ad->is_active
        ];
    }
}

$gamadsmbaipages = get_pages();

$gamadsmbai_networkCode = get_option('gam_ads_ad_manager_and_ad_exchange_network_code');
$gamadsmbai_adunits     = get_option('gam_ads_ad_manager_and_ad_exchange_network_' . $gamadsmbai_networkCode . '_adunit', []);
?>

<div class="gam-add-ad-wrapper">
    <!-- Left Section: Ad Types -->
    <div class="gam-ad-types">
        <small style="color:dimgrey"><?php echo $gamadsmbai_edit_id ? 'Update Ad' : 'Create Ad' ?></small>
        <?php foreach ($gamadsmbai_ad_types as $type): ?>
            <?php
            $gamadsmbai_slug = strtolower(str_replace(' ', '_', $type));
            $gamadsmbai_is_active = isset($gamadsmbai_active_ads_map[$gamadsmbai_slug]) && $gamadsmbai_active_ads_map[$gamadsmbai_slug]['is_active'];
            $gamadsmbai_status_class = $gamadsmbai_is_active ? 'active' : 'inactive';
            $gamadsmbai_status_label = $gamadsmbai_is_active ? 'Active' : 'Inactive';
            $gamadsmbai_is_pro = !in_array($gamadsmbai_slug, ["banner", 'interstitial', 'anchor', 'floater', 'popup', 'sticky', "custom_ad"], true);
            $gamadsmbai_is_proplus = in_array($gamadsmbai_slug, ["rewarded"], true);
            $gamadsmbai_isDefaultActive = ((!$connected && ($isManualModeActive !== "1"))? $gamadsmbai_slug === "custom_ad" : $gamadsmbai_slug === "banner");
            $gamadsmbai_DefaultActive = $gamadsmbai_isDefaultActive ? 'active' : '';
            $gamadsmbai_proclass = '';
            $gamadsmbai_featuretxt = '';
            $gamadsmbai_dataTypeText = '';
            if ($gamadsmbai_is_proplus && empty($license_key) && empty($token)) {
                $gamadsmbai_proclass = 'pro_plus';
                $gamadsmbai_featuretxt = 'Premium Plus Feature';
                $gamadsmbai_dataTypeText = 'manual_upgrade';
            } else if ($gamadsmbai_is_pro && empty($license_key) && empty($token)) {
                $gamadsmbai_proclass = 'pro';
                $gamadsmbai_featuretxt = 'Premium Feature';
                $gamadsmbai_dataTypeText = 'upgrade_now';
            } else {
                $gamadsmbai_dataTypeText = esc_attr($gamadsmbai_slug);
            }
            ?>
            <div class="gam-ad-type-item <?php echo $gamadsmbai_is_pro && empty($license_key) && empty($token) ? esc_attr($gamadsmbai_proclass) . ' floating_tooltip_on ' : esc_attr($gamadsmbai_DefaultActive) . ''; ?>" <?php echo $gamadsmbai_is_pro && empty($license_key) && empty($token) ?  'data-title="' . esc_attr($gamadsmbai_featuretxt) . '"' : ''; ?> data-type="<?php echo esc_attr($gamadsmbai_dataTypeText); ?>">
                <div class="gam-type-name">
                    <?php echo esc_html($type);
                    if (($gamadsmbai_is_pro || $gamadsmbai_is_proplus) && empty($license_key) && empty($token)) {
                        echo ('<div class="premium">
                        <svg height="12px" width="12px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="1.024"></g><g id="SVGRepo_iconCarrier"> <polygon style="fill:' . ($gamadsmbai_is_proplus ? '#8c27f4' : '#F8C660;') . '" points="461.354,263.687 347.439,356.077 257.578,220.794 167.748,356.035 53.864,264.199 43.363,201.714 158.302,294.71 257.557,145.29 356.833,294.71 471.771,201.714 "></polygon> <g> <polygon style="fill:' . ($gamadsmbai_is_proplus ? '#8c27f4' : '#F8C660;') . ';" points="461.354,263.636 429.975,450.298 85.159,450.298 53.864,264.148 167.748,356.049 257.578,220.801 347.439,356.107 "></polygon> <circle style="fill:' . ($gamadsmbai_is_proplus ? '#8c27f4' : '#F8C660;') . ';" cx="257.567" cy="103.497" r="41.796"></circle> <circle style="fill:' . ($gamadsmbai_is_proplus ? '#8c27f4' : '#F8C660;') . ';" cx="467.592" cy="184.999" r="33.959"></circle> <circle style="fill:' . ($gamadsmbai_is_proplus ? '#8c27f4' : '#F8C660;') . ';" cx="44.408" cy="184.999" r="33.959"></circle> </g> <polygon style="fill:' . ($gamadsmbai_is_proplus ? '#8c27f4' : '#F8C660;') . ';" points="258.132,413.632 220.503,360.33 258.132,307.028 295.76,360.33 "></polygon> <g> <path style="fill:#F8C660;" d="M512,185c0-24.487-19.921-44.408-44.408-44.408S423.184,160.513,423.184,185 c0,12.43,5.14,23.676,13.398,31.745l-77.398,62.622l-84.14-126.641c20.239-7.206,34.769-26.548,34.769-49.228 c0-28.808-23.437-52.245-52.245-52.245c-28.808,0-52.245,23.437-52.245,52.245c0,22.675,14.524,42.013,34.754,49.223 L155.95,279.366l-79.147-64.037c7.443-7.944,12.013-18.61,12.013-30.329c0-24.487-19.921-44.408-44.408-44.408S0,160.513,0,185 c0,22.076,16.194,40.434,37.326,43.837l37.53,223.14c0.846,5.031,5.203,8.77,10.304,8.77h344.816c5.102,0,9.458-3.738,10.304-8.77 l37.638-223.767C497.439,223.542,512,205.932,512,185z M226.22,103.498c0-17.285,14.062-31.347,31.347-31.347 s31.347,14.062,31.347,31.347s-14.062,31.347-31.347,31.347S226.22,120.783,226.22,103.498z M159.885,305.039 c2.908-0.446,5.493-2.096,7.12-4.547l90.553-136.319l90.572,136.319c1.628,2.45,4.213,4.1,7.12,4.546 c2.907,0.443,5.868-0.355,8.155-2.206l92.643-74.956c0.233,0.063,0.465,0.127,0.699,0.186l-5.022,29.879l-101.944,82.772 l-83.499-125.708c-1.937-2.915-5.204-4.668-8.704-4.668c-3.5,0-6.768,1.752-8.704,4.668l-83.485,125.683L63.491,258.437 l-5.251-31.246l93.489,75.641C154.016,304.684,156.974,305.482,159.885,305.039z M20.898,185c0-12.964,10.546-23.51,23.51-23.51 s23.51,10.546,23.51,23.51s-10.546,23.51-23.51,23.51S20.898,197.964,20.898,185z M421.137,439.849H93.998l-25.26-150.267 l92.447,74.597c2.287,1.847,5.247,2.63,8.152,2.184c2.905-0.447,5.488-2.104,7.115-4.553l81.126-122.135l81.157,122.181 c1.63,2.453,4.218,4.103,7.129,4.547c2.916,0.445,5.875-0.362,8.161-2.218l92.437-74.999L421.137,439.849z M467.592,208.51 c-12.964,0-23.51-10.546-23.51-23.51s10.546-23.51,23.51-23.51c12.964,0,23.51,10.546,23.51,23.51S480.556,208.51,467.592,208.51z"></path> <path style="fill:#F8C660;" d="M266.145,301.002c-1.958-2.773-5.141-4.423-8.536-4.423c-3.395,0-6.578,1.65-8.536,4.423 l-37.629,53.302c-2.551,3.613-2.551,8.44,0,12.052l37.629,53.302c1.958,2.773,5.141,4.423,8.536,4.423 c3.395,0,6.578-1.65,8.536-4.423l37.629-53.302c2.551-3.613,2.551-8.44,0-12.052L266.145,301.002z M257.609,395.515l-24.838-35.185 l24.838-35.185l24.838,35.185L257.609,395.515z"></path> </g> </g></svg>
                        </div>');
                    }
                    ?>
                    <?php if ($type !== "Custom Ad"): ?>
                        <span class="ad_type_represent_help" data-foradtype="<?php echo esc_attr($type); ?>" data-info="See, how the <?php echo esc_attr($type); ?> ad looks like.">
                            <svg fill="#848484" width="12px" height="12px" viewBox="-0.64 -0.64 33.28 33.28" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#848484" stroke-width="0.96">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path d="M18 23l-1-0v-8.938c0-0.011-0.003-0.021-0.003-0.031s0.003-0.020 0.003-0.031c0-0.552-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v8h-1c-0.552 0-1 0.448-1 1s0.448 1 1 1h4c0.552 0 1-0.448 1-1s-0.448-1-1-1zM16 11c1.105 0 2-0.896 2-2s-0.895-2-2-2-2 0.896-2 2 0.896 2 2 2zM16-0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.031c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032z"></path>
                                </g>
                            </svg>
                        </span>
                    <?php endif; ?>
                </div>
                <div class="gam-type-status">
                    <span class="status-circle <?php echo esc_attr($gamadsmbai_status_class); ?>"></span>
                    <small class="ad-unit-id"><?php echo esc_html($gamadsmbai_status_label); ?></small>
                </div>
            </div>
        <?php endforeach; ?>
        <div class="represnt_adtype_help">
            <div class="adtype_layout_help_box">
                <span class="adtype_help_title">
                    <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                        <g id="SVGRepo_iconCarrier">
                            <g>
                                <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                            </g>
                        </g>
                    </svg>
                    What is this about?</span>
                <span id="infoadtypecontent"></span>
                <img id="infoAdsBannerImg" src="">
            </div>
        </div>
        <script>
            // Hover Effect
            function HelpingFuncOfHover(triggerClass, boxClass) {
                const box = document.querySelector(boxClass);
                if (!box) return;
                const infoTarget = box.querySelector('#infoadtypecontent');
                if (!infoTarget) return;
                const infoAdsDemoImg = box.querySelector('#infoAdsBannerImg');
                // Box hover handlers (ONLY ONCE)
                let mouseEnterInBox = false;
                box.addEventListener('mouseenter', () => {
                    mouseEnterInBox = true;
                    box.classList.add('showhelp');
                });
                box.addEventListener('mouseleave', () => {
                    mouseEnterInBox = false;
                    box.classList.remove('showhelp');
                    box.classList.remove('showhelpuppointer');
                    infoTarget.innerHTML = '';
                });

                document.querySelectorAll(triggerClass).forEach(trigger => {
                    trigger.addEventListener('mouseenter', () => {
                        const rect = trigger.getBoundingClientRect();
                        // box.classList.add('showhelp');

                        box.classList.add('showhelp');
                        const infoContext = trigger.dataset.info;
                        if (!infoContext) return;
                        infoTarget.innerHTML = infoContext;
                        if (!infoAdsDemoImg) return;
                        infoAdsDemoImg.src = `/wp-content/plugins/gam-ads-ad-manager-and-ad-exchange/assets/images/${trigger.dataset.foradtype.toLowerCase().replace(" ", "-")}-0.jpg`;

                        // Force layout AFTER content change
                        const boxRect = box.getBoundingClientRect();
                        let top = rect.bottom + 7;
                        let left = rect.left - 11;
                        // Prevent bottom overflow
                        if (top + boxRect.height > window.innerHeight) {
                            top = rect.top - boxRect.height - 7;
                            box.classList.add('showhelpuppointer');
                        }
                        // Prevent horizontal overflow
                        if (left + boxRect.width > window.innerWidth) {
                            left = window.innerWidth - boxRect.width - 10;
                        }
                        if (left < 10) left = 10;
                        box.style.top = top + 'px';
                        box.style.left = left + 'px';

                    });
                    trigger.addEventListener('mouseleave', () => {
                        setTimeout(() => {
                            if (!mouseEnterInBox) {
                                box.classList.remove('showhelp');
                                box.classList.remove('showhelpuppointer');
                                infoTarget.innerHTML = '';
                            }
                        }, 100);
                    });
                });
            }
            HelpingFuncOfHover('.ad_type_represent_help', '.represnt_adtype_help');
        </script>
    </div>

    <!-- Right Section: Ad Form -->
    <div class="gam-ad-form-area" style="display: none;">
        <form id="gam-ad-form">
            <div id="blocks" style="display: none;">
                <?php
                $gamadsmbai_blocks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
                if (!empty($license_key) && !empty($token)) {
                    $gamadsmbai_blocks[] = 11;
                    $gamadsmbai_blocks[] = 12;
                    $gamadsmbai_blocks[] = 13;
                    $gamadsmbai_blocks[] = 14;
                }
                foreach ($gamadsmbai_blocks as $gamadsmbai_blockid): ?>
                    <div class="blockid" data-type=<?php echo intval($gamadsmbai_blockid) ?>>
                        B <?php echo intval($gamadsmbai_blockid) ?>
                    </div>
                <?php endforeach; ?>
            </div>
            <div id="ad-form-inputs">
                <input type="hidden" name="ad_type" id="gam_selected_ad_type" value="<?php echo $gamadsmbai_ad_main ? esc_attr(strtolower(str_replace(' ', '_', $gamadsmbai_ad_main->ad_type))) : ''; ?>" />
                <input type="hidden" name="blockid" id="gam_blockid" value="<?php echo $gamadsmbai_ad_main ? intval($gamadsmbai_ad_main->blockid) : 0; ?>" />

                <!-- Active Block -->
                <div class="gam-ad-form-group enable_ad_btns">
                    <div class="enable_ad_class" style="display:none;">
                        <input type="hidden" name="is_active" id="gam-is-active" value="<?php echo $gamadsmbai_ad_main ? intval($gamadsmbai_ad_main->is_active) : 1; ?>">
                        <span class="activeinactivebutton <?php echo ($gamadsmbai_ad_main && intval($gamadsmbai_ad_main->is_active) == 1) ? 'active' : ''; ?>"></span>
                        <label>
                            <span class="floating_tooltip_on" data-title="Activate or Deactive the AD">
                                <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </label>
                    </div>
                    <span></span>
                    <div class="active_devices">
                        <label>
                            Active Devices
                            <span class="floating_tooltip_on" data-title="Choose which devices this ad should appear on.">
                                <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </label>
                        <div class="device" data-type="desktop">
                            <svg viewBox="0 -2 24 24" id="meteor-icon-kit__regular-desktop" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3 2C2.44772 2 2 2.44772 2 3V14C2 14.5523 2.44772 15 3 15H21C21.5523 15 22 14.5523 22 14V3C22 2.44772 21.5523 2 21 2H3zM3 0H21C22.6569 0 24 1.34315 24 3V14C24 15.6569 22.6569 17 21 17H3C1.34315 17 0 15.6569 0 14V3C0 1.34315 1.34315 0 3 0zM16 18C16.5523 18 17 18.4477 17 19C17 19.5523 16.5523 20 16 20H8C7.44772 20 7 19.5523 7 19C7 18.4477 7.44772 18 8 18H16z" fill="#9e9e9e"></path>
                                </g>
                            </svg>
                        </div>
                        <div class="device" data-type="tablet">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path d="M18 3.25H6C5.04 3.25 4.25 4.04 4.25 5V19C4.25 19.96 5.04 20.75 6 20.75H18C18.96 20.75 19.75 19.96 19.75 19V5C19.75 4.04 18.96 3.25 18 3.25ZM18.25 19C18.25 19.14 18.14 19.25 18 19.25H6C5.86 19.25 5.75 19.14 5.75 19V5C5.75 4.86 5.86 4.75 6 4.75H18C18.14 4.75 18.25 4.86 18.25 5V19ZM13 16C13 16.55 12.55 17 12 17C11.45 17 11 16.55 11 16C11 15.45 11.45 15 12 15C12.55 15 13 15.45 13 16Z" fill="#9e9e9e"></path>
                                </g>
                            </svg>
                        </div>
                        <div class="device" data-type="mobile">
                            <svg fill="#9e9e9e" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path d="M17,23a2,2,0,0,0,2-2V3a2,2,0,0,0-2-2H7A2,2,0,0,0,5,3V21a2,2,0,0,0,2,2ZM7,3H9.5L10,4h4l.5-1H17V21H7Zm6,16a1,1,0,1,1-1-1A1,1,0,0,1,13,19Z"></path>
                                </g>
                            </svg>
                        </div>
                        <input type="hidden" name="gam_active_devices" id="gam_active_devices"
                            value='<?php echo $gamadsmbai_ad_main && !empty($gamadsmbai_ad_main->gam_active_devices) ? esc_attr($gamadsmbai_ad_main->gam_active_devices) : 'desktop,tablet,mobile'; ?>'>
                    </div>
                </div>

                <?php if (get_option('gamadsmbai_manual_mode', "0") === "1"): ?>
                    <!-- Ad Unit Manually Filter Block -->
                    <div class="manual_mode_adunit_filter_block" style="display:none;">
                        <div class="manual_mode_adunit_wrapper">
                            <label for="manual_mode_adunit_filter_textbox">Paste Passback Ad Script
                                <span class="floating_tooltip_on" data-title="To Filter Ad units and sizes please paste your passback script here. This block will filter it and auto select ad unit and sizes. Note: It will not save any code, it's just for filtering the ad script. e.g. <script> ... googletag.defineSlot( '/6355419/Travel/Europe/France/Paris' , [[1024, 600], [970, 600], [800, 250], [336, 280], [300, 600]], 'gam-passback-ad-id').addService(googletag.pubads()); ... </script>">
                                    <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                        <g id="SVGRepo_iconCarrier">
                                            <g>
                                                <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                            </g>
                                        </g>
                                    </svg>
                                </span>
                                <div class="filteradunit_process_indicator">
                                    <svg id="filteradunit_process_indicatorsvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="25px" height="25px">
                                        <g>
                                            <g transform="rotate(0 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.9375s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(22.5 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.875s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(45 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.8125s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(67.5 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.75s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(90 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.6875s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(112.5 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.625s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(135 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.5625s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(157.5 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.5s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(180 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.4375s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(202.5 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.375s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(225 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.3125s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(247.5 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.25s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(270 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.1875s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(292.5 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.125s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(315 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="-0.0625s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g transform="rotate(337.5 50 50)">
                                                <rect fill="#d7d7d7" height="12" width="4" ry="3.6" rx="2" y="28" x="48">
                                                    <animate repeatCount="indefinite" begin="0s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity" />
                                                </rect>
                                            </g>
                                            <g />
                                        </g>
                                    </svg>
                                    <span id="indicator_text" class="filter-steps"></span>
                                </div>
                            </label>
                            <textarea id="manual_mode_adunit_filter_textbox" name="manual_mode_adunit_filter_textbox" rows="5" style="width:100%;"></textarea>
                        </div>
                        <div class="open_filter_script_block" style="display:none;">
                            <span id="open_filter_code_editor">Open Filter Code Editor</span>
                            <span class="floating_tooltip_on" data-title="Open the code editor that filter's the ad units and sizes from your entered/copy-pasted GAM passback script.">
                                <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Ad Unit Field -->
                <div class="gam-ad-form-group">
                    <div id="gam-ad-unit-wrapper">
                        <div class="gam-ad-unit-slot-x-size">
                            <div class="gam-ad-unit-x-slot">
                                <div class="gam-ad-unit-main">
                                    <label for="gam_ad_unit">Ad Unit
                                        <span class="floating_tooltip_on" data-title="Select an existing Google Ad Manager ad unit or paste an ad unit path directly.">
                                            <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                                <g id="SVGRepo_iconCarrier">
                                                    <g>
                                                        <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                                    </g>
                                                </g>
                                            </svg>
                                        </span>
                                    </label>
                                    <input type="text" name="gam_ad_unit" id="gam_ad_unit" value="<?php echo $gamadsmbai_ad_main ? esc_attr($gamadsmbai_ad_main->gam_ad_unit) : ''; ?>" placeholder="Enter or select ad unit code">
                                </div>
                                <div class="gam-message" id="gam-ad-unit-msg" style="display: none;"></div>
                                <?php if (get_option('gamadsmbai_manual_mode', "0") === "0"): ?>
                                    <div id="select-adunits" style="margin-top:4px;">
                                        <input type="search" id="adunit_search" placeholder="Search ad units..." style="width:100%; padding: 5px; margin:0;border: none;outline: none;box-shadow:none;border-bottom: 1px solid #eee7e7;border-radius: 0;">
                                        <div id="adunit_options">
                                            <?php if (!empty($gamadsmbai_adunits)):
                                                foreach ($gamadsmbai_adunits as $gamadsmbai_adunit):
                                                    if ($gamadsmbai_adunit['status'] === 'ACTIVE' && strpos($gamadsmbai_adunit['adunitname'], 'ca-pub') === false && strpos($gamadsmbai_adunit['adunitname'], 'Ad Exchange') === false):
                                                        $gamadsmbaiactualAdunitSlot = '/' . $gamadsmbai_networkCode . '/' . $gamadsmbai_adunit['adunitname'];
                                                        // Collect sizes
                                                        $gamadsmbai_sizes = [];
                                                        if (!empty($gamadsmbai_adunit['sizes'])) {
                                                            foreach ($gamadsmbai_adunit['sizes'] as $size) {
                                                                $gamadsmbai_sizes[] = $size;
                                                            }
                                                        }
                                            ?>
                                                        <div class="gam-adunit-option" data-value="<?php echo esc_attr($gamadsmbaiactualAdunitSlot); ?>" data-presizes="<?php echo esc_attr(json_encode($gamadsmbai_sizes)); ?>">
                                                            <?php echo esc_html($gamadsmbai_adunit['adunitname']); ?>
                                                        </div>
                                                <?php
                                                    endif;
                                                endforeach;
                                            else: ?>
                                                <small style="margin: 5px auto;">! No Ad Units Found</small>
                                            <?php
                                            endif; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                                <!-- RefreshAd Checkbox -->
                                <div class="gam-refreshad-toggle">
                                    <label class=<?php echo esc_attr(empty($license_key) && empty($token) ?  'premium_feature' : ''); ?>>
                                        <?php if (empty($license_key) && empty($token)): ?>
                                            <svg height="16px" width="16px" version="1.1" style="margin: 0px 5px -3px 5px" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000">
                                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="1.024"></g>
                                                <g id="SVGRepo_iconCarrier">
                                                    <polygon style="fill:#F8C660;" points="461.354,263.687 347.439,356.077 257.578,220.794 167.748,356.035 53.864,264.199 43.363,201.714 158.302,294.71 257.557,145.29 356.833,294.71 471.771,201.714 "></polygon>
                                                    <g>
                                                        <polygon style="fill:#F8C660;" points="461.354,263.636 429.975,450.298 85.159,450.298 53.864,264.148 167.748,356.049 257.578,220.801 347.439,356.107 "></polygon>
                                                        <circle style="fill:#F8C660;" cx="257.567" cy="103.497" r="41.796"></circle>
                                                        <circle style="fill:#F8C660;" cx="467.592" cy="184.999" r="33.959"></circle>
                                                        <circle style="fill:#F8C660;" cx="44.408" cy="184.999" r="33.959"></circle>
                                                    </g>
                                                    <polygon style="fill:#F8C660;" points="258.132,413.632 220.503,360.33 258.132,307.028 295.76,360.33 "></polygon>
                                                    <g>
                                                        <path style="fill:#F8C660;" d="M512,185c0-24.487-19.921-44.408-44.408-44.408S423.184,160.513,423.184,185 c0,12.43,5.14,23.676,13.398,31.745l-77.398,62.622l-84.14-126.641c20.239-7.206,34.769-26.548,34.769-49.228 c0-28.808-23.437-52.245-52.245-52.245c-28.808,0-52.245,23.437-52.245,52.245c0,22.675,14.524,42.013,34.754,49.223 L155.95,279.366l-79.147-64.037c7.443-7.944,12.013-18.61,12.013-30.329c0-24.487-19.921-44.408-44.408-44.408S0,160.513,0,185 c0,22.076,16.194,40.434,37.326,43.837l37.53,223.14c0.846,5.031,5.203,8.77,10.304,8.77h344.816c5.102,0,9.458-3.738,10.304-8.77 l37.638-223.767C497.439,223.542,512,205.932,512,185z M226.22,103.498c0-17.285,14.062-31.347,31.347-31.347 s31.347,14.062,31.347,31.347s-14.062,31.347-31.347,31.347S226.22,120.783,226.22,103.498z M159.885,305.039 c2.908-0.446,5.493-2.096,7.12-4.547l90.553-136.319l90.572,136.319c1.628,2.45,4.213,4.1,7.12,4.546 c2.907,0.443,5.868-0.355,8.155-2.206l92.643-74.956c0.233,0.063,0.465,0.127,0.699,0.186l-5.022,29.879l-101.944,82.772 l-83.499-125.708c-1.937-2.915-5.204-4.668-8.704-4.668c-3.5,0-6.768,1.752-8.704,4.668l-83.485,125.683L63.491,258.437 l-5.251-31.246l93.489,75.641C154.016,304.684,156.974,305.482,159.885,305.039z M20.898,185c0-12.964,10.546-23.51,23.51-23.51 s23.51,10.546,23.51,23.51s-10.546,23.51-23.51,23.51S20.898,197.964,20.898,185z M421.137,439.849H93.998l-25.26-150.267 l92.447,74.597c2.287,1.847,5.247,2.63,8.152,2.184c2.905-0.447,5.488-2.104,7.115-4.553l81.126-122.135l81.157,122.181 c1.63,2.453,4.218,4.103,7.129,4.547c2.916,0.445,5.875-0.362,8.161-2.218l92.437-74.999L421.137,439.849z M467.592,208.51 c-12.964,0-23.51-10.546-23.51-23.51s10.546-23.51,23.51-23.51c12.964,0,23.51,10.546,23.51,23.51S480.556,208.51,467.592,208.51z"></path>
                                                        <path style="fill:#F8C660;" d="M266.145,301.002c-1.958-2.773-5.141-4.423-8.536-4.423c-3.395,0-6.578,1.65-8.536,4.423 l-37.629,53.302c-2.551,3.613-2.551,8.44,0,12.052l37.629,53.302c1.958,2.773,5.141,4.423,8.536,4.423 c3.395,0,6.578-1.65,8.536-4.423l37.629-53.302c2.551-3.613,2.551-8.44,0-12.052L266.145,301.002z M257.609,395.515l-24.838-35.185 l24.838-35.185l24.838,35.185L257.609,395.515z"></path>
                                                    </g>
                                                </g>
                                            </svg>
                                        <?php endif; ?>
                                        <input type="checkbox" id="is_refreshad" name="is_refreshad" <?php echo esc_attr(empty($license_key) && empty($token) ?  'disabled' : ''); ?>
                                            <?php echo ($gamadsmbai_ad_main && !empty($gamadsmbai_ad_main->is_refreshad)) ? 'checked' : ''; ?>>
                                        Refresh Ad
                                        <span class="floating_tooltip_on <?php echo esc_attr(empty($license_key) && empty($token) ?  'premium_feature' : ''); ?>" data-title="<?php echo esc_attr(empty($license_key) && empty($token) ?  '(Premium) ' : ''); ?>Refresh this ad automatically after a set time">
                                            <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                                <g id="SVGRepo_iconCarrier">
                                                    <g>
                                                        <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                                    </g>
                                                </g>
                                            </svg>
                                        </span>
                                    </label>
                                    <select name="refreshad_intervel" id="refreshad_intervel" <?php echo esc_attr(empty($license_key) && empty($token) ?  'disabled' : ''); ?>>
                                        <option value="30" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->refreshad_intervel === '30'); ?>>30s (Recommended)</option>
                                        <option value="25" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->refreshad_intervel === '25'); ?>>25s </option>
                                        <option value="40" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->refreshad_intervel === '40'); ?>>40s</option>
                                        <option value="60" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->refreshad_intervel === '60'); ?>>1 min</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Sizes Block -->
                            <div class="gam-ad-unit-x-size" id="gam-size-wrapper" style="display: none;">

                                <!-- Responsive Checkbox -->
                                <div class="gam-responsive-toggle">
                                    <label>
                                        <input type="checkbox" id="is_responsive" name="is_responsive"
                                            <?php echo ($gamadsmbai_ad_main && !empty($gamadsmbai_ad_main->is_responsive)) ? 'checked' : ''; ?>>
                                        Responsive Sizes
                                        <span class="floating_tooltip_on" data-title="Choose whether the ad should automatically adapt to different screen sizes. Available sizes are pulled from your Google Ad Manager ad unit.">
                                            <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                                <g id="SVGRepo_iconCarrier">
                                                    <g>
                                                        <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                                    </g>
                                                </g>
                                            </svg>
                                        </span>
                                    </label>
                                </div>

                                <!-- Normal Sizes -->
                                <div id="gam-normal-sizes">
                                    <div id="gam-selected-sizes" class="gam-selected-sizes">
                                        <span style="min-width:38px">Sizes :</span>
                                    </div>
                                    <div class="gam-sizes-select">
                                        <input type="text" id="gam-size-search" placeholder="Search size..." autocomplete="off">
                                        <div class="gam-sizes-dropdown">
                                            <div class="gam-size-option" data-value="fluid">fluid</div>
                                            <div class="gam-size-option" data-value="120x60">120x60</div>
                                            <div class="gam-size-option" data-value="120x90">120x90</div>
                                            <div class="gam-size-option" data-value="120x240">120x240</div>
                                            <div class="gam-size-option" data-value="120x600">120x600</div>
                                            <div class="gam-size-option" data-value="125x125">125x125</div>
                                            <div class="gam-size-option" data-value="160x600">160x600</div>
                                            <div class="gam-size-option" data-value="180x150">180x150</div>
                                            <div class="gam-size-option" data-value="200x200">200x200</div>
                                            <div class="gam-size-option" data-value="234x60">234x60</div>
                                            <div class="gam-size-option" data-value="250x250">250x250</div>
                                            <div class="gam-size-option" data-value="300x50">300x50</div>
                                            <div class="gam-size-option" data-value="300x75">300x75</div>
                                            <div class="gam-size-option" data-value="300x100">300x100</div>
                                            <div class="gam-size-option" data-value="300x250">300x250</div>
                                            <div class="gam-size-option" data-value="300x600">300x600</div>
                                            <div class="gam-size-option" data-value="320x100">320x100</div>
                                            <div class="gam-size-option" data-value="320x250">320x250</div>
                                            <div class="gam-size-option" data-value="320x480">320x480</div>
                                            <div class="gam-size-option" data-value="336x280">336x280</div>
                                            <div class="gam-size-option" data-value="468x60">468x60</div>
                                            <div class="gam-size-option" data-value="480x320">480x320</div>
                                            <div class="gam-size-option" data-value="728x90">728x90</div>
                                            <div class="gam-size-option" data-value="750x100">750x100</div>
                                            <div class="gam-size-option" data-value="750x200">750x200</div>
                                            <div class="gam-size-option" data-value="750x300">750x300</div>
                                            <div class="gam-size-option" data-value="930x180">930x180</div>
                                            <div class="gam-size-option" data-value="970x66">970x66</div>
                                            <div class="gam-size-option" data-value="970x90">970x90</div>
                                            <div class="gam-size-option" data-value="970x250">970x250</div>
                                            <div class="gam-size-option" data-value="980x90">980x90</div>
                                            <div class="gam-size-option" data-value="980x120">980x120</div>
                                            <div class="gam-size-option" data-value="1024x768">1024x768</div>

                                        </div>
                                    </div>
                                    <input type="hidden" name="gam_ad_sizes" id="gam_ad_sizes"
                                        value="<?php echo $gamadsmbai_ad_main ? esc_attr($gamadsmbai_ad_main->gam_ad_sizes) : ''; ?>">
                                </div>

                                <!-- Responsive Sizes -->
                                <div id="gam-responsive-sizes" style="display:none;">
                                    <ul class="gam-device-tabs">
                                        <li data-device="desktop" class="active">Desktop</li>
                                        <li data-device="tablet">Tablet</li>
                                        <li data-device="mobile">Mobile</li>
                                    </ul>

                                    <div class="gam-device-panel" data-device="desktop" style="display:block;">
                                        <div class="gam-selected-sizes" id="gam-selected-desktop">
                                            <span>Desktop Sizes :</span>
                                        </div>
                                        <div class="gam-sizes-select">
                                            <input type="text" class="gam-size-search" data-device="desktop" placeholder="Search size..." autocomplete="off">
                                            <div class="gam-sizes-dropdown">
                                                <div class="gam-size-option" data-value="fluid">fluid</div>
                                                <div class="gam-size-option" data-value="120x240">120x240</div>
                                                <div class="gam-size-option" data-value="120x600">120x600</div>
                                                <div class="gam-size-option" data-value="160x600">160x600</div>
                                                <div class="gam-size-option" data-value="180x150">180x150</div>
                                                <div class="gam-size-option" data-value="200x200">200x200</div>
                                                <div class="gam-size-option" data-value="234x60">234x60</div>
                                                <div class="gam-size-option" data-value="250x250">250x250</div>
                                                <div class="gam-size-option" data-value="300x250">300x250</div>
                                                <div class="gam-size-option" data-value="300x600">300x600</div>
                                                <div class="gam-size-option" data-value="336x280">336x280</div>
                                                <div class="gam-size-option" data-value="468x60">468x60</div>
                                                <div class="gam-size-option" data-value="728x90">728x90</div>
                                                <div class="gam-size-option" data-value="750x200">750x200</div>
                                                <div class="gam-size-option" data-value="750x300">750x300</div>
                                                <div class="gam-size-option" data-value="930x180">930x180</div>
                                                <div class="gam-size-option" data-value="970x66">970x66</div>
                                                <div class="gam-size-option" data-value="970x90">970x90</div>
                                                <div class="gam-size-option" data-value="980x90">980x90</div>
                                                <div class="gam-size-option" data-value="980x120">980x120</div>
                                                <div class="gam-size-option" data-value="1024x768">1024x768</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="gam-device-panel" data-device="tablet" style="display:none;">
                                        <div class="gam-selected-sizes" id="gam-selected-tablet">
                                            <span>Tablet Sizes :</span>
                                        </div>
                                        <div class="gam-sizes-select">
                                            <input type="text" class="gam-size-search" data-device="tablet" placeholder="Search size..." autocomplete="off">
                                            <div class="gam-sizes-dropdown">
                                                <div class="gam-size-option" data-value="fluid">fluid</div>
                                                <div class="gam-size-option" data-value="300x50">300x50</div>
                                                <div class="gam-size-option" data-value="300x75">300x75</div>
                                                <div class="gam-size-option" data-value="300x100">300x100</div>
                                                <div class="gam-size-option" data-value="320x100">320x100</div>
                                                <div class="gam-size-option" data-value="300x250">300x250</div>
                                                <div class="gam-size-option" data-value="468x60">468x60</div>
                                                <div class="gam-size-option" data-value="728x90">728x90</div>
                                                <div class="gam-size-option" data-value="750x100">750x100</div>
                                                <div class="gam-size-option" data-value="750x200">750x200</div>
                                                <div class="gam-size-option" data-value="750x300">750x300</div>
                                                <div class="gam-size-option" data-value="930x180">930x180</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="gam-device-panel" data-device="mobile" style="display:none;">
                                        <div class="gam-selected-sizes" id="gam-selected-mobile">
                                            <span>Mobile Sizes :</span>
                                        </div>
                                        <div class="gam-sizes-select">
                                            <input type="text" class="gam-size-search" data-device="mobile" placeholder="Search size..." autocomplete="off">
                                            <div class="gam-sizes-dropdown">
                                                <div class="gam-size-option" data-value="fluid">fluid</div>
                                                <div class="gam-size-option" data-value="120x60">120x60</div>
                                                <div class="gam-size-option" data-value="120x90">120x90</div>
                                                <div class="gam-size-option" data-value="125x125">125x125</div>
                                                <div class="gam-size-option" data-value="300x50">300x50</div>
                                                <div class="gam-size-option" data-value="300x250">300x250</div>
                                                <div class="gam-size-option" data-value="320x100">320x100</div>
                                                <div class="gam-size-option" data-value="320x480">320x480</div>
                                                <div class="gam-size-option" data-value="480x320">480x320</div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Hidden JSON field -->
                                    <input type="hidden" name="gam_responsive_sizes" id="gam_responsive_sizes"
                                        value='<?php echo $gamadsmbai_ad_main && !empty($gamadsmbai_ad_main->gam_responsive_sizes) ? esc_attr($gamadsmbai_ad_main->gam_responsive_sizes) : "{}"; ?>'>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Custom Code Field -->
                    <div id="gam-custom-code-wrapper" style="display: none;">
                        <label for="gam_custom_code">Custom HTML/CSS/JS Code
                            <span class="floating_tooltip_on" data-title="Paste custom HTML/CSS/JS to run on your site.">
                                <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </label>
                        <textarea id="gam_custom_code" name="gam_custom_code" rows="10" style="width:100%;"><?php echo $gamadsmbai_ad_main ? esc_textarea($gamadsmbai_ad_main->custom_code) : ''; ?></textarea>
                    </div>
                </div>

                <!-- Visible Pages -->
                <div class="gam-ad-form-group _eql_pad">
                    <p><strong>Visible On
                            <span class="floating_tooltip_on" data-title="Choose whether this ad should appear on the entire site or only on selected pages.">
                                <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </strong></p>
                    <label>
                        <input type="checkbox" id="show_on_all_pages" name="show_on_all_pages" value="1"
                            <?php checked($gamadsmbai_ad_main && $gamadsmbai_ad_main->show_entire_site, 1); ?> />
                        Entire site
                        <span class="floating_tooltip_on" data-title="Check for entire website">
                            <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <g>
                                        <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                    </g>
                                </g>
                            </svg>
                        </span>
                    </label>
                    <div class="visible_type_pages">
                        <?php
                        $gamadsmbai_page_options = [
                            'homepage' => 'Home Page',
                            'post'     => 'Posts',
                            'category' => 'Category Pages',
                            'page'     => 'Static Pages',
                            'search'   => 'Search Pages',
                            'archive'  => 'Tag/Archive Pages'
                        ];
                        $gamadsmbai_selected_pages = $gamadsmbai_ad_main ? maybe_unserialize($gamadsmbai_ad_main->visible_pages) : [];
                        foreach ($gamadsmbai_page_options as $gamadsmbai_pgoptn_value => $gamadsmbai_pgoptn_label): ?>
                            <label style="display: block; margin-left: 10px;">
                                <input type="checkbox" name="visible_pages[]" value="<?php echo esc_attr($gamadsmbai_pgoptn_value); ?>"
                                    <?php checked(in_array($gamadsmbai_pgoptn_value, $gamadsmbai_selected_pages)); ?> />
                                <?php echo esc_html($gamadsmbai_pgoptn_label); ?>
                            </label>
                        <?php endforeach; ?>
                    </div>
                </div>



                <!-- Ad Position -->
                <div class="gam-ad-form-group flex_position_div _eql_pad">
                    <p>
                        <label for="gam_ad_position">Ad Position
                            <span class="floating_tooltip_on" data-title="Choose where the ad will be shown on the page.">
                                <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </label>
                        <select name="gam_ad_position" id="gam_ad_position" style="padding: 2px 8px;">
                            <option value="" default>-- Select Position --</option>
                            <option value="head" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'head'); ?>>Head</option>
                            <option value="header" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'header'); ?>>Header</option>
                            <option value="before_content" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'before_content'); ?>>Before Content</option>
                            <option value="after_content" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'after_content'); ?>>After Content</option>
                            <option value="before_posts" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'before_posts'); ?>>Before Posts</option>
                            <option value="after_posts" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'after_posts'); ?>>After Posts</option>
                            <option value="between_posts" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'between_posts'); ?>>Between Posts</option>
                            <option value="middle_page" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'middle_page'); ?>>Middle of Page</option>
                            <option value="before_paragraph" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'before_paragraph'); ?>>Before Paragraph</option>
                            <option value="after_paragraph" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'after_paragraph'); ?>>After Paragraph</option>
                            <option value="before_image" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'before_image'); ?>>Before Image</option>
                            <option value="after_image" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'after_image'); ?>>After Image</option>
                            <option value="floating_left" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'floating_left'); ?>>Floating Left</option>
                            <option value="floating_right" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'floating_right'); ?>>Floating Right</option>
                            <option value="sidebar" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'sidebar'); ?>>Sidebar</option>
                            <option value="footer" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_position === 'footer'); ?>>Footer</option>
                            <option value="custom" <?php selected($gamadsmbai_ad_main && !in_array($gamadsmbai_ad_main->ad_position, ['head', 'header', 'before_content', 'after_content', 'middle_page', 'floating_left', 'floating_right', 'sidebar', 'footer'])); ?>>Custom Position</option>
                        </select>
                    </p>

                    <p id="paragraph_position_field" style="display: <?php echo ($gamadsmbai_ad_main && in_array($gamadsmbai_ad_main->ad_position, ['before_paragraph', 'after_paragraph', 'after_image'])) ? 'block' : 'none'; ?>">
                        <label for="paragraph_counts">Number
                            <span class="floating_tooltip_on" data-title="Enter the paragraph count number if paragraph selected, for Image enter image count number">
                                <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </label>
                        <input type="text" name="paragraph_counts" id="paragraph_counts"
                            value="<?php echo $gamadsmbai_ad_main ? esc_attr($gamadsmbai_ad_main->paragraph_counts) : ''; ?>"
                            style="width:100%;" placeholder="e.g. 1,2,3" />
                    </p>

                    <p id="custom_position_field" style="display: <?php echo ($gamadsmbai_ad_main && !in_array($gamadsmbai_ad_main->ad_position, ['head', 'header', 'before_content', 'after_content', 'middle_page', 'floating_left', 'floating_right', 'sidebar', 'footer'])) ? 'block' : 'none'; ?>">
                        <label for="custom_ad_position">Enter Custom Position
                            <span class="floating_tooltip_on" data-title="Enter the cuspom positioning of div or any html elemtent like class,id,element name. It workes with querySelectorAll('your_custom_position.')">
                                <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </label>
                        <input type="text" name="custom_ad_position" id="custom_ad_position"
                            value="<?php echo $gamadsmbai_ad_main ? esc_attr($gamadsmbai_ad_main->custom_ad_position) : ''; ?>"
                            style="width: 100%;" placeholder="e.g. #custom-hook or .your-class" />
                    </p>
                    <p id="gam_ad_alignment_box">
                        <label for="gam_ad_alignment"><span id="gam_ad_alignment_or_trigger">Ad Alignment</span>
                            <span class="floating_tooltip_on" data-title="Choose how the ad is aligned or trigger on the page.">
                                <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </label>
                        <select name="gam_ad_alignment" id="gam_ad_alignment" style="padding: 2px 8px;">
                            <option value="" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === ''); ?>>-- Default --</option>
                            <option value="left" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'left'); ?>>Left</option>
                            <option value="center" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'center'); ?>>Center</option>
                            <option value="right" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'right'); ?>>Right</option>
                            <option value="none" <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'none'); ?>>None (inline)</option>
                            <!-- Only For Anchor -->
                            <option value="top" data-anchor-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'top'); ?>>Top</option>
                            <option value="bottom" data-anchor-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'bottom'); ?>>Bottom</option>
                            <!-- Only For Custom Position -->
                            <option value="start" data-custom-postion-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'start'); ?>>Start</option>
                            <option value="end" data-custom-postion-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'end'); ?>>End</option>
                            <!-- Only For Popup Ad Trigger -->
                            <option value="default" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'default'); ?>>default (On Load - 4 Sec Delay)</option>
                            <option value="delay0" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'delay0'); ?>>On Load - No Delay</option>
                            <option value="delay2" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'delay2'); ?>>On Load - Delay of 2 Sec</option>
                            <option value="scroll20" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scroll20'); ?>>After 20% page scroll</option>
                            <option value="scroll30" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scroll30'); ?>>After 30% page scroll</option>
                            <option value="scroll50" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scroll50'); ?>>After 50% page scroll</option>
                            <option value="scroll60" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scroll60'); ?>>After 60% page scroll</option>
                            <option value="scroll80" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scroll80'); ?>>After 80% page scroll</option>
                            <option value="loadonce0" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'loadonce0'); ?>>No delay - load once/session</option>
                            <option value="loadonce2" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'loadonce2'); ?>>2 Sec delay - load once/session</option>
                            <option value="loadonce4" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'loadonce4'); ?>>4 Sec delay - load once/session</option>
                            <option value="scrollonce20" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scrollonce20'); ?>>After 20% page scroll - load once/session</option>
                            <option value="scrollonce30" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scrollonce30'); ?>>After 30% page scroll - load once/session</option>
                            <option value="scrollonce50" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scrollonce50'); ?>>After 50% page scroll - load once/session</option>
                            <option value="scrollonce60" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scrollonce60'); ?>>After 60% page scroll - load once/session</option>
                            <option value="scrollonce80" data-popupad-trigger-only <?php selected($gamadsmbai_ad_main && $gamadsmbai_ad_main->ad_alignment === 'scrollonce80'); ?>>After 80% page scroll - load once/session</option>
                        </select>
                    </p>
                </div>

                <!-- Show Once -->
                <div class="gam-ad-form-group" style="display: none;">
                    <input type="checkbox" hidden name="show_once" id="show_once" checked <?php //checked($gamadsmbai_ad_main && $gamadsmbai_ad_main->show_once, 1); 
                                                                                            ?> />
                    <label for="show_once">Show only once per site</label>
                </div>

                <input type="hidden" name="ad_id" id="gam-ad-id" value="<?php echo $gamadsmbai_ad_main ? intval($gamadsmbai_ad_main->id) : ''; ?>">
                <div class="gam-ad-form-actions _eql_pad">
                    <button type="submit" id="gam-save-ad-button" class="button button-secondary">Draft</button>
                    <button type="submit" style="display: none;" id="gam-save-ad-button-disable" class="button button-secondary gam-button-danger">Disable</button>
                    <button type="submit" id="gam-save-ad-button-publish" class="button button-primary">Save & Publish</button>
                </div>
            </div>
            <div class="floating_tooltip_box"></div>
        </form>
        <?php
        // Temprary Updated Code
        // Not Inlcuded in this commid and version
        if (1 === 0): ?>
            <!-- Preview Demo Ad -->
            <div class="previewOfAdModel">
                <div class="show_box">
                    <span class="eyeicon" id="openpreviewmodebutton">
                        Preview Demo
                        <svg fill="#a3a3a3" width="20px" height="20px" viewBox="-3.2 -3.2 38.40 38.40" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#a3a3a3" stroke-width="0.00032" transform="rotate(0)matrix(1, 0, 0, 1, 0, 0)">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <title>telescope</title>
                                <path d="M29.46 19.731c-0.43-0.43-0.984-0.694-1.615-0.803l-7.319-5.904c-0.605-0.605-1.528-0.781-2.551-0.581-0.085-0.242-0.215-0.458-0.394-0.637l-3.351-2.703 0.026-0.026c-0.122-0.122-0.263-0.218-0.419-0.29l-1.509-1.217c-0.45-0.45-1.176-0.525-1.957-0.283-0.037-0.227-0.129-0.426-0.282-0.579l-2.903-2.342c0.361-0.913 0.32-1.788-0.199-2.307-0.844-0.844-2.631-0.425-3.991 0.935s-1.779 3.147-0.935 3.991c0.517 0.517 1.389 0.559 2.3 0.202l2.344 2.905c0.153 0.153 0.352 0.246 0.579 0.282-0.243 0.781-0.167 1.507 0.283 1.957l1.357 1.683c0.049 0.073 0.103 0.141 0.165 0.205l2.715 3.365c0.179 0.179 0.395 0.309 0.637 0.394-0.199 1.023-0.024 1.946 0.581 2.551l5.904 7.32c0.109 0.631 0.373 1.185 0.803 1.614 1.667 1.667 5.197 0.84 7.885-1.847s3.514-6.217 1.847-7.885zM23.156 25.024c1.173-1.173 2.686-1.594 3.529-1.028 0.041 0.097 0.071 0.2 0.092 0.308-0.276 0.112-0.559 0.299-0.811 0.552-0.67 0.67-0.877 1.551-0.461 1.967 0.083 0.083 0.185 0.141 0.301 0.176-0.086 0.101-0.177 0.199-0.273 0.296-1.173 1.173-2.686 1.594-3.529 1.028-0.364-0.869 0.080-2.226 1.153-3.298z"></path>
                            </g>
                        </svg>
                    </span>
                    <span class="floating_tooltip_on" data-title="See, How the Ad looks like">
                        <svg width="12px" height="12px" style="margin:0px 4px -1px 4px" fill="#848484" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="#848484" stroke-width="0.00032">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g>
                            <g id="SVGRepo_iconCarrier">
                                <g>
                                    <path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039 c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016 c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268 c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494 C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0 C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"></path>
                                </g>
                            </g>
                        </svg>
                    </span>
                </div>
                <div class="hide_box" id="previewmodeon">
                    <div class="preview_box">
                        <div class="preview_title_of_the_ad">
                            <h4 id="current_previewing_title">DEMO TITLE</h4>
                            <span id="closepreviewmodebutton">
                                <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#f7f7f7">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <path d="M6.99486 7.00636C6.60433 7.39689 6.60433 8.03005 6.99486 8.42058L10.58 12.0057L6.99486 15.5909C6.60433 15.9814 6.60433 16.6146 6.99486 17.0051C7.38538 17.3956 8.01855 17.3956 8.40907 17.0051L11.9942 13.4199L15.5794 17.0051C15.9699 17.3956 16.6031 17.3956 16.9936 17.0051C17.3841 16.6146 17.3841 15.9814 16.9936 15.5909L13.4084 12.0057L16.9936 8.42059C17.3841 8.03007 17.3841 7.3969 16.9936 7.00638C16.603 6.61585 15.9699 6.61585 15.5794 7.00638L11.9942 10.5915L8.40907 7.00636C8.01855 6.61584 7.38538 6.61584 6.99486 7.00636Z" fill="#a3a3a3"></path>
                                    </g>
                                </svg>
                            </span>
                        </div>
                        <div class="preview_box_adpreview_layout">
                            <div class="display_overlay_demo_ad">

                                <div class="playground">
                                    <!-- Controls -->
                                    <div class="playground-controls">
                                        <div class="preview_box_options">
                                            <div class="demooption_box">
                                                <select name="demo_position" id="demo_position">
                                                    <option value="" default>-- Positions --</option>
                                                    <option value="header">Header</option>
                                                    <option value="before_content">Before Content</option>
                                                    <option value="after_content">After Content</option>
                                                    <option value="before_posts">Before Posts</option>
                                                    <option value="after_posts">After Posts</option>
                                                    <option value="between_posts">Between Posts</option>
                                                    <option value="middle_page">Middle of Page</option>
                                                    <option value="before_paragraph">Before Paragraph</option>
                                                    <option value="after_paragraph">After Paragraph</option>
                                                    <option value="before_image">Before Image</option>
                                                    <option value="after_image">After Image</option>
                                                    <option value="floating_left">Floating Left</option>
                                                    <option value="floating_right">Floating Right</option>
                                                    <option value="sidebar">Sidebar</option>
                                                    <option value="footer">Footer</option>
                                                </select>
                                            </div>
                                            <div class="demooption_box">
                                                <select name="demo_alignment" id="demo_alignment">
                                                    <option value="">-- Alignments --</option>
                                                    <option value="left">Left</option>
                                                    <option value="center">Center</option>
                                                    <option value="right">Right</option>
                                                    <option value="none">None (inline)</option>
                                                    <option value="top">Top</option>
                                                    <option value="bottom">Bottom</option>
                                                </select>
                                            </div>
                                            <div class="demooption_box">
                                                <select name="demo_ad_sizes" id="demo_ad_sizes">
                                                    <option value="">-- Sizes --</option>
                                                    <option value="fluid">fluid</option>
                                                    <option value="120x60">120x60</option>
                                                    <option value="120x90">120x90</option>
                                                    <option value="120x240">120x240</option>
                                                    <option value="120x600">120x600</option>
                                                    <option value="125x125">125x125</option>
                                                    <option value="160x600">160x600</option>
                                                    <option value="180x150">180x150</option>
                                                    <option value="200x200">200x200</option>
                                                    <option value="234x60">234x60</option>
                                                    <option value="250x250">250x250</option>
                                                    <option value="300x50">300x50</option>
                                                    <option value="300x75">300x75</option>
                                                    <option value="300x100">300x100</option>
                                                    <option value="300x250">300x250</option>
                                                    <option value="300x600">300x600</option>
                                                    <option value="320x100">320x100</option>
                                                    <option value="320x250">320x250</option>
                                                    <option value="320x480">320x480</option>
                                                    <option value="336x280">336x280</option>
                                                    <option value="468x60">468x60</option>
                                                    <option value="480x320">480x320</option>
                                                    <option value="728x90">728x90</option>
                                                    <option value="750x100">750x100</option>
                                                    <option value="750x200">750x200</option>
                                                    <option value="750x300">750x300</option>
                                                    <option value="930x180">930x180</option>
                                                    <option value="970x66">970x66</option>
                                                    <option value="970x90">970x90</option>
                                                    <option value="970x250">970x250</option>
                                                    <option value="980x90">980x90</option>
                                                    <option value="980x120">980x120</option>
                                                    <option value="1024x768">1024x768</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="playgroundchangedivece">
                                            <button data-device="desktop" class="active">Desktop</button>
                                            <button data-device="tablet">Tablet</button>
                                            <button data-device="mobile">Mobile</button>
                                        </div>
                                    </div>
                                    <!-- Canvas Wrapper -->
                                    <div class="canvas-wrap">
                                        <div class="site-canvas desktop" id="siteCanvas">
                                            <header class="site-header">
                                                Demo Website Header
                                            </header>
                                            <!-- Top Ad -->
                                            <div class="ad-slot ad-top" id="ad-top">
                                                Top Ad Slot
                                            </div>
                                            <main class="site-main">
                                                <article class="content">
                                                    <p>Lorem ipsum dolor sit amet...</p>
                                                    <p>Scroll to see ad behavior...</p>
                                                    <p>Lorem ipsum dolor sit amet...</p>
                                                    <p>Lorem ipsum dolor sit amet...</p>
                                                </article>
                                                <aside class="sidebar">
                                                    <div class="ad-slot ad-sidebar" id="ad-sidebar">
                                                        Sidebar Ad Slot
                                                    </div>
                                                </aside>
                                            </main>
                                            <!-- Anchor Ad -->
                                            <div class="ad-slot ad-anchor" id="ad-anchor">
                                                Anchor Ad
                                            </div>
                                            <footer class="site-footer">
                                                Demo Website Footer
                                            </footer>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endif; ?>
        <script>
            // venilla script for ad playground
            function setadplaygrndDiviseBoxVh() {
                document.documentElement.style.setProperty(
                    '--vhmimicadplaygrndDiviseBox',
                    `${window.innerHeight * 0.01}px`
                );
            }
            window.addEventListener('resize', setadplaygrndDiviseBoxVh);
            setadplaygrndDiviseBoxVh();
            const buttons = document.querySelectorAll('.playground-controls button');
            const canvas = document.getElementById('siteCanvas');
            buttons.forEach(btn => {
                btn.addEventListener('click', () => {
                    buttons.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    canvas.classList.remove('desktop', 'tablet', 'mobile');
                    canvas.classList.add(btn.dataset.device);
                });
            });


            // jquary script
            jQuery(document).ready(function($) {
                var selectedType = "<?php echo $gamadsmbai_ad_main ? esc_js(strtolower(str_replace(' ', '_', $gamadsmbai_ad_main->ad_type))) : (((!$connected && ($isManualModeActive !== "1")) ? "custom_ad" : "banner")); ?>";
                var selectedblockid = "<?php echo $gamadsmbai_ad_main ? intval($gamadsmbai_ad_main->blockid) : ''; ?>";
                if (selectedType) {
                    $('.gam-ad-type-item').removeClass('active');
                    $('.gam-ad-type-item[data-type="' + selectedType + '"]').addClass('active');
                    $('#gam_selected_ad_type').val(selectedType);
                    $(".gam-adunit-option").removeClass('selected');

                    // Show custom code field if Custom Ad selected
                    if (selectedType === 'custom_ad') {
                        $('#gam-custom-code-wrapper').show();
                        $('#gam-ad-unit-wrapper').hide();
                        $('#blocks').show();
                        $('.blockid').removeClass("selected");
                        $('.blockid[data-type="' + selectedblockid + '"]').addClass("selected");
                        $('#gam_blockid').val(selectedblockid);
                    } else if (selectedType === 'banner') {
                        $('#gam-custom-code-wrapper').hide();
                        $('#gam-ad-unit-wrapper').show();
                        $('#blocks').show();
                        $('.blockid').removeClass("selected");
                        $('.blockid[data-type="' + selectedblockid + '"]').addClass("selected");
                        $('#gam_blockid').val(selectedblockid);
                    } else {
                        $('#gam-custom-code-wrapper').hide();
                        $('#gam-ad-unit-wrapper').show();
                        $('#blocks').hide();
                    }
                }

                const $input = $("#gam_ad_unit"); // editable input
                const $dropdown = $("#select-adunits"); // dropdown container
                const $search = $("#adunit_search"); // search input inside dropdown
                const $options = $(".gam-adunit-option"); // options list

                // Show dropdown when focusing either main input or search box
                $input.on("focus", function() {
                    $dropdown.show();
                });

                // Show dropdown when focusing search input
                $search.on("focus", function() {
                    $dropdown.show();
                });

                // Show dropdown when focusing search input
                $search.on("blur", function() {
                    setTimeout(() => {
                        $dropdown.hide();
                    }, 200);
                });

                // Click on option → fill into input
                $options.on("click", function() {
                    $options.removeClass("selected");
                    $(this).addClass("selected");
                    $input.val($(this).data("value"));
                    $dropdown.hide();
                    if ($input.val() && ($("#gam_selected_ad_type").val() !== 'interstitial' && $("#gam_selected_ad_type").val() !== 'anchor' && $("#gam_selected_ad_type").val() !== 'rewarded')) {
                        $("#gam-size-wrapper").show();
                        // Add tag function
                        function addTag(size) {
                            const tag = $(`<div class="gam-tag">${size}<span class="remove-tag">&times;</span></div>`);

                            tag.find(".remove-tag").on("click", function() {
                                tag.remove();
                                updateHidden();
                            });

                            $("#gam-selected-sizes").append(tag);
                            updateHidden();
                        }

                        // Update hidden input
                        function updateHidden() {
                            let sizes = [];
                            $("#gam-selected-sizes").find(".gam-tag").each(function() {
                                sizes.push($(this).text().replace("×", "").trim());
                            });
                            $("#gam_ad_sizes").val(sizes.join(","));
                        }
                        // Parse pre-sizes
                        let preSizesRaw = $(this).attr("data-presizes");
                        let preSizes = [];
                        try {
                            preSizes = JSON.parse(preSizesRaw);
                        } catch (e) {
                            preSizes = [];
                        }

                        if (preSizes.length > 0) {
                            $("#gam_ad_sizes").val(preSizes.join(","));
                            $(".gam-tag").remove();
                            preSizes.forEach(size => addTag(size));
                        } else {
                            $("#gam_ad_sizes").val('');
                            $(".gam-tag").remove();
                        }
                    } else {
                        $("#gam-size-wrapper").hide();
                        $("#gam_ad_sizes").val('');
                        $(".gam-tag").remove();
                    }
                });

                // Filter options by search field
                $search.on("input", function() {
                    filterOptions($(this).val().toLowerCase());
                });

                // Helper: filter both search + typing in main input
                function filterOptions(val) {
                    $options.each(function() {
                        const text = $(this).data("value").toLowerCase();
                        $(this).toggle(text.includes(val));
                    });
                }

                // Hide dropdown when clicking outside
                $(document).on("click", function(e) {
                    if (!$(e.target).closest("#gam-ad-unit-wrapper").length) {
                        $dropdown.hide();
                        if ($input.val() && ($("#gam_selected_ad_type").val() !== 'interstitial' && $("#gam_selected_ad_type").val() !== 'anchor' && $("#gam_selected_ad_type").val() !== 'rewarded')) {
                            $("#gam-size-wrapper").show();
                        } else {
                            $("#gam-size-wrapper").hide();
                        }
                    }
                });
            });
        </script>
    </div>
</div>