<?php

if (!defined('ABSPATH')) { exit; }
?>
<div class="aieo-dmm-section">
    <h2><?php esc_html_e('Product needs', 'ai-eshop-optimizer'); ?></h2>
    <p class="description">
        <?php esc_html_e('When the front-end gate is OFF, PPE\'s Product Needs module renders. When it\'s ON, AIEO renders the list using the styling below — disable PPE\'s Product Needs module then to avoid duplicate output.', 'ai-eshop-optimizer'); ?>
    </p>

    <form id="aieo-dmm-needs-display-form" class="aieo-dmm-form">

        <div class="aieo-dmm-card">
            <h3><?php esc_html_e('Front-end gate', 'ai-eshop-optimizer'); ?></h3>
            <table class="form-table">
                <tr>
                    <th><?php esc_html_e('Render front-end list', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice">
                            <input type="checkbox" name="enabled" value="1" <?php checked(!empty($display['enabled'])); ?>>
                            <?php esc_html_e('Render the AIEO product-needs list on single product pages. This is the SAME switch as the “Product Needs” toggle in the Storefront Display dashboard.', 'ai-eshop-optimizer'); ?>
                        </label>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Location', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice"><input type="radio" name="display_location" value="summary" <?php checked($display['display_location'], 'summary'); ?>> <?php esc_html_e('Product summary (after Add to Cart)', 'ai-eshop-optimizer'); ?></label>
                        &nbsp;
                        <label class="aieo-dmm-choice"><input type="radio" name="display_location" value="tab" <?php checked($display['display_location'], 'tab'); ?>> <?php esc_html_e('As a product tab', 'ai-eshop-optimizer'); ?></label>
                    </td>
                </tr>
            </table>
        </div>

        <div class="aieo-dmm-card">
            <h3><?php esc_html_e('Text', 'ai-eshop-optimizer'); ?></h3>
            <table class="form-table">
                <tr>
                    <th><?php esc_html_e('List title (summary mode)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="title" value="<?php echo esc_attr($display['title']); ?>" class="large-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Show title', 'ai-eshop-optimizer'); ?></th>
                    <td><label class="aieo-dmm-choice"><input type="checkbox" name="show_title" value="1" <?php checked(!empty($display['show_title'])); ?>> <?php esc_html_e('Display the list title above the needs (summary mode).', 'ai-eshop-optimizer'); ?></label></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Tab title', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="tab_title" value="<?php echo esc_attr($display['tab_title']); ?>" class="regular-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Tab priority', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" min="1" max="999" name="tab_priority" value="<?php echo (int) $display['tab_priority']; ?>" class="small-text">
                        <p class="description" style="font-weight:400;"><?php esc_html_e('Lower numbers appear earlier. WC defaults: Description=10, Additional Info=20, Reviews=30.', 'ai-eshop-optimizer'); ?></p>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Make needs clickable', 'ai-eshop-optimizer'); ?></th>
                    <td><label class="aieo-dmm-choice"><input type="checkbox" name="show_links" value="1" <?php checked($display['show_links'], 'yes'); ?>> <?php esc_html_e('Link each need to its taxonomy archive.', 'ai-eshop-optimizer'); ?></label></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Show descriptions on hover', 'ai-eshop-optimizer'); ?></th>
                    <td><label class="aieo-dmm-choice"><input type="checkbox" name="show_descriptions" value="1" <?php checked($display['show_descriptions'], 'yes'); ?>> <?php esc_html_e('Use the term\'s description as a native browser tooltip.', 'ai-eshop-optimizer'); ?></label></td>
                </tr>
            </table>
        </div>

        <div class="aieo-dmm-card">
            <h3><?php esc_html_e('Appearance', 'ai-eshop-optimizer'); ?></h3>
            <table class="form-table">
                <tr>
                    <th><?php esc_html_e('List style', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <select name="display_style" id="aieo-pn-display-style">
                            <option value="list"  <?php selected($display['display_style'] ?? 'list', 'list'); ?>><?php esc_html_e('List (stacked, one per line)', 'ai-eshop-optimizer'); ?></option>
                            <option value="pills" <?php selected($display['display_style'] ?? 'list', 'pills'); ?>><?php esc_html_e('Pills (tag-style, side by side)', 'ai-eshop-optimizer'); ?></option>
                        </select>
                        <p class="description" style="font-weight:400;"><?php esc_html_e('“Pills” shows each need as a tag chip. Style the chips in the “Pill style” card below.', 'ai-eshop-optimizer'); ?></p>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Alignment', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <select name="align">
                            <option value="flex-start" <?php selected($display['align'], 'flex-start'); ?>><?php esc_html_e('Left', 'ai-eshop-optimizer'); ?></option>
                            <option value="center"     <?php selected($display['align'], 'center'); ?>><?php esc_html_e('Center', 'ai-eshop-optimizer'); ?></option>
                            <option value="flex-end"   <?php selected($display['align'], 'flex-end'); ?>><?php esc_html_e('Right', 'ai-eshop-optimizer'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Icon', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <?php $icon_kind = isset($display['icon_kind']) ? (string) $display['icon_kind'] : 'check'; ?>
                        <?php $icon_url  = isset($display['icon_url'])  ? (string) $display['icon_url']  : ''; ?>
                        <?php $icon_aid  = isset($display['icon_attachment_id']) ? (int) $display['icon_attachment_id'] : 0; ?>
                        <label class="aieo-dmm-choice"><input type="radio" name="icon_kind" value="check"  <?php checked($icon_kind, 'check'); ?>> <?php esc_html_e('Default checkmark', 'ai-eshop-optimizer'); ?></label>
                        &nbsp;
                        <label class="aieo-dmm-choice"><input type="radio" name="icon_kind" value="custom" <?php checked($icon_kind, 'custom'); ?>> <?php esc_html_e('Custom image', 'ai-eshop-optimizer'); ?></label>
                        &nbsp;
                        <label class="aieo-dmm-choice"><input type="radio" name="icon_kind" value="none"   <?php checked($icon_kind, 'none'); ?>> <?php esc_html_e('No icon', 'ai-eshop-optimizer'); ?></label>

                        <div class="aieo-dmm-pn-icon-widget" style="margin-top:10px;<?php echo ($icon_kind === 'custom' ? '' : 'display:none;'); ?>">
                            <input type="hidden" name="icon_attachment_id" value="<?php echo (int) $icon_aid; ?>">
                            <input type="url" name="icon_url" value="<?php echo esc_attr($icon_url); ?>" class="regular-text" placeholder="https://...">
                            <button type="button" class="button aieo-dmm-pn-icon-pick"><?php esc_html_e('Choose image', 'ai-eshop-optimizer'); ?></button>
                            <button type="button" class="button-link-delete aieo-dmm-pn-icon-clear" style="<?php echo ($icon_url === '' ? 'display:none;' : ''); ?>"><?php esc_html_e('Remove', 'ai-eshop-optimizer'); ?></button>
                            <div style="margin-top:8px;">
                                <img class="aieo-dmm-pn-icon-preview" src="<?php echo esc_url($icon_url); ?>" alt="" style="max-width:32px;max-height:32px;<?php echo ($icon_url === '' ? 'display:none;' : ''); ?>">
                            </div>
                            <p class="description" style="font-weight:400;"><?php esc_html_e('PNG / SVG / JPG. Rendered at 20×20px next to each need.', 'ai-eshop-optimizer'); ?></p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Icon color (default checkmark)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="icon_color" value="<?php echo esc_attr($display['icon_color']); ?>" class="aieo-dmm-pn-color" data-default-color="#27ae60"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Text color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="text_color" value="<?php echo esc_attr($display['text_color']); ?>" class="aieo-dmm-pn-color" data-default-color="#333333"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Link color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="link_color" value="<?php echo esc_attr($display['link_color']); ?>" class="aieo-dmm-pn-color" data-default-color="#0073aa"></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($display['bg_color']); ?>" class="aieo-dmm-pn-color" data-default-color="#f8f9fa"></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($display['border_color']); ?>" class="aieo-dmm-pn-color" data-default-color="#e9ecef"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border width (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="20" name="border_width" value="<?php echo (int) ($display['border_width'] ?? 1); ?>" 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="100" name="border_radius" value="<?php echo (int) ($display['border_radius'] ?? 0); ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Margin top (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="200" name="margin_top" value="<?php echo (int) $display['margin_top']; ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Margin bottom (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="200" name="margin_bottom" value="<?php echo (int) $display['margin_bottom']; ?>" class="small-text"></td>
                </tr>
            </table>
        </div>

        <div class="aieo-dmm-card" id="aieo-pn-pill-card">
            <h3><?php esc_html_e('Pill style', 'ai-eshop-optimizer'); ?></h3>
            <p class="description" style="font-weight:400;margin-top:-4px;"><?php esc_html_e('Applies when “List style” above is set to Pills.', 'ai-eshop-optimizer'); ?></p>
            <table class="form-table">
                <tr>
                    <th><?php esc_html_e('Text size (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="8" max="40" name="pill_text_size" value="<?php echo (int) ($display['pill_text_size'] ?? 13); ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Corner radius (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="100" name="pill_radius" value="<?php echo (int) ($display['pill_radius'] ?? 16); ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Padding — vertical (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="60" name="pill_pad_v" value="<?php echo (int) ($display['pill_pad_v'] ?? 6); ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Padding — horizontal (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="80" name="pill_pad_h" value="<?php echo (int) ($display['pill_pad_h'] ?? 12); ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Space between pills (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="60" name="pill_gap" value="<?php echo (int) ($display['pill_gap'] ?? 8); ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Background color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="pill_bg" value="<?php echo esc_attr($display['pill_bg'] ?? '#eef1f4'); ?>" class="aieo-dmm-pn-color" data-default-color="#eef1f4"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border width (px)', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" min="0" max="20" name="pill_border_width" value="<?php echo (int) ($display['pill_border_width'] ?? 1); ?>" class="small-text"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="pill_border_color" value="<?php echo esc_attr($display['pill_border_color'] ?? '#d6dbe1'); ?>" class="aieo-dmm-pn-color" data-default-color="#d6dbe1"></td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Text color', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="text" name="pill_text_color" value="<?php echo esc_attr($display['pill_text_color'] ?? '#333333'); ?>" class="aieo-dmm-pn-color" data-default-color="#333333"></td>
                </tr>
            </table>
        </div>

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

<script>
jQuery(function ($) {
    var $form    = $('#aieo-dmm-needs-display-form');
    if (!$form.length) { return; }
    var $widget  = $form.find('.aieo-dmm-pn-icon-widget');
    var $url     = $widget.find('input[name="icon_url"]');
    var $aid     = $widget.find('input[name="icon_attachment_id"]');
    var $preview = $widget.find('.aieo-dmm-pn-icon-preview');
    var $clear   = $widget.find('.aieo-dmm-pn-icon-clear');

    // Toggle the custom-image widget when the kind radio flips.
    $form.on('change', 'input[name="icon_kind"]', function () {
        $widget.toggle($(this).val() === 'custom');
    });

    // Show the Pill style card only when the list style is "pills".
    var $styleSel = $('#aieo-pn-display-style');
    var $pillCard = $('#aieo-pn-pill-card');
    function syncPillCard() { $pillCard.toggle($styleSel.val() === 'pills'); }
    $styleSel.on('change', syncPillCard);
    syncPillCard();

    // Open the WP media frame and copy the chosen image URL/id.
    var frame;
    $widget.on('click', '.aieo-dmm-pn-icon-pick', function (e) {
        e.preventDefault();
        if (!frame) {
            frame = wp.media({
                title:    '<?php echo esc_js(__('Select icon', 'ai-eshop-optimizer')); ?>',
                button:   { text: '<?php echo esc_js(__('Use this icon', 'ai-eshop-optimizer')); ?>' },
                library:  { type: 'image' },
                multiple: false,
            });
            frame.on('select', function () {
                var att = frame.state().get('selection').first().toJSON();
                var u = (att.sizes && att.sizes.thumbnail) ? att.sizes.thumbnail.url : att.url;
                $url.val(u);
                $aid.val(att.id || 0);
                $preview.attr('src', u).show();
                $clear.show();
            });
        }
        frame.open();
    });

    $widget.on('click', '.aieo-dmm-pn-icon-clear', function (e) {
        e.preventDefault();
        $url.val('');
        $aid.val(0);
        $preview.attr('src', '').hide();
        $clear.hide();
    });
});
</script>
