<?php

add_action( 'init' , 'fashion_freak_slider_fields' );
function fashion_freak_slider_fields(){

	Kirki::add_section( 'fashion_freak_slider', array(
	    'title'          => esc_html__( 'Slider', 'fashion-freak' ),
	    'section'        => 'homepage',
	    'priority'       => 1,
	) );

	Kirki::add_field( 'bizberg', [
		'type'        => 'checkbox',
		'settings'    => 'fashion_freak_slider_post_status',
		'label'       => esc_html__( 'Enable Slider', 'fashion-freak' ),
		'section'     => 'fashion_freak_slider',
		'default'     => true,
	] );

	Kirki::add_field( 'bizberg', array(
        'type'        => 'select',
        'settings'    => 'fashion_freak_slider_category',
        'label'       => esc_html__( 'Select Post Category', 'fashion-freak' ),
        'section'     => 'fashion_freak_slider',
        'description' => sprintf(
			esc_html__( 
				'In free version, only 3 slides will be displayed. %s', 
				'fashion-freak' 
			),
			'<a target="_blank" href="' . esc_url( bizberg_get_pro_link() ) . '">' . esc_html__( 'Upgrade to PRO', 'fashion-freak' ) . '</a>'
		),
        'multiple'    => 1,
        'choices'     => bizberg_get_post_categories(),
        'active_callback'    => array(
            array(
                'setting'  => 'fashion_freak_slider_post_status',
                'operator' => '==',
                'value'    => true
            ),
        ),
    ) );

    if( function_exists( 'bizberg_kirki_dtm_options' ) ){
        bizberg_kirki_dtm_options( 
            array(
                'display' => array(
                    'desktop' => 'desktop',
                    'tablet' => 'tablet',
                    'mobile' => 'mobile'
                ),
                'field_id' => 'bizberg',
                'section'  => 'fashion_freak_slider',
                'settings' => 'fashion_freak_slider_image_height',
                'global_active_callback'    => array(
                    array(
                        'setting'  => 'fashion_freak_slider_post_status',
                        'operator' => '==',
                        'value'    => true
                    )
                ),
                'fields' => array(
                    'slider' => array(
                        'desktop' => array(
                            'label'    => esc_html__( 'Image Height', 'fashion-freak' ),
                            'settings' => 'fashion_freak_slider_image_height',
                            'default'  => 700,
                            'choices'  => [
                                'min'  => 100,
                                'max'  => 700,
                                'step' => 25,
                            ],
                            'transport' => 'auto',
                            'output'    => array(
                                array(
                                    'element'       => '.banner-slider-inner',
                                    'property'      => 'height',
                                    'value_pattern' => '$px'
                                ),
                            ),
                        ),
                        'tablet' => array(
                            'label' => esc_html__( 'Image Height', 'fashion-freak' ),
                            'settings' => 'fashion_freak_slider_image_height',
                            'default'     => 700,
                            'choices'     => [
                                'min'  => 100,
                                'max'  => 700,
                                'step' => 25,
                            ],
                            'transport' => 'auto',
                            'output' => array(
                                array(
                                    'element'       => '.banner-slider-inner',
                                    'property'      => 'height',
                                    'value_pattern' => '$px',     
                                    'media_query'   => '@media (min-width: 481px) and (max-width: 1024px)'
                                )
                            ),
                        ),
                        'mobile' => array(
                            'label' => esc_html__( 'Image Height', 'fashion-freak' ),
                            'settings' => 'fashion_freak_slider_image_height',
                            'default'     => 700,
                            'choices'     => [
                                'min'  => 100,
                                'max'  => 700,
                                'step' => 25,
                            ],
                            'transport' => 'auto',
                            'output' => array(
                                array(
                                    'element'       => '.banner-slider-inner',
                                    'property'      => 'height',
                                    'value_pattern' => '$px',
                                    'media_query'   => '@media (min-width: 320px) and (max-width: 480px)'
                                )
                            ),
                        )
                    ),
                )                
            ) 
        );
    }

    Kirki::add_field( 'bizberg', array(
	    'type'        => 'custom',
	    'settings'    => 'fashion_freak_slider_color_options',
	    'section'     => 'fashion_freak_slider',
	    'default'     => '<div class="bizberg_customizer_custom_heading">' . esc_html__( 'Color Options', 'fashion-freak' ) . '</div>',
	    'active_callback'    => array(
            array(
                'setting'  => 'fashion_freak_slider_post_status',
                'operator' => '==',
                'value'    => true
            ),
        ),
	) );

	Kirki::add_field( 'bizberg', array(
		'type'        => 'simple-gradient',
		'label'       => __( 'Background Gradient Colors', 'fashion-freak' ),
		'section'     => 'fashion_freak_slider',
		'settings'    => 'background_gradient_color_slider',
		'default'     => 'linear-gradient( 291deg, #fff, #eee )', // Use only hex colors
		'transport'   => 'auto',
		'active_callback'    => array(
            array(
                'setting'  => 'fashion_freak_slider_post_status',
                'operator' => '==',
                'value'    => true
            ),
        ),
		'output' => array(
			array(
				'element'  => '.banner-slider-item.no_image',
				'property' => 'background-image',
			)
		),
	) );

	Kirki::add_field( 'bizberg', array(
	    'type'        => 'custom',
	    'settings'    => 'fashion_freak_slider_font_options',
	    'section'     => 'fashion_freak_slider',
	    'default'     => '<div class="bizberg_customizer_custom_heading">' . esc_html__( 'Font Options', 'fashion-freak' ) . '</div>',
	    'active_callback'    => array(
            array(
                'setting'  => 'fashion_freak_slider_post_status',
                'operator' => '==',
                'value'    => true
            ),
        ),
	) );

	if( function_exists( 'bizberg_kirki_dtm_options' ) ){

	    bizberg_kirki_dtm_options( 
	        array(
	            'display' => array(
	                'desktop' => 'desktop',
	                'tablet'  => 'tablet',
	                'mobile'  => 'mobile'
	            ),
	            'field_id' => 'bizberg',
	            'section'  => 'fashion_freak_slider',
	            'settings' => 'fashion_freak_slider_options',
	            'global_active_callback'    => array(
	              	array(
	                	'setting'  => 'fashion_freak_slider_post_status',
	                	'operator' => '==',
	                	'value'    => true
	            	),
	          	),
	            'fields'   => array(
	                'typography' => array(
	                    'desktop' => array(
	                        'label' => esc_html__( 'Title Font Settings', 'fashion-freak' ),
	                        'settings' => 'fashion_freak_slider_options',
	                        'default'     => [
	                        	'font-family'    => 'EB Garamond',
	                        	'variant'        => 'regular',
				              	'font-size'      => '3em',
				              	'line-height'    => '1.2',
				              	'letter-spacing' => '0',
				            ],
	                        'transport' => 'auto',
	                        'output'      => [
				              	[
				                	'element' => 'body .banner-slider .banner-slider-item h2',
				                	'suffix'  => ' !important'
				              	],
				            ],
	                    ),
	                    'tablet' => array(
	                        'label' => esc_html__( 'Title Font Settings', 'fashion-freak' ),
	                        'settings' => 'fashion_freak_slider_options',
	                        'default'     => [
				              	'font-size'      => '50px',
				              	'line-height'    => '1.2',
				              	'letter-spacing' => '0',
				            ],
	                        'transport' => 'auto',
	                        'output' => array(
	                            array(
	                                'media_query' => '@media (min-width: 481px) and (max-width: 1024px)',
	                                'element'     => 'body .banner-slider .banner-slider-item h2',
				                	'suffix'      => ' !important'
	                            )
	                        ),
	                    ),
	                    'mobile' => array(
	                        'label' => esc_html__( 'Title Font Settings', 'fashion-freak' ),
	                        'settings' => 'fashion_freak_slider_options',
	                        'default'     => [
				              	'font-size'      => '35px',
				              	'line-height'    => '1.2',
				              	'letter-spacing' => '0'
				            ],
	                        'transport' => 'auto',
	                        'output' => array(
	                            array(
	                                'media_query' => '@media (min-width: 320px) and (max-width: 480px)',
	                                'element'     => 'body .banner-slider .banner-slider-item h2',
				                	'suffix'      => ' !important'
	                            )
	                        ),
	                    )
	                ),
	            )
	            
	        ) 
	    );

	}

}