<?php

if (!defined('ABSPATH')) {
    exit;
}

// ============================================================
// WIDGET SETTINGS PAGE
// ============================================================

// Enqueue widget settings styles and scripts
add_action('admin_enqueue_scripts', 'pmrcgold_enqueue_widget_settings_assets');

function pmrcgold_enqueue_widget_settings_assets($hook)
{
    global $plugin_page;
    if ('gold-price-widgets' === $plugin_page) {
        wp_enqueue_style(
            'pmrcgold-widget-settings',
            PMRCGOLD_ASSETS_URL . 'css/widget-settings.css',
            array(),
            '1.0.0'
        );

        wp_enqueue_style(
            'pmrcgold-widget-preview',
            PMRCGOLD_ASSETS_URL . 'css/widget2.css',
            array(),
            '1.0.0'
        );

        wp_enqueue_style(
            'pmrcgold-widget-3-preview',
            PMRCGOLD_ASSETS_URL . 'css/widget3.css',
            array(),
            '1.0.0'
        );

        wp_enqueue_script(
            'chartjs',
            PMRCGOLD_ASSETS_URL . 'js/chart.min.js',
            array(),
            '4.4.1',
            true
        );

        wp_enqueue_script(
            'pmrcgold-widget3',
            PMRCGOLD_ASSETS_URL . 'js/widget3.js',
            array('chartjs'),
            '1.0.0',
            true
        );

        wp_enqueue_style(
            'pmrcgold-widget-4-preview',
            PMRCGOLD_ASSETS_URL . 'css/widget4.css',
            array(),
            '1.0.0'
        );

        wp_enqueue_script(
            'pmrcgold-widget-4-preview-js',
            PMRCGOLD_ASSETS_URL . 'js/widget4.js',
            array(),
            '1.0.0',
            true
        );

        wp_enqueue_script(
            'pmrcgold-widget-settings',
            PMRCGOLD_ASSETS_URL . 'js/widget-settings.js',
            array('jquery'),
            '1.0.0',
            true
        );

        wp_localize_script('pmrcgold-widget-settings', 'pmrcgold_admin', array(
            'widget1_nonce' => wp_create_nonce('pmrcgold_widget1_nonce'),
            'widget2_nonce' => wp_create_nonce('pmrcgold_widget2_nonce'),
            'widget3_nonce' => wp_create_nonce('pmrcgold_widget3_nonce'),
            'widget4_nonce' => wp_create_nonce('pmrcgold_widget4_nonce'),
        ));

        wp_enqueue_script(
            'pmrcgold-widget-frontend',
            PMRCGOLD_ASSETS_URL . 'js/frontend.js',
            array('jquery'),
            '1.0.0',
            true
        );
    }
}

function pmrcgold_WidgetPageMenu()
{
    ?>
    <div class="wrap preciousuite-wrap preciousuite-dashboard preciousuite-gold-price">
        <div class="preciousuite-dashboard-shell">
            <?php pmrcgold_render_dashboard_nav('gold-price-widgets'); ?>
            <main class="preciousuite-dashboard-main preciousuite-setting-page" id="widget-settings-metal-chart">
                <section class="preciousuite-dashboard-hero">
                    <h1><?php esc_html_e('Widget Settings', 'preciousuite-metal-rate-charts'); ?></h1>
                    <p><?php esc_html_e('Configure the appearance and data source for your metal rate chart widgets.', 'preciousuite-metal-rate-charts'); ?>
                    </p>
                </section>

                <div class="preciousuite form-wrap">
                    <div id="preciousuite-container" class="wp-clearfix metal-rate-chart-widget-settings">

                        <!-- Tab Navigation -->
                        <div class="widget-tabs-nav">
                            <div class="tab-buttons">
                                <button class="tab-button active" data-tab="widget1">
                                    <?php esc_html_e('Widget 1', 'preciousuite-metal-rate-charts'); ?>
                                </button>
                                <button class="tab-button" data-tab="widget2">
                                    <?php esc_html_e('Widget 2', 'preciousuite-metal-rate-charts'); ?>
                                </button>
                                <button class="tab-button" data-tab="widget3">
                                    <?php esc_html_e('Widget 3', 'preciousuite-metal-rate-charts'); ?>
                                </button>
                                <button class="tab-button" data-tab="widget4">
                                    <?php esc_html_e('Widget 4', 'preciousuite-metal-rate-charts'); ?>
                                </button>
                            </div>
                        </div>

                        <!-- Tab Content -->
                        <div class="widget-tabs-content">
                            <form method="POST" action="options.php" class="preciousuite-form">
                                <?php settings_fields('gold-price-widgets'); ?>

                                <!-- Widget 1 Tab -->
                                <div class="tab-content active" id="widget1">
                                    <!-- Preview Area -->
                                    <div class="preciousuite-widget-field">
                                        <div id="widget1_preview" class="widget-preview" style="display: none;">
                                            <div class="preview-container">
                                                <h4>
                                                    <?php esc_html_e('Widget Preview', 'preciousuite-metal-rate-charts'); ?>
                                                </h4>
                                                <div class="preview-content">
                                                    <!-- Preview will be loaded here -->
                                                    <p>
                                                        <?php esc_html_e('Preview will appear here after configuration', 'preciousuite-metal-rate-charts'); ?>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h3>
                                        <?php esc_html_e('Widget 1 Settings', 'preciousuite-metal-rate-charts'); ?>
                                    </h3>
                                    <div class="preciousuite-widgets-fields-wrapper">

                                        <div class="preciousuite-widget-field">
                                            <label class="preciousuite-label" for="widget1_metals">
                                                <?php esc_html_e('Select Metals', 'preciousuite-metal-rate-charts'); ?>
                                            </label>
                                            <?php $saved_metals = (array) get_option('widget1_metals', ['gold']); ?>
                                            <select name="widget1_metals[]" id="widget1_metals"
                                                class="preciousuite-input widget_metals_select" multiple
                                                style="height: 80px;">
                                                <option value="gold" <?php echo in_array('gold', $saved_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Gold', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="silver" <?php echo in_array('silver', $saved_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Silver', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="platinum" <?php echo in_array('platinum', $saved_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Platinum', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                            </select>
                                            <small class="preciousuite-widget-hint">
                                                <?php esc_html_e('Hold Ctrl/Cmd to select multiple metals', 'preciousuite-metal-rate-charts'); ?>
                                            </small>
                                        </div>

                                        <div class="preciousuite-widget-field">
                                            <label class="preciousuite-label" for="widget1_currencies">
                                                <?php esc_html_e('Select Currencies', 'preciousuite-metal-rate-charts'); ?>
                                            </label>
                                            <?php $saved_currencies = (array) get_option('widget1_currencies', ['USD']); ?>
                                            <select name="widget1_currencies[]" id="widget1_currencies"
                                                class="preciousuite-input widget_metals_select" multiple
                                                style="height: 120px;">
                                                <option value="USD" <?php echo in_array('USD', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('USD - US Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="EUR" <?php echo in_array('EUR', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('EUR - Euro', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="GBP" <?php echo in_array('GBP', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('GBP - British Pound', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="JPY" <?php echo in_array('JPY', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('JPY - Japanese Yen', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="AUD" <?php echo in_array('AUD', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('AUD - Australian Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CAD" <?php echo in_array('CAD', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CAD - Canadian Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CHF" <?php echo in_array('CHF', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CHF - Swiss Franc', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CNY" <?php echo in_array('CNY', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CNY - Chinese Yuan', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="INR" <?php echo in_array('INR', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('INR - Indian Rupee', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="AED" <?php echo in_array('AED', $saved_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('AED - UAE Dirham', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                            </select>
                                            <small class="preciousuite-widget-hint">
                                                <?php esc_html_e('Hold Ctrl/Cmd to select multiple currencies', 'preciousuite-metal-rate-charts'); ?>
                                            </small>
                                        </div>

                                        <div class="preciousuite-widget-field">
                                            <label class="preciousuite-label" for="widget1_enabled">
                                                <?php esc_html_e('Enable Widget Options', 'preciousuite-metal-rate-charts'); ?>
                                            </label>
                                            <?php $saved_enabled = (array) get_option('widget1_enabled', ['header', 'footer']); ?>
                                            <select name="widget1_enabled[]" id="widget1_enabled"
                                                class="preciousuite-input widget_metals_select" multiple
                                                style="height: 80px;">
                                                <option value="header" <?php echo in_array('header', $saved_enabled) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Header', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="footer" <?php echo in_array('footer', $saved_enabled) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Footer', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                            </select>
                                            <small class="preciousuite-widget-hint">
                                                <?php esc_html_e('Select Header and/or Footer to show them in the widget.', 'preciousuite-metal-rate-charts'); ?>
                                            </small>
                                        </div>


                                    </div>

                                    <div class="preciousuite-widget-field">
                                        <button type="button" id="widget1_preview_btn"
                                            class="btn-primary widget_preview_btn">
                                            <?php esc_html_e('Preview Widget', 'preciousuite-metal-rate-charts'); ?>
                                        </button>
                                    </div>

                                    <div class="preciousuite-short-code-container">
                                        Use shortcode any place in website: <code>[pmrcgold_widget1]</code>
                                    </div>
                                </div>

                                <!-- Widget 2 Tab -->
                                <div class="tab-content" id="widget2">
                                    <!-- Preview Area -->
                                    <div class="preciousuite-widget-field">
                                        <div id="widget2_preview" class="widget-preview" style="display: none;">
                                            <div class="preview-container">
                                                <h4>
                                                    <?php esc_html_e('Widget Preview', 'preciousuite-metal-rate-charts'); ?>
                                                </h4>
                                                <div class="preview-content">
                                                    <!-- Preview will be loaded here -->
                                                    <p>
                                                        <?php esc_html_e('Preview will appear here after configuration', 'preciousuite-metal-rate-charts'); ?>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h3>
                                        <?php esc_html_e('Widget 2 Settings', 'preciousuite-metal-rate-charts'); ?>
                                    </h3>
                                    <div class="preciousuite-widgets-fields-wrapper">

                                        <div class="preciousuite-widget-field">
                                            <label class="preciousuite-label" for="widget2_metals">
                                                <?php esc_html_e('Select Metals', 'preciousuite-metal-rate-charts'); ?>
                                            </label>
                                            <?php $saved_widget2_metals = (array) get_option('widget2_metals', ['silver']); ?>
                                            <select name="widget2_metals[]" id="widget2_metals"
                                                class="preciousuite-input widget_metals_select" multiple
                                                style="height: 80px;">
                                                <option value="gold" <?php echo in_array('gold', $saved_widget2_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Gold', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="silver" <?php echo in_array('silver', $saved_widget2_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Silver', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="platinum" <?php echo in_array('platinum', $saved_widget2_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Platinum', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                            </select>
                                            <small class="preciousuite-widget-hint">
                                                <?php esc_html_e('Hold Ctrl/Cmd to select multiple metals', 'preciousuite-metal-rate-charts'); ?>
                                            </small>
                                        </div>

                                        <div class="preciousuite-widget-field">
                                            <label class="preciousuite-label" for="widget2_currencies">
                                                <?php esc_html_e('Select Currencies', 'preciousuite-metal-rate-charts'); ?>
                                            </label>
                                            <?php $saved_widget2_currencies = (array) get_option('widget2_currencies', ['USD']); ?>
                                            <select name="widget2_currencies[]" id="widget2_currencies"
                                                class="preciousuite-input widget_metals_select" multiple
                                                style="height: 120px;">
                                                <option value="USD" <?php echo in_array('USD', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('USD - US Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="EUR" <?php echo in_array('EUR', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('EUR - Euro', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="GBP" <?php echo in_array('GBP', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('GBP - British Pound', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="JPY" <?php echo in_array('JPY', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('JPY - Japanese Yen', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="AUD" <?php echo in_array('AUD', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('AUD - Australian Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CAD" <?php echo in_array('CAD', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CAD - Canadian Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CHF" <?php echo in_array('CHF', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CHF - Swiss Franc', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CNY" <?php echo in_array('CNY', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CNY - Chinese Yuan', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="INR" <?php echo in_array('INR', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('INR - Indian Rupee', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="AED" <?php echo in_array('AED', $saved_widget2_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('AED - UAE Dirham', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                            </select>
                                            <small class="preciousuite-widget-hint">
                                                <?php esc_html_e('Hold Ctrl/Cmd to select multiple currencies', 'preciousuite-metal-rate-charts'); ?>
                                            </small>
                                        </div>
                                    </div>

                                    <div class="preciousuite-widget-field">
                                        <button type="button" id="widget2_preview_btn"
                                            class="btn-primary widget_preview_btn">
                                            <?php esc_html_e('Preview Widget', 'preciousuite-metal-rate-charts'); ?>
                                        </button>
                                    </div>

                                    <div class="preciousuite-short-code-container">
                                        Use shortcode any place in website: <code>[pmrcgold_widget2]</code>
                                    </div>

                                </div>

                                <!-- Widget 3 Tab -->
                                <div class="tab-content" id="widget3">
                                    <!-- Preview Area -->
                                    <div class="preciousuite-widget-field">
                                        <div id="widget3_preview" class="widget-preview" style="display: none;">
                                            <div class="preview-container">
                                                <h4>
                                                    <?php esc_html_e('Widget Preview', 'preciousuite-metal-rate-charts'); ?>
                                                </h4>
                                                <div class="preview-content">
                                                    <!-- Preview will be loaded here -->
                                                    <p>
                                                        <?php esc_html_e('Preview will appear here after configuration', 'preciousuite-metal-rate-charts'); ?>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h3>
                                        <?php esc_html_e('Widget 3 Settings', 'preciousuite-metal-rate-charts'); ?>
                                    </h3>
                                    <div class="preciousuite-widgets-fields-wrapper">

                                        <div class="preciousuite-widget-field">
                                            <label class="preciousuite-label" for="widget3_metals">
                                                <?php esc_html_e('Select Metals', 'preciousuite-metal-rate-charts'); ?>
                                            </label>
                                            <?php $saved_widget3_metals = (array) get_option('widget3_metals', ['platinum']); ?>
                                            <select name="widget3_metals[]" id="widget3_metals"
                                                class="preciousuite-input widget_metals_select" multiple
                                                style="height: 80px;">
                                                <option value="gold" <?php echo in_array('gold', $saved_widget3_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Gold', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="silver" <?php echo in_array('silver', $saved_widget3_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Silver', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="platinum" <?php echo in_array('platinum', $saved_widget3_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Platinum', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                            </select>
                                            <small class="preciousuite-widget-hint">
                                                <?php esc_html_e('Hold Ctrl/Cmd to select multiple metals', 'preciousuite-metal-rate-charts'); ?>
                                            </small>
                                        </div>

                                        <div class="preciousuite-widget-field">
                                            <label class="preciousuite-label" for="widget3_currencies">
                                                <?php esc_html_e('Select Currencies', 'preciousuite-metal-rate-charts'); ?>
                                            </label>
                                            <?php $saved_widget3_currencies = (array) get_option('widget3_currencies', ['USD']); ?>
                                            <select name="widget3_currencies[]" id="widget3_currencies"
                                                class="preciousuite-input widget_metals_select">
                                                <option value="USD" <?php echo in_array('USD', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('USD - US Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="EUR" <?php echo in_array('EUR', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('EUR - Euro', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="GBP" <?php echo in_array('GBP', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('GBP - British Pound', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="JPY" <?php echo in_array('JPY', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('JPY - Japanese Yen', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="AUD" <?php echo in_array('AUD', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('AUD - Australian Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CAD" <?php echo in_array('CAD', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CAD - Canadian Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CHF" <?php echo in_array('CHF', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CHF - Swiss Franc', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CNY" <?php echo in_array('CNY', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CNY - Chinese Yuan', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="INR" <?php echo in_array('INR', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('INR - Indian Rupee', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="AED" <?php echo in_array('AED', $saved_widget3_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('AED - UAE Dirham', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                            </select>
                                            <!-- <small class="preciousuite-widget-hint"><?php esc_html_e('Hold Ctrl/Cmd to select multiple currencies', 'preciousuite-metal-rate-charts'); ?></small> -->
                                        </div>

                                        <div class="preciousuite-widget-field"
                                            style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffeeba; margin-top: 20px;">
                                            <p style="margin: 0; color: #856404;">
                                                <strong>Note:</strong> To use Widget 3 (Historical Chart) properly in the
                                                free version, please ensure the plugin successfully fetches daily API
                                                responses for at least 1 week. The chart is built using historical data from
                                                your Daily Price Logs.
                                            </p>
                                        </div>
                                    </div>

                                    <div class="preciousuite-widget-field">
                                        <button type="button" id="widget3_preview_btn"
                                            class="btn-primary widget_preview_btn">
                                            <?php esc_html_e('Preview Widget', 'preciousuite-metal-rate-charts'); ?>
                                        </button>
                                    </div>

                                    <div class="preciousuite-short-code-container">
                                        Use shortcode any place in website: <code>[pmrcgold_widget3]</code>
                                    </div>
                                </div>

                                <!-- Widget 4 Tab -->
                                <div class="tab-content" id="widget4">
                                    <!-- Preview Area -->
                                    <div class="preciousuite-widget-field">
                                        <div id="widget4_preview" class="widget-preview" style="display: none;">
                                            <div class="preview-container">
                                                <h4>
                                                    <?php esc_html_e('Widget Preview', 'preciousuite-metal-rate-charts'); ?>
                                                </h4>
                                                <div class="preview-content">
                                                    <!-- Preview will be loaded here -->
                                                    <p>
                                                        <?php esc_html_e('Preview will appear here after configuration', 'preciousuite-metal-rate-charts'); ?>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h3>
                                        <?php esc_html_e('Widget 4 Settings', 'preciousuite-metal-rate-charts'); ?>
                                    </h3>
                                    <div class="preciousuite-widgets-fields-wrapper">

                                        <div class="preciousuite-widget-field">
                                            <label class="preciousuite-label" for="widget4_metals">
                                                <?php esc_html_e('Select Metals', 'preciousuite-metal-rate-charts'); ?>
                                            </label>
                                            <?php $saved_widget4_metals = (array) get_option('widget4_metals', ['gold']); ?>
                                            <select name="widget4_metals[]" id="widget4_metals"
                                                class="preciousuite-input widget_metals_select" multiple
                                                style="height: 80px;">
                                                <option value="gold" <?php echo in_array('gold', $saved_widget4_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Gold', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="silver" <?php echo in_array('silver', $saved_widget4_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Silver', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="platinum" <?php echo in_array('platinum', $saved_widget4_metals) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('Platinum', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                            </select>
                                            <small class="preciousuite-widget-hint">
                                                <?php esc_html_e('Hold Ctrl/Cmd to select multiple metals', 'preciousuite-metal-rate-charts'); ?>
                                            </small>
                                        </div>

                                        <div class="preciousuite-widget-field">
                                            <label class="preciousuite-label" for="widget4_currencies">
                                                <?php esc_html_e('Select Currencies', 'preciousuite-metal-rate-charts'); ?>
                                            </label>
                                            <?php $saved_widget4_currencies = (array) get_option('widget4_currencies', ['USD']); ?>
                                            <select name="widget4_currencies[]" id="widget4_currencies"
                                                class="preciousuite-input widget_metals_select" multiple
                                                style="height: 120px;">
                                                <option value="USD" <?php echo in_array('USD', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('USD - US Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="EUR" <?php echo in_array('EUR', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('EUR - Euro', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="GBP" <?php echo in_array('GBP', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('GBP - British Pound', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="JPY" <?php echo in_array('JPY', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('JPY - Japanese Yen', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="AUD" <?php echo in_array('AUD', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('AUD - Australian Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CAD" <?php echo in_array('CAD', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CAD - Canadian Dollar', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CHF" <?php echo in_array('CHF', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CHF - Swiss Franc', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="CNY" <?php echo in_array('CNY', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('CNY - Chinese Yuan', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="INR" <?php echo in_array('INR', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('INR - Indian Rupee', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                                <option value="AED" <?php echo in_array('AED', $saved_widget4_currencies) ? 'selected' : ''; ?>>
                                                    <?php esc_html_e('AED - UAE Dirham', 'preciousuite-metal-rate-charts'); ?>
                                                </option>
                                            </select>
                                            <small class="preciousuite-widget-hint">
                                                <?php esc_html_e('Hold Ctrl/Cmd to select multiple currencies', 'preciousuite-metal-rate-charts'); ?>
                                            </small>
                                        </div>
                                    </div>

                                    <div class="preciousuite-widget-field">
                                        <button type="button" id="widget4_preview_btn"
                                            class="btn-primary widget_preview_btn">
                                            <?php esc_html_e('Preview Widget', 'preciousuite-metal-rate-charts'); ?>
                                        </button>
                                    </div>

                                    <div class="preciousuite-short-code-container">
                                        Use shortcode any place in website: <code>[pmrcgold_widget4]</code>
                                    </div>
                                </div>

                                <div class="preciousuite-widget-field preciousuite-submit-btn-wrapper">
                                    <input type="submit" name="submit" id="submit" class="btn-primary btn-submit"
                                        value="Save Changes">
                            </form>
                        </div>
                        <!-- <div class="preciousuite-sub-title">
                                <h2><span><img src="<?php echo esc_url(PMRCGOLD_ASSETS_URL); ?>uploads/contact-us.png" alt="Contact Us"></span><?php esc_html_e('Contact Us !', 'preciousuite-metal-rate-charts'); ?></h2>
                                <p>
                                    <?php esc_html_e('If you need help with customizations or would like to hire a developer, feel free to contact us at ', 'preciousuite-metal-rate-charts'); ?>
                                    <a href="mailto:kavavimal@gmail.com" class="link-yellow">kavavimal@gmail.com</a>
                                </p>
                            </div> -->

                    </div>

                    <div class="preciousuite-sub-title">
                        <h2><span class="widget-setting-footer-text"><img
                                    src="<?php echo esc_url(PMRCGOLD_ASSETS_URL); ?>uploads/contact-us.png"
                                    alt="Contact Us"></span>
                            <?php esc_html_e('Contact Us !', 'preciousuite-metal-rate-charts'); ?>
                        </h2>
                        <p>
                            <?php esc_html_e('If you need help with customizations or would like to hire a developer, feel free to contact us at ', 'preciousuite-metal-rate-charts'); ?>
                            <a href="mailto:kavavimal@gmail.com" class="link-yellow">kavavimal@gmail.com</a>
                        </p>
                    </div>


                </div>
        </div>

        <div class="preciousuite-footer">
            <div class="preciousuite-box preciousuite-page-title">
                <h3>
                    <?php esc_html_e('Widget Settings', 'preciousuite-metal-rate-charts'); ?>
                </h3>
            </div>
            <div class="preciousuite-box preciousuite-logo ">
                <label for="">Developed by - </label><a href="https://www.preciousuite.com/" target="_blank"
                    class="preciousuite-page-title">
                    <img src="<?php echo esc_url(PMRCGOLD_ASSETS_URL); ?>uploads/Preciousuite_Logo.png" alt="Logo">
                </a>
            </div>
        </div>

        </main>
        <?php pmrcgold_render_dashboard_sidebar(); ?>
    </div>
    </div>
    <?php
}

add_action('admin_init', 'pmrcgold_WidgetSettingsInit');

function pmrcgold_WidgetSettingsInit()
{
    add_settings_section('gold_price_widgets_setting_section', '', 'pmrcgold_WidgetCBFun', 'gold-price-widgets');

    $widget_settings = [
        // Widget 1 settings (enhanced)
        // 'widget1_title',
        'widget1_metals',
        'widget1_currencies',
        'widget1_bg_color',
        'widget1_text_color',
        'widget1_enabled',
        // Widget 2 settings
        'widget2_metals',
        'widget2_currencies',
        'widget2_title',
        'widget2_metal',
        'widget2_chart_type',
        'widget2_enabled',
        // Widget 3 settings
        'widget3_metals',
        'widget3_currencies',
        'widget3_title',
        'widget3_metal',
        'widget3_chart_type',
        'widget3_enabled',
        // Widget 4 settings
        'widget4_metals',
        'widget4_currencies',
        'widget4_title',
        'widget4_metal',
        'widget4_chart_type',
        'widget4_enabled'
    ];

    foreach ($widget_settings as $setting) {
        if (in_array($setting, ['widget1_metals', 'widget1_currencies', 'widget1_enabled', 'widget2_metals', 'widget2_currencies', 'widget3_metals', 'widget3_currencies', 'widget4_metals', 'widget4_currencies'])) {
            register_setting('gold-price-widgets', $setting, array(
                'type' => 'array',
                'sanitize_callback' => 'pmrcgold_sanitize_array'
            ));
        } else {
            register_setting('gold-price-widgets', $setting, 'sanitize_text_field');
        }
    }
}

/**
 * Sanitize array inputs for settings
 */
function pmrcgold_sanitize_array($input)
{
    if (is_array($input)) {
        return array_map('sanitize_text_field', $input);
    }
    return array();
}

function pmrcgold_WidgetCBFun()
{
    // Empty section callback
}