<?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 = assistant_api_call('/getShopData', $data, 'get');

$primary_id = $content['data']['id'];
if ($primary_id) {
    update_option('accessibility_primaryid', $primary_id);
}
$current_plan = $content['data']['plan'];
if ($current_plan) {
    update_option('accessibility_plan', $current_plan);
}


?>

<?php

if ($content) {
    $access_by_admin = $content['data']['access_by_admin'];
    $member_plan = $content['data']['plan_display_name'];
    $current_plan = $content['data']['plan'];

    $is_installation_popup_shown = $content['data']['is_installation_popup_shown'];
    $is_plan_select_popup_shown = $content['data']['is_plan_select_popup_shown'];

    if ($is_installation_popup_shown == 0 && $is_plan_select_popup_shown == 0) {

        require_once 'installation-popup.php';
    }

    if ($is_plan_select_popup_shown == 0 && !empty($current_plan) && $is_installation_popup_shown == 1 && $current_plan !== "free" && (strpos(strtolower($member_plan), 'develop') !== false)) {
        require_once 'thanyou-popup.php';
    }
    if (isset($_POST['form_submitted'])) {



        if (! isset($_POST['accessibility_nonce']) || ! wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['accessibility_nonce'])), 'accessibility_nonce')) {
            print 'Sorry, You can not update....';
            exit;
        } else {

            $widget_enable = "off";
            $button_link_status = 0;
            $desktop_position = $mobile_position = $backgroundcolor = $fontcolor = $iconcolor = $bottom_padding = $widget_size = $choose_design = $widget_outer_color = $widget_inner_color = $statement_edit = $widget_icon = "";
            $error = array();
            $jsChecked = "off";

            if (isset($_POST['jsChecked'])) {
                $widget_enable = sanitize_text_field(wp_unslash($_POST['jsChecked']));
                if ($widget_enable == "on") {
                    $jsChecked = "on";
                }
            }

            $button_link_status = "off";
            if (isset($_POST['enable_link'])) {
                $widget_enable = sanitize_text_field(wp_unslash($_POST['enable_link']));
                if ($widget_enable == "on") {
                    $button_link_status  = "on";
                }
            }



            if (isset($_POST['desktop_position'])) {
                $desktop_position = sanitize_text_field(wp_unslash($_POST['desktop_position']));
            }
            if (isset($_POST['mobile_position'])) {
                $mobile_position = sanitize_text_field(wp_unslash($_POST['mobile_position']));
            }
            if (isset($_POST['backgroundcolor'])) {
                $backgroundcolor = sanitize_text_field(wp_unslash($_POST['backgroundcolor']));
            }
            if (isset($_POST['fontcolor'])) {
                $fontcolor = sanitize_text_field(wp_unslash($_POST['fontcolor']));
            }
            if (isset($_POST['iconcolor'])) {
                $iconcolor = sanitize_text_field(wp_unslash($_POST['iconcolor']));
            }
            if (isset($_POST['bottom_padding'])) {
                $bottom_padding = sanitize_text_field(wp_unslash($_POST['bottom_padding']));
            }
            if (isset($_POST['widget_size'])) {
                $widget_size = sanitize_text_field(wp_unslash($_POST['widget_size']));
            }
            if (isset($_POST['choose_design'])) {
                $choose_design = sanitize_text_field(wp_unslash($_POST['choose_design']));
            }
            if (isset($_POST['widget_outer_color'])) {
                $widget_outer_color = sanitize_text_field(wp_unslash($_POST['widget_outer_color']));
            }
            if (isset($_POST['widget_inner_color'])) {
                $widget_inner_color = sanitize_text_field(wp_unslash($_POST['widget_inner_color']));
            }
            if (isset($_POST['statement_edit'])) {
                $statement_edit = wp_kses_post(wp_unslash($_POST['statement_edit']));
            }

            if (isset($_POST['statement_link'])) {
                $statement_link = wp_unslash($_POST['statement_link']);;
            }

            if (isset($_POST['widget_icon'])) {
                $widget_icon = wp_unslash($_POST['widget_icon']);;
            }

            $send_data = array(
                'shopid' => $shopid,
                'enable_link' => $button_link_status,
                'position' => $desktop_position,
                'mobile_position' => $mobile_position,
                'jsChecked' => $jsChecked,
                '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_on_off_switch' => $statement_on_off_switch,
                'statement_edit' => $statement_edit,
                'statement_link' => $statement_link,
                'widget_icon' => $widget_icon
            );

            $returnsenddata = assistant_api_call('/updateShopData', $send_data, 'post');
            if ($returnsenddata['status'] == 200) {

                echo '<div  class="alert alert-success alert-dismissible">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> <strong>Success! </strong> </div>';
                $data = array('shopid' => $returnsenddata['data']['shopid'],);
                $content = assistant_api_call('/getShopData', $data, 'get');
            } else {
                echo '<div class="alert alert-danger alert-dismissible">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> <strong>Error! </strong>';
                echo esc_html($returnsenddata['messages']);
                echo '</div>';
            }
        }
    }
}


?>

<?php

if (empty($accessibility_url)) {
    $url_data = assistant_api_call('/wordpress/script', ['siteId' => $shopid], 'get');
    $js_url = $url_data['scriptUrl'];
    update_option('accessibility_url', $js_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="ada-cc-setting ada-cc-widget-setting">

    <!--Footer popup Start--->
    <!--Footer popup Start--->
    <div class="ada-cc-popup-container ada-cc-footer-popup" style="display:none">
        <div class="ada-cc-popup-overlay"></div>
        <div class="ada-cc-popup-background ada-cc-choosing-plan">
            <div class="ada-cc-popup-close-footer">
                <svg
                    class="ada-cc-close"
                    width="14"
                    height="15"
                    viewBox="0 0 14 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M13 1.04376L1 13.0766M1 1.04376L13 13.0766"
                        stroke="#667085"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"></path>
                </svg>
            </div>

            <div class="ada-cc-popup-content">
                <div class="ada-cc-message">
                    <h3 class="ada-cc-message-title">
                        <?php _e('Get Started: Activate Widget and Add Footer Link', 'accessibility-assistant'); ?>
                    </h3>
                </div>

                <div class="ada-cc-navigate-info">

                    <div class="ada-cc-navigate-step">
                        1. <?php _e('Navigate to Settings and switch on the Accessibility widget.', 'accessibility-assistant'); ?>
                        <img
                            class="ada-cc-toggle-image"
                            src="https://accessibility-assistant.cartcoders.com/images/ada-cc-toggle.png"
                            width="45"
                            height="23"
                            alt="<?php _e('toggle button', 'accessibility-assistant'); ?>" />
                    </div>

                    <div class="ada-cc-widget-option-demo">
                        <label class="ada-cc-widget-label"> <?php _e('Widget Option:', 'accessibility-assistant'); ?> </label>
                        <div class="ada-cc-widget-enable-disable-demo">
                            <img
                                class="ada-cc-toggle-image"
                                src="https://accessibility-assistant.cartcoders.com/images/ada-cc-toggle.png"
                                width="45"
                                height="23"
                                alt="<?php _e('toggle button', 'accessibility-assistant'); ?>" />
                            <p class="ada-cc-widget-enable-disable-text">
                                <?php _e('Enable', 'accessibility-assistant'); ?>/
                                <span> <?php _e('Disable', 'accessibility-assistant'); ?> </span>
                            </p>
                        </div>
                    </div>

                    <div class="ada-cc-widget-option-demo" style="margin-top: 25px">
                        <div
                            class="ada-cc-widget-enable-disable-demo"
                            style="flex-direction: column; align-items: flex-start">
                            <h2
                                class="ada-cc-widget-enable-disable-text"
                                style="margin-bottom: 10px">
                                <?php _e('How to Add an Accessibility Link to Your Footer', 'accessibility-assistant'); ?>
                            </h2>
                            <p class="ada-cc-widget-enable-disable-text">
                                <?php _e('To ensure your site is accessible and user-friendly, add an Accessibility Assistance link to your footer menu:', 'accessibility-assistant'); ?>
                            </p>
                            <ol
                                class="ada-cc-widget-enable-disable-text"
                                style="padding-left: 20px; margin-top: 15px">
                                <li><?php _e('Open your active theme\'s <code>footer.php</code> or <code>functions.php</code> file (usually found in <code>/wp-content/themes/your-theme/</code>).', 'accessibility-assistant'); ?></li>

                                <li><?php _e('Locate the place where you want to add the link (typically just before the closing <code>&lt;/footer&gt;</code> or <code>&lt;/body&gt;</code> tag).', 'accessibility-assistant'); ?></li>

                                <li><?php _e('Add the following HTML code to insert the link:', 'accessibility-assistant'); ?></li>

                            </ol>
                            <div class="link-code">
                                &lt;a href="#add-aacc-link" class="accessibility-assistance-link"&gt;<?php _e('Accessibility Assistance', 'accessibility-assistant'); ?>&lt;/a&gt;
                            </div>
                            <ol start="4">
                                <li><?php _e('Save the changes to the <code>footer.php</code> or <code>functions.php</code> file.', 'accessibility-assistant'); ?></li>

                                <li><?php _e('Refresh your website to see the link appear in the footer.', 'accessibility-assistant'); ?></li>

                            </ol>
                            <div><?php _e('Note: It is recommended to use a child theme to prevent your changes from being lost during theme updates.', 'accessibility-assistant'); ?></div>
                        </div>
                    </div>

                    <div class="ada-cc-popup-footer">
                        <p class="ada-cc-popup-support">
                            <?php _e('If you need further assistance, please contact us at', 'accessibility-assistant'); ?>
                            <a href="#">support@cartcoders.com</a>.
                        </p>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--Footer popup End--->
    <!--Footer popup End--->
    <!-- header -->

    <div class="ada-cc-searchmain">
        <div class="ada-cc-left">
            <div class="ada-cc-bottom">
                <p class="ada-cc-dash-text"><?php esc_html_e('Widget Settings', 'accessibility-assistant'); ?></p>
            </div>
        </div>
        <div class="ada-cc-right">
            <div class="usage-guide-btn-link-main">
                <a href="https://accessibilityassistant.com/wordpress-usage-guide/" class="usage-guide-btn-link" target="_blank"><?php esc_html_e('Usage Guide', 'accessibility-assistant'); ?></a>
            </div>
        </div>
    </div>

    <div class="ada-cc-plan-specific-msg">
        <div class="ada-cc-plan-specific-main">
            <!--plan specific message Start-->
            <?php
            $plan_page_url = admin_url('admin.php?page=accessibility-plan');

            // Define the messages for each plan
            $upgrade_text = __("Upgrade Plan", 'accessibility-assistant');
            $plan_message = '';

            switch ($current_plan) {
                case "free":
                    $plan_message = __("You're on the Free plan! Unlock powerful accessibility tools by upgrading today.", 'accessibility-assistant');
                    break;

                case "pro":
                    $plan_message = __("You're on a Growth plan! Unlock even more features and customization options by upgrading today.", 'accessibility-assistant');
                    break;

                case "premium":
                    $plan_message = __("You're on the Premium plan! Enjoy priority support and exclusive advanced accessibility features by upgrading today.", 'accessibility-assistant');
                    break;

                case "established":
                    // No message for established plan
                    $plan_message = '';
                    break;

                default:
                    $plan_message = __('Please upgrade your plan to continue accessing premium accessibility features.', 'accessibility-assistant');
                    break;
            }

            // Output the message only if not empty
            if (!empty($plan_message)) {
                printf(
                    "<p class='plan-specific-message'>%s <a href='%s'>%s</a></p>",
                    esc_html($plan_message),
                    esc_url($plan_page_url),
                    esc_html($upgrade_text)
                );
            }
            ?>
            <!--plan specific message End-->
        </div>
        <div class="select-lang-main">
            <form method="post" id="language-switcher-form" class="language-switcher-form">
                <label for="plugin_language">Select Language:</label>
                <select name="plugin_language" id="plugin_language" class="plugin_language">
                    <?php
                    $current_lang = get_option('my_plugin_selected_language', 'en_US');
                    $languages = [
                        'sq_AL' => 'Albanian',
                        'ar_SA' => 'Arabic',
                        'hy_AM' => 'Armenian',
                        'az_AZ' => 'Azerbaijani',
                        'eu_ES' => 'Basque',
                        'be_BY' => 'Belarusian',
                        'bs_BA' => 'Bosnian',
                        'bg_BG' => 'Bulgarian',
                        'my_MM' => 'Burmese',
                        'ca_ES' => 'Catalan',
                        'ceb_PH' => 'Cebuano',
                        'zh_TW' => 'Chinese (Traditional)',
                        'zh_CN' => 'Chinese',
                        'hak_TW' => 'Chinese (Hakka)',
                        'hr_HR' => 'Croatian',
                        'cs_CZ' => 'Czech',
                        'da_DK' => 'Danish',
                        'dv_MV' => 'Dhivehi',
                        'nl_BE' => 'Dutch (Flemish)',
                        'nl_NL' => 'Dutch',
                        'en_US' => 'English',
                        'en_GB' => 'English (UK)',
                        'et_EE' => 'Estonian',
                        'fi_FI' => 'Finnish',
                        'fr_CA' => 'French (Canada)',
                        'fr_FR' => 'French',
                        'ff_SN' => 'Fulah',
                        'ka_GE' => 'Georgian',
                        'de_DE' => 'German',
                        'el_GR' => 'Greek',
                        'ht_HT' => 'Haitian Creole',
                        'ha_NG' => 'Hausa',
                        'haw_US' => 'Hawaiian',
                        'he_IL' => 'Hebrew',
                        'hil_PH' => 'Hiligaynon',
                        'hu_HU' => 'Hungarian',
                        'is_IS' => 'Icelandic',
                        'ig_NG' => 'Igbo',
                        'id_ID' => 'Indonesian',
                        'ga_IE' => 'Irish',
                        'it_IT' => 'Italian',
                        'ja_JP' => 'Japanese',
                        'jv_ID' => 'Javanese',
                        'kea_CV' => 'Kabuverdianu',
                        'km_KH' => 'Khmer',
                        'rn_BI' => 'Kirundi',
                        'ko_KR' => 'Korean',
                        'ksw_MM' => 'Karen (S’gaw)',
                        'ku_TR' => 'Kurdish',
                        'ky_KG' => 'Kyrgyz',
                        'lo_LA' => 'Lao',
                        'la_VA' => 'Latin',
                        'lv_LV' => 'Latvian',
                        'lt_LT' => 'Lithuanian',
                        'mk_MK' => 'Macedonian',
                        'ms_MY' => 'Malay',
                        'mt_MT' => 'Maltese',
                        'mi_NZ' => 'Maori',
                        'mn_MN' => 'Mongolian',
                        'no_NO' => 'Norwegian',
                        'pl_PL' => 'Polish',
                        'pt_BR' => 'Portuguese (Brazil)',
                        'pt_PT' => 'Portuguese',
                        'qu_PE' => 'Quechua',
                        'rom_MD' => 'Romani',
                        'ru_RU' => 'Russian',
                        'smj_NO' => 'Sami (Lule)',
                        'sm_WS' => 'Samoan',
                        'sr_ME' => 'Serbian (Montenegro)',
                        'sr_RS' => 'Serbian',
                        'sk_SK' => 'Slovak',
                        'sl_SI' => 'Slovenian',
                        'es_ES' => 'Spanish',
                        'sw_TZ' => 'Swahili',
                        'sv_SE' => 'Swedish',
                        'tt_RU' => 'Tatar',
                        'th_TH' => 'Thai',
                        'to_TO' => 'Tongan',
                        'tr_TR' => 'Turkish',
                        'uk_UA' => 'Ukrainian',
                        'uz_UZ' => 'Uzbek',
                        'vi_VN' => 'Vietnamese',
                        'cy_GB' => 'Welsh',
                        'wo_SN' => 'Wolof',
                        'xh_ZA' => 'Xhosa',
                        'yi_001' => 'Yiddish',
                        'yo_NG' => 'Yoruba',
                    ];

                    foreach ($languages as $code => $label) {
                        $selected = ($current_lang === $code) ? 'selected' : '';
                        echo "<option value='$code' $selected>$label</option>";
                    }
                    ?>
                </select>
            </form>
        </div>
    </div>

    <form method="post" id="accessibility_widget_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="ada-cc-setting-inner-main">
            <div class="ada-cc-widget-title">
                <p><?php esc_html_e('Widget Option', 'accessibility-assistant'); ?></p>
            </div>
            <div class="ada-cc-setting-inner-div">
                <!-- Widget Option-div -->


                <div class="ada-cc-Widget-main">
                    <div class="ada-cc-widget-three-div widget-settings">
                        <div class="ada-cc-widget-first ada-cc-widget-common <?php if (empty($current_plan)) echo 'no-access-allowed'; ?>">
                            <div class="ada-cc-custom-checkbox">
                                <input type="checkbox" id="widget_enable" name="jsChecked"
                                    <?php if (!empty($current_plan) && $content['data']['status'] == 1) echo 'checked'; ?>
                                    <?php if (empty($current_plan)) echo 'disabled'; ?> />
                                <span class="ada-cc-span" for="jsChecked"></span>
                                <label for="jsChecked"><?php esc_html_e('Enable /Disable', 'accessibility-assistant'); ?></label>
                            </div>
                            <br>

                            <p class="ada-cc-note" style="font-weight: normal;">
                                <?php _e('To make the widget visible, enable and save the accessibility settings.', 'accessibility-assistant'); ?>
                            </p>

                        </div>

                        <div class="ada-cc-widget-second ada-cc-widget-common <?php if ($current_plan == 'basic' || $current_plan == '' || $current_plan == 'free') echo 'no-access-allowed'; ?>">
                            <div class="ada-cc-custom-checkbox">
                                <input type="checkbox" name="enable_link" id="enable_link" <?php if ($content['data']['button_link_status'] == 1) {
                                                                                                echo "checked";
                                                                                            } ?> <?php echo ($current_plan == 'basic' || $current_plan == '' || $current_plan == 'free') ? 'disabled' : ''; ?> />
                                <span class="ada-cc-span" for="checkbox1"></span>
                                <label for="enable_link"><?php esc_html_e('Do you want to put this widget as link?', 'accessibility-assistant'); ?></label>
                            </div>


                            <div class="ada-cc-link-text">
                                <p class="ada-cc-note" style="color:purple; ">&lt;a href="#add-aacc-link"&gt;Accessibility
                                    Assisstance&lt;/a&gt; <br>
                                </p>
                                <p class="ada-cc-note">
                                    <?php
                                    printf(
                                        __('You can place <strong>%s</strong> as link', 'accessibility-assistant'),
                                        '#add-aacc-link'
                                    );
                                    ?>
                                </p>
                                <br>
                                <p class="ada-cc-note" style="font-weight: normal;">
                                    📝 <?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>
                    <div class="ada-cc-widget-three-div choose-design-sec <?php echo ($current_plan == 'basic' || $current_plan == 'pro' || $current_plan == '' || $current_plan == 'free') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                        <div class="ada-cc-widget-first ada-cc-widget-common">
                            <label class="ada-cc-choose-text" for="choose design"><?php esc_html_e('Choose Design', 'accessibility-assistant'); ?></label><br>
                            <select name="choose_design" id="choose_design" class="ada-cc-select-button" <?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>
                        <div class="ada-cc-widget-second desscription-main-sec ada-cc-widget-common">
                            <div class="design-description-container">
                                <div class="design-description <?php echo (empty($content['data']['design_view']) || $content['data']['design_view'] == 1) ? 'active' : ''; ?>" data-design="1">
                                    <?php esc_html_e('This is the default and most widely used design of the accessibility widget – tried, tested, and reliable across all devices.', 'accessibility-assistant'); ?>
                                </div>

                                <div class="design-description  <?php if ($content['data']['design_view'] == 2) {
                                                                    echo 'active';
                                                                } ?>" data-design="2">
                                    <?php esc_html_e('A modernized version of the default design - visually polished, stylistically refined.', 'accessibility-assistant'); ?>
                                </div>
                                <div class="design-description  <?php if ($content['data']['design_view'] == 3) {
                                                                    echo 'active';
                                                                } ?>" data-design="3">
                                    <?php esc_html_e('Designed specifically for mobile - similar to the default but optimized for smaller screens and touch-friendly interaction.', 'accessibility-assistant'); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- border-div -->
            <div class="ada-cc-border-div"></div>
            <div class="ada-cc-widget-title">
                <p><?php //esc_html_e('Floating Widget Position', 'accessibility-assistant'); 
                    ?></p>
            </div>


            <div class="ada-cc-setting-inner-div <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                <!-- Floating Widget Position -->
                <!-- position-div -->
                <div class="ada-cc-position-main">
                    <div class="ada-cc-position-three-div two-col">
                        <div class="ada-cc-position-first ada-cc-position-common">
                            <label class="ada-cc-choose-text" for="desktop_position"><?php _e('Desktop Position', 'accessibility-assistant'); ?></label><br>
                            <select name="desktop_position" id="desktop_position" class="ada-cc-select-button" <?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="ada-cc-position-second ada-cc-position-common">
                            <label class="ada-cc-choose-text" for="mobile_position"><?php _e('Mobile Position', 'accessibility-assistant'); ?></label><br>
                            <select name="mobile_position" id="mobile_position" class="ada-cc-select-button" <?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="ada-cc-position-three-div two-col">
                        <div class="ada-cc-position-third ada-cc-position-common ada-cc-position-last">
                            <label class="ada-cc-choose-text" for="padding"><?php _e('Floating Widget Padding', 'accessibility-assistant'); ?></label><br>
                            <div class="progress-container">
                                <div class="progress-bar"></div>
                                <div class="pointer"><span id="value"><?php echo esc_html($content['data']['bottom_padding']); ?></span></div>
                                <input type="hidden" value="<?php echo esc_attr($content['data']['bottom_padding']); ?>" name="bottom_padding" class="bottom_padding_val">
                                <div class="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="ada-cc-position-text"><?php _e('This will be only Works on Position for "Bottom Left" and "Bottom Right"', 'accessibility-assistant'); ?></p>
                            </div>
                        </div>

                        <div class="ada-cc-position-third ada-cc-position-common ada-cc-position-last <?php echo ($current_plan == 'pro') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                            <label class="ada-cc-choose-text" for="widget size"><?php _e('Floating Widget Size', 'accessibility-assistant'); ?></label><br>
                            <div class="progress-container">
                                <div class="progress-bar"></div>
                                <div class="pointer"><span id="value"><?php echo esc_html($content['data']['widget_size']); ?></span></div>
                                <input type="hidden" value="<?php echo esc_attr($content['data']['shop_text']['widget_size']); ?>" name="widget_size" class="widget_size_val">
                                <div class="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="ada-cc-position-text"><?php _e('Customize the size of the accessibility widget to your preference"', 'accessibility-assistant'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- border-div -->
            <div class="ada-cc-border-div"></div>
            <div class="ada-cc-widget-title">
                <p><?php esc_html_e('Accessibility Widget Color Schema', 'accessibility-assistant'); ?></p>
            </div>
            <!-- Color Schema -->
            <div class="ada-cc-setting-inner-div <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                <div class="ada-cc-colorschema-main">
                    <div class="ada-cc-colorschema-three-div">

                        <!-- Controller Background -->
                        <div class="ada-cc-colorschema-first ada-cc-colorschema-common">
                            <label class="ada-cc-choose-text" for="backgroundcolor"><?php _e('Controller Background', 'accessibility-assistant'); ?></label><br>
                            <input class="color-code clrpickertext" type="text" id="hexcolor" name="backgroundcolor"
                                pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                                value="#<?php echo esc_attr($content['data']['shopbgcolor'] ?? 'cccccc'); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <input class="color-picker clrpicker" type="color" id="colorpicker" name="backgroundcolor"
                                pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                                value="#<?php echo esc_attr($content['data']['shopbgcolor'] ?? 'cccccc'); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                        </div>

                        <!-- Text and Layout Font -->
                        <div class="ada-cc-colorschema-second ada-cc-colorschema-common">
                            <label class="ada-cc-choose-text" for="fontcolor"><?php _e('Text and Layout Font', 'accessibility-assistant'); ?></label><br>
                            <input class="color-code clrpickertext" type="text" id="hexcolor" name="fontcolor"
                                pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                                value="#<?php echo esc_attr($content['data']['shoptextcolor'] ?? '000000'); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <input class="color-picker clrpicker" type="color" id="colorpicker" name="fontcolor"
                                pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                                value="#<?php echo esc_attr($content['data']['shoptextcolor'] ?? '000000'); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                        </div>

                        <!-- Accent and Logo Elements -->
                        <div class="ada-cc-colorschema-third ada-cc-colorschema-common ada-cc-colorschema-last">
                            <label class="ada-cc-choose-text" for="iconcolor"><?php _e('Accent and Logo Elements', 'accessibility-assistant'); ?></label><br>
                            <input class="color-code clrpickertext" type="text" id="hexcolor" name="iconcolor"
                                pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                                value="#<?php echo esc_attr($content['data']['iconcolor'] ?? '683996'); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <input class="color-picker clrpicker" type="color" id="colorpicker" name="iconcolor"
                                pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                                value="#<?php echo esc_attr($content['data']['iconcolor'] ?? '683996'); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                        </div>

                    </div>
                </div>
            </div>

            <!-- border-div -->
            <div class="ada-cc-border-div"></div>
            <div class="ada-cc-widgeticon-title ada-cc-widget-title">
                <p><?php _e('Widget Icon', 'accessibility-assistant'); ?></p>
            </div>
            <!-- Widget Icon -->
            <div class="ada-cc-setting-inner-div <?php echo ($current_plan == 'basic' || $current_plan == 'pro' || $current_plan == 'premium' || $current_plan == 'free' || $current_plan == '') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                <div class="ada-cc-widgeticon-main ada-cc-colorschema-main">

                    <div class="ada-cc-widgeticon-three-div">
                        <?php
                        $selected_icon = !empty($content['data']['widget_icon']) ? $content['data']['widget_icon'] : 'icon-1';
                        ?>

                        <div class="ada-cc-widgeticon-first ada-cc-widgeticon-common form-group">
                            <label class="ada-cc-choose-text" for="widget_icon"><?php echo __('Choose Widget Icon', 'accessibility-assistant'); ?></label>
                            <div class="icon-box-wrapper choose-widget-icon <?php echo ($current_plan == 'basic' || $current_plan == 'pro' || $current_plan == 'premium' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>" id="icon-box-wrapper">
                                <?php for ($i = 1; $i <= 10; $i++):
                                    $icon_id = 'icon-' . $i;
                                    $selected_class = ($selected_icon === $icon_id) ? 'selected' : '';
                                ?>
                                    <div class="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(plugin_dir_url(dirname(__FILE__)) . "/assets/widget-icon-$i.svg"); ?>"
                                            class="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>
            </div>
            <!-- border-div -->
            <div class="ada-cc-border-div"></div>
            <div class="ada-cc-widgeticon-title ada-cc-widget-title">
                <p><?php _e('Floating Widget Icon Color', 'accessibility-assistant'); ?></p>
            </div>
            <div class="ada-cc-setting-inner-div <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'no-access-allowed no-pointer-allowed' : ''; ?>">
                <div class="ada-cc-colorschema-main">
                    <div class="ada-cc-colorschema-three-div">
                        <div class="ada-cc-colorschema-first ada-cc-colorschema-common">
                            <?php
                            $default_color = '#683996';
                            $outer_color = !empty($content['data']['widget_outer_color']) ? $content['data']['widget_outer_color'] : $default_color;
                            ?>
                            <label class="ada-cc-choose-text" for="widget_outer_color"><?php _e('Choose Widget Outer Color', 'accessibility-assistant'); ?></label><br>
                            <input class="color-code clrpickertext" type="text" id="widget_outer_color" name="widget_outer_color" pattern="^#([a-fA-F0-9]{6}|[a-fA0-9]{3})$" value="<?php echo esc_attr($outer_color); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>></input>
                            <input class="color-picker clrpicker" type="color" id="widget_outer_colorpicker" name="widget_outer_color" pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" value="<?php echo esc_attr($outer_color); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                        </div>

                        <div class="ada-cc-colorschema-second ada-cc-colorschema-common">
                            <?php
                            $default_inner_color = '#F2F7FA';
                            $inner_color = !empty($content['data']['widget_inner_color']) ? $content['data']['widget_inner_color'] : $default_inner_color;
                            ?>
                            <label class="ada-cc-choose-text" for="widget_inner_color"><?php _e('Choose Widget Inner Color', 'accessibility-assistant'); ?></label><br>
                            <input class="color-code clrpickertext" type="text" id="widget_inner_color" name="widget_inner_color" pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" value="<?php echo esc_attr($inner_color); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                            <input class="color-picker clrpicker" type="color" id="widget_inner_colorpicker" name="widget_inner_color" pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" value="<?php echo esc_attr($inner_color); ?>" <?php echo ($current_plan == 'basic' || $current_plan == 'free' || $current_plan == '') ? 'disabled' : ''; ?>>
                        </div>
                    </div>
                </div>

            </div>
            <!-- save button -->
            <button class="ada-cc-save-btn btn btn-success <?php echo ($current_plan == 'basic' || $current_plan == '' || $current_plan == 'free') ? 'no-access-allowed' : ''; ?>" <?php echo ($current_plan == 'basic' || $current_plan == '' || $current_plan == 'free') ? 'disabled' : ''; ?> id="btnAdd" name="btnAdd" type="submit"><?php _e('Save', 'accessibility-assistant'); ?></button>

        </div>
    </form>


    <!-- contactus-footer-line -->

    <div class="ada-cc-contactus-footer">
        <p class="ada-cc-contactus-line">
            <?php
            /* translators: %s: HTML link to the Contact Us page */
            printf(
                esc_html__('Have questions or need assistance? %s', 'accessibility-assistant'),
                '<a href="' . esc_url('https://accessibilityassistant.com/report-a-problem/') . '" target="_blank">' . esc_html__('Contact us', 'accessibility-assistant') . '</a>'
            );
            ?>
        </p>
    </div>

</div>




<script>
    /**select widget icon start */
    function selectWidgetIcon(element) {
        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>