<?php
class Elementor_Cate_Slider extends \Elementor\Widget_Base {
	public function get_name() {
		return 'smo_cate_slider';
	}
	public function get_title() {
		return esc_html__( 'Smo Category Slider', 'elementor-addon' );
	}
	public function get_icon() {
		return 'eicon-info-box';
	}
	public function get_categories() {
		return [ 'basic' ];
	}
	public function get_keywords() {
		return [ 'cate_slider' ];
	}
	protected function register_controls() {
	
		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'smo' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
			'list',
			[
				'label' => esc_html__( 'List item', 'smo' ),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => [
					[
						'name' => 'list_image',
						'label' => esc_html__('Choose Image', 'smo'),
						'type' => \Elementor\Controls_Manager::MEDIA,
						'media_type' => 'image',
						'default' => '',
					],
					[
						'name' => 'list_title',
						'label' => esc_html__('Title', 'smo'),
						'type' => \Elementor\Controls_Manager::TEXT,
						'default' => '',
						'placeholder' => esc_html__('Name', 'smo'),
					],
					[
						'name' => 'list_desc',
						'label' => esc_html__('Description', 'smo'),
						'type' => \Elementor\Controls_Manager::TEXTAREA,
						'default' => '',
						'placeholder' => esc_html__('Description', 'smo'),
					],
					
				],
				'default' => [
					
				],
				'title_field' => '',
			]
		);
		$this->end_controls_section();
	}
	protected function render() {
		$settings = $this->get_settings_for_display();
		if ( is_array($settings['list']) && !empty($settings['list']) ) {
		?>
        <div class="category-mobile">
			<div class="swiper cate_slider"> 
				<div class="swiper-wrapper">
					<?php
					$count = count($settings['list']);
					foreach (  $settings['list'] as $item ) {
					?>
					<div class="swiper-slide box-cate cst-clipath">
						<div class="box-img">
							<img src="<?php echo $item['list_image']['url']; ?>" alt="">
						</div>
						<h3><?php echo $item['list_title'];?></h3>
						<p><?php echo $item['list_desc'];?></p>
					</div>
					<?php
						}
					?>
				</div>
			</div>
		</div>
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				var swiper = new Swiper('.cate_slider', {
					slidesPerView: 1.2,
					spaceBetween: 17,
					breakpoints: {
						961: {
							slidesPerView: 1,
							centeredSlides: true
						}
					},
				});
			});
		</script>
		<?php
		}
	}
}