<?php
/**
 * Blog Over Customizer - Loading Screen Section
 * 
 * Settings for the page loading screen/loader animation
 *
 * @package Blog_Over
 */

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

// Check if Kirki exists
if (!class_exists('Kirki')) {
    return;
}

/**
 * ===========================================
 * SECTION: Loading Screen
 * ===========================================
 */
Kirki::add_section('blog_over_loading_screen_section', array(
    'title' => esc_html__('Loading Screen', 'blog-over'),
    'panel' => 'blog_over_theme_panel',
    'priority' => 5,
));

// Enable/Disable Loading Screen
Kirki::add_field('Blog_Over_config', array(
    'type' => 'toggle',
    'settings' => 'blog_over_loading_screen_enable',
    'label' => esc_html__('Enable Loading Screen', 'blog-over'),
    'description' => esc_html__('Show an animated loader while the page is loading.', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 10,
    'default' => true,
    'wrapper_attrs' => array(
        'class' => '{default_class} blog-over-tab-all',
    ),
));

// TABS CONTROL
Kirki::add_field('Blog_Over_config', array(
    'type' => 'blog-over-tabs',
    'settings' => 'blog_over_loading_screen_tabs',
    'section' => 'blog_over_loading_screen_section',
    'priority' => 0.5,
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
    ),
));

// Loader Style
Kirki::add_field('Blog_Over_config', array(
    'type' => 'select',
    'settings' => 'blog_over_loader_style',
    'label' => esc_html__('Loader Style', 'blog-over'),
    'description' => esc_html__('Choose the animation style for the loader.', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 20,
    'default' => 'spinner',
    'choices' => blog_over_get_loader_style_choices(),
    'sanitize_callback' => 'blog_over_sanitize_select',
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
    ),
));

// Loader Size
Kirki::add_field('Blog_Over_config', array(
    'type' => 'radio-buttonset',
    'settings' => 'blog_over_loader_size',
    'label' => esc_html__('Loader Size', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 30,
    'wrapper_attrs' => array(
        'class' => '{default_class} blog-over-tab-design',
    ),
    'default' => 'medium',
    'choices' => array(
        'small' => esc_html__('Small', 'blog-over'),
        'medium' => esc_html__('Medium', 'blog-over'),
        'large' => esc_html__('Large', 'blog-over'),
    ),
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
    ),
));

// Loader Color
Kirki::add_field('Blog_Over_config', array(
    'type' => 'color',
    'settings' => 'blog_over_loader_color',
    'label' => esc_html__('Loader Color', 'blog-over'),
    'description' => esc_html__('Color of the loading animation.', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 40,
    'wrapper_attrs' => array(
        'class' => '{default_class} blog-over-tab-design',
    ),
    'default' => '#ffffff',
    'choices' => array('alpha' => true),
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
    ),
));

// Background Type
Kirki::add_field('Blog_Over_config', array(
    'type' => 'radio-buttonset',
    'settings' => 'blog_over_loader_bg_type',
    'label' => esc_html__('Background Type', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 50,
    'wrapper_attrs' => array(
        'class' => '{default_class} blog-over-tab-design',
    ),
    'default' => 'gradient',
    'choices' => blog_over_get_loader_bg_type_choices(),
    'sanitize_callback' => 'blog_over_sanitize_select',
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
    ),
));

// Solid Background Color
Kirki::add_field('Blog_Over_config', array(
    'type' => 'color',
    'settings' => 'blog_over_loader_bg_color',
    'label' => esc_html__('Background Color', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 55,
    'wrapper_attrs' => array(
        'class' => '{default_class} blog-over-tab-design',
    ),
    'default' => '#667eea',
    'choices' => array('alpha' => true),
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
        array('setting' => 'blog_over_loader_bg_type', 'operator' => '==', 'value' => 'solid'),
    ),
));

// Gradient Start Color
Kirki::add_field('Blog_Over_config', array(
    'type' => 'color',
    'settings' => 'blog_over_loader_gradient_start',
    'label' => esc_html__('Gradient Start Color', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 56,
    'wrapper_attrs' => array(
        'class' => '{default_class} blog-over-tab-design',
    ),
    'default' => '#667eea',
    'choices' => array('alpha' => true),
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
        array('setting' => 'blog_over_loader_bg_type', 'operator' => '==', 'value' => 'gradient'),
    ),
));

// Gradient End Color
Kirki::add_field('Blog_Over_config', array(
    'type' => 'color',
    'settings' => 'blog_over_loader_gradient_end',
    'label' => esc_html__('Gradient End Color', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 57,
    'wrapper_attrs' => array(
        'class' => '{default_class} blog-over-tab-design',
    ),
    'default' => '#764ba2',
    'choices' => array('alpha' => true),
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
        array('setting' => 'blog_over_loader_bg_type', 'operator' => '==', 'value' => 'gradient'),
    ),
));

// Show Loading Text
Kirki::add_field('Blog_Over_config', array(
    'type' => 'toggle',
    'settings' => 'blog_over_loader_show_text',
    'label' => esc_html__('Show Loading Text', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 60,
    'default' => true,
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
    ),
));

// Loading Text
Kirki::add_field('Blog_Over_config', array(
    'type' => 'text',
    'settings' => 'blog_over_loader_text',
    'label' => esc_html__('Loading Text', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 65,
    'default' => esc_html__('Loading', 'blog-over'),
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
        array('setting' => 'blog_over_loader_show_text', 'operator' => '==', 'value' => true),
    ),
));

// Show Progress Bar
Kirki::add_field('Blog_Over_config', array(
    'type' => 'toggle',
    'settings' => 'blog_over_loader_show_progress',
    'label' => esc_html__('Show Progress Bar', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 70,
    'default' => true,
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
    ),
));

// Minimum Display Duration
Kirki::add_field('Blog_Over_config', array(
    'type' => 'slider',
    'settings' => 'blog_over_loader_min_duration',
    'label' => esc_html__('Minimum Display Duration', 'blog-over'),
    'description' => esc_html__('How long (in seconds) the loader stays visible after page loads. Set to 0 for instant hide.', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 75,
    'default' => 0.5,
    'choices' => array(
        'min' => 0,
        'max' => 5,
        'step' => 0.5,
        'suffix' => 's',
    ),
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
    ),
));

// Preview Loader Button
Kirki::add_field('Blog_Over_config', array(
    'type' => 'custom',
    'settings' => 'blog_over_loader_preview_button',
    'label' => esc_html__('Preview Loader', 'blog-over'),
    'description' => esc_html__('Click to see your loading screen for 3 seconds.', 'blog-over'),
    'section' => 'blog_over_loading_screen_section',
    'priority' => 80,
    'default' => '<button type="button" class="button button-primary" id="blog-over-preview-loader-btn" style="width:100%; padding:10px; font-size:14px; cursor:pointer;">
        <span class="dashicons dashicons-visibility" style="margin-right:5px;"></span> Preview Loading Screen
    </button>
    <script>
    jQuery(document).ready(function($) {
        $("#blog-over-preview-loader-btn").on("click", function() {
            // Find the preview iframe - try multiple selectors
            var previewIframe = document.querySelector("#customize-preview iframe");
            if (!previewIframe) {
                previewIframe = document.querySelector("iframe[name*=\"customize-preview\"]");
            }
            if (!previewIframe) return;

            var previewDoc = previewIframe.contentDocument || previewIframe.contentWindow.document;
            
            // Remove any existing preview loader to prevent duplicates
            var existingLoaders = previewDoc.querySelectorAll(".blog-over-loading-screen");
            existingLoaders.forEach(function(el) {
                el.remove();
            });

            // Get current settings from the customizer controls
            var loaderStyle = wp.customize("blog_over_loader_style") ? wp.customize("blog_over_loader_style").get() : "spinner";
            var loaderSize = wp.customize("blog_over_loader_size") ? wp.customize("blog_over_loader_size").get() : "medium";
            var loaderColor = wp.customize("blog_over_loader_color") ? wp.customize("blog_over_loader_color").get() : "#ffffff";
            var bgType = wp.customize("blog_over_loader_bg_type") ? wp.customize("blog_over_loader_bg_type").get() : "gradient";
            var bgColor = wp.customize("blog_over_loader_bg_color") ? wp.customize("blog_over_loader_bg_color").get() : "#667eea";
            var gradientStart = wp.customize("blog_over_loader_gradient_start") ? wp.customize("blog_over_loader_gradient_start").get() : "#667eea";
            var gradientEnd = wp.customize("blog_over_loader_gradient_end") ? wp.customize("blog_over_loader_gradient_end").get() : "#764ba2";
            var showText = wp.customize("blog_over_loader_show_text") ? wp.customize("blog_over_loader_show_text").get() : true;
            var loaderText = wp.customize("blog_over_loader_text") ? wp.customize("blog_over_loader_text").get() : "Loading";
            var showProgress = wp.customize("blog_over_loader_show_progress") ? wp.customize("blog_over_loader_show_progress").get() : true;

            // Build background style
            var bgStyle = bgType === "gradient" 
                ? "linear-gradient(135deg, " + gradientStart + " 0%, " + gradientEnd + " 100%)"
                : bgColor;

            // Create loader HTML based on selected style
            var spinnerHtml = "";
            switch(loaderStyle) {
                case "spinner":
                    spinnerHtml = "<div class=\"blog-over-loader-spinner\"><span class=\"blog-over-spinner-ring\"></span><span class=\"blog-over-spinner-ring\"></span><span class=\"blog-over-spinner-ring\"></span></div>";
                    break;
                case "dots":
                    spinnerHtml = "<div class=\"blog-over-loader-dots\"><span></span><span></span><span></span></div>";
                    break;
                case "pulse":
                    spinnerHtml = "<div class=\"blog-over-loader-pulse\"><span></span><span></span><span></span></div>";
                    break;
                case "ring":
                    spinnerHtml = "<div class=\"blog-over-loader-ring\"></div>";
                    break;
                case "bars":
                    spinnerHtml = "<div class=\"blog-over-loader-bars\"><span></span><span></span><span></span><span></span><span></span></div>";
                    break;
                case "cube":
                    spinnerHtml = "<div class=\"blog-over-loader-cube\"><span></span><span></span><span></span><span></span><span></span><span></span></div>";
                    break;
            }

            var textHtml = showText ? "<div class=\"blog-over-loader-text\">" + loaderText + "</div>" : "";
            var progressHtml = showProgress ? "<div class=\"blog-over-loader-progress\"><div class=\"blog-over-loader-progress-bar\"></div></div>" : "";

            var loader = previewDoc.createElement("div");
            loader.className = "blog-over-loading-screen blog-over-loader-" + loaderSize;
            loader.setAttribute("data-loader", loaderStyle);
            loader.style.cssText = "--blog-over-loader-color:" + loaderColor + ";--blog-over-loader-bg:" + bgStyle + ";background:" + bgStyle + ";opacity:1;visibility:visible;";
            loader.innerHTML = "<div class=\"blog-over-loader-content\">" + spinnerHtml + textHtml + progressHtml + "</div>";
            previewDoc.body.appendChild(loader);

            // Hide after 3 seconds
            setTimeout(function() {
                loader.style.opacity = "";
                loader.style.visibility = "";
                loader.classList.add("loaded");
            }, 3000);
        });
    });
    </script>',
    'active_callback' => array(
        array('setting' => 'blog_over_loading_screen_enable', 'operator' => '==', 'value' => true),
    ),
));

