<?php
    // prevent direct file access
	if( !defined( 'ABSPATH' ) ) exit;

    function pixe_plugin_settings_main_script(){
        
        $active_tab = empty($_GET['type'])? 'layout': sanitize_text_field(wp_unslash($_GET['type'])); // phpcs:disable WordPress.Security.NonceVerification.Recommended -- Nonce not required: request performs read-only query.
        
        if( in_array($active_tab, array('layout', 'page-transition')) ){
            pixe_enqueue_admin_styles(array('utility', 'settings', 'preset'));
            pixe_enqueue_admin_scripts(array('jquery', 'wp-media', 'utility', 'plugin-option', 'variable-preset'));
            wp_localize_script('pixe-plugin-option', 'pixeData', pixe_plugin_settings_script_data(array('typo-preset', 'color-preset', 'variable-preset')));
        }else if( $active_tab == 'font-library' || $active_tab == 'typo-preset' ){
            pixe_enqueue_admin_styles(array('utility', 'preset', 'settings'));
            pixe_enqueue_admin_scripts(array('jquery', 'utility', 'typo-preset'));
            wp_localize_script('pixe-typo-settings', 'pixeData', pixe_plugin_settings_script_data(array('typo-preset')));
        }else if( $active_tab == 'color-preset' ){
            pixe_enqueue_admin_styles(array('utility', 'preset', 'settings'));
            pixe_enqueue_admin_scripts(array('jquery', 'utility', 'sortable', 'color-preset'));
            wp_localize_script('pixe-color-settings', 'pixeData', pixe_plugin_settings_script_data(array('color-preset')));
        }

        do_action('pixe_plugin_settings_main_script', $active_tab);
        
    }

    // main content
    function pixe_plugin_settings_main(){
        pixe_plugin_settings_head('main');

        $active_tab = empty($_GET['type'])? 'layout': sanitize_text_field(wp_unslash($_GET['type'])); // phpcs:disable WordPress.Security.NonceVerification.Recommended -- Nonce not required: request performs read-only query.      
?>
<div class="pixe-plugin-settings-content" >
    <div class="pixe-plugin-settings-tab" >
        <div class="pixe-head" ><?php esc_html_e('Site Settings', 'pixebuilder'); ?></div>
        <?php 
            // layout
            echo '<a ';
            if( $active_tab == 'layout' ){
                echo 'href="#" class="pixe-active" ';
            }else{
                echo 'href="' . esc_attr(add_query_arg(array('type' => 'layout'))) . '" ';
            }
            echo '>';
            echo '<span class="pixe-admin-icon pixe-icon pixe-type-svg" >';
            echo '<svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M10.5625 0.5625H1.8125C1.12214 0.5625 0.5625 1.12214 0.5625 1.8125V10.5625C0.5625 11.2529 1.12214 11.8125 1.8125 11.8125H10.5625C11.2529 11.8125 11.8125 11.2529 11.8125 10.5625V1.8125C11.8125 1.12214 11.2529 0.5625 10.5625 0.5625Z" stroke="var(--pixe--svg--color, white)" stroke-width="1.125"/><path d="M0.5625 4.3125H11.8125M4.3125 4.3125V11.8125" stroke="var(--pixe--svg--color, white)" stroke-width="1.125"/></svg>';
            echo '</span>';
            esc_html_e('Layout Settings', 'pixebuilder'); 
            echo '</a>';
            
            // font lib
            echo '<a ';
            if( $active_tab == 'font-library' ){
                echo 'href="#" class="pixe-active" ';
            }else{
                echo 'href="' . esc_attr(add_query_arg(array('type' => 'font-library'))) . '" ';
            }
            echo '>';
            echo '<span class="pixe-admin-icon pixe-icon pixe-type-svg" >';
            echo '<svg width="10" height="12" viewBox="0 0 10 12" fill="none"><path d="M0.5625 10.5625L4.3125 0.5625H5.5625L9.3125 10.5625M2.125 6.8125H7.75" stroke="var(--pixe--svg--color, #5B5970)" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/></svg>';
            echo '</span>';
            echo esc_html_e('Font Library', 'pixebuilder'); 
            echo '</a>';

            // typo preset
            echo '<a ';
            if( $active_tab == 'typo-preset' ){
                echo 'href="#" class="pixe-active" ';
            }else{
                echo 'href="' . esc_attr(add_query_arg(array('type' => 'typo-preset'))) . '" ';
            }
            echo '>';
            echo '<span class="pixe-admin-icon pixe-icon pixe-type-svg" >';
            echo '<svg width="12" height="11" viewBox="0 0 12 11" fill="none"><path d="M0.5625 1.9375H6.1875M9.9375 1.9375H10.5625M0.5625 8.1875H1.1875M4.9375 8.1875H10.5625" stroke="var(--pixe--svg--color, #5B5970)" stroke-width="1.125" stroke-linecap="round"/><path d="M8.0625 3.3125C8.82189 3.3125 9.4375 2.69689 9.4375 1.9375C9.4375 1.17811 8.82189 0.5625 8.0625 0.5625C7.30311 0.5625 6.6875 1.17811 6.6875 1.9375C6.6875 2.69689 7.30311 3.3125 8.0625 3.3125Z" stroke="var(--pixe--svg--color, #5B5970)" stroke-width="1.125"/><path d="M3.0625 9.5625C3.82189 9.5625 4.4375 8.94689 4.4375 8.1875C4.4375 7.42811 3.82189 6.8125 3.0625 6.8125C2.30311 6.8125 1.6875 7.42811 1.6875 8.1875C1.6875 8.94689 2.30311 9.5625 3.0625 9.5625Z" stroke="var(--pixe--svg--color, #5B5970)" stroke-width="1.125"/></svg>';
            echo '</span>';
            echo esc_html_e('Typo Preset', 'pixebuilder'); 
            echo '</a>';

            // color preset
            echo '<a ';
            if( $active_tab == 'color-preset' ){
                echo 'href="#" class="pixe-active" ';
            }else{
                echo 'href="' . esc_attr(add_query_arg(array('type' => 'color-preset'))) . '" ';
            }
            echo '>';
            echo '<span class="pixe-admin-icon pixe-icon pixe-type-svg" >';
            echo '<svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M6.15625 0.65625C5.41756 0.65625 4.68611 0.801745 4.00366 1.08443C3.3212 1.36711 2.7011 1.78144 2.17877 2.30377C1.65644 2.8261 1.24211 3.4462 0.959428 4.12866C0.676745 4.81111 0.53125 5.54256 0.53125 6.28125C0.53125 7.01994 0.676745 7.75139 0.959428 8.43384C1.24211 9.1163 1.65644 9.7364 2.17877 10.2587C2.7011 10.7811 3.3212 11.1954 4.00366 11.4781C4.68611 11.7608 5.41756 11.9063 6.15625 11.9063C6.78125 11.9063 7.09375 11.4063 7.09375 10.9063C7.09375 10.5938 6.96875 10.3438 6.78125 10.1563C6.59375 9.96875 6.46875 9.71875 6.46875 9.40625C6.46875 8.84375 6.90625 8.40625 7.46875 8.40625H8.65625C9.48505 8.40625 10.2799 8.07701 10.866 7.49096C11.452 6.90491 11.7812 6.11005 11.7812 5.28125C11.7812 2.84375 9.28125 0.53125 6.15625 0.53125V0.65625Z" stroke="var(--pixe--svg--color, #5B5970)" stroke-width="1.0625" stroke-linejoin="round"/><path d="M3.34375 6.65625C3.72345 6.65625 4.03125 6.34845 4.03125 5.96875C4.03125 5.58905 3.72345 5.28125 3.34375 5.28125C2.96405 5.28125 2.65625 5.58905 2.65625 5.96875C2.65625 6.34845 2.96405 6.65625 3.34375 6.65625Z" fill="var(--pixe--svg--color, #5B5970)"/><path d="M4.90625 4.15625C5.28595 4.15625 5.59375 3.84845 5.59375 3.46875C5.59375 3.08905 5.28595 2.78125 4.90625 2.78125C4.52655 2.78125 4.21875 3.08905 4.21875 3.46875C4.21875 3.84845 4.52655 4.15625 4.90625 4.15625Z" fill="var(--pixe--svg--color, #5B5970)"/><path d="M7.71875 4.15625C8.09845 4.15625 8.40625 3.84845 8.40625 3.46875C8.40625 3.08905 8.09845 2.78125 7.71875 2.78125C7.33905 2.78125 7.03125 3.08905 7.03125 3.46875C7.03125 3.84845 7.33905 4.15625 7.71875 4.15625Z" fill="var(--pixe--svg--color, #5B5970)"/></svg>';
            echo '</span>';
            esc_html_e('Color Preset', 'pixebuilder'); 
            echo '</a>';

            // page transition
            echo '<a ';
            if( $active_tab == 'page-transition' ){
                echo 'href="#" class="pixe-active" ';
            }else{
                echo 'href="' . esc_attr(add_query_arg(array('type' => 'page-transition'))) . '" ';
            }
            echo '>';
            echo '<span class="pixe-admin-icon pixe-icon pixe-type-svg" >';
            echo '<svg width="13" height="9" viewBox="0 0 13 9" fill="none"><path d="M5.21875 0.53125H1.46875C0.950983 0.53125 0.53125 0.950983 0.53125 1.46875V7.09375C0.53125 7.61152 0.950983 8.03125 1.46875 8.03125H5.21875C5.73652 8.03125 6.15625 7.61152 6.15625 7.09375V1.46875C6.15625 0.950983 5.73652 0.53125 5.21875 0.53125Z" stroke="var(--pixe--svg--color, #5B5970)" stroke-width="1.0625"/><path d="M8.03125 1.46875L10.2188 4.28125L8.03125 7.09375M7.71875 4.28125H12.0938" stroke="var(--pixe--svg--color, #5B5970)" stroke-width="1.0625" stroke-linecap="round" stroke-linejoin="round"/></svg>';
            echo '</span>';
            esc_html_e('Page Transition', 'pixebuilder'); 
            echo '</a>';
            
            do_action('pixe_plugin_settings_tab_main', $active_tab);
        ?>
    </div>
    <?php
        switch($active_tab){
            case 'layout':
                echo '<div class="pixe-plugin-settings-tab-content">';
                pixe_plugin_settings_layout();
                echo '</div>';
                break;
            case 'font-library':
            case 'typo-preset':
                echo '<div class="pixe-plugin-settings-tab-content pixe-style-tab-head pixe-type-settings pixe-blank">';
                pixe_plugin_settings_typography($active_tab);
                echo '</div>';
                break;
            case 'color-preset':
                echo '<div class="pixe-plugin-settings-tab-content pixe-style-tab-head pixe-type-settings pixe-blank">';
                pixe_plugin_settings_color();
                echo '</div>';
                break;
            case 'page-transition':
                echo '<div class="pixe-plugin-settings-tab-content">';
                pixe_plugin_settings_transition();
                echo '</div>';
                break;
            default: 
                do_action('pixe_plugin_settings_tab_content_main', $active_tab);
                break;
        }
    ?>
</div>
<?php
    }

    // layout
    function pixe_plugin_settings_layout(){
?>
<div class="pixe-plugin-settings-tab-inner" >
    <div class="pixe-plugin-settings-tab-head" >
        <div class="pixe-title" ><?php esc_html_e('Layout Settings', 'pixebuilder'); ?></div>
        <div class="pixe-description" ><?php esc_html_e('Control the page frame, spacing, and responsive breakpoints.', 'pixebuilder'); ?></div>
    </div>
    <div class="pixe-plugin-settings-area" id="pixe-plugin-settings-area" data-type="layout" data-value="<?php
        $value = pixe_get_main_settings('layout');
        if( !empty($value) ){
            echo esc_attr(json_encode($value));
        }
    ?>" ></div>
</div>
<?php
        ob_start(); 
        pixe_print_plugin_settings_varaible_script();
        wp_add_inline_script('pixe-inline', ob_get_clean());
    }

    // variable preset
    function pixe_print_plugin_settings_varaible_script(){
        ?>
(function($){
    "use strict";
    $(document).ready(function(){
        $.pixeVariableInit(['variablePreset']);
        $.pixeTypoStyle.updateStyle();
    });
})(jQuery);
        <?php
    }

    // typography, color preset
    function pixe_print_plugin_settings_typo_script($type){
?>
(function($){
    "use strict";
    $(document).ready(function(){
        $.pixeVariableInit(['typoPreset']);
        $('#pixe-plugin-settings-section').each(function(){
            <?php 
                if( $type == 'font-library' ){
                    echo '$.pixeTypoSettings.init({ container: $(this) });';
                }else{
                    echo '$.pixeTypoSettings.init({ container: $(this), type: \'preset\' });';
                }
            ?>
        });
        $.pixeTypoStyle.updateStyle();
    });
})(jQuery);
<?php
    }
    function pixe_plugin_settings_typography($type){
        echo '<div class="pixe-plugin-settings-section" id="pixe-plugin-settings-section" ></div>';

        ob_start(); 
        pixe_print_plugin_settings_typo_script($type);
        wp_add_inline_script('pixe-inline', ob_get_clean());
    }
    function pixe_print_plugin_settings_color_script(){
?>
(function($){
    "use strict";
    $(document).ready(function(){
        $('#pixe-plugin-settings-section').each(function(){
            $.pixeVariableInit(['colorPreset']);
            $.pixeColorSettings.init({
                container: $(this)
            });
        });
    });
})(jQuery);
<?php
    }
    function pixe_plugin_settings_color(){
        echo '<div class="pixe-plugin-settings-section" id="pixe-plugin-settings-section" ></div>';
        ob_start();
        pixe_print_plugin_settings_color_script();
        wp_add_inline_script('pixe-inline', ob_get_clean());
    }

    // page transition
    function pixe_plugin_settings_transition(){
?>
<div class="pixe-plugin-settings-tab-inner" >
    <div class="pixe-plugin-settings-tab-head" >
        <div class="pixe-title" ><?php esc_html_e('Page Transitions', 'pixebuilder'); ?></div>
        <div class="pixe-description" ><?php esc_html_e('Show a preloader and animate the way visitors move between pages.', 'pixebuilder'); ?></div>
    </div>
    <div class="pixe-plugin-settings-area" id="pixe-plugin-settings-area" data-type="page-transition" data-value="<?php
        $value = pixe_get_main_settings('page-transition');
        if( !empty($value) ){
            echo esc_attr(json_encode($value));
        }
    ?>" ></div>
</div>
<?php
        ob_start(); 
        pixe_print_plugin_settings_varaible_script($type);
        wp_add_inline_script('pixe-inline', ob_get_clean());
    }

    function pixe_save_main_settings($type, $value){
        $settings = get_option('pixe_main', array());

        if( !empty($value) ){
            $settings[$type] = $value;
        }else if( !empty($settings[$type]) ){
            unset($settings[$type]);
        }

        if( empty($settings) ){
            delete_option('pixe_main');
        }else{
            update_option('pixe_main', $settings, true);
        }
    }