slider widget

<?php

use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Scheme_Typography;

class CF_Event_Slider_Widget extends \Elementor\Widget_Base {
    public function get_name() {
        return "cf_event_slider";
    }
    public function get_title() {
        return "CF Events Slider";
    }

    public function get_icon() {
        return "eicon-slider-push";
    }
    public function get_categories() {
        return [ 'general', 'cf-cat' ];
    }
    public function get_post_types() {
        $post_types = cf_get_post_types( [],[ 'elementor_library', 'attachment' ] );
        return $post_types;
    }
    public function get_style_depends() {
        return [ 'owl-carousel', 'cf-style' ];
    }
    public function get_script_depends() {
        return [ 'owl-carousel', 'cf-script' ];
    }

    protected function _register_controls(){

        $this->start_controls_section(
            '_section_post_settings',
            [
                'label' => __( 'Settings', 'plugin-name' ),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control(
            'widget_title',
            [
                'label' => __( 'Title', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __( 'Posts', 'plugin-domain' ),
                'placeholder' => __( 'Type your title here', 'plugin-domain' ),
                'label_block'=> true
            ]
        );

        $this->add_control(
            'height',
            [
                'label' => __( 'Height', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1000,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 500,
                ],
                'selectors' => [
                    '{{WRAPPER}} .single-slider' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'autoplay',
            [
                'label' => __( 'Autoplay', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __( 'Yes', 'your-plugin' ),
                'label_off' => __( 'No', 'your-plugin' ),
                'return_value' => 'true',
                'default' => 'true',
            ]
        );
        $this->add_control(
            'loop',
            [
                'label' => __( 'Loop', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __( 'Yes', 'your-plugin' ),
                'label_off' => __( 'No', 'your-plugin' ),
                'return_value' => 'true',
                'default' => 'true',
            ]
        );
        $this->add_control(
            'nav',
            [
                'label' => __( 'Nav', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __( 'Yes', 'your-plugin' ),
                'label_off' => __( 'No', 'your-plugin' ),
                'return_value' => 'true',
                'default' => 'false',
            ]
        );
        $this->add_control(
            'dots',
            [
                'label' => __( 'Dots', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __( 'Yes', 'your-plugin' ),
                'label_off' => __( 'No', 'your-plugin' ),
                'return_value' => 'true',
                'default' => 'true',
            ]
        );
        $this->add_control(
            'center',
            [
                'label' => __( 'Center', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __( 'Yes', 'your-plugin' ),
                'label_off' => __( 'No', 'your-plugin' ),
                'return_value' => 'true',
                'default' => 'true',
            ]
        );
        $this->add_control(
            'autoplaytimeout',
            [
                'label' => __( 'Autoplay Timout', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 10000,
                'step' => 1000,
                'default' => 0,
            ]
        );
        $this->add_control(
            'items',
            [
                'label' => __( 'Slide Items', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 99,
                'step' => 1,
                'default' => 3,
            ]
        );
        $this->add_control(
            'items_mobile',
            [
                'label' => __( 'Slide Items Mobile', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 99,
                'step' => 1,
                'default' => 1,
            ]
        );
        $this->add_control(
            'margin',
            [
                'label' => __( 'Margin', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 100,
                'step' => 1,
                'default' => 0,
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            '_section_post_tab_query',
            [
                'label' => __( 'Query', 'plugin-name' ),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'post_type',
            [
                'label' => __( 'Source', 'plugin-name' ),
                'type' => Controls_Manager::SELECT,
                'options' => $this->get_post_types(),
                'default' => key( $this->get_post_types() ),
            ]
        );
        $this->add_control(
            'item_limit',
            [
                'label' => __( 'Item Limit', 'plugin-name' ),
                'type' => Controls_Manager::NUMBER,
                'default' => 3,
                'dynamic' => [ 'active' => true ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            '_section_style_column',
            [
                'label' => __( 'Widget style', 'plugin-name' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Background::get_type(),
            [
                'name' => 'background',
                'label' => __( 'Background', 'plugin-domain' ),
                'types' => [ 'classic', 'gradient', 'video' ],
                'selector' => '{{WRAPPER}} .slider_title_box',
            ]
        );
        $this->add_control(
            'overlay_color',
            [
                'label' => __( 'Overlay Color', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'scheme' => [
                    'type' => \Elementor\Scheme_Color::get_type(),
                    'value' => \Elementor\Scheme_Color::COLOR_1,
                ],
                'default'=> '9006F3'
            ]
        );


        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'content_typography',
                'label' => __( 'Typography', 'plugin-domain' ),
                'scheme' => \Elementor\Scheme_Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .cf_slider_title_box',
            ]
        );
        $this->add_control(
            'widget_title_color',
            [
                'label' => __( 'Widget Title Color', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'scheme' => [
                    'type' => \Elementor\Scheme_Color::get_type(),
                    'value' => \Elementor\Scheme_Color::COLOR_1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .cf_slider_title_box' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            '_section_style_title',
            [
                'label' => __( 'Title', 'plugin-name' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'title_color',
            [
                'label' => __( 'Title Color', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'scheme' => [
                    'type' => \Elementor\Scheme_Color::get_type(),
                    'value' => \Elementor\Scheme_Color::COLOR_1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .cf_post_title a' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'label' => __( 'Typography', 'plugin-domain' ),
                'scheme' => \Elementor\Scheme_Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .cf_post_title',
            ]
        );
        $this->end_controls_section();

        $this->start_controls_section(
            '_section_style_image',
            [
                'label' => __( 'Image', 'plugin-name' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'image_size',
            [
                'label' => __( 'Image Size', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'medium',
                'options' => [
                    'thumbnail'  => __( 'Thumbnail', 'plugin-domain' ),
                    'medium'  => __( 'Medium', 'plugin-domain' ),
                    'medium_large'  => __( 'Medium Large', 'plugin-domain' ),
                    'full'  => __( 'Full', 'plugin-domain' ),
                    '1536x1536'  => __( '1536x1536', 'plugin-domain' ),
                    '2048x2048'  => __( '2048x2048', 'plugin-domain' ),
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            '_section_style_meta',
            [
                'label' => __( 'Meta', 'plugin-name' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'meta_color',
            [
                'label' => __( 'Date Color', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'scheme' => [
                    'type' => \Elementor\Scheme_Color::get_type(),
                    'value' => \Elementor\Scheme_Color::COLOR_1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .date_time' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'date_typography',
                'label' => __( 'Typography', 'plugin-domain' ),
                'scheme' => \Elementor\Scheme_Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .date_time',
            ]
        );
        $this->add_control(
            'hr',
            [
                'type' => \Elementor\Controls_Manager::DIVIDER,
            ]
        );
        $this->add_control(
            'location_color',
            [
                'label' => __( 'Location Color', 'plugin-domain' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'scheme' => [
                    'type' => \Elementor\Scheme_Color::get_type(),
                    'value' => \Elementor\Scheme_Color::COLOR_1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .location' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'location_typography',
                'label' => __( 'Typography', 'plugin-domain' ),
                'scheme' => \Elementor\Scheme_Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .location',
            ]
        );
        $this->end_controls_section();
    }




    protected function render() {
        $settings = $this->get_settings_for_display();
        if ( !$settings['post_type'] ) {
            return;
        }

        $post_args = [
            'post_status'      => 'publish',
            'post_type'        => $settings['post_type'],
            'posts_per_page'   => $settings['item_limit'],
            'suppress_filters' => false,
        ];

        $posts = get_posts( $post_args );
        ?>

        <div class="cf_posts_slider">
            <div class="slider_title_box" data-overlay-color="<?php echo $settings['overlay_color']; ?>">
                <h2 class="cf_slider_title_box"><?php echo $settings['widget_title']; ?></h2>
            </div>
            <div class="post_slider_wrapper">
                <div id="cf_post_slider" class="owl-carousel owl-theme cf_post_slider"
                data-items="[<?php echo esc_attr( $settings['items'] ); ?>,<?php echo esc_attr( $settings['items_mobile'] ); ?>]"
                data-margin="<?php echo esc_attr( $settings['margin'] ); ?>"
                data-autoplay="<?php echo esc_attr( $settings['autoplay'] ); ?>"
                data-center="<?php echo esc_attr( $settings['center'] ); ?>"
                data-loop="<?php echo esc_attr( $settings['loop'] ); ?>"
                data-nav="<?php echo esc_attr( $settings['nav'] ); ?>"
                data-dots="<?php echo esc_attr( $settings['dots'] ); ?>"
                data-autoplaytimeout="<?php echo esc_attr( $settings['autoplaytimeout'] ); ?>"
                >
                <?php foreach($posts as $post) : ?>
                    <div class="single_post_box">
                        <h2 class="cf_post_title">
                            <a href="<?php echo esc_url( get_the_permalink( $post->ID ) ); ?>"> <?php echo esc_html( $post->post_title ); ?></a>
                        </h2>
                        <div class="cf_post_thumb" data-size="">
                            <?php if(has_post_thumbnail($post->ID)) : ?>
                            <a href="<?php echo esc_url( get_the_permalink( $post->ID ) ); ?>">
                                <?php echo get_the_post_thumbnail($post->ID, $settings['image_size']); ?>
                            </a>
                            <?php endif; ?>
                        </div>
                        <?php if(get_field( 'event_date', $post->ID ) || get_field('location', $post->ID)) : ?>
                        <div class="cf_post_meta">
                            <span class="date_time"><?php echo get_field( 'event_date', $post->ID );?></span>
                            <span class="location"><?php echo get_field('location', $post->ID); ?></span>
                        </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
                </div>
            </div>
        </div>


        <?php


    }

    protected function _content_template() {}
}