<?php

if (!defined('ABSPATH')) { exit; }
?>
<div class="aieo-dmm-section">
    <h2><?php esc_html_e('Complementary Products — display settings', 'ai-eshop-optimizer'); ?></h2>
    <p class="description">
        <?php esc_html_e('Style the "Complete your purchase with…" picker block on single product pages. These values apply globally to every complementary set; per-source title text + button labels stay on the data-side page.', 'ai-eshop-optimizer'); ?>
    </p>

    <form id="aieo-dmm-complementary-appearance-form" class="aieo-dmm-form">

        <div class="aieo-dmm-card">
            <h3><?php esc_html_e('Card', 'ai-eshop-optimizer'); ?></h3>
            <table class="form-table">
                <tr>
                    <th><?php esc_html_e('Title size (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="8" max="48" name="title_size" value="<?php echo (int) $appearance['title_size']; ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Body text size (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="8" max="32" name="text_size" value="<?php echo (int) $appearance['text_size']; ?>" class="small-text">
                        <p class="description"><?php esc_html_e('Drives product name, price, and button text size.', 'ai-eshop-optimizer'); ?></p>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Background color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="bg_color" value="<?php echo esc_attr((string) $appearance['bg_color']); ?>" class="aieo-dmm-compl-color" data-default-color="#fafafa"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="border_color" value="<?php echo esc_attr((string) $appearance['border_color']); ?>" class="aieo-dmm-compl-color" data-default-color="#e2e2e2"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border thickness (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="10" name="border_width" value="<?php echo (int) $appearance['border_width']; ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border radius (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="40" name="border_radius" value="<?php echo (int) $appearance['border_radius']; ?>" class="small-text"></td>
                </tr>
            </table>
        </div>

        <div class="aieo-dmm-card">
            <h3><?php esc_html_e('"Add selected to cart" button', 'ai-eshop-optimizer'); ?></h3>
            <table class="form-table">
                <tr>
                    <th><?php esc_html_e('Background color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="btn_bg_color" value="<?php echo esc_attr((string) $appearance['btn_bg_color']); ?>" class="aieo-dmm-compl-color" data-default-color="#222222"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Text color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="btn_text_color" value="<?php echo esc_attr((string) $appearance['btn_text_color']); ?>" class="aieo-dmm-compl-color" data-default-color="#ffffff"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="btn_border_color" value="<?php echo esc_attr((string) $appearance['btn_border_color']); ?>" class="aieo-dmm-compl-color" data-default-color="#222222"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border thickness (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="10" name="btn_border_width" value="<?php echo (int) $appearance['btn_border_width']; ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border radius (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="40" name="btn_border_radius" value="<?php echo (int) $appearance['btn_border_radius']; ?>" class="small-text"></td>
                </tr>
            </table>
        </div>

        <p class="submit">
            <button type="submit" class="button button-primary aieo-dmm-btn-fixed" data-action="aieo_dmm_complementary_save_appearance">
                <?php esc_html_e('Save appearance', 'ai-eshop-optimizer'); ?>
            </button>
        </p>
    </form>
</div>
