<?php
if (!defined('ABSPATH'))
    exit;

$shopid = sanitize_text_field(get_option('accessibility_shopid'));
$token = get_option('accessibility_tokken');
$accessibility_url = get_option('accessibility_url');

$data = array('shopid' => $shopid);
$content = $this->api->call('/NewGetShopData', $data, 'get');

// Ensure response format is safe
$content = is_array($content) ? $content : [];
$dataArray = isset($content['data']) && is_array($content['data']) ? $content['data'] : [];

// Safe variable assignments
$primary_id = $dataArray['id'] ?? null;
$current_plan = $dataArray['plan'] ?? '';
$member_plan = $dataArray['plan_display_name'] ?? '';
$access_by_admin = $dataArray['access_by_admin'] ?? 0;
$is_installation_popup_shown = $dataArray['is_installation_popup_shown'] ?? 0;
$is_plan_select_popup_shown = $dataArray['is_plan_select_popup_shown'] ?? 0;

// Fallback to locally cached values when API is delayed on first page load.
if (empty($primary_id)) {
    $primary_id = get_option('accessibility_primaryid');
}
if (empty($current_plan)) {
    $current_plan = (string) get_option('accessibility_plan', '');
    $dataArray['plan'] = $current_plan;
    $content['data']['plan'] = $current_plan;
}

// Save to DB if available
if (!empty($primary_id)) {
    update_option('accessibility_primaryid', $primary_id);
}
if (!empty($current_plan)) {
    update_option('accessibility_plan', $current_plan);
}
?>

<?php

// Handle popups only if data exists
if (!empty($dataArray)) {

    if (
    $is_installation_popup_shown == 0 && $is_plan_select_popup_shown == 0 && !empty($member_plan) &&
    strpos(strtolower($member_plan), 'develop') !== false
    ) {
        require_once plugin_dir_path(__FILE__) . 'popups/installation-popup.php';
    }

    if (
    $is_plan_select_popup_shown == 0 && !empty($current_plan) && $is_installation_popup_shown == 1 && $current_plan !== "free" &&
    !empty($member_plan) &&
    strpos(strtolower($member_plan), 'develop') !== false
    ) {
        require_once plugin_dir_path(__FILE__) . 'popups/thankyou-popup.php';
    }

    // Form Update Request
    if (isset($_POST['form_submitted'])) {

        if (!isset($_POST['accessibility_nonce']) || !wp_verify_nonce(
        sanitize_text_field(wp_unslash($_POST['accessibility_nonce'])),
        'accessibility_nonce'
        )) {
            echo 'Sorry, you cannot update.';
            exit;
        }

        /** -----------------------------
         * Safe Handle Form Values
         * ----------------------------- */

        $widget_enable = isset($_POST['jsChecked']) ? 'on' : 'off';
        $button_link_status = isset($_POST['enable_link']) ? 'on' : 'off';
        $desktop_position = sanitize_text_field($_POST['desktop_position'] ?? '');
        $mobile_position = sanitize_text_field($_POST['mobile_position'] ?? '');
        $backgroundcolor = sanitize_text_field($_POST['backgroundcolor'] ?? '');
        $fontcolor = sanitize_text_field($_POST['fontcolor'] ?? '');
        $iconcolor = sanitize_text_field($_POST['iconcolor'] ?? '');
        $bottom_padding = sanitize_text_field($_POST['bottom_padding'] ?? '');
        $widget_size = sanitize_text_field($_POST['widget_size'] ?? '');
        $choose_design = sanitize_text_field($_POST['choose_design'] ?? '');
        $widget_outer_color = sanitize_text_field($_POST['widget_outer_color'] ?? '');
        $widget_inner_color = sanitize_text_field($_POST['widget_inner_color'] ?? '');
        $statement_edit = wp_kses_post(wpautop(wp_unslash($_POST['statement_edit'] ?? '')));
        $statement_link = sanitize_text_field($_POST['statement_link'] ?? '');
        $widget_icon = sanitize_text_field($_POST['widget_icon'] ?? '');

        $send_data = [
            'shopid' => $shopid,
            'enable_link' => $button_link_status,
            'position' => $desktop_position,
            'mobile_position' => $mobile_position,
            'jsChecked' => $widget_enable,
            'backgroundcolor' => $backgroundcolor,
            'fontcolor' => $fontcolor,
            'iconcolor' => $iconcolor,
            'bottom_padding' => $bottom_padding,
            'widget_size' => $widget_size,
            'choose_design' => $choose_design,
            'widget_inner_color' => $widget_inner_color,
            'widget_outer_color' => $widget_outer_color,
            'statement_edit' => $statement_edit,
            'statement_link' => $statement_link,
            'widget_icon' => $widget_icon
        ];

        $returnsenddata = $this->api->call('/updateShopData', $send_data, 'post');

        if (isset($returnsenddata['status']) && $returnsenddata['status'] == 200) {
            echo '<div class="alert alert-success alert-dismissible" id="aa-success-alert">
                    <a href="javascript:void(0);" class="close" aria-label="close">&times;</a>
                    <strong>Success!</strong>
                  </div>';
            echo '<script>
                    jQuery(document).ready(function($) {
                        setTimeout(function() {
                            $("#aa-success-alert").fadeOut("slow");
                        }, 5000);
                        $("#aa-success-alert .close").on("click", function(e) {
                            e.preventDefault();
                            $("#aa-success-alert").fadeOut("fast");
                        });
                    });
                  </script>';

            // Refresh API data
            $content = $this->api->call('/NewGetShopData', ['shopid' => $shopid], 'get');

            // Clear transient cache to reflect changes immediately
            delete_transient('accessibility_widget_data_' . $shopid);

        }
        else {
            echo '<div class="alert alert-danger alert-dismissible" id="aa-error-alert">
                    <a href="javascript:void(0);" class="close" aria-label="close">&times;</a>
                    <strong>Error:</strong> ' . esc_html($returnsenddata['messages'] ?? 'Unknown issue') . '
                  </div>';
            echo '<script>
                    jQuery(document).ready(function($) {
                        setTimeout(function() {
                            $("#aa-error-alert").fadeOut("slow");
                        }, 5000);
                        $("#aa-error-alert .close").on("click", function(e) {
                            e.preventDefault();
                            $("#aa-error-alert").fadeOut("fast");
                        });
                    });
                  </script>';
        }
    }
}
?>


<?php

$js_url = CDN_URL . "wp_js/{$shopid}.js";
if ($current_plan) {
    update_option('accessibility_url', $js_url);
}
else {
    update_option('accessibility_url', '');
}

if ($access_by_admin == '1') {
    echo "<p class='free-trial-note'>You have admin access</p>";
}
if (!empty($current_plan) && strpos(strtolower($member_plan), 'develop') !== false) {
    echo "<p class='free-trial-note'>You have member access</p>";
}
if (empty($current_plan)) {
    echo "<p class='no-plan-notice'>";
    _e('Unlock full functionality by upgrading to a paid plan', 'accessibility-assistant');
    echo "</p>";
}
?>

<div class="loader" style="display: none;">
</div>

<div class="cc-aa-user-admin">
    <!--Footer popup Start--->
    <!--Footer popup End--->
    <!--Footer popup End--->
    <div class="cc-aa-user-admin-header d-flex flex-wrap flex-content-space-between ">
        <div class="cc-aa-user-admin-header-left d-flex flex-column flex-content-end">
            <h2 class="cc-aa-user-admin-page-title"><?php esc_html_e('Widget Settings', 'accessibility-assistant'); ?></h2>
        </div>
        <div class="cc-aa-user-admin-header-right">
            <a href="https://accessibilityassistant.com/wordpress-usage-guide/" class="cc-aa-user-admin-squer-button" target="_blank"><?php esc_html_e('Usage Guide', 'accessibility-assistant'); ?></a>
        </div>
    </div>

    <div class="cc-aa-user-admin-content">

        <form method="post" id="accessibility_widget_form" class="cc-aa-user-admin-form">
            <?php wp_nonce_field('accessibility_nonce', 'accessibility_nonce'); ?>
            <input type="hidden" name="form_submitted" value="1">
            <input id="shopid" type="hidden" name="shopid" class="form-control" value="<?php echo esc_attr($shopid); ?>">

            <div class="cc-aa-user-admin-card-background cc-aa-user-admin-widget-options-card">
                <h4 class="cc-aa-user-admin-card-title"><?php esc_html_e('Widget Option', 'accessibility-assistant'); ?></h4>
                <div class="cc-aa-user-admin-widget-option-row d-grid grid-column-2">
                    <div class="cc-aa-user-admin-widget-option-column <?php if (empty($current_plan))
    echo 'no-access-allowed'; ?>">
                        <label for="widget_enable" class="cc-aa-user-admin-switch-button">
                            <input type="checkbox" id="widget_enable" name="jsChecked" class="cc-aa-user-admin-switch-input" style="display: none !important; margin: 0;" <?php if (!empty($current_plan) && $content['data']['status'] == 1)
    echo 'checked'; ?> <?php if (empty($current_plan))
    echo 'disabled'; ?>>
                            <span class="cc-aa-user-admin-switch-navigator"></span>
                            <span class="cc-aa-user-admin-switch-button-label font-semibold large-text"><?php esc_html_e('Enable / Disable', 'accessibility-assistant'); ?></span>
                        </label>
                        <p><?php _e('To make the widget visible, enable and save the accessibility settings.', 'accessibility-assistant'); ?></p>
                    </div>

                    <div class="cc-aa-user-admin-widget-option-column <?php if ($current_plan == 'basic' || $current_plan == '' || $current_plan == 'free')
    echo 'no-access-allowed'; ?>">
                        <label for="enable_link" class="cc-aa-user-admin-switch-button">
                            <input type="checkbox" name="enable_link" id="enable_link" class="cc-aa-user-admin-switch-input" style="display: none !important; margin: 0;" <?php if ($content['data']['button_link_status'] == 1) {
    echo "checked";
}?> <?php echo($current_plan == 'basic' || $current_plan == '' || $current_plan == 'free') ? 'disabled' : ''; ?> />
                            <span class="cc-aa-user-admin-switch-navigator"></span>
                            <span class="cc-aa-user-admin-switch-button-label font-semibold large-text"><?php esc_html_e('Do you want to put this widget as link?', 'accessibility-assistant'); ?></span>
                        </label>
                        <p class="cc-aa-user-admin-link-print font-semibold">&lt;a href="#add-aacc-link"&gt;Accessibility Assisstance&lt;/a&gt;</p>
                        <p class="font-semibold"><?php printf(__('You can place <strong>%s</strong> as link', 'accessibility-assistant'), '#add-aacc-link'); ?></p>
                        <p>📝 <?php _e('if you enable this option, your floating widget will be hidden and footer link option will be enabled though you need to add the link.', 'accessibility-assistant'); ?></p>
                    </div>
                </div>

                <div class="cc-aa-user-admin-widget-design-option d-flex flex-wrap flex-item-center <?php echo($current_plan == 'basic' || $current_plan == 'pro' || $current_plan == '' || $current_plan == 'free') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                    <div class="cc-aa-user-admin-widget-design-option-left">
                        <div class="cc-aa-user-admin-widget-design-choose d-flex flex-item-center">
                            <label class="cc-aa-user-admin-widget-design-choose-text"><?php esc_html_e('Choose Design', 'accessibility-assistant'); ?></label>
                            <select name="choose_design" id="choose_design" class="cc-aa-user-admin-form-select" <?php echo($current_plan == 'basic' || $current_plan == 'pro' || $current_plan == '') ? 'disabled' : ''; ?>>
                                <option value="1" <?php if ($content['data']['design_view'] == 1) {
    echo "selected";
}?>><?php esc_html_e('Default Design', 'accessibility-assistant'); ?></option>
                                <option value="2" <?php if ($content['data']['design_view'] == 2) {
    echo "selected";
}?>><?php esc_html_e('Custom Design', 'accessibility-assistant'); ?></option>
                                <option value="3" <?php if ($content['data']['design_view'] == 3) {
    echo "selected";
}?>><?php esc_html_e('Mobile View Design', 'accessibility-assistant'); ?></option>
                            </select>
                        </div>
                        <?php if ($current_plan == 'basic' || $current_plan == 'pro' || $current_plan == '' || $current_plan == 'free') { ?>
                        <div class="cc-aa-user-upgrade-plan-message-with-icon font-medium d-flex flex-item-center">
                            <img src="<?php echo esc_url($this->get_admin_image_url('note-icon.webp')); ?>" alt="note" width="16" height="16"> <?php _e('Upgrade your plan to enable these features.', 'accessibility-assistant'); ?>
                        </div>
                        <?php
}?>
                    </div>
                    <div class="cc-aa-user-admin-design-description-container">
                        <div class="design-description <?php echo(empty($content['data']['design_view']) || $content['data']['design_view'] == 1) ? 'active cc-aa-user-admin-design-description-content' : 'cc-aa-user-admin-none'; ?>" data-design="1">This is the default and most widely used design of the accessibility widget – tried, tested, and reliable across all devices.</div>
                        <div class="design-description <?php echo($content['data']['design_view'] == 2) ? 'active cc-aa-user-admin-design-description-content' : 'cc-aa-user-admin-none'; ?>" data-design="2">A modernized version of the default design - visually polished, stylistically refined.</div>
                        <div class="design-description <?php echo($content['data']['design_view'] == 3) ? 'active cc-aa-user-admin-design-description-content' : 'cc-aa-user-admin-none'; ?>" data-design="3">Designed specifically for mobile - similar to the default but optimized for smaller screens and touch-friendly interaction.</div>
                    </div>
                </div>
            </div>

            <div class="cc-aa-user-admin-card-background cc-aa-user-admin-floating-widget <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                <h4 class="cc-aa-user-admin-card-title"><?php _e('Floating Widget Position', 'accessibility-assistant'); ?></h4>
                <div class="cc-aa-user-admin-form-fields d-grid grid-column-2">
                    <div class="cc-aa-user-admin-form-field">
                        <label for="desktop_position" class="h5 cc-aa-user-admin-form-field-label"><?php _e('Desktop Position', 'accessibility-assistant'); ?></label>
                        <select name="desktop_position" id="desktop_position" class="cc-aa-user-admin-form-select" <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <option value="1" <?php if ($content['data']['position'] == 1)
    echo "selected"; ?>><?php _e('Top Left', 'accessibility-assistant'); ?></option>
                            <option value="2" <?php if ($content['data']['position'] == 2)
    echo "selected"; ?>><?php _e('Top Right', 'accessibility-assistant'); ?></option>
                            <option value="3" <?php if ($content['data']['position'] == 3)
    echo "selected"; ?>><?php _e('Middle Left', 'accessibility-assistant'); ?></option>
                            <option value="4" <?php if ($content['data']['position'] == 4)
    echo "selected"; ?>><?php _e('Middle Right', 'accessibility-assistant'); ?></option>
                            <option value="5" <?php if ($content['data']['position'] == 5)
    echo "selected"; ?>><?php _e('Bottom Left', 'accessibility-assistant'); ?></option>
                            <option value="6" <?php if ($content['data']['position'] == 6)
    echo "selected"; ?>><?php _e('Bottom Right', 'accessibility-assistant'); ?></option>
                        </select>
                    </div>

                    <div class="cc-aa-user-admin-form-field">
                        <label for="mobile_position" class="h5 cc-aa-user-admin-form-field-label"><?php _e('Mobile Position', 'accessibility-assistant'); ?></label>
                        <select name="mobile_position" id="mobile_position" class="cc-aa-user-admin-form-select" <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <option value="1" <?php if ($content['data']['mobile_position'] == 1)
    echo "selected"; ?>><?php _e('Top Left', 'accessibility-assistant'); ?></option>
                            <option value="2" <?php if ($content['data']['mobile_position'] == 2)
    echo "selected"; ?>><?php _e('Top Right', 'accessibility-assistant'); ?></option>
                            <option value="3" <?php if ($content['data']['mobile_position'] == 3)
    echo "selected"; ?>><?php _e('Middle Left', 'accessibility-assistant'); ?></option>
                            <option value="4" <?php if ($content['data']['mobile_position'] == 4)
    echo "selected"; ?>><?php _e('Middle Right', 'accessibility-assistant'); ?></option>
                            <option value="5" <?php if ($content['data']['mobile_position'] == 5)
    echo "selected"; ?>><?php _e('Bottom Left', 'accessibility-assistant'); ?></option>
                            <option value="6" <?php if ($content['data']['mobile_position'] == 6)
    echo "selected"; ?>><?php _e('Bottom Right', 'accessibility-assistant'); ?></option>
                        </select>
                    </div>
                </div>

                <div class="cc-aa-user-admin-form-fields d-grid grid-column-2">
                    <div class="cc-aa-user-admin-form-field">
                        <div class="cc-aa-user-admin-label-with-note d-flex flex-wrap flex-item-center flex-content-space-between">
                            <label class="h5 cc-aa-user-admin-form-field-label"><?php _e('Floating Widget Padding', 'accessibility-assistant'); ?></label>
                        </div>
                        <div class="cc-aa-user-admin-steper-container progress-container">
                            <div class="cc-aa-user-admin-steper-bar progress-bar"></div>
                            <div class="cc-aa-user-admin-steper-pointer pointer"><span class="cc-aa-user-admin-steper-value" id="value"><?php echo esc_html($content['data']['bottom_padding']); ?></span></div>
                            <input type="hidden" id="bottom_padding" name="bottom_padding" class="bottom_padding_val" value="<?php echo esc_attr($content['data']['bottom_padding']); ?>">
                            <div class="cc-aa-user-admin-box-item-main">
                                <div class="item-0">0</div>
                                <div class="item-25">25</div>
                                <div class="item-50">50</div>
                                <div class="item-75">75</div>
                                <div class="item-100">100</div>
                            </div>
                            <p class="cc-aa-user-admin-position-text font-semibold"><?php _e('This will be only Works on Position for "Bottom Left" and "Bottom Right"', 'accessibility-assistant'); ?></p>
                        </div>
                    </div>

                    <div class="cc-aa-user-admin-form-field <?php echo($current_plan == 'pro') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                        <div class="cc-aa-user-admin-label-with-note d-flex flex-wrap flex-item-center flex-content-space-between">
                            <label class="h5 cc-aa-user-admin-form-field-label"><?php _e('Floating Widget Size', 'accessibility-assistant'); ?></label>
                            <?php if ($current_plan == 'pro' || $current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') { ?>
                            <div class="cc-aa-user-upgrade-plan-message-with-icon font-medium d-flex flex-item-center">
                                <img src="<?php echo esc_url($this->get_admin_image_url('note-icon.webp')); ?>" alt="note" width="16" height="16"> <?php _e('Upgrade your plan to enable these features.', 'accessibility-assistant'); ?>
                            </div>
                            <?php
}?>
                        </div>
                        <div class="cc-aa-user-admin-steper-container progress-container">
                            <div class="cc-aa-user-admin-steper-bar progress-bar"></div>
                            <div class="cc-aa-user-admin-steper-pointer pointer"><span class="cc-aa-user-admin-steper-value" id="value"><?php echo esc_html($content['data']['widget_size']); ?></span></div>
                            <input type="hidden" id="widget_size" name="widget_size" class="widget_size_val" value="<?php echo esc_attr($content['data']['shop_text']['widget_size'] ?? 0); ?>">
                            <div class="cc-aa-user-admin-box-item-main">
                                <div class="item-0">0</div>
                                <div class="item-25">25</div>
                                <div class="item-50">50</div>
                                <div class="item-75">75</div>
                                <div class="item-100">100</div>
                            </div>
                            <p class="cc-aa-user-admin-position-text font-semibold"><?php _e('Customize the size of the accessibility widget to your preference', 'accessibility-assistant'); ?></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cc-aa-user-admin-card-background cc-aa-user-admin-color-schema <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                <h4 class="cc-aa-user-admin-card-title"><?php esc_html_e('Accessibility Widget Color Schema', 'accessibility-assistant'); ?></h4>
                <div class="cc-aa-user-admin-form-fields d-grid grid-column-3">
                    <div class="cc-aa-user-admin-form-field">
                        <label for="backgroundcolor" class="h5 cc-aa-user-admin-form-field-label"><?php _e('Controller Background', 'accessibility-assistant'); ?></label>
                        <div class="cc-aa-user-admin-color-field-main">
                            <input class="cc-aa-user-admin-form-input color-code clrpickertext" type="text" value="#<?php echo esc_attr($content['data']['shopbgcolor'] ?? 'cccccc'); ?>" readonly <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <input type="color" id="backgroundcolor" name="backgroundcolor" class="cc-aa-user-admin-colorpicker color-picker clrpicker" value="#<?php echo esc_attr($content['data']['shopbgcolor'] ?? 'cccccc'); ?>" <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?> />
                        </div>
                    </div>

                    <div class="cc-aa-user-admin-form-field">
                        <label for="fontcolor" class="h5 cc-aa-user-admin-form-field-label"><?php _e('Text and Layout Font', 'accessibility-assistant'); ?></label>
                        <div class="cc-aa-user-admin-color-field-main">
                            <input class="cc-aa-user-admin-form-input color-code clrpickertext" type="text" value="#<?php echo esc_attr($content['data']['shoptextcolor'] ?? '000000'); ?>" readonly <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <input type="color" id="fontcolor" name="fontcolor" class="cc-aa-user-admin-colorpicker color-picker clrpicker" value="#<?php echo esc_attr($content['data']['shoptextcolor'] ?? '000000'); ?>" <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?> />
                        </div>
                    </div>

                    <div class="cc-aa-user-admin-form-field">
                        <label for="iconcolor" class="h5 cc-aa-user-admin-form-field-label"><?php _e('Accent and Logo Elements', 'accessibility-assistant'); ?></label>
                        <div class="cc-aa-user-admin-color-field-main">
                            <input class="cc-aa-user-admin-form-input color-code clrpickertext" type="text" value="#<?php echo esc_attr($content['data']['iconcolor'] ?? '683996'); ?>" readonly <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <input type="color" id="iconcolor" name="iconcolor" class="cc-aa-user-admin-colorpicker color-picker clrpicker" value="#<?php echo esc_attr($content['data']['iconcolor'] ?? '683996'); ?>" <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?> />
                        </div>
                    </div>
                </div>
            </div>

            <div class="cc-aa-user-admin-card-background cc-aa-user-admin-widget-icon <?php echo($current_plan == 'basic' || $current_plan == 'pro' || $current_plan == 'premium' || $current_plan == 'free' || $current_plan == '') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                <div class="cc-aa-user-admin-card-header d-flex flex-content-space-between flex-wrap">
                    <h4 class="cc-aa-user-admin-card-title"><?php _e('Widget Icon', 'accessibility-assistant'); ?></h4>
                    <?php if ($current_plan == 'basic' || $current_plan == 'pro' || $current_plan == 'premium' || $current_plan == 'free' || $current_plan == '') { ?>
                    <div class="cc-aa-user-upgrade-plan-message-with-icon font-medium d-flex flex-item-center">
                        <img src="<?php echo esc_url($this->get_admin_image_url('note-icon.webp')); ?>" alt="note" width="16" height="16"> <?php _e('Upgrade your plan to enable these features.', 'accessibility-assistant'); ?>
                    </div>
                    <?php
}?>
                </div>
                <div class="cc-aa-user-admin-widget-icon-selector">
                    <label class="h5 cc-aa-user-admin-form-field-label" for="widget_icon"><?php echo __('Choose Widget Icon', 'accessibility-assistant'); ?></label>
                    <div class="cc-aa-user-admin-icon-box-wrapper d-flex flex-item-center flex-wrap <?php echo($current_plan == 'basic' || $current_plan == 'pro' || $current_plan == 'premium' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>" id="cc-aa-icon-box-wrapper">
                        <?php
$selected_icon = !empty($content['data']['widget_icon']) ? $content['data']['widget_icon'] : 'icon-1';
for ($i = 1; $i <= 10; $i++):
    $icon_id = 'icon-' . $i;
    $selected_class = ($selected_icon === $icon_id) ? 'selected' : '';
?>
                        <div class="cc-aa-user-admin-widget-icon-preview-container widget-icon-preview-container <?php echo $selected_class; ?>" onclick="selectWidgetIcon(this)" data-icon="<?php echo esc_attr($icon_id); ?>">
                            <img src="<?php echo esc_url($this->get_admin_image_url("widget-icon-$i.webp")); ?>" alt="widget icon" class="cc-aa-user-admin-widget-icon-preview-image" />
                        </div>
                        <?php
endfor; ?>
                    </div>
                    <input type="hidden" name="widget_icon" id="widget_icon_hidden" value="<?php echo esc_attr($selected_icon); ?>">
                </div>
            </div>

            <div class="cc-aa-user-admin-card-background cc-aa-user-admin-color-schema <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                <h4 class="cc-aa-user-admin-card-title"><?php _e('Floating Widget Icon Color', 'accessibility-assistant'); ?></h4>
                <div class="cc-aa-user-admin-form-fields d-grid grid-column-3">
                    <div class="cc-aa-user-admin-form-field">
                        <?php
$default_color = '#683996';
$outer_color = !empty($content['data']['widget_outer_color']) ? $content['data']['widget_outer_color'] : $default_color;
?>
                        <label for="widget_outer_color" class="h5 cc-aa-user-admin-form-field-label"><?php _e('Choose Widget Outer Color', 'accessibility-assistant'); ?></label>
                        <div class="cc-aa-user-admin-color-field-main">
                            <input class="cc-aa-user-admin-form-input color-code clrpickertext" type="text" value="<?php echo esc_attr($outer_color); ?>" readonly <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <input type="color" id="widget_outer_color" name="widget_outer_color" class="cc-aa-user-admin-colorpicker color-picker clrpicker" value="<?php echo esc_attr($outer_color); ?>" <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?> />
                        </div>
                    </div>
                    <div class="cc-aa-user-admin-form-field">
                        <?php
$default_inner_color = '#F2F7FA';
$inner_color = !empty($content['data']['widget_inner_color']) ? $content['data']['widget_inner_color'] : $default_inner_color;
?>
                        <label for="widget_inner_color" class="h5 cc-aa-user-admin-form-field-label"><?php _e('Choose Widget Inner Color', 'accessibility-assistant'); ?></label>
                        <div class="cc-aa-user-admin-color-field-main">
                            <input class="cc-aa-user-admin-form-input color-code clrpickertext" type="text" value="<?php echo esc_attr($inner_color); ?>" readonly <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <input type="color" id="widget_inner_color" name="widget_inner_color" class="cc-aa-user-admin-colorpicker color-picker clrpicker" value="<?php echo esc_attr($inner_color); ?>" <?php echo($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?> />
                        </div>
                    </div>
                </div>
            </div>

            <div class="cc-aa-user-admin-bottom-button">
                <button class="cc-aa-user-admin-button cc-aa-user-admin-large-button cc-aa-user-admin-primary-color-button <?php echo($current_plan == 'basic' || $current_plan == '') ? 'no-access-allowed' : ''; ?>" <?php echo($current_plan == 'basic' || $current_plan == '') ? 'disabled' : ''; ?> id="btnAdd" name="btnAdd" type="submit"><?php _e('Save', 'accessibility-assistant'); ?></button>
            </div>
        </form>
    </div>

    <div class="cc-aa-user-admin-footer font-medium large-text">
        <?php printf(esc_html__('Have questions or need assistance? %s', 'accessibility-assistant'), '<a href="' . esc_url('https://accessibilityassistant.com/report-a-problem/') . '" target="_blank" class="font-bold">' . esc_html__('Contact us', 'accessibility-assistant') . '</a>'); ?>
    </div>
</div>

<script>
    /**select widget icon start */
    function selectWidgetIcon(element) {
        if (document.getElementById('cc-aa-icon-box-wrapper').classList.contains('disabled')) return;
        const containers = document.querySelectorAll('.widget-icon-preview-container');
        containers.forEach(container => container.classList.remove('selected'));
        element.classList.add('selected');
        const selectedIcon = element.getAttribute('data-icon');
        document.getElementById('widget_icon_hidden').value = selectedIcon;
    }
    /**select widget icon end */

    /***Show loader show */
    const loader = document.querySelector(".loader");

    function attachLoader(formId) {
        const form = document.getElementById(formId);
        if (form) {
            form.addEventListener("submit", function(event) {
                if (loader) loader.style.display = "flex";
                jQuery("body").addClass("loader-show");
                // Add slight delay so loader appears before page unloads
                event.preventDefault();
                setTimeout(() => {
                    form.submit(); // Continue with PHP submission
                }, 10); // Delay just enough to show loader
            });
        }
    }

    attachLoader("accessibility_widget_form");
    /***Show loader end */
</script>