<?php
/** no direct access **/
defined('MECEXEC') or die();

$styling = $this->main->get_styling();
$fonts = include MEC::import('app.features.mec.webfonts.webfonts', true, true);

$google_fonts = [];
$google_fonts['none'] = array(
	'label'=>esc_html__('Inherit from theme', 'modern-events-calendar-lite'),
	'variants'=>array('regular'),
	'subsets'=>array(),
	'category'=>'',
    'value'=>'',
);

if(is_array($fonts))
{
	foreach($fonts['items'] as $font)
    {
        $google_fonts[$font['family']] = array(
            'label'=>$font['family'],
            'variants'=>$font['variants'],
            'subsets'=>$font['subsets'],
            'category'=>$font['category'],
        );
    }
}
?>
<div class="wns-be-container wns-be-container-sticky">

    <div id="wns-be-infobar">
        <div class="mec-search-settings-wrap">
            <i class="mec-sl-magnifier"></i>
            <input id="mec-search-settings" type="text" placeholder="<?php esc_html_e('Search...' , 'modern-events-calendar-lite'); ?>">
        </div>
        <a href="" id="" class="dpr-btn dpr-save-btn"><?php esc_html_e('Save Changes', 'modern-events-calendar-lite'); ?></a>
    </div>

    <div class="wns-be-sidebar">
        <?php $this->main->get_sidebar_menu('styling'); ?>
    </div>

    <div class="wns-be-main styling-settings">

        <div id="wns-be-notification"></div>

        <div id="wns-be-content">
            <div class="wns-be-group-tab">

                <div class="mec-container">
                    <form id="mec_styling_form">
                        <div class="mec-options-fields">
                            <h2><?php esc_html_e('Styling', 'modern-events-calendar-lite'); ?></h2>
                        <!-- Colorskin -->
                            <h5 class="mec-form-subtitle"><?php esc_html_e('Color Skin', 'modern-events-calendar-lite'); ?></h5>
                            <div class="mec-form-row">
                                <div class="mec-col-3">
                                    <label><?php esc_html_e('Predefined Color Skin', 'modern-events-calendar-lite'); ?></label>
                                </div>
                                <div class="mec-col-9">
                                    <ul class="mec-image-select-wrap">
                                        <?php
                                        $colorskins = array(
                                            '#40d9f1'=>'mec-colorskin-1',
                                            '#0093d0'=>'mec-colorskin-2',
                                            '#e53f51'=>'mec-colorskin-3',
                                            '#f1c40f'=>'mec-colorskin-4',
                                            '#e64883'=>'mec-colorskin-5',
                                            '#45ab48'=>'mec-colorskin-6',
                                            '#9661ab'=>'mec-colorskin-7',
                                            '#0aad80'=>'mec-colorskin-8',
                                            '#0ab1f0'=>'mec-colorskin-9',
                                            '#ff5a00'=>'mec-colorskin-10',
                                            '#c3512f'=>'mec-colorskin-11',
                                            '#55606e'=>'mec-colorskin-12',
                                            '#fe8178'=>'mec-colorskin-13',
                                            '#7c6853'=>'mec-colorskin-14',
                                            '#bed431'=>'mec-colorskin-15',
                                            '#2d5c88'=>'mec-colorskin-16',
                                            '#77da55'=>'mec-colorskin-17',
                                            '#2997ab'=>'mec-colorskin-18',
                                            '#734854'=>'mec-colorskin-19',
                                            '#a81010'=>'mec-colorskin-20',
                                            '#4ccfad'=>'mec-colorskin-21',
                                            '#3a609f'=>'mec-colorskin-22',
                                            '#333333'=>'mec-colorskin-23',
                                            '#D2D2D2'=>'mec-colorskin-24',
                                            '#636363'=>'mec-colorskin-25',
                                            );

                                            foreach($colorskins as $colorskin=>$values): ?>
                                            <li class="mec-image-select">
                                                <label for="<?php echo esc_attr($values); ?>">
                                                    <input type="radio" id="<?php echo esc_attr($values); ?>" name="mec[styling][mec_colorskin]" value="<?php echo esc_attr($colorskin); ?>" <?php if(isset($styling['mec_colorskin']) && ($styling['mec_colorskin'] == $colorskin)) echo 'checked="checked"'; ?>>
                                                    <span class="<?php echo esc_attr($values); ?>"></span>
                                                </label>
                                            </li>
                                        <?php endforeach; ?>
                                    </ul>
                                </div>
                            </div>
                            <div class="mec-form-row">
                                <div class="mec-col-3">
                                    <label><?php esc_html_e('Custom Color Skin', 'modern-events-calendar-lite'); ?></label>
                                </div>
                                <div class="mec-col-9">
                                    <input type="text" class="wp-color-picker-field" id="mec_settings_color" name="mec[styling][color]" value="<?php echo (isset($styling['color']) ? esc_attr($styling['color']) : ''); ?>" data-default-color="" />
                                </div>
                                <div class="mec-col-12">
                                    <p><?php esc_attr_e("If you want to select a predefined color skin, you must clear the color of this item", 'modern-events-calendar-lite'); ?></p>
                                </div>
                            </div>
                            <div class="mec-form-row">
                                <label class="mec-col-3" for="mec_styling_primary_border_radius"><?php esc_html_e('Primary border-radius', 'modern-events-calendar-lite'); ?></label>
                                <div class="mec-col-9">
                                    <input type="text" id="mec_styling_primary_border_radius" name="mec[styling][primary_border_radius]" placeholder="12" value="<?php echo ((isset($styling['primary_border_radius']) and trim($styling['primary_border_radius']) != '') ? $styling['primary_border_radius'] : ''); ?>" />
                                    <span class="mec-tooltip">
                                        <div class="box left">
                                            <h5 class="title"><?php esc_html_e('Primary border-radius', 'modern-events-calendar-lite'); ?></h5>
                                            <div class="content"><p><?php esc_attr_e('Customize the border-radius for wrappers, event items and event modules', 'modern-events-calendar-lite'); ?></p></div>
                                        </div>
                                        <i title="" class="dashicons-before dashicons-editor-help"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="mec-form-row">
                                <label class="mec-col-3" for="mec_styling_secondary_border_radius"><?php esc_html_e('Secondary border-radius', 'modern-events-calendar-lite'); ?></label>
                                <div class="mec-col-9">
                                    <input type="text" id="mec_styling_secondary_border_radius" name="mec[styling][secondary_border_radius]" placeholder="3" value="<?php echo ((isset($styling['secondary_border_radius']) and trim($styling['secondary_border_radius']) != '') ? $styling['secondary_border_radius'] : ''); ?>" />
                                    <span class="mec-tooltip">
                                        <div class="box left">
                                            <h5 class="title"><?php esc_html_e('Secondary border-radius', 'modern-events-calendar-lite'); ?></h5>
                                            <div class="content"><p><?php esc_attr_e('Customize the border-radius buttons and other smaller elements.', 'modern-events-calendar-lite'); ?></p></div>
                                        </div>
                                        <i title="" class="dashicons-before dashicons-editor-help"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="mec-form-row">
                                <label class="mec-col-3" for="mec_styling_dark_mode"><?php esc_html_e('Dark Mode', 'modern-events-calendar-lite'); ?></label>
                                <div class="mec-col-9">
                                    <label id="mec_styling_dark_mode" >
                                        <input type="hidden" name="mec[styling][dark_mode]" value="0" />
                                        <input value="1" type="checkbox" id="mec_styling_dark_mode" name="mec[styling][dark_mode]" <?php if(isset($styling['dark_mode']) and $styling['dark_mode']) echo 'checked="checked"'; ?> /><?php esc_html_e('Enable', 'modern-events-calendar-lite'); ?>
                                    </label>
                                    <span class="mec-tooltip">
                                        <div class="box top">
                                            <h5 class="title"><?php esc_html_e('Dark Mode', 'modern-events-calendar-lite'); ?></h5>
                                            <div class="content"><p><?php esc_attr_e('Enable this option to turn on the dark mode', 'modern-events-calendar-lite'); ?><a href="https://webnus.net/dox/modern-events-calendar/appearance-settings/#3-_Dark_Mode/" target="_blank"><?php esc_html_e('Read More', 'modern-events-calendar-lite'); ?></a></p></div>
                                        </div>
                                        <i title="" class="dashicons-before dashicons-editor-help"></i>
                                    </span>
                                </div>
                            </div>

                            <!-- Advanced Options -->
                            <h5 class="mec-form-subtitle"><?php esc_html_e('Advanced Color Options (shortcodes)', 'modern-events-calendar-lite'); ?></h5>
                            <div class="mec-form-row">
                                <div class="mec-col-3">
                                    <label><?php esc_html_e('Title', 'modern-events-calendar-lite'); ?></label>
                                </div>
                                <div class="mec-col-9">
                                    <input type="text" class="wp-color-picker-field" id="mec_settings_title_color" name="mec[styling][title_color]" value="<?php echo (isset($styling['title_color']) ? esc_attr($styling['title_color']) : ''); ?>" data-default-color="" />
                                </div>
                            </div>

                            <div class="mec-form-row">
                                <div class="mec-col-3">
                                    <label><?php esc_html_e('Title Hover', 'modern-events-calendar-lite'); ?></label>
                                </div>
                                <div class="mec-col-9">
                                    <input type="text" class="wp-color-picker-field" id="mec_settings_title_color_hover" name="mec[styling][title_color_hover]" value="<?php echo (isset($styling['title_color_hover']) ? esc_attr($styling['title_color_hover']) : ''); ?>" data-default-color="" />
                                </div>
                            </div>

                            <div class="mec-form-row">
                                <div class="mec-col-3">
                                    <label><?php esc_html_e('Content', 'modern-events-calendar-lite'); ?></label>
                                </div>
                                <div class="mec-col-9">
                                    <input type="text" class="wp-color-picker-field" id="mec_settings_content_color" name="mec[styling][content_color]" value="<?php echo (isset($styling['content_color']) ? esc_attr($styling['content_color']) : ''); ?>" data-default-color="" />
                                </div>
                            </div>

                            <!-- Typography -->
                            <h5 class="mec-form-subtitle"><?php esc_html_e('Typography', 'modern-events-calendar-lite'); ?></h5>
                            <div class="mec-form-row">
                                <label class="mec-col-3" for="mec_h_fontfamily"><?php esc_html_e('Heading (Events Title) Font Family', 'modern-events-calendar-lite'); ?></label>
                                <div class="mec-col-9">

                                    <select class="mec-p-fontfamily" name="mec[styling][mec_h_fontfamily]" id="mec_h_fontfamily">
                                        <?php
                                        foreach($google_fonts as $google_font)
                                        {
                                            $variants = '';
                                            foreach($google_font['variants'] as $key=>$variant)
                                            {
                                                $variants .= $variant;
                                                if(next($google_font['variants']) == true) $variants .= ",";
                                            }

                                            $value = (isset($google_font['value']) ? $google_font['value'] : '['. $google_font['label'] .','. $variants .']');
                                            if($value == '['.esc_html__('Default Font', 'modern-events-calendar-lite').',regular]' or $value == '['.esc_html__('Inherit from theme', 'modern-events-calendar-lite').',regular]') $value = '';
                                            ?>
                                            <option value="<?php echo esc_attr($value); ?>" <?php if(isset($styling['mec_h_fontfamily']) and ($styling['mec_h_fontfamily'] == $value)) echo 'selected="selected"'; ?>><?php echo esc_html($google_font['label']); ?></option>
                                            <?php
                                        }
                                        ?>
                                    </select>

                                </div>
                            </div>

                            <div class="mec-form-row">
                                <label class="mec-col-3" for="mec_p_fontfamily"><?php esc_html_e('Paragraph Font Family', 'modern-events-calendar-lite'); ?></label>
                                <div class="mec-col-9">

                                    <select class="mec-p-fontfamily" name="mec[styling][mec_p_fontfamily]" id="mec_p_fontfamily">
                                        <?php
                                        foreach($google_fonts as $google_font)
                                        {
                                            $variants = '';
                                            foreach($google_font['variants'] as $key=>$variant)
                                            {
                                                $variants .= $variant;
                                                if(next($google_font['variants']) == true) $variants .= ",";
                                            }

                                            $value = (isset($google_font['value']) ? $google_font['value'] : '['. $google_font['label'] .','. $variants .']');
                                            if($value == '['.esc_html__('Default Font', 'modern-events-calendar-lite').',regular]' or $value == '['.esc_html__('Inherit from theme', 'modern-events-calendar-lite').',regular]') $value = '';
                                            ?>
                                            <option value="<?php echo esc_attr($value); ?>" <?php if(isset($styling['mec_p_fontfamily'] ) && ($styling['mec_p_fontfamily'] == $value ) ) echo 'selected'; ?>><?php echo esc_html($google_font['label']); ?></option>
                                            <?php
                                        }
                                        ?>
                                    </select>

                                </div>
                            </div>
                            <div class="mec-form-row">
                                <label class="mec-col-3" for="mec_styling_disable_gfonts"><?php esc_html_e('Disable Google Fonts', 'modern-events-calendar-lite'); ?></label>
                                <div class="mec-col-9">
                                    <label id="mec_styling_disable_gfonts">
                                        <input type="hidden" name="mec[styling][disable_gfonts]" value="0" />
                                        <input value="1" type="checkbox" id="mec_styling_disable_gfonts" name="mec[styling][disable_gfonts]" <?php if(isset($styling['disable_gfonts']) and $styling['disable_gfonts']) echo 'checked="checked"'; ?> /><?php esc_html_e('Disable', 'modern-events-calendar-lite'); ?>
                                    </label>
                                    <span class="mec-tooltip">
                                        <div class="box top">
                                            <h5 class="title"><?php esc_html_e('Disable Google Fonts', 'modern-events-calendar-lite'); ?></h5>
                                            <div class="content"><p><?php esc_attr_e('To be GDPR compliant you may need to disable Google fonts. Set "Default Font" value for font family and enable this option.', 'modern-events-calendar-lite'); ?><a href="https://webnus.net/dox/modern-events-calendar/appearance-settings/#9-_Disable_Google_Fonts/" target="_blank"><?php esc_html_e('Read More', 'modern-events-calendar-lite'); ?></a></p></div>
                                        </div>
                                        <i title="" class="dashicons-before dashicons-editor-help"></i>
                                    </span>
                                </div>
                            </div>

                            <!-- Container Width -->
                            <h5 class="mec-form-subtitle"><?php esc_html_e('Accessibility', 'modern-events-calendar-lite'); ?></h5>
                            <div class="mec-form-row">
                                <label class="mec-col-3" for="mec_styling_accessibility"><?php esc_html_e('Accessibility', 'modern-events-calendar-lite'); ?></label>
                                <div class="mec-col-9">
                                    <label id="mec_styling_accessibility">                                                
                                        <input type="hidden" name="mec[styling][accessibility]" value="0" />
                                        <input value="1" type="checkbox" id="mec_styling_accessibility" name="mec[styling][accessibility]" <?php if(isset($styling['accessibility']) and $styling['accessibility']) echo 'checked="checked"'; ?> /><?php esc_html_e('Enable', 'modern-events-calendar-lite'); ?>
                                    </label>
                                    <span class="mec-tooltip">
                                        <div class="box top">
                                            <h5 class="title"><?php esc_html_e('Accessibility', 'modern-events-calendar-lite'); ?></h5>
                                            <div class="content"><p><?php esc_attr_e('Enable A11Y or accessibility in MEC.', 'modern-events-calendar-lite'); ?><a href="https://webnus.net/dox/modern-events-calendar/improving-accessibility-on-mec/" target="_blank"><?php esc_html_e('Read More', 'modern-events-calendar-lite'); ?></a></p></div>
                                        </div>
                                        <i title="" class="dashicons-before dashicons-editor-help"></i>
                                    </span>
                                </div>
                            </div>


                            <!-- Container Width -->
                            <h5 class="mec-form-subtitle"><?php esc_html_e('Container Width', 'modern-events-calendar-lite'); ?></h5>
                            <div class="mec-form-row">
                                <label class="mec-col-3" for="mec_styling_container_normal_width"><?php esc_html_e('Desktop Normal Screens', 'modern-events-calendar-lite'); ?></label>
                                <div class="mec-col-9">
                                    <input type="text" id="mec_styling_container_normal_width" name="mec[styling][container_normal_width]" value="<?php echo ((isset($styling['container_normal_width']) and trim($styling['container_normal_width']) != '') ? $styling['container_normal_width'] : ''); ?>" />
                                    <span class="mec-tooltip">
                                        <div class="box left">
                                            <h5 class="title"><?php esc_html_e('Desktop Normal Screens', 'modern-events-calendar-lite'); ?></h5>
                                            <div class="content"><p><?php esc_attr_e('You can enter your theme container size in this field to override it for normal screens.', 'modern-events-calendar-lite'); ?><a href="https://webnus.net/dox/modern-events-calendar/appearance-settings/#11-_Desktop_Normal_Screens/" target="_blank"><?php esc_html_e('Read More', 'modern-events-calendar-lite'); ?></a></p></div>
                                        </div>
                                        <i title="" class="dashicons-before dashicons-editor-help"></i>
                                    </span>
                                </div>
                            </div>

                            <div class="mec-form-row">
                                <label class="mec-col-3" for="mec_styling_container_large_width"><?php esc_html_e('Desktop Large Screens', 'modern-events-calendar-lite'); ?></label>
                                <div class="mec-col-9">
                                    <input type="text" id="mec_styling_container_large_width" name="mec[styling][container_large_width]" value="<?php echo ((isset($styling['container_large_width']) and trim($styling['container_large_width']) != '') ? $styling['container_large_width'] : ''); ?>" />
                                    <span class="mec-tooltip">
                                        <div class="box left">
                                            <h5 class="title"><?php esc_html_e('Desktop Large Screens', 'modern-events-calendar-lite'); ?></h5>
                                            <div class="content"><p><?php esc_attr_e('You can enter your theme container size in this field to override it for large screens.', 'modern-events-calendar-lite'); ?><a href="https://webnus.net/dox/modern-events-calendar/appearance-settings/#12-_Desktop_Large_Screens/" target="_blank"><?php esc_html_e('Read More', 'modern-events-calendar-lite'); ?></a></p></div>
                                        </div>
                                        <i title="" class="dashicons-before dashicons-editor-help"></i>
                                    </span>
                                </div>
                            </div>
                            <?php do_action('mec_end_styling_settings', $styling); ?>

                            <!-- Other Styling Option -->
                            <h5 class="mec-form-subtitle"><?php esc_html_e('Other Styling Option', 'modern-events-calendar-lite'); ?></h5>

                            <div class="mec-form-row">
                                <div class="mec-col-3">
                                    <label><?php esc_html_e('Frontend Event Submission Color', 'modern-events-calendar-lite'); ?></label>
                                </div>
                                <div class="mec-col-9">
                                    <input type="text" class="wp-color-picker-field" id="mec_settings_fes_color" name="mec[styling][fes_color]" value="<?php echo (isset($styling['fes_color']) ? esc_attr($styling['fes_color']) : ''); ?>" data-default-color="" />
                                </div>
                            </div>

                            <div class="mec-form-row">
                                <div class="mec-col-3">
                                    <label><?php esc_html_e('Notifications Background', 'modern-events-calendar-lite'); ?></label>
                                </div>
                                <div class="mec-col-9">
                                    <input type="text" class="wp-color-picker-field" id="mec_settings_notification_bg" name="mec[styling][notification_bg]" value="<?php echo (isset($styling['notification_bg']) ? esc_attr($styling['notification_bg']) : ''); ?>" data-default-color="" />
                                </div>
                            </div>

                            <div class="mec-form-row">
                                <?php wp_nonce_field('mec_options_form'); ?>
                                <button  style="display: none;" id="mec_styling_form_button" class="button button-primary mec-button-primary" type="submit"><?php esc_html_e('Save Changes', 'modern-events-calendar-lite'); ?></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="wns-be-footer">
        <a href="" id="" class="dpr-btn dpr-save-btn"><?php esc_html_e('Save Changes', 'modern-events-calendar-lite'); ?></a>
    </div>

</div>

<?php
$this->getFactory()->params('footer', function()
{
    ?>
    <script>
    jQuery(document).ready(function()
    {
        jQuery(".dpr-save-btn").on('click', function(event)
        {
            event.preventDefault();
            jQuery("#mec_styling_form_button").trigger('click');
        });
    });

    (function($)
    {
        'use strict';
        $(document).ready(function()
        {
            //Initiate Color Picker
            $('.wp-color-picker-field').wpColorPicker();
        });

        $('.wpsa-browse').click(function(e)
        {
            e.preventDefault();
            var image = wp.media({
                title: 'Upload',
                multiple: false
            }).open()
            .on('select', function(e)
            {
                var uploaded_image = image.state().get('selection').first();
                var image_url = uploaded_image.toJSON().url;
                $('#mec_settings_upload').val(image_url);
            });
        });
    })(jQuery);

    jQuery("#mec_styling_form").on('submit', function(event)
    {
        event.preventDefault();

        // Add loading Class to the button
        jQuery(".dpr-save-btn").addClass('loading').text("<?php echo esc_js(esc_attr__('Saved', 'modern-events-calendar-lite')); ?>");
        jQuery('<div class="wns-saved-settings"><?php echo esc_js(esc_attr__('Settings Saved!', 'modern-events-calendar-lite')); ?></div>').insertBefore('#wns-be-content');

        var styling = jQuery("#mec_styling_form").serialize();

        jQuery.ajax(
        {
            type: "POST",
            url: ajaxurl,
            data: "action=mec_save_styling&"+styling,
            beforeSend: function () {
                jQuery('.wns-be-main').append('<div class="mec-loarder-wrap mec-settings-loader"><div class="mec-loarder"><div></div><div></div><div></div></div></div>');
            },
            success: function(data)
            {
                // Remove the loading Class to the button
                setTimeout(function()
                {
                    jQuery(".dpr-save-btn").removeClass('loading').text("<?php echo esc_js(esc_attr__('Save Changes', 'modern-events-calendar-lite')); ?>");
                    jQuery('.wns-saved-settings').remove();
                    jQuery('.mec-loarder-wrap').remove();
                }, 1000);
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                // Remove the loading Class to the button
                setTimeout(function(){
                    jQuery(".dpr-save-btn").removeClass('loading').text("<?php echo esc_js(esc_attr__('Save Changes', 'modern-events-calendar-lite')); ?>");
                    jQuery('.wns-saved-settings').remove();
                    jQuery('.mec-loarder-wrap').remove();
                }, 1000);
            }
        });
    });
    </script>
    <?php
});