<?php
// phpcs:disable WordPress.DB.DirectDatabaseQuery -- Settings are read from a plugin-owned table.

if (! defined('ABSPATH')) exit; // Exit if accessed directly

// Get advance data for editing (similar to video extension pattern)
global $wpdb;
$instant_popup_builder_advance = new stdClass();
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameter used for popup ID retrieval, value is sanitized
if (isset($_GET['edit_id']) && !empty($_GET['edit_id'])) {
    // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameter used for popup ID retrieval, value is sanitized
    $id = absint(sanitize_text_field(wp_unslash($_GET['edit_id'])));
    $instant_popup_builder_row = $wpdb->get_results($wpdb->prepare("SELECT * FROM {$wpdb->prefix}instant_popup_builder WHERE id=%d", $id));
    if ($instant_popup_builder_row) {
        $instant_popup_builder_advance = isset($instant_popup_builder_row[0]->advance) ? json_decode($instant_popup_builder_row[0]->advance) : new stdClass();
    }
}

// Initialize default values (use advance data if editing, defaults if creating new)
$instant_popup_builder_gallery_thumbnail_position = isset($instant_popup_builder_advance->gallery_thumbnail_position) ? $instant_popup_builder_advance->gallery_thumbnail_position : 'bottom';
$instant_popup_builder_gallery_thumbnail_size = isset($instant_popup_builder_advance->gallery_thumbnail_size) ? $instant_popup_builder_advance->gallery_thumbnail_size : 'medium';
$instant_popup_builder_gallery_thumbnail_spacing = isset($instant_popup_builder_advance->gallery_thumbnail_spacing) ? $instant_popup_builder_advance->gallery_thumbnail_spacing : '10';
$instant_popup_builder_gallery_visible_thumbnails = isset($instant_popup_builder_advance->gallery_visible_thumbnails) ? $instant_popup_builder_advance->gallery_visible_thumbnails : '5';
$instant_popup_builder_gallery_auto_play = isset($instant_popup_builder_advance->gallery_auto_play) ? $instant_popup_builder_advance->gallery_auto_play : 'no';
$instant_popup_builder_gallery_auto_play_speed = isset($instant_popup_builder_advance->gallery_auto_play_speed) ? $instant_popup_builder_advance->gallery_auto_play_speed : '3000';
$instant_popup_builder_gallery_transition_effect = isset($instant_popup_builder_advance->gallery_transition_effect) ? $instant_popup_builder_advance->gallery_transition_effect : 'fade';
$instant_popup_builder_gallery_show_captions = isset($instant_popup_builder_advance->gallery_show_captions) ? $instant_popup_builder_advance->gallery_show_captions : 'no';
$instant_popup_builder_gallery_show_counter = isset($instant_popup_builder_advance->gallery_show_counter) ? $instant_popup_builder_advance->gallery_show_counter : 'yes';
$instant_popup_builder_gallery_show_navigation = isset($instant_popup_builder_advance->gallery_show_navigation) ? $instant_popup_builder_advance->gallery_show_navigation : 'yes';
$instant_popup_builder_gallery_lightbox_mode = isset($instant_popup_builder_advance->gallery_lightbox_mode) ? $instant_popup_builder_advance->gallery_lightbox_mode : 'no';

?>
<!-- Image Gallery setting -->
<div class="ipb-section">
 <div class="ipb-section-header">
    <h3>Image Gallery Settings</h3>
</div>
<div class="ipb-section-content" data-section="display">
<div class="design_background">
    <div class="ipb_background_wrapper">

        <div class="background_field">
            <div class="label">
                Thumbnail Position
            </div>
            <div class="background_content">
                <select name="gallery_thumbnail_position" id="gallery_thumbnail_position">
                    <option value="none" <?php selected($instant_popup_builder_gallery_thumbnail_position, 'none'); ?>>None</option>
                    <option value="bottom" <?php selected($instant_popup_builder_gallery_thumbnail_position, 'bottom'); ?>>Bottom</option>
                    <option value="top" <?php selected($instant_popup_builder_gallery_thumbnail_position, 'top'); ?>>Top</option>
                    <option value="left" <?php selected($instant_popup_builder_gallery_thumbnail_position, 'left'); ?>>Left</option>
                    <option value="right" <?php selected($instant_popup_builder_gallery_thumbnail_position, 'right'); ?>>Right</option>
                </select>
            </div>
        </div>

        <div class="background_field">
            <div class="label">
                Thumbnail Size
            </div>
            <div class="background_content">
                <select name="gallery_thumbnail_size" id="gallery_thumbnail_size">
                    <option value="small" <?php selected($instant_popup_builder_gallery_thumbnail_size, 'small'); ?>>Small (80px)</option>
                    <option value="medium" <?php selected($instant_popup_builder_gallery_thumbnail_size, 'medium'); ?>>Medium (120px)</option>
                    <option value="large" <?php selected($instant_popup_builder_gallery_thumbnail_size, 'large'); ?>>Large (160px)</option>
                </select>
            </div>
        </div>

        <div class="background_field">
            <div class="label">
                Thumbnail Spacing (px)
            </div>
            <div class="background_content">
                <input type="number" name="gallery_thumbnail_spacing" id="gallery_thumbnail_spacing" value="<?php echo esc_attr($instant_popup_builder_gallery_thumbnail_spacing); ?>" min="0" max="50">
            </div>
        </div>

        <div class="background_field">
            <div class="label">
                Visible Thumbnails
            </div>
            <div class="background_content">
                <input type="number" name="gallery_visible_thumbnails" id="gallery_visible_thumbnails" value="<?php echo esc_attr($instant_popup_builder_gallery_visible_thumbnails); ?>" min="3" max="10">
            </div>
        </div>

        <div class="background_field">
            <div class="label">
                Auto Play Slideshow
            </div>
            <div class="input toggle switch">
                <input type="checkbox" name="gallery_auto_play" id="gallery_auto_play" value="yes" <?php checked($instant_popup_builder_gallery_auto_play, 'yes'); ?>>
                <span class="slider round"></span>
            </div>
        </div>

        <div class="background_field gallery_auto_play_speed_field" style="display:<?php echo ($instant_popup_builder_gallery_auto_play == 'yes') ? 'block' : 'none'; ?>;">
            <div class="label">
                Auto Play Speed (ms)
            </div>
            <div class="background_content">
                <input type="number" name="gallery_auto_play_speed" id="gallery_auto_play_speed" value="<?php echo esc_attr($instant_popup_builder_gallery_auto_play_speed); ?>" min="1000" max="10000" step="500">
            </div>
        </div>

        <div class="background_field">
            <div class="label">
                Transition Effect
            </div>
            <div class="background_content">
                <select name="gallery_transition_effect" id="gallery_transition_effect">
                    <option value="fade" <?php selected($instant_popup_builder_gallery_transition_effect, 'fade'); ?>>Fade</option>
                    <option value="slide" <?php selected($instant_popup_builder_gallery_transition_effect, 'slide'); ?>>Slide</option>
                    <option value="zoom" <?php selected($instant_popup_builder_gallery_transition_effect, 'zoom'); ?>>Zoom</option>
                    <option value="flip" <?php selected($instant_popup_builder_gallery_transition_effect, 'flip'); ?>>Flip</option>
                </select>
            </div>
        </div>

        <div class="background_field">
            <div class="label">
                Show Captions
            </div>
            <div class="input toggle switch">
                <input type="checkbox" name="gallery_show_captions" id="gallery_show_captions" value="yes" <?php checked($instant_popup_builder_gallery_show_captions, 'yes'); ?>>
                <span class="slider round"></span>
            </div>
        </div>

        <div class="background_field">
            <div class="label">
                Show Image Counter
            </div>
            <div class="input toggle switch">
                <input type="checkbox" name="gallery_show_counter" id="gallery_show_counter" value="yes" <?php checked($instant_popup_builder_gallery_show_counter, 'yes'); ?>>
                <span class="slider round"></span>
            </div>
        </div>

        <div class="background_field">
            <div class="label">
                Show Navigation Arrows
            </div>
            <div class="input toggle switch">
                <input type="checkbox" name="gallery_show_navigation" id="gallery_show_navigation" value="yes" <?php checked($instant_popup_builder_gallery_show_navigation, 'yes'); ?>>
                <span class="slider round"></span>
            </div>
        </div>

        <div class="background_field">
            <div class="label">
                Lightbox Mode
            </div>
            <div class="input toggle switch">
                <input type="checkbox" name="gallery_lightbox_mode" id="gallery_lightbox_mode" value="yes" <?php checked($instant_popup_builder_gallery_lightbox_mode, 'yes'); ?>>
                <span class="slider round"></span>
            </div>
        </div>

    </div>
</div>
</div>
</div>
<script>
// Show/hide auto play speed field based on auto play setting
jQuery(document).ready(function($) {
    function toggleAutoPlaySpeed() {
        if ($('#gallery_auto_play').is(':checked')) {
            $('.gallery_auto_play_speed_field').show();
        } else {
            $('.gallery_auto_play_speed_field').hide();
        }
    }

    $('#gallery_auto_play').change(toggleAutoPlaySpeed);
    toggleAutoPlaySpeed(); // Initial check
    jQuery('.v_tabs_list li').click(function(){
      var gly_tb = jQuery('.image_gallery').hasClass('active');
      if(!gly_tb){
       jQuery('#image_gallery').removeClass('active');
      }
    });
});
</script>
