<?php
/*
Plugin Name: Image on Select with Color Options
Description: Changes an image based on color options selected after clicking a button.
Version: 1.0
Author: Kishan Variya
*/

function ios_enqueue_scripts() {
    wp_enqueue_script('ios-script', plugins_url('/js/ios-script.js', __FILE__), array('jquery'), '1.2', true);
    wp_enqueue_style('ios-style', plugins_url('/css/ios-style.css', __FILE__));

    wp_localize_script('ios-script', 'ios_images_path', array(
        'path' => plugins_url('/images/', __FILE__)
    ));
}
add_action('wp_enqueue_scripts', 'ios_enqueue_scripts');

function ios_shortcode() {
    ob_start(); ?>
    <div id="image-on-select-container">
        <img id="main-image" src="<?php echo plugins_url('/images/banner-image.png', __FILE__); ?>" alt="Main Image">
        
        <div class="plus-button" data-id="1" style="position: absolute; top: 65%; left: 25%;">+</div>
        <div class="plus-button" data-id="2" style="position: absolute; top: 49%; left: 50%;">+</div>
        <div class="plus-button" data-id="3" style="position: absolute; top: 80%; left: 65%;">+</div>
        
        
        <div id="color-options-container" style="display: none; position: absolute;">
            <div id="color-options" style="display: flex; gap: 10px;">
                <!-- Color options will be populated by JS -->
            </div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('image_on_select', 'ios_shortcode');

?>