<?php

namespace ElementPack\Modules\FooeventsCalendarEvents\Widgets;

use ElementPack\Base\Module_Base;
use ElementPack\Traits\Global_Widget_Controls;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Css_Filter;


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

class Fooevents_Calendar_Events extends Module_Base {

	use Global_Widget_Controls;

	public function get_name() {
		return 'bdt-fooevents-calendar-events';
	}

	public function get_title() {
		return BDTEP . esc_html__( 'FooEvents Calendar Events', 'bdthemes-element-pack' );
	}

	public function get_icon() {
		return 'bdt-wi-fooevents-calendar-events';
	}

	public function get_categories() {
		return [ 'element-pack' ];
	}

	public function get_keywords() {
		return [ 'fooevents', 'calendar', 'events', 'grid', 'list' ];
	}

	public function get_style_depends() {
		return $this->ep_is_edit_mode()? [ 'ep-styles' ] : [ 'ep-fooevents-calendar-events', 'ep-font' ];
	}

	public function get_custom_help_url() {
		return 'https://youtu.be/2J4XhOe8J0o';
	}

	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	protected function register_controls() {

		/* -----------------------------------------
			Layout Settings
		   ----------------------------------------- */

		$this->start_controls_section(
			'section_layout',
			[
				'label' => esc_html__( 'Layout', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'layout',
			[
				'label'   => esc_html__( 'View Type', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'grid',
				'options' => [
					'grid' => esc_html__( 'Grid', 'bdthemes-element-pack' ),
					'list' => esc_html__( 'List', 'bdthemes-element-pack' ),
				],
			]
		);

		$this->add_responsive_control(
			'columns',
			[
				'label'          => esc_html__( 'Columns', 'bdthemes-element-pack' ),
				'type'           => Controls_Manager::SELECT,
				'default'        => '3',
				'tablet_default' => '2',
				'mobile_default' => '1',
				'options'        => [
					'1' => '1',
					'2' => '2',
					'3' => '3',
					'4' => '4',
					'5' => '5',
					'6' => '6',
				],
				'condition' => [
					'layout' => 'grid',
				],
			]
		);

		$this->add_responsive_control(
			'column_gap',
			[
				'label'      => esc_html__( 'Column Gap', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem' ],
				'range'      => [
					'px'  => [ 'min' => 0, 'max' => 100, 'step' => 1 ],
					'em'  => [ 'min' => 0, 'max' => 10,  'step' => 0.1 ],
					'rem' => [ 'min' => 0, 'max' => 10,  'step' => 0.1 ],
				],
				'default'    => [ 'size' => 20, 'unit' => 'px' ],
				'selectors'  => [
					// Grid: UIkit's margin/padding pattern — compatible with bdt-child-width column classes.
					'{{WRAPPER}} .bdt-grid'                       => 'margin-left: -{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-grid > *'                   => 'padding-left: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-grid > .bdt-grid-margin'    => 'margin-top: {{SIZE}}{{UNIT}};',
					// List: standard CSS gap.
					'{{WRAPPER}} .ep-fooevents-calendar-events-list'       => 'gap: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'show_image',
			[
				'label'     => esc_html__( 'Show Image', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'separator' => 'before',
			]
		);

		$this->add_control(
			'show_title',
			[
				'label'   => esc_html__( 'Show Title', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'show_date',
			[
				'label'   => esc_html__( 'Show Date', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'show_time',
			[
				'label'   => esc_html__( 'Show Time', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'show_category',
			[
				'label'   => esc_html__( 'Show Category', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'fields_separator_1',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);

		$this->add_control(
			'time_as_tooltip',
			[
				'label'       => esc_html__( 'Time as Tooltip', 'bdthemes-element-pack' ),
				'description' => esc_html__( 'Show time as a tooltip on the date badge instead of displaying it inline.', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SWITCHER,
				'default'     => 'yes',
				'condition'   => [
					'show_date' => 'yes',
					'show_time' => 'yes',
				],
			]
		);

		$this->add_control(
			'show_location',
			[
				'label'   => esc_html__( 'Show Location', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'show_excerpt',
			[
				'label'   => esc_html__( 'Show Excerpt', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'excerpt_length',
			[
				'label'     => esc_html__( 'Excerpt Length', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 15,
				'condition' => [
					'show_excerpt' => 'yes',
				],
			]
		);

		$this->add_control(
			'fields_separator_2',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);

		$this->add_control(
			'show_read_more',
			[
				'label'   => esc_html__( 'Show Read More', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'read_more_text',
			[
				'label'     => esc_html__( 'Read More Text', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::TEXT,
				'dynamic'   => [ 'active' => true ],
				'default'   => esc_html__( 'Read More', 'bdthemes-element-pack' ),
				'condition' => [
					'show_read_more' => 'yes',
				],
			]
		);

		$this->add_control(
			'show_pagination',
			[ 
				'label' 	=> esc_html__( 'Pagination', 'bdthemes-element-pack' ),
				'type'  	=> Controls_Manager::SWITCHER,
				'separator' => 'before',
			]
		);

		$this->end_controls_section();

		/* -----------------------------------------
			Query Settings
		   ----------------------------------------- */
		$this->start_controls_section(
			'section_query',
			[
				'label' => esc_html__( 'Query', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'post_type',
			[
				'label'       => esc_html__( 'Post Type', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'post',
				'options'     => $this->get_fooevents_post_types(),
				'description' => esc_html__( 'Select the post type where your FooEvents events are stored.', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'posts_per_page',
			[
				'label'   => esc_html__( 'Limit', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::NUMBER,
				'default' => 6,
				'min'     => 1,
				'max'     => 100,
			]
		);

		$this->add_control(
			'fields_separator_3',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);

		$this->add_control(
			'orderby',
			[
				'label'   => esc_html__( 'Order By', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'title',
				'options' => [
					'title'      => esc_html__( 'Title', 'bdthemes-element-pack' ),
					'date'       => esc_html__( 'Post Date', 'bdthemes-element-pack' ),
					'meta_value' => esc_html__( 'Event Date', 'bdthemes-element-pack' ),
					'rand'       => esc_html__( 'Random', 'bdthemes-element-pack' ),
					'modified'   => esc_html__( 'Last Modified', 'bdthemes-element-pack' ),
				],
			]
		);

		$this->add_control(
			'order',
			[
				'label'   => esc_html__( 'Order', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'ASC',
				'options' => [
					'ASC'  => esc_html__( 'ASC', 'bdthemes-element-pack' ),
					'DESC' => esc_html__( 'DESC', 'bdthemes-element-pack' ),
				],
			]
		);

		$this->add_control(
			'fields_separator_4',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);

		$this->add_control(
			'show_upcoming_only',
			[
				'label'       => esc_html__( 'Upcoming Events Only', 'bdthemes-element-pack' ),
				'description' => esc_html__( 'Only show events with a date equal to or after today.', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SWITCHER,
				'default'     => '',
			]
		);

		$this->add_control(
			'include_categories',
			[
				'label'       => esc_html__( 'Filter by Category', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'placeholder' => esc_html__( 'featured, workshop', 'bdthemes-element-pack' ),
				'description' => esc_html__( 'Enter product category slugs separated by commas.', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'exclude_ids',
			[
				'label'       => esc_html__( 'Exclude Post IDs', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'placeholder' => esc_html__( '123, 456', 'bdthemes-element-pack' ),
				'description' => esc_html__( 'Enter post IDs to exclude, separated by commas.', 'bdthemes-element-pack' ),
			]
		);

		$this->end_controls_section();

		/* -----------------------------------------
			Item Style
		   ----------------------------------------- */

		$this->start_controls_section(
			'section_style_item',
			[
				'label' => esc_html__( 'Item', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs( 'tabs_item_style' );

		$this->start_controls_tab(
			'tab_item_normal',
			[ 'label' => esc_html__( 'Normal', 'bdthemes-element-pack' ) ]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'item_background',
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-item',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'item_border',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-item',
			]
		);

		$this->add_responsive_control(
			'item_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'item_box_shadow',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-item',
			]
		);

		$this->add_responsive_control(
			'item_padding',
			[
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-item-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_item_hover',
			[ 'label' => esc_html__( 'Hover', 'bdthemes-element-pack' ) ]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'item_hover_background',
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-item:hover',
			]
		);

		$this->add_control(
			'item_hover_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-item:hover' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'item_border_border!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'item_hover_box_shadow',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-item:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		/* -----------------------------------------
			Image Style
		   ----------------------------------------- */
		$this->start_controls_section(
			'section_style_image',
			[
				'label'     => esc_html__( 'Image', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 'show_image' => 'yes' ],
			]
		);

		$this->add_responsive_control(
			'image_height',
			[
				'label'      => esc_html__( 'Image Height', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'vh' ],
				'range'      => [
					'px' => [ 'min' => 50, 'max' => 600 ],
					'vh' => [ 'min' => 10, 'max' => 100 ],
				],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-image' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'image_object_fit',
			[
				'label' => esc_html__( 'Object Fit', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SELECT,
				'options' => [
					''           => esc_html__( 'Default', 'bdthemes-element-pack' ),
					'fill'       => esc_html__( 'Fill', 'bdthemes-element-pack' ),
					'cover'      => esc_html__( 'Cover', 'bdthemes-element-pack' ),
					'contain'    => esc_html__( 'Contain', 'bdthemes-element-pack' ),
					'scale-down' => esc_html__( 'Scale Down', 'bdthemes-element-pack' ),
				],
				'condition' => [
					'image_height[size]!' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-image img' => 'object-fit: {{VALUE}};',
				],
			]
		);
		
		$this->add_responsive_control(
			'image_object_position',
			[
				'label'   => esc_html__( 'Object Position', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'center center'  => esc_html__( 'Center Center', 'bdthemes-element-pack' ),
					'center left'    => esc_html__( 'Center Left', 'bdthemes-element-pack' ),
					'center right'   => esc_html__( 'Center Right', 'bdthemes-element-pack' ),
					'top center'     => esc_html__( 'Top Center', 'bdthemes-element-pack' ),
					'top left'       => esc_html__( 'Top Left', 'bdthemes-element-pack' ),
					'top right'      => esc_html__( 'Top Right', 'bdthemes-element-pack' ),
					'bottom center'  => esc_html__( 'Bottom Center', 'bdthemes-element-pack' ),
					'bottom left'    => esc_html__( 'Bottom Left', 'bdthemes-element-pack' ),
					'bottom right'   => esc_html__( 'Bottom Right', 'bdthemes-element-pack' ),
				],
				'default' => 'center center',
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-image img' => 'object-position: {{VALUE}};',
				],
				'condition' => [
					'image_height[size]!' => '',
					'image_object_fit'    => [ 'cover', 'contain', 'scale-down' ],
				],
			]
		);

		$this->add_responsive_control(
			'image_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-image, {{WRAPPER}} .ep-fooevents-calendar-events-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name'     => 'image_css_filters',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-image img',
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name'     => 'image_hover_css_filters',
				'label'    => esc_html__( 'Hover CSS Filters', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-item:hover .ep-fooevents-calendar-events-image img',
			]
		);

		$this->end_controls_section();

		/* -----------------------------------------
			Date Badge Style
		   ----------------------------------------- */
		$this->start_controls_section(
			'section_style_date',
			[
				'label'     => esc_html__( 'Date Badge', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 'show_date' => 'yes' ],
			]
		);

		$this->add_control(
			'date_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-date-badge' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'date_day_color',
			[
				'label'     => esc_html__( 'Day Number Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-date-badge .ep-day' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'date_background',
				'label'    => esc_html__( 'Background', 'bdthemes-element-pack' ),
				'types'    => [ 'gradient' ],
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-date-badge',
			]
		);

		$this->add_responsive_control(
			'date_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-date-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'date_padding',
			[
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-date-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'date_typography',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-date-badge',
			]
		);

		$this->end_controls_section();

		/* -----------------------------------------
			Title Style
		   ----------------------------------------- */
		$this->start_controls_section(
			'section_style_title',
			[
				'label'     => esc_html__( 'Title', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 'show_title' => 'yes' ],
			]
		);

		$this->add_control(
			'title_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-title a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'title_hover_color',
			[
				'label'     => esc_html__( 'Hover Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-title a:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'title_margin',
			[
				'label'      => esc_html__( 'Margin', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'title_typography',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-title',
			]
		);

		$this->end_controls_section();

		/* -----------------------------------------
			Time Style
		   ----------------------------------------- */
		$this->start_controls_section(
			'section_style_time',
			[
				'label'     => esc_html__( 'Time', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_time'      => 'yes',
					'time_as_tooltip' => '',
				],
			]
		);

		$this->add_control(
			'time_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-time' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'time_icon_color',
			[
				'label'     => esc_html__( 'Icon Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-time .ep-icon' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'time_typography',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-time',
			]
		);

		$this->end_controls_section();

		/* -----------------------------------------
			Category Style
		   ----------------------------------------- */
		$this->start_controls_section(
			'section_style_category',
			[
				'label'     => esc_html__( 'Category', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 'show_category' => 'yes' ],
			]
		);

		$this->start_controls_tabs( 'tabs_category_style' );

		$this->start_controls_tab(
			'tab_category_normal',
			[ 'label' => esc_html__( 'Normal', 'bdthemes-element-pack' ) ]
		);

		$this->add_control(
			'category_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-category, {{WRAPPER}} .ep-fooevents-calendar-events-category-link' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'category_background',
				'label'     => esc_html__( 'Background', 'bdthemes-element-pack' ),
				'types'     => [ 'classic', 'gradient' ],
				'selector'  => '{{WRAPPER}} .ep-fooevents-calendar-events-category .ep-fooevents-calendar-events-category-link',
				'fields_options' => [
					'background' => [
						'label' 	=> esc_html__( 'Background Color', 'bdthemes-element-pack' ),
					],
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'category_border',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-category .ep-fooevents-calendar-events-category-link',
			]
		);

		$this->add_responsive_control(
			'category_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-category .ep-fooevents-calendar-events-category-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'category_padding',
			[
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-category .ep-fooevents-calendar-events-category-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'category_spacing',
			[
				'label'      => esc_html__( 'Spacing', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-category' => 'gap: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'category_typography',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-category .ep-fooevents-calendar-events-category-link',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_category_hover',
			[ 'label' => esc_html__( 'Hover', 'bdthemes-element-pack' ) ]
		);

		$this->add_control(
			'category_hover_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-category .ep-fooevents-calendar-events-category-link:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'category_hover_background',
				'label'     => esc_html__( 'Background', 'bdthemes-element-pack' ),
				'types'     => [ 'classic', 'gradient' ],
				'selector'  => '{{WRAPPER}} .ep-fooevents-calendar-events-category .ep-fooevents-calendar-events-category-link:hover',
				'fields_options' => [
					'background' => [
						'label' 	=> esc_html__( 'Background Color', 'bdthemes-element-pack' ),
					],
				],
			]
		);

		$this->add_control(
			'category_hover_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-category .ep-fooevents-calendar-events-category-link:hover' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'category_border_border!' => '',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		/* -----------------------------------------
			Location Style
		   ----------------------------------------- */
		$this->start_controls_section(
			'section_style_location',
			[
				'label'     => esc_html__( 'Location', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 'show_location' => 'yes' ],
			]
		);

		$this->add_control(
			'location_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-location' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'location_typography',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-location',
			]
		);

		$this->end_controls_section();

		/* -----------------------------------------
			Excerpt Style
		   ----------------------------------------- */
		$this->start_controls_section(
			'section_style_excerpt',
			[
				'label'     => esc_html__( 'Excerpt', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 'show_excerpt' => 'yes' ],
			]
		);

		$this->add_control(
			'excerpt_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-excerpt' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'excerpt_typography',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-excerpt',
			]
		);

		$this->end_controls_section();

		/* -----------------------------------------
			Read More Button Style
		   ----------------------------------------- */
		$this->start_controls_section(
			'section_style_read_more',
			[
				'label'     => esc_html__( 'Read More Button', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 'show_read_more' => 'yes' ],
			]
		);

		$this->start_controls_tabs( 'tabs_read_more_style' );

		$this->start_controls_tab(
			'tab_read_more_normal',
			[ 'label' => esc_html__( 'Normal', 'bdthemes-element-pack' ) ]
		);

		$this->add_control(
			'read_more_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-read-more' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'read_more_background',
			[
				'label'     => esc_html__( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-read-more' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'read_more_border',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-read-more',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_read_more_hover',
			[ 'label' => esc_html__( 'Hover', 'bdthemes-element-pack' ) ]
		);

		$this->add_control(
			'read_more_hover_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-read-more:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'read_more_hover_background',
			[
				'label'     => esc_html__( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-read-more:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'read_more_hover_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-read-more:hover' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'read_more_border_border!' => '',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_responsive_control(
			'read_more_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-read-more' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator'  => 'before',
			]
		);

		$this->add_responsive_control(
			'read_more_padding',
			[
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .ep-fooevents-calendar-events-read-more' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'read_more_typography',
				'selector' => '{{WRAPPER}} .ep-fooevents-calendar-events-read-more',
			]
		);

		$this->end_controls_section();

		/* -----------------------------------------
			Pagination Style
		   ----------------------------------------- */

		$this->start_controls_section(
			'section_style_pagination',
			[ 
				'label'     => esc_html__( 'Pagination', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'show_pagination' => 'yes',
				],
			]
		);

		$this->register_pagination_controls();

		$this->end_controls_section();
	}

	/* -----------------------------------------
		HELPERS
	   ----------------------------------------- */

	protected function get_fooevents_post_types() {
		$options = [];

		// 1. WooCommerce products — always the primary FooEvents event source.
		if ( post_type_exists( 'product' ) ) {
			$options['product'] = esc_html__( 'WC Events (product)', 'bdthemes-element-pack' );
		}

		if ( post_type_exists( 'fe_eventbrite_event' ) ) {
			$options['fe_eventbrite_event'] = esc_html__( 'Eventbrite Events (fe_eventbrite_event)', 'bdthemes-element-pack' );
		}

		$associated = get_option( 'globalFooEventsCalendarPostTypes', [] );
		if ( ! is_array( $associated ) ) {
			$associated = [];
		}

		foreach ( $associated as $slug ) {
			$slug = sanitize_key( $slug );

			if ( isset( $options[ $slug ] ) ) {
				continue;
			}

			$obj = get_post_type_object( $slug );
			if ( $obj ) {
				$options[ $slug ] = $obj->labels->singular_name . ' (' . $slug . ')';
			}
		}

		// Fallback: if FooEvents has never been configured and no associated
		// types exist yet, expose post + page so the control is never empty.
		if ( count( $options ) === 0 || ( count( $options ) === 1 && isset( $options['product'] ) ) ) {
			foreach ( [ 'post', 'page' ] as $slug ) {
				if ( ! isset( $options[ $slug ] ) ) {
					$obj = get_post_type_object( $slug );
					if ( $obj ) {
						$options[ $slug ] = $obj->labels->singular_name . ' (' . $slug . ')';
					}
				}
			}
		}

		return $options;
	}

	protected function get_events_query() {
		$settings  = $this->get_settings_for_display();
		$post_type = ! empty( $settings['post_type'] ) ? sanitize_key( $settings['post_type'] ) : 'product';
		$taxonomy  = element_pack_get_taxonomy_by_post_type( $post_type );

		$meta_query = [
			'relation' => 'AND',
			[
				'key'     => 'WooCommerceEventsEvent',
				'value'   => 'Event',
				'compare' => '=',
			],
		];

		// Upcoming events filter appended before the query is built
		if ( 'yes' === $settings['show_upcoming_only'] ) {
			$meta_query[] = [
				'key'     => 'WooCommerceEventsDate',
				'value'   => gmdate( 'Y-m-d' ),
				'compare' => '>=',
				'type'    => 'DATE',
			];
		}

		$paged = max( 1, get_query_var( 'paged' ), get_query_var( 'page' ) );

		$args = [
			'post_type'      => $post_type,
			'posts_per_page' => ! empty( $settings['posts_per_page'] ) ? intval( $settings['posts_per_page'] ) : 6,
			'paged'          => $paged,
			'post_status'    => 'publish',
			'order'          => $settings['order'],
			'meta_query'     => $meta_query, // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
		];

		// Order by
		if ( 'meta_value' === $settings['orderby'] ) {
			$args['orderby']  = 'meta_value';
			$args['meta_key'] = 'WooCommerceEventsDate'; // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_key
		} else {
			$args['orderby'] = $settings['orderby'];
		}

		// Category filter — uses the correct taxonomy for the selected post type
		if ( ! empty( $settings['include_categories'] ) ) {
			$cats = array_filter( array_map( 'sanitize_title', explode( ',', $settings['include_categories'] ) ) );
			if ( ! empty( $cats ) ) {
				$args['tax_query'] = [ // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query
					[
						'taxonomy' => $taxonomy,
						'field'    => 'slug',
						'terms'    => $cats,
					],
				];
			}
		}

		// Exclude by ID
		if ( ! empty( $settings['exclude_ids'] ) ) {
			$ids = array_filter( array_map( 'intval', explode( ',', $settings['exclude_ids'] ) ) );
			if ( ! empty( $ids ) ) {
				$args['post__not_in'] = $ids;
			}
		}

		return new \WP_Query( $args );
	}

	protected function render_event_date( $post_id, $tooltip = '' ) {
		$date = get_post_meta( $post_id, 'WooCommerceEventsDate', true );
		if ( empty( $date ) ) {
			return;
		}

		$timestamp = strtotime( $date );
		if ( ! $timestamp ) {
			return;
		}
		$day   = date_i18n( 'd', $timestamp );
		$month = date_i18n( 'M', $timestamp );

		$tooltip_attr = ! empty( $tooltip )
			? ' bdt-tooltip="title: ' . esc_attr( '🕐 ' . $tooltip ) . '; pos: right"'
			: '';
		?>
		<div class="ep-fooevents-calendar-events-date-badge"<?php echo $tooltip_attr; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
			<span class="ep-day"><?php echo esc_html( $day ); ?></span>
			<span class="ep-month"><?php echo esc_html( $month ); ?></span>
		</div>
		<?php
	}

	protected function get_event_time_string( $post_id ) {
		$hour    = get_post_meta( $post_id, 'WooCommerceEventsHour', true );
		$minutes = get_post_meta( $post_id, 'WooCommerceEventsMinutes', true );
		$period  = get_post_meta( $post_id, 'WooCommerceEventsPeriod', true );

		if ( empty( $hour ) ) {
			return '';
		}

		$time = $hour . ':' . $minutes;
		if ( ! empty( $period ) ) {
			$time .= ' ' . strtoupper( $period );
		}

		$hour_end    = get_post_meta( $post_id, 'WooCommerceEventsHourEnd', true );
		$minutes_end = get_post_meta( $post_id, 'WooCommerceEventsMinutesEnd', true );
		$period_end  = get_post_meta( $post_id, 'WooCommerceEventsEndPeriod', true );

		if ( ! empty( $hour_end ) ) {
			$time .= ' - ' . $hour_end . ':' . $minutes_end;
			if ( ! empty( $period_end ) ) {
				$time .= ' ' . strtoupper( $period_end );
			}
		}

		return $time;
	}

	protected function render_event_time( $post_id ) {
		$time_str = $this->get_event_time_string( $post_id );
		if ( empty( $time_str ) ) {
			return;
		}
		?>
		<div class="ep-fooevents-calendar-events-time">
			<i class="far fa-clock ep-icon" aria-hidden="true"></i>
			<?php echo esc_html( $time_str ); ?>
		</div>
		<?php
	}

	protected function render_event_location( $post_id ) {
		$location = get_post_meta( $post_id, 'WooCommerceEventsLocation', true );
		if ( empty( $location ) ) {
			return;
		}
		?>
		<div class="ep-fooevents-calendar-events-location">
			<i class="fas fa-map-marker-alt ep-icon" aria-hidden="true"></i>
			<?php echo esc_html( $location ); ?>
		</div>
		<?php
	}

	protected function render_event_category( $post_id ) {
		$taxonomy   = element_pack_get_taxonomy_by_post_type( get_post_type( $post_id ) );
		$categories = get_the_terms( $post_id, $taxonomy );

		if ( empty( $categories ) || is_wp_error( $categories ) ) {
			return;
		}

		$cat_links = [];
		foreach ( $categories as $category ) {
			$term_link = get_term_link( $category );
			if ( is_wp_error( $term_link ) ) {
				continue;
			}
			$cat_links[] = sprintf(
				'<a href="%s" class="ep-fooevents-calendar-events-category-link">%s</a>',
				esc_url( $term_link ),
				esc_html( $category->name )
			);
		}

		if ( empty( $cat_links ) ) {
			return;
		}
		?>
		<div class="ep-fooevents-calendar-events-category">
			<?php echo wp_kses_post( implode( '', $cat_links ) ); ?>
		</div>
		<?php
	}

	protected function render_single_item( $post, array $settings ) {
		$post_id    = $post->ID;
		$post_link  = get_permalink( $post_id );
		$post_title = get_the_title( $post_id );

		$has_image       = has_post_thumbnail( $post_id );
		$show_image      = 'yes' === $settings['show_image'];
		$show_date       = 'yes' === $settings['show_date'];
		$show_time       = 'yes' === $settings['show_time'];
		$time_as_tooltip = 'yes' === $settings['time_as_tooltip'];
		$date_on_image   = $show_image && $has_image;

		// When tooltip mode is active, embed the time string in the date badge attribute.
		// Otherwise, time is rendered as a normal visible element alongside the date.
		$time_tooltip = ( $show_date && $show_time && $time_as_tooltip )
			? $this->get_event_time_string( $post_id )
			: '';
		?>
		<div class="ep-fooevents-calendar-events-item">

			<?php if ( $show_image && $has_image ) : ?>
				<div class="ep-fooevents-calendar-events-image">
					<a href="<?php echo esc_url( $post_link ); ?>" aria-label="<?php echo esc_attr( $post_title ); ?>">
						<?php echo get_the_post_thumbnail( $post_id, 'medium_large' ); ?>
					</a>

					<?php if ( $show_date || $show_time ) : ?>
						<div class="ep-fooevents-calendar-events-image-meta">
							<?php if ( $show_date ) : ?>
								<?php $this->render_event_date( $post_id, $time_tooltip ); ?>
							<?php endif; ?>
							<?php if ( $show_time && ! $time_as_tooltip ) : ?>
								<?php $this->render_event_time( $post_id ); ?>
							<?php endif; ?>
						</div>
					<?php endif; ?>
				</div>
			<?php endif; ?>

			<div class="ep-fooevents-calendar-events-item-content">

				<?php if ( ! $date_on_image && ( $show_date || $show_time ) ) : ?>
					<div class="ep-fooevents-calendar-events-meta-row">
						<?php if ( $show_date ) : ?>
							<?php $this->render_event_date( $post_id, $time_tooltip ); ?>
						<?php endif; ?>
						<?php if ( $show_time && ! $time_as_tooltip ) : ?>
							<div class="ep-fooevents-calendar-events-meta-details">
								<?php $this->render_event_time( $post_id ); ?>
							</div>
						<?php endif; ?>
					</div>
				<?php endif; ?>

				<?php if ( 'yes' === $settings['show_category'] || 'yes' === $settings['show_location'] ) : ?>
					<div class="ep-fooevents-calendar-events-meta-details">
						<?php if ( 'yes' === $settings['show_category'] ) : ?>
							<?php $this->render_event_category( $post_id ); ?>
						<?php endif; ?>
						<?php if ( 'yes' === $settings['show_location'] ) : ?>
							<?php $this->render_event_location( $post_id ); ?>
						<?php endif; ?>
					</div>
				<?php endif; ?>

				<?php if ( 'yes' === $settings['show_title'] ) : ?>
					<h3 class="ep-fooevents-calendar-events-title">
						<a href="<?php echo esc_url( $post_link ); ?>">
							<?php echo esc_html( $post_title ); ?>
						</a>
					</h3>
				<?php endif; ?>

				<?php if ( 'yes' === $settings['show_excerpt'] ) : ?>
					<div class="ep-fooevents-calendar-events-excerpt">
						<?php
						$excerpt_length = ! empty( $settings['excerpt_length'] ) ? intval( $settings['excerpt_length'] ) : 15;
						$excerpt        = get_the_excerpt( $post_id );
						if ( empty( $excerpt ) ) {
							$excerpt = get_the_content( null, false, $post_id );
						}
						echo wp_kses_post( wp_trim_words( $excerpt, $excerpt_length, '&hellip;' ) );
						?>
					</div>
				<?php endif; ?>

				<?php if ( 'yes' === $settings['show_read_more'] ) : ?>
					<a href="<?php echo esc_url( $post_link ); ?>" class="ep-fooevents-calendar-events-read-more">
						<?php echo esc_html( ! empty( $settings['read_more_text'] ) ? $settings['read_more_text'] : __( 'Read More', 'bdthemes-element-pack' ) ); ?>
					</a>
				<?php endif; ?>

			</div>
		</div>
		<?php
	}

	public function render() {
		$settings = $this->get_settings_for_display();
		$layout   = $settings['layout'];
		$query    = $this->get_events_query();

		if ( ! $query->have_posts() ) {
			echo '<div class="bdt-alert bdt-alert-warning">' . esc_html__( 'No events found.', 'bdthemes-element-pack' ) . '</div>';
			return;
		}

		$this->add_render_attribute( 'wrapper', 'class', [
			'ep-fooevents-calendar-events-wrapper',
			'ep-fooevents-calendar-events-layout-' . $layout,
		] );

		$columns_mobile  = ! empty( $settings['columns_mobile'] ) ? $settings['columns_mobile'] : '1';
		$columns_tablet  = ! empty( $settings['columns_tablet'] ) ? $settings['columns_tablet'] : '2';
		$columns_desktop = ! empty( $settings['columns_desktop'] ) ? $settings['columns_desktop'] : '3';
		$columns         = ! empty( $settings['columns'] ) ? $settings['columns'] : '3';

		if ( 'grid' === $layout ) {
			$this->add_render_attribute( 'grid', [
				'class'    => [
					'bdt-grid',
					'bdt-child-width-1-' . $columns_mobile,
					'bdt-child-width-1-' . $columns_tablet . '@s',
					'bdt-child-width-1-' . $columns_desktop . '@m',
					'bdt-child-width-1-' . $columns . '@l',
				],
				'bdt-grid' => '',
			] );
		}
		?>
		<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>

			<?php if ( 'grid' === $layout ) : ?>

				<div <?php $this->print_render_attribute_string( 'grid' ); ?>>
					<?php while ( $query->have_posts() ) : $query->the_post(); ?>
						<div><?php $this->render_single_item( $query->post, $settings ); ?></div>
					<?php endwhile; ?>
				</div>

			<?php else : ?>

				<div class="ep-fooevents-calendar-events-list">
					<?php while ( $query->have_posts() ) : $query->the_post(); ?>
						<?php $this->render_single_item( $query->post, $settings ); ?>
					<?php endwhile; ?>
				</div>

			<?php endif; ?>

		</div>
		<?php

		if ( 'yes' === $settings['show_pagination'] ) {
			?>
			<div class="ep-pagination">
				<?php element_pack_post_pagination( $query ); ?>
			</div>
			<?php
		}

		wp_reset_postdata();
	}
}