<?php

/**

 * OFAC Compliance - PRO Feature

 *

 * OFAC (Office of Foreign Assets Control) sanctions screening

 * Ensures compliance with US Treasury regulations

 *

 * @package    SensFRX

 * @subpackage SensFRX/admin/partials

 */



// If this file is called directly, abort.

if (!defined('WPINC')) {

    die;

}



// Get current settings

$options = get_option('sensfrx_options', SensFRX::default_options());

?>



<div class="sensfrx-enterprise-wrapper">

    <!-- Navigation Tabs -->

    <?php include_once plugin_dir_path(__FILE__) . 'sensfrx-navigation.php'; ?>



    <!-- Main Content -->

    <div class="sensfrx-enterprise-dashboard">



        <!-- Loading State -->

        <div id="ofac-loading" class="sensfrx-card" style="text-align: center; padding: 60px;">

            <div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #E5E7EB; border-top-color: #3B82F6; border-radius: 50%; animation: spin 1s linear infinite;"></div>

            <p style="color: #6B7280; font-size: 15px; margin-top: 16px;">Loading OFAC Compliance...</p>

        </div>



        <!-- Upgrade Banner (Hidden by default, shown if not PRO) -->

        <div id="ofac-upgrade-banner" style="display: none;">

            <div class="sensfrx-card" style="background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); border: 2px solid #3B82F6; overflow: hidden; position: relative;">

                <div style="padding: 48px 40px; position: relative; z-index: 1;">

                    <div style="max-width: 800px; margin: 0 auto; text-align: center;">

                        <!-- Icon -->

                        <div style="margin-bottom: 24px;">

                            <div style="width: 80px; height: 80px; background: #3B82F6; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);">

                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none">

                                    <path d="M12 2L3 7v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V7l-9-5z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                    <circle cx="12" cy="12" r="3" fill="white"/>

                                </svg>

                            </div>

                        </div>



                        <h2 style="margin: 0 0 16px; font-size: 32px; font-weight: 800; color: #1E40AF; letter-spacing: -0.5px;">OFAC Compliance</h2>

                        <p style="margin: 0 0 32px; font-size: 18px; color: #1E3A8A; line-height: 1.7; max-width: 600px; margin-left: auto; margin-right: auto;">

                            Automated sanctions screening against US Treasury lists. Protect your business from legal risks and ensure federal compliance.

                        </p>



                        <!-- Features Grid -->

                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 32px; text-align: left;">

                            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">

                                <div style="color: #3B82F6; margin-bottom: 12px;">

                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">

                                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>

                                        <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="currentColor" stroke-width="2"/>

                                    </svg>

                                </div>

                                <h3 style="margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #111827;">Country Sanctions</h3>

                                <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Block transactions from 19+ sanctioned countries automatically</p>

                            </div>

                            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">

                                <div style="color: #3B82F6; margin-bottom: 12px;">

                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">

                                        <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke="currentColor" stroke-width="2"/>

                                    </svg>

                                </div>

                                <h3 style="margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #111827;">SDN List Screening</h3>

                                <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Screen against Specially Designated Nationals database</p>

                            </div>

                            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">

                                <div style="color: #3B82F6; margin-bottom: 12px;">

                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">

                                        <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke="currentColor" stroke-width="2"/>

                                    </svg>

                                </div>

                                <h3 style="margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #111827;">Audit & Reporting</h3>

                                <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Complete audit trails for compliance documentation</p>

                            </div>

                        </div>



                        <div style="display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;">

                            <a href="<?php echo esc_url(get_option('sensfrx_upgrade_url', 'https://client.sensfrx.ai/account/upgrade-plan')); ?>" target="_blank" style="display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: #3B82F6; color: white; text-decoration: none; border-radius: 10px; font-size: 16px; font-weight: 700; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); transition: all 0.3s;">

                                <svg width="20" height="20" viewBox="0 0 20 20" fill="white">

                                    <path d="M10 2l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z"/>

                                </svg>

                                Upgrade to PRO

                            </a>

                            <a href="https://sensfrx.ai/pricing" target="_blank" style="display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: white; color: #3B82F6; text-decoration: none; border-radius: 10px; font-size: 16px; font-weight: 600; border: 2px solid #3B82F6; transition: all 0.3s;">

                                View Pricing

                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>



        <!-- PRO Content (Hidden by default, shown if PRO) -->

        <div id="ofac-pro-content" style="display: none;">

            <!-- Page Header -->

            <div style="margin-bottom: 32px;">

                <h1 style="margin: 0 0 8px; font-size: 32px; font-weight: 800; color: #111827; letter-spacing: -0.5px;">OFAC Compliance</h1>

                <p style="margin: 0; font-size: 16px; color: #6B7280; line-height: 1.6;">Automated sanctions screening and compliance monitoring for US Treasury regulations</p>

            </div>



            <!-- Two Column Layout -->

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px;">



                <!-- Sanctioned Countries Card -->

                <div style="background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;">

                    <div style="background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%); padding: 20px; color: white;">

                        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">

                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">

                                <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2"/>

                                <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="white" stroke-width="2"/>

                            </svg>

                            <h3 style="margin: 0; font-size: 18px; font-weight: 700;">Sanctioned Countries</h3>

                        </div>

                        <p style="margin: 0; font-size: 13px; opacity: 0.9;">19 countries under US sanctions</p>

                    </div>

                    <div style="padding: 20px; max-height: 400px; overflow-y: auto;">

                        <?php

                        $sanctioned_countries = array(

                            'Comprehensive Sanctions' => array('Cuba', 'Iran', 'North Korea', 'Syria'),

                            'Targeted Sanctions' => array('Russia', 'Belarus', 'Venezuela', 'Myanmar', 'Zimbabwe', 'Nicaragua'),

                            'Regional Sanctions' => array('Crimea', 'Donetsk', 'Luhansk'),

                            'Targeted Entities' => array('Lebanon', 'Iraq', 'Libya', 'Somalia', 'Sudan', 'Yemen')

                        );

                        foreach ($sanctioned_countries as $category => $countries):

                        ?>

                            <div style="margin-bottom: 20px;">

                                <h4 style="margin: 0 0 12px; font-size: 12px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: 0.5px;"><?php echo esc_html($category); ?></h4>

                                <div style="display: flex; flex-wrap: wrap; gap: 8px;">

                                    <?php foreach ($countries as $country): ?>

                                        <span style="background: #F3F4F6; color: #374151; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;"><?php echo esc_html($country); ?></span>

                                    <?php endforeach; ?>

                                </div>

                            </div>

                        <?php endforeach; ?>

                        <div style="margin-top: 16px; padding: 12px; background: #EFF6FF; border-radius: 8px; border-left: 3px solid #3B82F6;">

                            <p style="margin: 0; font-size: 11px; color: #1E40AF; line-height: 1.5;">

                                <strong>Official Source:</strong> <a href="https://ofac.treasury.gov/sanctions-programs-and-country-information" target="_blank" style="color: #2563EB; text-decoration: underline;">treasury.gov/ofac</a>

                            </p>

                        </div>

                    </div>

                </div>



                <!-- SDN List Info Card -->

                <div style="background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;">

                    <div style="background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%); padding: 20px; color: white;">

                        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">

                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">

                                <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke="white" stroke-width="2"/>

                            </svg>

                            <h3 style="margin: 0; font-size: 18px; font-weight: 700;">SDN List</h3>

                        </div>

                        <p style="margin: 0; font-size: 13px; opacity: 0.9;">Specially Designated Nationals</p>

                    </div>

                    <div style="padding: 20px;">

                        <p style="margin: 0 0 16px; font-size: 14px; color: #374151; line-height: 1.7;">

                            The SDN list contains individuals and entities that are subject to US sanctions. This includes entities associated with certain countries and activities.

                        </p>



                        <div style="background: #F0F9FF; border-left: 3px solid #3B82F6; padding: 16px; border-radius: 8px; margin-bottom: 16px;">

                            <h4 style="margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #1E40AF;">Compliance Overview</h4>

                            <ul style="margin: 0; padding-left: 18px; font-size: 13px; color: #1E3A8A; line-height: 1.8;">

                                <li>US businesses follow sanctions programs for certain entities</li>

                                <li>Transactions with listed entities may be restricted</li>

                                <li>Screening helps maintain regulatory compliance</li>

                            </ul>

                        </div>



                        <div style="background: #ECFDF5; border-left: 3px solid #10B981; padding: 16px; border-radius: 8px;">

                            <h4 style="margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #065F46;">How SensFRX Helps</h4>

                            <p style="margin: 0; font-size: 13px; color: #047857; line-height: 1.7;">

                                Automatically checks customer information against the SDN list during checkout to help you stay compliant with federal requirements.

                            </p>

                        </div>

                    </div>

                </div>

            </div>



            <!-- Settings Form -->

            <form id="sensfrx-ofac-form" method="post">

                <?php wp_nonce_field('sensfrx_ofac_save', 'sensfrx_ofac_nonce'); ?>



                <div style="background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 24px;">

                    <div style="background: #F9FAFB; border-bottom: 1px solid #E5E7EB; padding: 20px;">

                        <h3 style="margin: 0; font-size: 18px; font-weight: 700; color: #111827;">OFAC Settings</h3>

                        <p style="margin: 4px 0 0; font-size: 14px; color: #6B7280;">Configure your compliance screening preferences</p>

                    </div>



                    <div style="padding: 24px;">

                        <!-- 2x2 Grid for Settings -->

                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">



                            <!-- Enable OFAC Screening -->

                            <div style="padding: 20px; background: #F9FAFB; border-radius: 10px; border: 2px solid #E5E7EB;">

                                <div style="display: flex; align-items: start; justify-content: space-between; margin-bottom: 12px;">

                                    <div style="flex: 1;">

                                        <h4 style="margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111827;">Enable OFAC Screening</h4>

                                        <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Master switch for all OFAC compliance features</p>

                                    </div>

                                    <label class="sensfrx-toggle-switch" style="margin-left: 16px;">

                                        <input type="checkbox" name="sensfrx_options[sensfrx_ofac_enabled]" value="1" <?php checked($options['sensfrx_ofac_enabled'], '1'); ?>>

                                        <span class="sensfrx-toggle-slider"></span>

                                    </label>

                                </div>

                            </div>



                            <!-- Block Sanctioned Countries -->

                            <div style="padding: 20px; background: #F9FAFB; border-radius: 10px; border: 2px solid #E5E7EB;">

                                <div style="display: flex; align-items: start; justify-content: space-between; margin-bottom: 12px;">

                                    <div style="flex: 1;">

                                        <h4 style="margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111827;">Block Sanctioned Countries</h4>

                                        <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Automatically block transactions from sanctioned regions</p>

                                    </div>

                                    <label class="sensfrx-toggle-switch" style="margin-left: 16px;">

                                        <input type="checkbox" name="sensfrx_options[sensfrx_ofac_block_countries]" value="1" <?php checked($options['sensfrx_ofac_block_countries'], '1'); ?>>

                                        <span class="sensfrx-toggle-slider"></span>

                                    </label>

                                </div>

                            </div>



                            <!-- SDN List Check -->

                            <div style="padding: 20px; background: #F9FAFB; border-radius: 10px; border: 2px solid #E5E7EB;">

                                <div style="display: flex; align-items: start; justify-content: space-between; margin-bottom: 12px;">

                                    <div style="flex: 1;">

                                        <h4 style="margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111827;">SDN List Verification</h4>

                                        <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Screen customers against Specially Designated Nationals</p>

                                    </div>

                                    <label class="sensfrx-toggle-switch" style="margin-left: 16px;">

                                        <input type="checkbox" name="sensfrx_options[sensfrx_ofac_sdn_check]" value="1" <?php checked($options['sensfrx_ofac_sdn_check'], '1'); ?>>

                                        <span class="sensfrx-toggle-slider"></span>

                                    </label>

                                </div>

                            </div>



                            <!-- Email Alerts -->

                            <div style="padding: 20px; background: #F9FAFB; border-radius: 10px; border: 2px solid #E5E7EB;">

                                <div style="display: flex; align-items: start; justify-content: space-between; margin-bottom: 12px;">

                                    <div style="flex: 1;">

                                        <h4 style="margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111827;">Email Alerts</h4>

                                        <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Get notified when sanctions matches are found</p>

                                    </div>

                                    <label class="sensfrx-toggle-switch" style="margin-left: 16px;">

                                        <input type="checkbox" name="sensfrx_options[sensfrx_ofac_email_alerts]" value="1" <?php checked($options['sensfrx_ofac_email_alerts'], '1'); ?>>

                                        <span class="sensfrx-toggle-slider"></span>

                                    </label>

                                </div>

                            </div>



                            <!-- Dashboard Alerts -->

                            <div style="padding: 20px; background: #F9FAFB; border-radius: 10px; border: 2px solid #E5E7EB;">

                                <div style="display: flex; align-items: start; justify-content: space-between; margin-bottom: 12px;">

                                    <div style="flex: 1;">

                                        <h4 style="margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111827;">Dashboard Notifications</h4>

                                        <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Show compliance alerts in your admin dashboard</p>

                                    </div>

                                    <label class="sensfrx-toggle-switch" style="margin-left: 16px;">

                                        <input type="checkbox" name="sensfrx_options[sensfrx_ofac_dashboard_alerts]" value="1" <?php checked($options['sensfrx_ofac_dashboard_alerts'], '1'); ?>>

                                        <span class="sensfrx-toggle-slider"></span>

                                    </label>

                                </div>

                            </div>



                            <!-- Audit Log -->

                            <div style="padding: 20px; background: #F9FAFB; border-radius: 10px; border: 2px solid #E5E7EB;">

                                <div style="display: flex; align-items: start; justify-content: space-between; margin-bottom: 12px;">

                                    <div style="flex: 1;">

                                        <h4 style="margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111827;">Maintain Audit Log</h4>

                                        <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Keep detailed records of all screening activities</p>

                                    </div>

                                    <label class="sensfrx-toggle-switch" style="margin-left: 16px;">

                                        <input type="checkbox" name="sensfrx_options[sensfrx_ofac_audit_log]" value="1" <?php checked($options['sensfrx_ofac_audit_log'], '1'); ?>>

                                        <span class="sensfrx-toggle-slider"></span>

                                    </label>

                                </div>

                            </div>



                            <!-- Compliance Reports -->

                            <div style="padding: 20px; background: #F9FAFB; border-radius: 10px; border: 2px solid #E5E7EB;">

                                <div style="display: flex; align-items: start; justify-content: space-between; margin-bottom: 12px;">

                                    <div style="flex: 1;">

                                        <h4 style="margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111827;">Generate Reports</h4>

                                        <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Create compliance reports for regulatory purposes</p>

                                    </div>

                                    <label class="sensfrx-toggle-switch" style="margin-left: 16px;">

                                        <input type="checkbox" name="sensfrx_options[sensfrx_ofac_reports]" value="1" <?php checked($options['sensfrx_ofac_reports'], '1'); ?>>

                                        <span class="sensfrx-toggle-slider"></span>

                                    </label>

                                </div>

                            </div>



                            <!-- Auto Update -->

                            <div style="padding: 20px; background: #F9FAFB; border-radius: 10px; border: 2px solid #E5E7EB;">

                                <div style="display: flex; align-items: start; justify-content: space-between; margin-bottom: 12px;">

                                    <div style="flex: 1;">

                                        <h4 style="margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111827;">Auto-Update Lists</h4>

                                        <p style="margin: 0; font-size: 13px; color: #6B7280; line-height: 1.6;">Automatically sync with latest OFAC sanctions updates</p>

                                    </div>

                                    <label class="sensfrx-toggle-switch" style="margin-left: 16px;">

                                        <input type="checkbox" name="sensfrx_options[sensfrx_ofac_auto_update]" value="1" <?php checked($options['sensfrx_ofac_auto_update'], '1'); ?>>

                                        <span class="sensfrx-toggle-slider"></span>

                                    </label>

                                </div>

                            </div>



                        </div>

                    </div>

                </div>



                <!-- Save Button -->

                <div style="display: flex; align-items: center; gap: 16px;">

                    <button type="submit" class="sensfrx-btn-primary" id="ofac-save-btn" style="padding: 14px 32px; font-size: 15px; font-weight: 700; border-radius: 10px;">

                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="margin-right: 8px;">

                            <path d="M16 4l-8 8-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                        </svg>

                        <span id="ofac-save-text">Save OFAC Settings</span>

                    </button>

                    <div id="ofac-save-status" style="display: none; color: #10B981; font-size: 14px; font-weight: 600;">

                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="display: inline-block; vertical-align: middle; margin-right: 6px;">

                            <path d="M16 4l-8 8-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                        </svg>

                        Settings saved successfully!

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>



<style>

/* Toggle Switch Styling */

.sensfrx-toggle-switch {

    position: relative;

    display: inline-block;

    width: 48px;

    height: 26px;

    flex-shrink: 0;

}



.sensfrx-toggle-switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.sensfrx-toggle-slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #CBD5E1;

    transition: 0.3s;

    border-radius: 26px;

}



.sensfrx-toggle-slider:before {

    position: absolute;

    content: "";

    height: 20px;

    width: 20px;

    left: 3px;

    bottom: 3px;

    background-color: white;

    transition: 0.3s;

    border-radius: 50%;

    box-shadow: 0 2px 4px rgba(0,0,0,0.2);

}



.sensfrx-toggle-switch input:checked + .sensfrx-toggle-slider {

    background: linear-gradient(135deg, #0254ff 0%, #0040cc 100%);

}



.sensfrx-toggle-switch input:checked + .sensfrx-toggle-slider:before {

    transform: translateX(22px);

}



/* Button Styling */

.sensfrx-btn-primary {

    background: linear-gradient(135deg, #0254ff 0%, #0040cc 100%);

    color: white;

    border: none;

    padding: 14px 32px;

    border-radius: 10px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(2, 84, 255, 0.3);

}



.sensfrx-btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(2, 84, 255, 0.4);

}



.sensfrx-btn-primary:active {

    transform: translateY(0);

}



.sensfrx-btn-primary:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

}



/* Loading & Saving Animation */

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* Save status visibility */

#ofac-save-status {

    min-width: 150px;

}



/* Scrollbar Styling */

::-webkit-scrollbar {

    width: 8px;

}



::-webkit-scrollbar-track {

    background: #F3F4F6;

    border-radius: 4px;

}



::-webkit-scrollbar-thumb {

    background: #CBD5E1;

    border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

    background: #94A3B8;

}

</style>



<script>

jQuery(document).ready(function($) {

    // Fetch license info to check PRO access

    $.ajax({

        url: sensfrxData.restUrl + 'get_license_info',

        method: 'GET',

        beforeSend: function(xhr) {

            xhr.setRequestHeader('X-WP-Nonce', sensfrxData.nonce);

        },

        success: function(response) {

            // Hide loading

            $('#ofac-loading').hide();



            if (response.status === 'success' && response.data) {

                const planName = response.data.planName || response.data.plan_name || response.data.plan || 'FREE';

                const userPlan = planName.toUpperCase();



                // Check if user has PRO access (PRO, GROWTH, BUSINESS, or ENTERPRISE)

                const hasProAccess = userPlan.includes('PRO') ||

                                    userPlan.includes('GROWTH') ||

                                    userPlan.includes('BUSINESS') ||

                                    userPlan.includes('ENTERPRISE');



                if (hasProAccess) {

                    // Show PRO content

                    $('#ofac-pro-content').show();

                } else {

                    // Show upgrade banner

                    $('#ofac-upgrade-banner').show();

                }

            } else {

                // Error - show upgrade banner by default

                $('#ofac-upgrade-banner').show();

            }

        },

        error: function() {

            // Error - hide loading and show upgrade banner

            $('#ofac-loading').hide();

            $('#ofac-upgrade-banner').show();

        }

    });



    // Auto-save function

    let saveTimeout;



    function autoSaveOFACSettings() {

        clearTimeout(saveTimeout);



        // Show saving status

        const saveStatus = $('#ofac-save-status');

        saveStatus.css('color', '#F59E0B').html('<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="display: inline-block; vertical-align: middle; margin-right: 6px; animation: spin 1s linear infinite;"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2" fill="none"/></svg>Saving...').show();



        // Auto-save after 500ms delay

        saveTimeout = setTimeout(function() {

            // Serialize form data

            const formData = $('#sensfrx-ofac-form').serializeArray();

            const options = {};



            // Convert form data to options object

            formData.forEach(function(field) {

                if (field.name.startsWith('sensfrx_options[')) {

                    const key = field.name.replace('sensfrx_options[', '').replace(']', '');

                    options[key] = field.value;

                }

            });



            // Save via AJAX

            $.ajax({

                url: ajaxurl,

                method: 'POST',

                data: {

                    action: 'sensfrx_save_ofac_settings',

                    nonce: $('#sensfrx_ofac_nonce').val(),

                    ofac_settings: options

                },

                success: function(response) {

                    if (response.success) {

                        saveStatus.css('color', '#10B981').html('<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="display: inline-block; vertical-align: middle; margin-right: 6px;"><path d="M16 4l-8 8-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>All changes saved').show();

                        setTimeout(function() {

                            saveStatus.fadeOut();

                        }, 2000);

                    } else {

                        saveStatus.css('color', '#DC2626').text('Error saving settings').show();

                    }

                },

                error: function() {

                    saveStatus.css('color', '#DC2626').text('Error saving settings').show();

                }

            });

        }, 500);

    }



    // Auto-save on toggle change

    $('#sensfrx-ofac-form input[type="checkbox"]').on('change', function() {

        autoSaveOFACSettings();

    });



    // Handle manual form submission (if user presses Enter or clicks save button)

    $('#sensfrx-ofac-form').on('submit', function(e) {

        e.preventDefault();



        // Clear any pending auto-save

        clearTimeout(saveTimeout);



        // Show saving state

        const saveBtn = $('#ofac-save-btn');

        const saveText = $('#ofac-save-text');

        const saveStatus = $('#ofac-save-status');



        saveBtn.prop('disabled', true);

        saveText.text('Saving...');

        saveStatus.css('color', '#F59E0B').html('<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="display: inline-block; vertical-align: middle; margin-right: 6px; animation: spin 1s linear infinite;"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2" fill="none"/></svg>Saving...').show();



        // Serialize form data

        const formData = $(this).serializeArray();

        const options = {};



        // Convert form data to options object

        formData.forEach(function(field) {

            if (field.name.startsWith('sensfrx_options[')) {

                const key = field.name.replace('sensfrx_options[', '').replace(']', '');

                options[key] = field.value;

            }

        });



        // Save via AJAX

        $.ajax({

            url: ajaxurl,

            method: 'POST',

            data: {

                action: 'sensfrx_save_ofac_settings',

                nonce: $('#sensfrx_ofac_nonce').val(),

                ofac_settings: options

            },

            success: function(response) {

                saveBtn.prop('disabled', false);

                saveText.text('Save OFAC Settings');



                if (response.success) {

                    saveStatus.css('color', '#10B981').html('<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="display: inline-block; vertical-align: middle; margin-right: 6px;"><path d="M16 4l-8 8-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Settings saved successfully!').show();

                    setTimeout(function() {

                        saveStatus.fadeOut();

                    }, 3000);

                } else {

                    saveStatus.css('color', '#DC2626').text('Error saving settings. Please try again.').show();

                }

            },

            error: function() {

                saveBtn.prop('disabled', false);

                saveText.text('Save OFAC Settings');

                saveStatus.css('color', '#DC2626').text('Error saving settings. Please try again.').show();

            }

        });

    });

});

</script>

