<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Scheme_Color;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
Use Elementor\Core\Schemes\Typography;
use Elementor\Group_Control_Border;
use Elementor\Controls_Stack;

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

class Widgetkit_Pro_Grid_Slider extends Widget_Base
{

    public function get_name()
    {
        return 'magmax-recent-post-slider';
    }

    public function get_title()
    {
        return __('Post Grid Slider', 'widgetkit-pro');
    }

    public function get_icon()
    {
        return 'eicon-post-slider';
    }

    public function get_categories()
    {
        return ['widgetkit_pro'];
    }

    /**
	 * A list of style that the widgets is depended in
	 **/
	public function get_style_depends() {
        return [
            'widgetkit_bs',
            'owl-css',
            'fontawesome',
            'widgetkit_pro_default',
        ];
    }
	/**
	 * A list of scripts that the widgets is depended in
	 **/
	public function get_script_depends() {
		return [ 
            'owl-carousel',
			'wk-pro-js',
		 ];
	}


    protected function _register_controls()
    {
        /**
         * get all categories
         */
        $cat_names = array('' => 'All');
        $terms = get_terms( array(
            'taxonomy' => 'category',
            'hide_empty' => false,
        ) );
        foreach( $terms as $t ):
            $cat_names[$t->term_id] = $t->name;
        endforeach;
        /**
         * Queries
         */
        $this->start_controls_section(
            'section_control_queries',
            [
                'label' => __('Queries', 'widgetkit-pro'),
            ]
        );
        $this->add_control(
            'query_post_type',
            [
                'label'       => __( 'Type', 'widgetkit-pro' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'recent',
                'options' => [
                    'recent'  => __( 'Recent Post', 'widgetkit-pro' ),
                    // 'popular'  => __( 'Popular Post', 'widgetkit-pro' ),
                    // 'featured'  => __( 'Featured Post', 'widgetkit-pro' ),
                    // 'trending'  => __( 'Trending Post', 'widgetkit-pro' ),
                ],
            ]
        );
        $this->add_control(
            'post_num_to_show',
            [
                'label'   => __( 'Number of Post', 'widgetkit-pro' ),
                'type'    => Controls_Manager::NUMBER,
                'default' => 8,
                'min'     => 8,
                'max'     => 12,
                'step'    => 4,
            ]
        );
        $this->add_control(
            'cat_name',
            [
                'label'       => __( 'Category List', 'widgetkit-pro' ),
                'type' => Controls_Manager::SELECT,
                'default' => '',
                'options' => $cat_names,
            ]
        );
        $this->end_controls_section();

        /**
         * Post
         */
        $this->start_controls_section(
            'section_control_post',
            [
                'label' => __('Post', 'widgetkit-pro'),
            ]
        );
        $this->add_control(
            'regular_thumbnail_size',
            [
                'label'       => __( 'Thumbnail', 'widgetkit-pro' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'large',
                'options' => [
                    'medium'  => __( 'Medium', 'widgetkit-pro' ),
                    'medium_large'  => __( 'Medium Large', 'widgetkit-pro' ),
                    'large'  => __( 'Large', 'widgetkit-pro' ),
                    'full'  => __( 'Full', 'widgetkit-pro' ),
                ],
            ]
        );
        $this->add_control(
            'grid-gap',
            [
                'label' => __( 'Inner Gap', 'widgetkit-pro' ),
                'type' => Controls_Manager::SLIDER,
                'default' => [
                    'size' => 0,
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 30,
                        'step' => 1,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 5,
                    ],
                ],
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .post-slides' => 'grid-gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'slider_custom_height',
            [
                'label' => __( 'Custom Height', 'widgetkit-pro' ),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'label_on' => __( 'Yes', 'widgetkit-pro' ),
                'label_off' => __( 'No', 'widgetkit-pro' ),
                'return_value' => 'yes',
            ]
        );
        $this->add_control(
            'featured-post-min-height',
            [
                'label' => __( 'Featured Post Min Height', 'widgetkit-pro' ),
                'type' => Controls_Manager::SLIDER,
                'default' => [
                    'size' => 500,
                ],
                'range' => [
                    'px' => [
                        'min' => 300,
                        'max' => 1500,
                        'step' => 1,
                    ],
                ],
                'size_units' => [ 'px' ],
                'selectors' => [
                    '{{WRAPPER}} .post-slides' => 'min-height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'slider_custom_height' => 'yes'
                ]
            ]
        );
        
        $this->end_controls_section();

        /**
         * Primary Column style
         */
        $this->start_controls_section(
            'section_style_primary',
            [
                'label' => __( 'Primary Column', 'widgetkit-pro' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'style_primary_heading_title',
            [
            'label' => __( 'Title', 'widgetkit-pro' ),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            ]
        );
        $this->add_control(
            'highlight_title_color',
            [
                'label' => __( 'Color', 'widgetkit-pro' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .recent-post-slides .regular-post:first-child .post-title a > h3' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'label' => __( 'Typography', 'widgetkit-pro' ),
                'name' => 'highlight_post_title_typography',
                'selector' => '{{WRAPPER}} .recent-post-slides .regular-post:first-child .post-title a > h3',

            ]
        );
        $this->add_control(
            'highlight_title_hover_color',
            [
                'label' => __( 'Hover Color', 'widgetkit-pro' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .recent-post-slides .regular-post:first-child .post-title:hover h3' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_responsive_control(
            'featured_title_margin-bottom',
            [
                'label'   => esc_html__( 'Spacing Bottom', 'widgetkit-pro' ),
                'type'    => Controls_Manager::SLIDER,
                'default' => [
                    'size' =>10,
                ],
                'range'  => [
                    'px' => [
                        'min' => -20,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .regular-post:first-child .post-title h3' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'style_primary_heading_meta',
            [
            'label' => __( 'Meta', 'widgetkit-pro' ),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            ]
        );
        $this->add_control(
            'highlight_meta_color',
            [
                'label' => __( 'Color', 'widgetkit-pro' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .regular-post:first-child .wkp-post-meta div' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'label' => __( 'Typography', 'widgetkit-pro' ),
                'name' => 'highlight_post_meta_typography',
                'selector' => '{{WRAPPER}} .regular-post:first-child .wkp-post-meta div',

            ]
        );
        $this->add_control(
            'style_primary_heading_Content',
            [
            'label' => __( 'Content', 'widgetkit-pro' ),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            ]
        );
        $this->add_responsive_control(
            'primary_column_padding',
            [
                'label' => esc_html__( 'Padding', 'widgetkit-pro' ),
                'type'  => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px'],
                'selectors'  => [
                    '{{WRAPPER}} .regular-post:first-child .post-data' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
        
        /**
         * Secondary Column style
         */
        $this->start_controls_section(
            'section_style_secondary',
            [
                'label' => __( 'Secondary Column', 'widgetkit-pro' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'style_secondary_heading_title',
            [
            'label' => __( 'Title', 'widgetkit-pro' ),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            ]
        );
        $this->add_control(
            'regular_title_color',
            [
                'label' => __( 'Color', 'widgetkit-pro' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .recent-post-slides .regular-post .post-title a > h3' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'label' => __( 'Typography', 'widgetkit-pro' ),
                'name' => 'regular_post_title_typography',
                'selector' => '{{WRAPPER}} .recent-post-slides .regular-post .post-title a > h3',

            ]
        );
        $this->add_control(
            'regular_title_hover_color',
            [
                'label' => __( 'Hover Color', 'widgetkit-pro' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .recent-post-slides .regular-post .post-title:hover a > h3' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_responsive_control(
            'regular_title_margin-bottom',
            [
                'label'   => esc_html__( 'Spacing Bottom', 'widgetkit-pro' ),
                'type'    => Controls_Manager::SLIDER,
                'default' => [
                    'size' =>10,
                ],
                'range'  => [
                    'px' => [
                        'min' => -20,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .regular-post .post-title h3' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'style_secondary_heading_meta',
            [
            'label' => __( 'Meta', 'widgetkit-pro' ),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            ]
        );
        $this->add_control(
            'regular_meta_color',
            [
                'label' => __( 'Color', 'widgetkit-pro' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .regular-post .wkp-post-meta div' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'label' => __( 'Typography', 'widgetkit-pro' ),
                'name' => 'regular_post_meta_typography',
                'selector' => '{{WRAPPER}} .regular-post .wkp-post-meta div',

            ]
        );
        $this->add_control(
            'style_secondary_heading_Content',
            [
            'label' => __( 'Content', 'widgetkit-pro' ),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            ]
        );
        $this->add_responsive_control(
            'secondary_column_padding',
            [
                'label' => esc_html__( 'Padding', 'widgetkit-pro' ),
                'type'  => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px'],
                'selectors'  => [
                    '{{WRAPPER}} .regular-post:not(:first-child) .post-data' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();


        $this->start_controls_section(
            'section_gradient',
            [
                'label' => __( 'Overlay', 'widgetkit-pro' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'overlay_style',
            [
                'label'       => __( 'Style', 'widgetkit-pro' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'bg-gradient',
                'options' => [
                    // 'bg-overlay'  => __( 'Overlay', 'widgetkit-pro' ),
                    'bg-gradient'  => __( 'Overlay', 'widgetkit-pro' ),
                ],
            ]
        );
        $this->add_control(
            'background_overlay',
            [
                'label' => __( 'Background Overlay', 'widgetkit-pro' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .regular-post .post-thumb a:after' => 'background-color: {{VALUE}}',
                ],
                'condition' => [
                    'overlay_style' => 'bg-overlay',
                ],
            ]
        );

        $this->add_control(
            'gradient_1',
            [
                'label' => __( 'Color', 'widgetkit-pro' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .recent-post-slides .post-slides .regular-post .post-thumb a:after' => 'background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), {{VALUE}})',
                ],
                'condition' => [
                    'overlay_style' => 'bg-gradient',
                ],
            ]
        );

        $this->end_controls_section();


    }

    protected function render()
    {
        $settings = $this->get_settings();
        $layout = widgetkit_pro_array_get($settings, 'layout_style');
        $layout_header_enable = widgetkit_pro_array_get($settings, 'layout_header_enable');
        $layout_title = widgetkit_pro_array_get($settings, 'layout_title');
        $layout_view_all_enable = widgetkit_pro_array_get($settings, 'layout_view_all_enable');

        $cat_id = widgetkit_pro_array_get($settings, 'cat_name');
        $regular_thumbnail_size = widgetkit_pro_array_get($settings, 'regular_thumbnail_size');

        $query_post_type = widgetkit_pro_array_get($settings, 'query_post_type');
        $post_num_to_show = widgetkit_pro_array_get($settings, 'post_num_to_show');
        $highlight_first_post = widgetkit_pro_array_get($settings, 'highlight_first_post');
        $highlight_layout_style = widgetkit_pro_array_get($settings, 'highlight_layout_style');
        $show_highlight_cat_tag = widgetkit_pro_array_get($settings, 'show_highlight_cat_tag');
        $show_excerpt = widgetkit_pro_array_get($settings, 'show_excerpt');
        $highlight_excerpt_word_count = widgetkit_pro_array_get($settings, 'highlight_excerpt_word_count');
        $regular_excerpt_word_count = widgetkit_pro_array_get($settings, 'regular_excerpt_word_count');
        $excerpt_word_count = widgetkit_pro_array_get($settings, 'excerpt_word_count');
        $regular_post_grid = widgetkit_pro_array_get($settings, 'regular_post_grid');
        $regular_post_style = widgetkit_pro_array_get($settings, 'regular_post_style');
        $show_cat_tag = widgetkit_pro_array_get($settings, 'show_cat_tag');
        /**
         * term meta value
         * ================
         */
        $tax_term = get_term_meta($cat_id);
        // $tax_image = widgetkit_pro_array_get($tax_term, 'magmax_tax_image')[0];
        // $tax_tag_bg_color = widgetkit_pro_array_get($tax_term, 'magmax_tax_tag_bg_color')[0];
        /**
         * Gradient
         * =========
         */
        $overlay_style = widgetkit_pro_array_get($settings, 'overlay_style');
        $bg_overlay = widgetkit_pro_array_get($settings, 'background_overlay');
        $gradient_1 = widgetkit_pro_array_get($settings, 'gradient_1');
        $gradient_2 = widgetkit_pro_array_get($settings, 'gradient_2');
    ?>
    <?php
        include( plugin_dir_path( __FILE__ ) . '../layout/grid-slider.php');

        ?>
        <script>
            jQuery(function($){
                /**
                 * Recent post slider wrapper
                 * ===========================
                 */
                var winWidth = $(window).width();
                if(winWidth > 768){
                    var regularDivs = $("div.recent-post-slides .cat-post-list-wrapper > div.regular-post");
                    for(var i = 0; i < regularDivs.length; i+=4) {
                        regularDivs.slice(i, i+4).wrapAll("<div class='post-slides'></div>");
                    }
                    var popularDivs = $("div.popular-post-slides .cat-post-list-wrapper > div.regular-post");
                    for(var i = 0; i < popularDivs.length; i+=4) {
                        popularDivs.slice(i, i+4).wrapAll("<div class='post-slides'></div>");
                    }
                    var featuredDivs = $("div.featured-post-slides .cat-post-list-wrapper > div.regular-post");
                    for(var i = 0; i < featuredDivs.length; i+=4) {
                        featuredDivs.slice(i, i+4).wrapAll("<div class='post-slides'></div>");
                    }
                    var trendingDivs = $("div.trending-post-slides .cat-post-list-wrapper > div.regular-post");
                    for(var i = 0; i < trendingDivs.length; i+=4) {
                        trendingDivs.slice(i, i+4).wrapAll("<div class='post-slides'></div>");
                    }
                }

                /**
                 * Enable Carousel
                 * =================
                 */
                $(".recent-post-slides .cat-post-list-wrapper, .popular-post-slides .cat-post-list-wrapper, .featured-post-slides .cat-post-list-wrapper, .trending-post-slides .cat-post-list-wrapper ").owlCarousel({
                    pagination: true,
                    dots:false,
                    loop:true,
                    items:1,
                    nav: true,
                    navClass: ['owl-carousel-left','owl-carousel-right'],
                    navText: ['<i class="fa fa-angle-left fa-fw""></i>', '<i class="fa fa-angle-right fa-fw"></i>'],
                    margin:0,
                    autoplay:false,
                    autoHeight: true,
                    autoHeightClass: 'owl-height',
                    responsive:{
                        0:{
                            items:1
                        },
                        600:{
                            items:1
                        },
                        1000:{
                            items:1
                        }
                    }
                });
            });

        </script>
    <?php
    }
    protected function content_template()
    {
    }
}