<?php
/*
 * No direct access to this file
 */

use \WpAssetCleanUp\Admin\OptimiseAssets\ResourceLoadingAdmin;
use WpAssetCleanUp\OptimiseAssets\ResourceLoading;

if (! isset($data)) {
    exit;
}

global $wp_version;

$settingKey = ResourceLoading::$settingKey;
$data['current_setting_key'] = $settingKey;

$tabIdArea = 'wpacu-setting-resource-loading';
$styleTabContent = isset($selectedTabArea) && ($selectedTabArea === $tabIdArea) ? 'style="display: table-cell;"' : '';

$data[$settingKey]            = isset($data[$settingKey]) && is_array($data[$settingKey]) ? $data[$settingKey] : array();
$data[$settingKey]['enabled'] = isset($data[$settingKey]['_enabled']) && (int)$data[$settingKey]['_enabled'] === 1;

// [Image Attributes]
$data[$settingKey.'_image_attr_rules']   = ResourceLoadingAdmin::getImageAttributeRulesForAdmin($data);
$data[$settingKey.'_image_attr_allowed'] = ResourceLoading\ImageAttributes::getAllowedResourceLoadingImageAttributes();
// [/Image Attributes]

// [Lazy Load]
$data[$settingKey.'_image_lazy_load_rules'] = ResourceLoadingAdmin::getImageLazyLoadRulesForAdmin($data); // Lazy Loading
// [/Lazy Load]

?>
<style>
    .wpacu-rules-wrap > p:first-of-type {
        margin-top: 0;
    }

    .wpacu-rules-header,
    .wpacu-rule-row {
        display: grid;
        grid-template-columns: 400px 180px 180px max-content;
        gap: 8px;
        align-items: center;
    }

    .wpacu-rules-header {
        font-weight: 600;
        margin-bottom: 6px;
    }

    .wpacu-rules-header > div {
        line-height: 30px;
    }

    .wpacu-rule-row {
        margin-bottom: 8px;
    }

    .wpacu-rule-row input,
    .wpacu-rule-row select {
        width: 100%;
        min-width: 0;
        height: 30px;
        box-sizing: border-box;
    }

    .wpacu-remove-rule {
        color: #b32d2e !important;
    }

    .wpacu-disabled-area {
        opacity: 0.5;
    }

    .wpacu-tooltip {
        position: relative;
        display: inline-block;
        margin-left: 4px;
        cursor: help;
        color: #646970;
        font-size: 15px;
        font-weight: normal;
        vertical-align: initial;
    }

    .wpacu-tooltip:hover {
        color: #2271b1;
    }

    .wpacu-tooltip-text {
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%) translateY(3px);
        z-index: 9999;
        width: max-content;
        max-width: min(260px, calc(100vw - 20px));
        box-sizing: border-box;
        padding: 6px 8px;
        background: #004567;
        color: #fff;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1.4;
        white-space: normal;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
    }

    .wpacu-tooltip-text code {
        color: #004567;
        border-radius: 3px;
        display: inline-block;
        background: lightgrey;
    }

    .wpacu-tooltip-text::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;

        border-width: 7px;
        border-style: solid;
        border-color: #004567 transparent transparent transparent;

        transform: translateX(-50%);
    }

    .wpacu-tooltip:hover .wpacu-tooltip-text {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 1142px) {
        .wpacu-tooltip-text {
            left: auto;
            right: -8px;
            transform: translateY(3px);
            max-width: calc(100vw - 32px);
        }

        .wpacu-tooltip:hover .wpacu-tooltip-text {
            transform: translateY(0);
        }

        .wpacu-tooltip-text::after {
            left: auto;
            right: 8px;
            transform: none;
        }
    }

    .wpacu-hide {
        display: none !important;
    }

    .wpacu-rule-separator {
        margin: 10px 0;
        border: none;
        border-top: 1px dashed #ccd0d4;
    }

    @media (max-width: 900px) {
        .wpacu-rules-header {
            display: none;
        }

        .wpacu-rule-row {
            grid-template-columns: 1fr;
            gap: 6px;
            padding: 10px;
            border: 1px solid #ccd0d4;
            background: #fff;
        }

        .wpacu-rule-row input,
        .wpacu-rule-row select,
        .wpacu-rule-row .button {
            width: 100%;
        }

        .wpacu-rule-row .button {
            text-align: center;
        }
    }
</style>
<div id="<?php echo esc_attr($tabIdArea); ?>" class="wpacu-settings-tab-content" <?php echo wp_kses($styleTabContent, array('style' => array())); ?>>
    <h2 class="wpacu-settings-area-title"><?php _e('Optimize how resources are loaded by the browser to improve page speed and LCP', 'wp-asset-clean-up'); ?></h2>

    <input type="hidden" name="<?php echo WPACU_PLUGIN_ID . '_settings'; ?>[<?php echo $settingKey; ?>][_enabled]" value="0">

    <fieldset style="margin: 15px 0 0 0; padding: 10px 15px; border: 1px solid #ccc; border-radius: 4px;">
        <legend style="border: 1px solid #ccc; padding: 10px 12px; margin: 0 0 20px; border-radius: 4px; text-transform: none;">
                <label style="cursor: pointer;"
                       for="wpacu_<?php echo $settingKey; ?>_enabled">Enable <em>Resource Loading</em> rules?</label>&nbsp;
                <label class="wpacu_switch">
                    <input type="checkbox"
                           data-target-opacity="#wpacu-resource-loading-sub-tabs-area, #wpacu-resource-loading-vertical-tab-area"
                           id="wpacu_<?php echo $settingKey; ?>_enabled"
                           name="<?php echo WPACU_PLUGIN_ID . '_settings'; ?>[<?php echo $settingKey; ?>][_enabled]"
                           value="1"
                            <?php checked($data[$settingKey]['_enabled']); ?>>
                    <span class="wpacu_slider wpacu_round"></span>
                </label>
            <div style="margin: 10px 0 0;"><small>* this marks as active/inactive all the options below</small></div>
        </legend>

        <div id="wpacu-resource-loading-sub-tabs-area"
             style="padding: 0 0 0 10px;"
             class="<?php if ( ! $data[$settingKey]['_enabled'] ) { ?>wpacu-disabled-area<?php } ?>">
            <?php
            // Here $data (e.g. its 'current_setting_key') will be passed for usage
            \WpAssetCleanUp\Admin\SettingsAdmin::printSubTabsOutput(__DIR__, $data, __FILE__);
            ?>
        </div>
    </fieldset>
</div>
