<?php
// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

/**
 * Add mega menu custom fields to menu items
 */
function roardev_mmb_menu_item_fields($item_id)
{
    $enabled = get_post_meta($item_id, '_roardev_mmb_enabled', true);
    $layout = get_post_meta($item_id, '_roardev_mmb_layout', true);
    $trigger = get_post_meta($item_id, '_roardev_mmb_trigger', true) ?: 'hover';

    $menus = get_posts(array('post_type' => 'roardev_mega_menu', 'numberposts' => -1));
    ?>
    <p class="description-wide">
        <label>
            <input type="checkbox" name="roardev_mmb_enabled[<?php echo esc_attr($item_id); ?>]" value="1" <?php checked($enabled, 1); ?>>
            Enable Mega Menu
        </label>
    </p>

    <p class="description-wide">
        <label>Mega Menu Layout</label>
        <select name="roardev_mmb_layout[<?php echo esc_attr($item_id); ?>]">
            <option value="">Select layout</option>
            <?php foreach ($menus as $menu): ?>
                <option value="<?php echo esc_attr($menu->ID); ?>" <?php selected($layout, $menu->ID); ?>>
                    <?php echo esc_html($menu->post_title); ?>
                </option>
            <?php endforeach; ?>
        </select>
    </p>

    <p class="description-wide">
        <label>Trigger</label>
        <select name="roardev_mmb_trigger[<?php echo esc_attr($item_id); ?>]">
            <option value="hover" <?php selected($trigger, 'hover'); ?>>Hover</option>
            <option value="click" <?php selected($trigger, 'click'); ?>>Click</option>
        </select>
    </p>

    <?php $width = get_post_meta($item_id, '_roardev_mmb_width', true) ?: 'container'; ?>
    <p class="description-wide">
        <label>Mega Menu Width</label>
        <select name="roardev_mmb_width[<?php echo esc_attr($item_id); ?>]" class="roardev-mmb-width-select"
            data-item-id="<?php echo esc_attr($item_id); ?>">
            <option value="container" <?php selected($width, 'container'); ?>>Container Width (1200px)</option>
            <option value="custom" <?php selected($width, 'custom'); ?>>Custom Width</option>
        </select>
    </p>

    <?php $custom_width = get_post_meta($item_id, '_roardev_mmb_custom_width', true) ?: '800px'; ?>
    <p class="description-wide roardev-mmb-custom-width-field"
        style="display: <?php echo $width === 'custom' ? 'block' : 'none'; ?>;"
        data-item-id="<?php echo esc_attr($item_id); ?>">
        <label>Custom Width (e.g., 800px, 60%, 1400px)</label>
        <input type="text" name="roardev_mmb_custom_width[<?php echo esc_attr($item_id); ?>]"
            value="<?php echo esc_attr($custom_width); ?>" placeholder="800px" class="widefat">
        <span class="description">Enter a width value with unit (px, %, vw, etc.)</span>
    </p>

    <p class="description-wide" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd;">
        <strong>Styling Options</strong>
    </p>

    <?php $bg_color = get_post_meta($item_id, '_roardev_mmb_bg_color', true) ?: '#ffffff'; ?>
    <p class="description-wide">
        <label>Background Color</label><br>
        <input type="text" name="roardev_mmb_bg_color[<?php echo esc_attr($item_id); ?>]"
            value="<?php echo esc_attr($bg_color); ?>" class="roardev-mmb-color-picker-<?php echo esc_attr($item_id); ?>"
            data-default-color="#ffffff">
        <span class="description">Choose the background color for the mega menu</span>
    </p>

    <?php $border_radius = get_post_meta($item_id, '_roardev_mmb_border_radius', true) ?: '0'; ?>
    <p class="description-wide">
        <label>Border Radius (px)</label>
        <input type="number" name="roardev_mmb_border_radius[<?php echo esc_attr($item_id); ?>]"
            value="<?php echo esc_attr($border_radius); ?>" min="0" max="50" class="small-text">
        <span class="description">Rounded corners (0-50px)</span>
    </p>

    <?php $margin = get_post_meta($item_id, '_roardev_mmb_margin', true) ?: '0'; ?>
    <p class="description-wide">
        <label>Top Margin (px)</label>
        <input type="number" name="roardev_mmb_margin[<?php echo esc_attr($item_id); ?>]"
            value="<?php echo esc_attr($margin); ?>" min="-100" max="100" class="small-text">
        <span class="description">Space between navbar and mega menu (-100 to 100px, negative overlaps navbar)</span>
    </p>

    <?php $padding = get_post_meta($item_id, '_roardev_mmb_padding', true) ?: '20'; ?>
    <p class="description-wide">
        <label>Internal Padding (px)</label>
        <input type="number" name="roardev_mmb_padding[<?php echo esc_attr($item_id); ?>]"
            value="<?php echo esc_attr($padding); ?>" min="0" max="100" class="small-text">
        <span class="description">Inner spacing around content (0-100px)</span>
    </p>
    <?php
}
add_action('wp_nav_menu_item_custom_fields', 'roardev_mmb_menu_item_fields', 10, 1);
