<div class="zhkup">
<div class=" w-full h-full hub-bg relative px-10 pt-28 pb-5" style="background: linear-gradient(
18deg, #FBDAB4 53%, #FAAC73 100%);">
    <img class="absolute top-10 right-2 z-10 image-rotate" src="<?php
    use ZhaketUpdater\Settings\Setting;

    echo ZHAKET_UPDATER_PLUGIN_ASSET_URL ?>/admin/img/booster/widget-back.svg" alt="">

    <div class=" h-[195px] bg-no-repeat w-full p-7 z-50 flex relative bg-white/20 backdrop-blur-sm border border-white/90 p-4 !rounded-[25px] flex-col pb-[135px]" >
    <img class="absolute -top-16 left-7 max-w-[100px]" src="<?php echo ZHAKET_UPDATER_PLUGIN_ASSET_URL ?>/admin/img/booster/widget.png" alt="">

        <div class="text-sm mt-5 text-justify font-semibold w-full">
            <?php esc_html_e("By activating the Zhacket Booster, you can significantly increase your website's speed.",'zhaket-updater') ?>

         </div>
        <div class="flex md:flex-row flex-col justify-evenly mt-1">
            <div class="bg-[rgba(255,255,255,0.6)] border border-[rgb(178,175,175)] rounded-[5px] p-[7px] " style="stroke-width: 0.5px;">
                <p class="text-[#939090] text-[10px] w-full text-center"><?php esc_html_e('server requests','zhaket-updater') ?> </p>
                <p class="text-[#484848] text-[10px] w-full text-center"><?php echo count($settings['back_domain']??[]) ?> <?php esc_html_e('number','zhaket-updater'); ?></p>
            </div>
            <div class="bg-[rgba(255,255,255,0.6)] border border-[rgb(178,175,175)] rounded-[5px] p-[7px]" style="stroke-width: 0.5px;">
                <p class="text-[#939090] text-[10px] w-full text-center"><?php esc_html_e('user requests','zhaket-updater') ?> </p>
                <p class="text-[#484848] text-[10px] w-full text-center"><?php echo count($settings['front_url']??[]) ?> <?php esc_html_e('number','zhaket-updater'); ?></p>
            </div>
            <div class="bg-[rgba(255,255,255,0.6)] border border-[rgb(178,175,175)] rounded-[5px] p-[7px]" style="stroke-width: 0.5px;">
                <p class="text-[#939090] text-[10px] w-full text-center"><?php esc_html_e('boost status','zhaket-updater') ?> </p>
                <p class="text-[#484848] text-[10px] w-full text-center"><?php ($settings['auto_detect']?? false) ?esc_html_e('auto','zhaket-updater'):esc_html_e('manual','zhaket-updater') ?></p>
            </div>
        </div>
        <!-- /.flex -->
 <div class="absolute right-1/2 translate-x-1/2 -bottom-4">
 <label class="switch hub-switch peer" for="zhb_status"><input
   id="zhb_status" value="False"  type="checkbox" />
          <div class="slider round"><p id="toggle-text" class="text-[#9A9B9C] mr-[16px] mt-[5px]">OFF</p></div>
        </label>
 </div>

    </div>
    <img class="m-auto z-50 mt-5" src="<?php echo ZHAKET_UPDATER_PLUGIN_ASSET_URL ?>/admin/img/zhk-logo.svg" alt="">
</div>
</div>
<script>
 document.addEventListener('DOMContentLoaded', function () {
	 let nonce=`<?php echo wp_create_nonce(Setting::getNonceKey())  ?>`
    let checkbox = document.getElementById('zhb_status');
     checkbox.checked = <?php echo !$status ?'false':'true' ?>;
     if (checkbox.checked) {
         document.getElementById('toggle-text').innerText=''
	 }
    // Fetch the saved status on load
    // fetchSavedStatus();

    // Handle checkbox change event
    checkbox.addEventListener('change', function () {
        let status = checkbox.checked ? 'true' : 'false';
        saveCheckboxStatus(status);
    });

    function saveCheckboxStatus(status) {
        let toggleText = document.getElementById('toggle-text');
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'zhaket_booster_save_checkbox_status',
                status: status,
                nonce:nonce
            },
            success: function (response) {
                if (response.status) {
                    checkbox.checked = response.status === true;
                    toggleText.textContent = checkbox.checked ? '' : "OFF";
                }
            },
            error: function (error) {
                console.error('Error saving status:', error);
                toggleText.textContent = checkbox.checked ? '' : "OFF";

            },
        });
    }

    function fetchSavedStatus() {
        const toggleText = document.getElementById('toggle-text');
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'zhaket_booster_get_checkbox_status',
                nonce:nonce
            },
            success: function (response) {
                console.log(response);
                if (response.status) {
                    console.log(1)
                    checkbox.checked = response.status === true;
                    toggleText.textContent = checkbox.checked ? '' : "OFF";
                }
            },
            error: function (error) {
                checkbox.checked  = true;
                toggleText.textContent = checkbox.checked ? '' : "OFF";
            },
        });
    }
});
</script>