<?php

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

class AIEO_DMM_Product_Card extends AIEO_DMM_Module_Base {

    const OPTION_KEY = 'aieo_dmm_product_card_settings';

    public function get_id()       { return 'product_card'; }
    public function get_label()    { return __('Product Card', 'ai-eshop-optimizer'); }
    public function get_priority() { return 5; } 
    public function get_group()    { return 'visuals'; }

    public function register_hooks() {
        add_action('wp_ajax_aieo_dmm_product_card_save', array($this, 'ajax_save'));
        add_action('wp_enqueue_scripts', array($this, 'enqueue_styles'));
        add_filter('body_class', array($this, 'add_body_class'));
    }

    
    public function enqueue_admin_assets() {
        wp_enqueue_style('wp-color-picker');
        wp_enqueue_script('wp-color-picker');
        wp_add_inline_script('wp-color-picker',
            'jQuery(function($){$(".aieo-color").wpColorPicker();});'
        );
    }

    
    public function is_active() { return true; }

    
    public function add_body_class($classes) {
        $s = $this->get_settings();
        if (($s['design_source'] ?? 'aieo') === 'theme') { $classes[] = 'aieo-cards-theme'; }
        return $classes;
    }

    public function get_settings() {
        $stored = get_option(self::OPTION_KEY, array());
        if (!is_array($stored)) { $stored = array(); }
        return array_merge(array(
            
            
            'design_source'    => 'aieo',
            
            'card_border'      => '1px solid #1a1a1a',
            'card_radius'      => '0px',
            'card_bg'          => '#ffffff',
            'img_bg'           => '#ffffff',
            
            'card_width'       => '284px',
            'card_height'      => '455px',
            'card_gap'         => '16px',
            'card_padding'     => '14px',
            
            'title_color'      => '#c82d52',
            'title_ff'         => '',
            'title_fs'         => '1.375rem',
            'title_fs_mobile'  => '1.125rem',
            
            'price_color'      => '#1a1a1a',
            'price_fs'         => '1.25rem',
            'price_fs_mobile'  => '1.05rem',
            'price_muted'      => '#9a9a9a',
            
            'img_pad'          => '0',
            'img_pad_m'        => '0',
            'title_pad'        => '0',
            'title_pad_m'      => '0',
            'price_pad'        => '0',
            'price_pad_m'      => '0',
            
            'desc_show'        => false,
            'desc_color'       => '#6b7280',
            'desc_fs'          => '0.85rem',
            'desc_fs_m'        => '0.8rem',
            'desc_pad'         => '0',
            'desc_pad_m'       => '0',
            
            'rating_show'      => true,
            
            'scroll_thumb_color' => '#c82d52',
            'scroll_line_color'  => '#1a1a1a',
        ), $stored);
    }

    private function valid_size($v, $def) {
        $v = trim((string) $v);
        if ($v === '') { return $def; }
        if (is_numeric($v)) { return $v . 'px'; }
        return preg_match('/^[0-9]*\.?[0-9]+\s*(rem|em|px|%|vw|vh|pt)$/i', $v) ? $v : $def;
    }
    private function valid_color($v, $def) {
        $v = trim((string) $v);
        if ($v === '') { return $def; }
        if (class_exists('AIEO_Admin_Color')) {
            $c = AIEO_Admin_Color::sanitize($v);
            return $c !== '' ? $c : $def;
        }
        $c = sanitize_hex_color($v);
        return $c ? $c : $def;
    }

    public function ajax_save() {
        AIEO_DMM::verify_ajax_request();
        $d = $this->get_settings();
        $ds = isset($_POST['design_source']) ? sanitize_text_field(wp_unslash((string) $_POST['design_source'])) : 'aieo';
        $d['design_source'] = in_array($ds, array('aieo', 'theme'), true) ? $ds : 'aieo';
        
        if (isset($_POST['card_border'])) {
            $b = trim(sanitize_text_field(wp_unslash((string) $_POST['card_border'])));
            $d['card_border'] = ($b !== '' && strlen($b) <= 80) ? $b : $d['card_border'];
        }
        $d['card_radius']     = $this->valid_size($_POST['card_radius']     ?? '', $d['card_radius']);
        $d['card_width']      = $this->valid_size($_POST['card_width']      ?? '', $d['card_width']);
        $d['card_height']     = $this->valid_size($_POST['card_height']     ?? '', $d['card_height']);
        $d['card_gap']        = $this->valid_size($_POST['card_gap']        ?? '', $d['card_gap']);
        $d['card_padding']    = $this->valid_size($_POST['card_padding']    ?? '', $d['card_padding']);
        $d['title_fs']        = $this->valid_size($_POST['title_fs']        ?? '', $d['title_fs']);
        $d['title_fs_mobile'] = $this->valid_size($_POST['title_fs_mobile'] ?? '', $d['title_fs_mobile']);
        $d['price_fs']        = $this->valid_size($_POST['price_fs']        ?? '', $d['price_fs']);
        $d['price_fs_mobile'] = $this->valid_size($_POST['price_fs_mobile'] ?? '', $d['price_fs_mobile']);
        $d['card_bg']     = $this->valid_color($_POST['card_bg']     ?? '', $d['card_bg']);
        $d['img_bg']      = $this->valid_color($_POST['img_bg']      ?? '', $d['img_bg']);
        $d['title_color'] = $this->valid_color($_POST['title_color'] ?? '', $d['title_color']);
        $d['price_color'] = $this->valid_color($_POST['price_color'] ?? '', $d['price_color']);
        $d['price_muted'] = $this->valid_color($_POST['price_muted'] ?? '', $d['price_muted']);
        
        
        foreach (array('img_pad','img_pad_m','title_pad','title_pad_m','price_pad','price_pad_m','desc_pad','desc_pad_m') as $pk) {
            if (isset($_POST[$pk])) {
                $pv = trim(sanitize_text_field(wp_unslash((string) $_POST[$pk])));
                $d[$pk] = (strlen($pv) <= 40) ? ($pv === '' ? '0' : $pv) : $d[$pk];
            }
        }
        $d['desc_fs']    = $this->valid_size($_POST['desc_fs']    ?? '', $d['desc_fs']);
        $d['desc_fs_m']  = $this->valid_size($_POST['desc_fs_m']  ?? '', $d['desc_fs_m']);
        $d['desc_color'] = $this->valid_color($_POST['desc_color'] ?? '', $d['desc_color']);
        $d['desc_show']   = !empty($_POST['desc_show']);
        $d['rating_show'] = !empty($_POST['rating_show']);
        $d['scroll_thumb_color'] = $this->valid_color($_POST['scroll_thumb_color'] ?? '', $d['scroll_thumb_color']);
        $d['scroll_line_color']  = $this->valid_color($_POST['scroll_line_color']  ?? '', $d['scroll_line_color']);
        
        
        
        if (isset($_POST['title_ff'])) {
            $ff = trim(sanitize_text_field(wp_unslash((string) $_POST['title_ff'])));
            $ff = str_replace(array('{', '}', ';', '<', '>'), '', $ff);
            $d['title_ff'] = (strlen($ff) <= 120) ? $ff : $d['title_ff'];
        }
        update_option(self::OPTION_KEY, $d, false);
        wp_send_json_success(array('message' => __('Product Card settings saved.', 'ai-eshop-optimizer')));
    }

    
    public function enqueue_styles() {
        if (is_admin()) { return; }
        $s = $this->get_settings();
        
        if (($s['design_source'] ?? 'aieo') === 'theme') { return; }
        $css = ':root .aieo-recommendations{'
            . '--aieo-reco-card-border:' . esc_attr($s['card_border']) . ';'
            . '--aieo-reco-card-radius:' . esc_attr($s['card_radius']) . ';'
            . '--aieo-reco-card-bg:'     . esc_attr($s['card_bg'])     . ';'
            . '--aieo-reco-img-bg:'      . esc_attr($s['img_bg'])      . ';'
            . '--aieo-reco-card-w:'      . esc_attr($s['card_width'])  . ';'
            . '--aieo-reco-card-h:'      . esc_attr($s['card_height']) . ';'
            . '--aieo-reco-card-gap:'    . esc_attr($s['card_gap'])    . ';'
            . '--aieo-reco-card-pad:'    . esc_attr($s['card_padding']). ';'
            . '--aieo-reco-title-color:' . esc_attr($s['title_color']) . ';'
            . '--aieo-reco-title-fs:'    . esc_attr($s['title_fs'])    . ';'
            . '--aieo-reco-title-fs-m:'  . esc_attr($s['title_fs_mobile']) . ';'
            . '--aieo-reco-price-color:' . esc_attr($s['price_color']) . ';'
            . '--aieo-reco-price-fs:'    . esc_attr($s['price_fs'])    . ';'
            . '--aieo-reco-price-fs-m:'  . esc_attr($s['price_fs_mobile']) . ';'
            . '--aieo-reco-muted:'       . esc_attr($s['price_muted']) . ';'
            . '--aieo-reco-img-pad:'     . esc_attr($s['img_pad'])     . ';'
            . '--aieo-reco-img-pad-m:'   . esc_attr($s['img_pad_m'])   . ';'
            . '--aieo-reco-title-pad:'   . esc_attr($s['title_pad'])   . ';'
            . '--aieo-reco-title-pad-m:' . esc_attr($s['title_pad_m']) . ';'
            . '--aieo-reco-price-pad:'   . esc_attr($s['price_pad'])   . ';'
            . '--aieo-reco-price-pad-m:' . esc_attr($s['price_pad_m']) . ';'
            . '--aieo-reco-desc-color:'  . esc_attr($s['desc_color'])  . ';'
            . '--aieo-reco-desc-fs:'     . esc_attr($s['desc_fs'])     . ';'
            . '--aieo-reco-desc-fs-m:'   . esc_attr($s['desc_fs_m'])   . ';'
            . '--aieo-reco-desc-pad:'    . esc_attr($s['desc_pad'])    . ';'
            . '--aieo-reco-desc-pad-m:'  . esc_attr($s['desc_pad_m'])  . ';'
            . '--aieo-reco-desc-display:'   . (!empty($s['desc_show'])   ? '-webkit-box' : 'none') . ';'
            . '--aieo-reco-rating-display:' . (!empty($s['rating_show']) ? 'flex'  : 'none') . ';'
            . '--aieo-reco-scroll-thumb:' . esc_attr($s['scroll_thumb_color']) . ';'
            . '--aieo-reco-scroll-line:'  . esc_attr($s['scroll_line_color'])  . ';'
            . '}';
        
        
        
        if (trim((string) $s['title_ff']) !== '') {
            $css .= ':root .aieo-recommendations .aieo-recommendations-grid .aieo-card-name{font-family:' . $s['title_ff'] . ' !important;}';
        }
        wp_register_style('aieo-dmm-product-card', false, array(), defined('AIEO_VERSION') ? AIEO_VERSION : '1.0');
        wp_enqueue_style('aieo-dmm-product-card');
        wp_add_inline_style('aieo-dmm-product-card', $css);
    }

    public function render_subtab() {
        $s     = $this->get_settings();
        $nonce = wp_create_nonce(AIEO_DMM::NONCE_ACTION);
        $ajax  = admin_url('admin-ajax.php');
        ?>
        <div class="aieo-dmm-section">
            <h2><?php esc_html_e('Product Card', 'ai-eshop-optimizer'); ?></h2>
            <p class="description" style="max-width:820px;">
                <?php esc_html_e('Appearance of the AIEO recommendation/carousel product cards — owned by the plugin so the same design renders on ANY theme (it no longer depends on roosterx-ff). Set the card border, the title font size (desktop + mobile) + colour, and the price font size (desktop + mobile) + colour. Variable-product price ranges render on one line; sales stack the regular price over the sale price.', 'ai-eshop-optimizer'); ?>
            </p>
            <form id="aieo-dmm-product-card-form" class="aieo-dmm-card">
                <table class="form-table">
                    <tr><th scope="row"><?php esc_html_e('Card design source', 'ai-eshop-optimizer'); ?></th>
                        <td>
                            <select name="design_source" style="min-width:320px;">
                                <option value="aieo" <?php selected($s['design_source'], 'aieo'); ?>><?php esc_html_e('AIEO design — works on any theme (recommended)', 'ai-eshop-optimizer'); ?></option>
                                <option value="theme" <?php selected($s['design_source'], 'theme'); ?>><?php esc_html_e('Theme design — let the active theme style the cards', 'ai-eshop-optimizer'); ?></option>
                            </select>
                            <p class="description"><?php esc_html_e('“AIEO design” applies everything below on every theme. “Theme design” steps back so your theme’s own recommendation-card styling wins — the settings below then have no effect.', 'ai-eshop-optimizer'); ?></p>
                        </td></tr>

                    <tr><td colspan="2" style="padding:6px 0 2px;"><strong style="font-size:13px;"><?php esc_html_e('Card frame', 'ai-eshop-optimizer'); ?></strong></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Border', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="card_border" value="<?php echo esc_attr($s['card_border']); ?>" placeholder="1px solid #1a1a1a" style="width:220px;">
                            <p class="description"><?php esc_html_e('CSS border shorthand, e.g. “1px solid #1a1a1a” or “none”.', 'ai-eshop-optimizer'); ?></p></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Corner radius', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="card_radius" value="<?php echo esc_attr($s['card_radius']); ?>" placeholder="0px" style="width:120px;"></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Background', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="card_bg" value="<?php echo esc_attr($s['card_bg']); ?>" class="aieo-color" placeholder="#ffffff" style="width:140px;"></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Image area background', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="img_bg" value="<?php echo esc_attr($s['img_bg']); ?>" class="aieo-color" placeholder="#ffffff" style="width:140px;">
                            <p class="description"><?php esc_html_e('Background behind the product image (was grey). Use “transparent” to match the card.', 'ai-eshop-optimizer'); ?></p></td></tr>

                    <tr><td colspan="2" style="padding:14px 0 2px;"><strong style="font-size:13px;"><?php esc_html_e('Sizing &amp; spacing', 'ai-eshop-optimizer'); ?></strong></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Card width (desktop)', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="card_width" value="<?php echo esc_attr($s['card_width']); ?>" placeholder="284px" style="width:120px;">
                            <p class="description"><?php esc_html_e('Lower it for thinner cards, e.g. 250px.', 'ai-eshop-optimizer'); ?></p></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Card height (desktop)', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="card_height" value="<?php echo esc_attr($s['card_height']); ?>" placeholder="455px" style="width:120px;"></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Gap between cards', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="card_gap" value="<?php echo esc_attr($s['card_gap']); ?>" placeholder="16px" style="width:120px;"></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Inner padding', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="card_padding" value="<?php echo esc_attr($s['card_padding']); ?>" placeholder="14px" style="width:120px;"></td></tr>

                    <tr><td colspan="2" style="padding:14px 0 2px;"><strong style="font-size:13px;"><?php esc_html_e('Title', 'ai-eshop-optimizer'); ?></strong></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Title — font size', 'ai-eshop-optimizer'); ?></th>
                        <td>
                            <label style="display:inline-block;margin-right:16px;"><span style="display:block;font-size:11px;color:#6b7280;"><?php esc_html_e('Desktop', 'ai-eshop-optimizer'); ?></span>
                                <input type="text" name="title_fs" value="<?php echo esc_attr($s['title_fs']); ?>" placeholder="1.375rem" style="width:130px;"></label>
                            <label style="display:inline-block;"><span style="display:block;font-size:11px;color:#6b7280;"><?php esc_html_e('Mobile', 'ai-eshop-optimizer'); ?></span>
                                <input type="text" name="title_fs_mobile" value="<?php echo esc_attr($s['title_fs_mobile']); ?>" placeholder="1.125rem" style="width:130px;"></label>
                        </td></tr>
                    <tr><th scope="row"><?php esc_html_e('Title — colour', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="title_color" value="<?php echo esc_attr($s['title_color']); ?>" class="aieo-color" placeholder="#c82d52" style="width:140px;"></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Title — font family', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="title_ff" value="<?php echo esc_attr($s['title_ff']); ?>" placeholder="inherit (theme default)" style="width:280px;">
                            <p class="description"><?php esc_html_e('CSS font-family, e.g. “Poppins, sans-serif”. Leave blank to use the theme font.', 'ai-eshop-optimizer'); ?></p></td></tr>

                    <tr><td colspan="2" style="padding:14px 0 2px;"><strong style="font-size:13px;"><?php esc_html_e('Price', 'ai-eshop-optimizer'); ?></strong></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Price — font size', 'ai-eshop-optimizer'); ?></th>
                        <td>
                            <label style="display:inline-block;margin-right:16px;"><span style="display:block;font-size:11px;color:#6b7280;"><?php esc_html_e('Desktop', 'ai-eshop-optimizer'); ?></span>
                                <input type="text" name="price_fs" value="<?php echo esc_attr($s['price_fs']); ?>" placeholder="1.25rem" style="width:130px;"></label>
                            <label style="display:inline-block;"><span style="display:block;font-size:11px;color:#6b7280;"><?php esc_html_e('Mobile', 'ai-eshop-optimizer'); ?></span>
                                <input type="text" name="price_fs_mobile" value="<?php echo esc_attr($s['price_fs_mobile']); ?>" placeholder="1.05rem" style="width:130px;"></label>
                        </td></tr>
                    <tr><th scope="row"><?php esc_html_e('Price — colour', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="price_color" value="<?php echo esc_attr($s['price_color']); ?>" class="aieo-color" placeholder="#1a1a1a" style="width:140px;"></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Was-price (strike) colour', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="price_muted" value="<?php echo esc_attr($s['price_muted']); ?>" class="aieo-color" placeholder="#9a9a9a" style="width:140px;"></td></tr>

                    <tr><td colspan="2" style="padding:14px 0 2px;"><strong style="font-size:13px;"><?php esc_html_e('Element padding — Desktop / Mobile', 'ai-eshop-optimizer'); ?></strong>
                        <span class="description" style="font-weight:normal;"> <?php esc_html_e('CSS padding, e.g. “8px” or “8px 0”.', 'ai-eshop-optimizer'); ?></span></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Image', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="img_pad" value="<?php echo esc_attr($s['img_pad']); ?>" placeholder="0" style="width:100px;margin-right:10px;">
                            <input type="text" name="img_pad_m" value="<?php echo esc_attr($s['img_pad_m']); ?>" placeholder="0" style="width:100px;"></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Title', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="title_pad" value="<?php echo esc_attr($s['title_pad']); ?>" placeholder="0" style="width:100px;margin-right:10px;">
                            <input type="text" name="title_pad_m" value="<?php echo esc_attr($s['title_pad_m']); ?>" placeholder="0" style="width:100px;"></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Price', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="price_pad" value="<?php echo esc_attr($s['price_pad']); ?>" placeholder="0" style="width:100px;margin-right:10px;">
                            <input type="text" name="price_pad_m" value="<?php echo esc_attr($s['price_pad_m']); ?>" placeholder="0" style="width:100px;"></td></tr>

                    <tr><td colspan="2" style="padding:14px 0 2px;"><strong style="font-size:13px;"><?php esc_html_e('Short description', 'ai-eshop-optimizer'); ?></strong></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Show short description', 'ai-eshop-optimizer'); ?></th>
                        <td><label><input type="checkbox" name="desc_show" value="1" <?php checked(!empty($s['desc_show'])); ?>> <?php esc_html_e('Display the product short description under the title (clamped to 2 lines)', 'ai-eshop-optimizer'); ?></label></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Description — colour', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="desc_color" value="<?php echo esc_attr($s['desc_color']); ?>" class="aieo-color" placeholder="#6b7280" style="width:140px;"></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Description — font size', 'ai-eshop-optimizer'); ?></th>
                        <td>
                            <label style="display:inline-block;margin-right:16px;"><span style="display:block;font-size:11px;color:#6b7280;"><?php esc_html_e('Desktop', 'ai-eshop-optimizer'); ?></span>
                                <input type="text" name="desc_fs" value="<?php echo esc_attr($s['desc_fs']); ?>" placeholder="0.85rem" style="width:120px;"></label>
                            <label style="display:inline-block;"><span style="display:block;font-size:11px;color:#6b7280;"><?php esc_html_e('Mobile', 'ai-eshop-optimizer'); ?></span>
                                <input type="text" name="desc_fs_m" value="<?php echo esc_attr($s['desc_fs_m']); ?>" placeholder="0.8rem" style="width:120px;"></label>
                        </td></tr>
                    <tr><th scope="row"><?php esc_html_e('Description — padding (Desktop / Mobile)', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="desc_pad" value="<?php echo esc_attr($s['desc_pad']); ?>" placeholder="0" style="width:100px;margin-right:10px;">
                            <input type="text" name="desc_pad_m" value="<?php echo esc_attr($s['desc_pad_m']); ?>" placeholder="0" style="width:100px;"></td></tr>

                    <tr><td colspan="2" style="padding:14px 0 2px;"><strong style="font-size:13px;"><?php esc_html_e('Ratings', 'ai-eshop-optimizer'); ?></strong></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Show ratings under price', 'ai-eshop-optimizer'); ?></th>
                        <td><label><input type="checkbox" name="rating_show" value="1" <?php checked(!empty($s['rating_show'])); ?>> <?php esc_html_e('Display the read-only star rating under the price', 'ai-eshop-optimizer'); ?></label></td></tr>

                    <tr><td colspan="2" style="padding:14px 0 2px;"><strong style="font-size:13px;"><?php esc_html_e('Carousel scroll bar (mobile)', 'ai-eshop-optimizer'); ?></strong></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Scroll thumb colour', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="scroll_thumb_color" value="<?php echo esc_attr($s['scroll_thumb_color']); ?>" class="aieo-color" placeholder="#c82d52" style="width:140px;">
                            <p class="description"><?php esc_html_e('Colour of the moving progress thumb under the mobile carousel.', 'ai-eshop-optimizer'); ?></p></td></tr>
                    <tr><th scope="row"><?php esc_html_e('Track line colour', 'ai-eshop-optimizer'); ?></th>
                        <td><input type="text" name="scroll_line_color" value="<?php echo esc_attr($s['scroll_line_color']); ?>" class="aieo-color" placeholder="#1a1a1a" style="width:140px;">
                            <p class="description"><?php esc_html_e('Colour of the thin line under the thumb.', 'ai-eshop-optimizer'); ?></p></td></tr>
                </table>
                <p class="submit">
                    <button type="submit" class="button button-primary" id="aieo-dmm-product-card-save"><?php esc_html_e('Save', 'ai-eshop-optimizer'); ?></button>
                    <span id="aieo-dmm-product-card-status" style="margin-left:12px;font-weight:600;"></span>
                </p>
            </form>
        </div>
        <script>
        (function () {
            var f = document.getElementById('aieo-dmm-product-card-form');
            var st = document.getElementById('aieo-dmm-product-card-status');
            if (!f) { return; }
            f.addEventListener('submit', function (e) {
                e.preventDefault();
                var fd = new FormData(f);
                fd.append('action', 'aieo_dmm_product_card_save');
                fd.append('nonce', <?php echo wp_json_encode($nonce); ?>);
                if (st) { st.style.color = '#6b7280'; st.textContent = <?php echo wp_json_encode(__('Saving…', 'ai-eshop-optimizer')); ?>; }
                fetch(<?php echo wp_json_encode($ajax); ?>, { method: 'POST', credentials: 'same-origin', body: fd })
                    .then(function (r) { return r.json(); })
                    .then(function (j) {
                        if (!st) { return; }
                        if (j && j.success) { st.style.color = '#15803d'; st.textContent = <?php echo wp_json_encode(__('Saved ✓', 'ai-eshop-optimizer')); ?>; }
                        else { st.style.color = '#b91c1c'; st.textContent = <?php echo wp_json_encode(__('Save failed.', 'ai-eshop-optimizer')); ?>; }
                    })
                    .catch(function () { if (st) { st.style.color = '#b91c1c'; st.textContent = 'Network error.'; } });
            });
        })();
        </script>
        <?php
    }
}
