<?php

namespace RadiusTheme\RadiusBooking\Elementor\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use RadiusTheme\RadiusBooking\Controllers\ServiceController;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class ServiceListWidget extends Widget_Base {

	public function get_name() {
		return 'rtrb_service_list';
	}

	public function get_title() {
		return esc_html__( 'Service List', 'radius-booking' );
	}

	public function get_icon() {
		return 'rtrb-icon-booking';
	}

	public function get_categories() {
		return array( 'radius-booking' );
	}

	public function get_keywords() {
		return array( 'service', 'booking', 'appointment', 'list', 'grid', 'radius' );
	}

	private function get_service_categories() {
		$categories = array( '' => esc_html__( 'All Categories', 'radius-booking' ) );

		try {
			$services = ( new ServiceController() )->fetchAllServices();
			if ( is_array( $services ) ) {
				foreach ( $services as $cat ) {
					if ( ! empty( $cat['id'] ) && ! empty( $cat['name'] ) ) {
						$categories[ $cat['id'] ] = $cat['name'];
					}
				}
			}
		} catch ( \Exception $e ) { // phpcs:ignore Generic.CodeAnalysis.EmptyStatement.DetectedCatch
			// Silently fail — categories will just show "All Categories".
		}

		return $categories;
	}

	protected function register_controls() {
		$this->register_content_controls();
		$this->register_style_controls();
	}

	private function register_content_controls() {
		// ── CONTENT: Layout ──
		$this->start_controls_section(
			'section_layout',
			array(
				'label' => esc_html__( 'Layout', 'radius-booking' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'layout',
			array(
				'label'   => esc_html__( 'Layout', 'radius-booking' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'grid',
				'options' => array(
					'grid' => esc_html__( 'Grid', 'radius-booking' ),
					'list' => esc_html__( 'List', 'radius-booking' ),
				),
			)
		);

		$this->add_control(
			'columns',
			array(
				'label'     => esc_html__( 'Columns', 'radius-booking' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '3',
				'options'   => array(
					'1' => '1',
					'2' => '2',
					'3' => '3',
					'4' => '4',
				),
				'condition' => array(
					'layout' => 'grid',
				),
			)
		);

		$this->add_control(
			'per_page',
			array(
				'label'   => esc_html__( 'Services Per Page', 'radius-booking' ),
				'type'    => Controls_Manager::NUMBER,
				'default' => 9,
				'min'     => 1,
				'max'     => 50,
			)
		);

		$this->add_control(
			'category',
			array(
				'label'   => esc_html__( 'Filter by Category', 'radius-booking' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '',
				'options' => $this->get_service_categories(),
			)
		);

		$this->end_controls_section();

		// ── CONTENT: Display Options ──
		$this->start_controls_section(
			'section_display',
			array(
				'label' => esc_html__( 'Display Options', 'radius-booking' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$toggles = array(
			'show_image'           => esc_html__( 'Show Image', 'radius-booking' ),
			'show_price'           => esc_html__( 'Show Price', 'radius-booking' ),
			'show_duration'        => esc_html__( 'Show Duration', 'radius-booking' ),
			'show_category'        => esc_html__( 'Show Category Badge', 'radius-booking' ),
			'show_description'     => esc_html__( 'Show Description', 'radius-booking' ),
			'show_staff'           => esc_html__( 'Show Staff', 'radius-booking' ),
		);

		foreach ( $toggles as $key => $label ) {
			$this->add_control(
				$key,
				array(
					'label'        => $label,
					'type'         => Controls_Manager::SWITCHER,
					'label_on'     => esc_html__( 'Yes', 'radius-booking' ),
					'label_off'    => esc_html__( 'No', 'radius-booking' ),
					'return_value' => 'yes',
					'default'      => 'yes',
				)
			);
		}

		$this->add_control(
			'show_category_filter',
			array(
				'label'        => esc_html__( 'Show Category Filter', 'radius-booking' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'radius-booking' ),
				'label_off'    => esc_html__( 'No', 'radius-booking' ),
				'return_value' => 'yes',
				'default'      => 'yes',
				'condition'    => array(
					'category' => '',
				),
			)
		);

		$this->add_control(
			'button_text',
			array(
				'label'       => esc_html__( 'Button Text', 'radius-booking' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Book Now', 'radius-booking' ),
				'placeholder' => esc_html__( 'Book Now', 'radius-booking' ),
			)
		);

		$this->end_controls_section();
	}

	private function register_style_controls() {
		$this->register_card_style_controls();
		$this->register_image_style_controls();
		$this->register_title_style_controls();
		$this->register_description_style_controls();
		$this->register_price_style_controls();
		$this->register_duration_style_controls();
		$this->register_category_badge_style_controls();
		$this->register_staff_style_controls();
		$this->register_button_style_controls();
		$this->register_read_more_style_controls();
		$this->register_category_filter_style_controls();
		$this->register_pagination_style_controls();
	}

	/* ─────────────────────────── STYLE: Card ─────────────────────────── */
	private function register_card_style_controls() {
		$this->start_controls_section(
			'section_style_card',
			array(
				'label' => esc_html__( 'Card', 'radius-booking' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'primary_color',
			array(
				'label'   => esc_html__( 'Primary Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#0040ff',
			)
		);

		$this->add_control(
			'card_bg_color',
			array(
				'label'   => esc_html__( 'Background', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);

		$this->add_control(
			'card_border_color',
			array(
				'label'   => esc_html__( 'Border Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#e5e7eb',
			)
		);

		$this->add_control(
			'card_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em', 'rem' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 12,
				),
			)
		);

		$this->add_control(
			'card_padding',
			array(
				'label'      => esc_html__( 'Content Padding', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
			)
		);

		$this->add_control(
			'card_gap',
			array(
				'label'      => esc_html__( 'Gap Between Cards', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 24,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Image ─────────────────────────── */
	private function register_image_style_controls() {
		$this->start_controls_section(
			'section_style_image',
			array(
				'label'     => esc_html__( 'Image', 'radius-booking' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'show_image' => 'yes',
				),
			)
		);

		$this->add_control(
			'image_height',
			array(
				'label'      => esc_html__( 'Height', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 100,
						'max' => 400,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 192,
				),
				'condition'  => array(
					'layout' => 'grid',
				),
			)
		);

		$this->add_control(
			'image_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 0,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Title ─────────────────────────── */
	private function register_title_style_controls() {
		$this->start_controls_section(
			'section_style_title',
			array(
				'label' => esc_html__( 'Title', 'radius-booking' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'title_color',
			array(
				'label'   => esc_html__( 'Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#111827',
			)
		);

		$this->add_control(
			'title_font_size',
			array(
				'label'      => esc_html__( 'Font Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 12,
						'max' => 36,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 18,
				),
			)
		);

		$this->add_control(
			'title_font_weight',
			array(
				'label'   => esc_html__( 'Font Weight', 'radius-booking' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '600',
				'options' => array(
					'400' => esc_html__( 'Normal', 'radius-booking' ),
					'500' => esc_html__( 'Medium', 'radius-booking' ),
					'600' => esc_html__( 'Semi Bold', 'radius-booking' ),
					'700' => esc_html__( 'Bold', 'radius-booking' ),
				),
			)
		);

		$this->add_control(
			'title_margin_bottom',
			array(
				'label'      => esc_html__( 'Spacing Bottom', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 4,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Description ─────────────────────────── */
	private function register_description_style_controls() {
		$this->start_controls_section(
			'section_style_description',
			array(
				'label'     => esc_html__( 'Description', 'radius-booking' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'show_description' => 'yes',
				),
			)
		);

		$this->add_control(
			'desc_color',
			array(
				'label'   => esc_html__( 'Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#6b7280',
			)
		);

		$this->add_control(
			'desc_font_size',
			array(
				'label'      => esc_html__( 'Font Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 24,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 14,
				),
			)
		);

		$this->add_control(
			'desc_line_height',
			array(
				'label'      => esc_html__( 'Line Height', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em' ),
				'range'      => array(
					'px' => array(
						'min' => 14,
						'max' => 40,
					),
					'em' => array(
						'min'  => 1,
						'max'  => 3,
						'step' => 0.1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 22,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Price ─────────────────────────── */
	private function register_price_style_controls() {
		$this->start_controls_section(
			'section_style_price',
			array(
				'label'     => esc_html__( 'Price', 'radius-booking' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'show_price' => 'yes',
				),
			)
		);

		$this->add_control(
			'price_color',
			array(
				'label'       => esc_html__( 'Color', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty to use Primary Color.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'price_font_size',
			array(
				'label'      => esc_html__( 'Font Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 12,
						'max' => 36,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 18,
				),
			)
		);

		$this->add_control(
			'price_font_weight',
			array(
				'label'   => esc_html__( 'Font Weight', 'radius-booking' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '700',
				'options' => array(
					'400' => esc_html__( 'Normal', 'radius-booking' ),
					'500' => esc_html__( 'Medium', 'radius-booking' ),
					'600' => esc_html__( 'Semi Bold', 'radius-booking' ),
					'700' => esc_html__( 'Bold', 'radius-booking' ),
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Duration ─────────────────────────── */
	private function register_duration_style_controls() {
		$this->start_controls_section(
			'section_style_duration',
			array(
				'label'     => esc_html__( 'Duration', 'radius-booking' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'show_duration' => 'yes',
				),
			)
		);

		$this->add_control(
			'duration_color',
			array(
				'label'   => esc_html__( 'Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#7a8092',
			)
		);

		$this->add_control(
			'duration_font_size',
			array(
				'label'      => esc_html__( 'Font Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 20,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 15,
				),
			)
		);

		$this->add_control(
			'duration_icon_size',
			array(
				'label'      => esc_html__( 'Icon Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 24,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 14,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Category Badge ─────────────────────────── */
	private function register_category_badge_style_controls() {
		$this->start_controls_section(
			'section_style_badge',
			array(
				'label'     => esc_html__( 'Category Badge', 'radius-booking' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'show_category' => 'yes',
				),
			)
		);

		$this->add_control(
			'badge_bg_color',
			array(
				'label'       => esc_html__( 'Background', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty to auto-generate from Primary Color.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'badge_text_color',
			array(
				'label'       => esc_html__( 'Text Color', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty to use Primary Color.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'badge_font_size',
			array(
				'label'      => esc_html__( 'Font Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 18,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 12,
				),
			)
		);

		$this->add_control(
			'badge_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 9999,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Staff ─────────────────────────── */
	private function register_staff_style_controls() {
		$this->start_controls_section(
			'section_style_staff',
			array(
				'label'     => esc_html__( 'Staff', 'radius-booking' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'show_staff' => 'yes',
				),
			)
		);

		$this->add_control(
			'staff_avatar_size',
			array(
				'label'      => esc_html__( 'Avatar Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 20,
						'max' => 50,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 28,
				),
			)
		);

		$this->add_control(
			'staff_avatar_bg',
			array(
				'label'       => esc_html__( 'Avatar Fallback Background', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty to use Primary Color.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'staff_name_color',
			array(
				'label'   => esc_html__( 'Name Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#7a8092',
			)
		);

		$this->add_control(
			'staff_name_font_size',
			array(
				'label'      => esc_html__( 'Name Font Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 18,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 15,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Button ─────────────────────────── */
	private function register_button_style_controls() {
		$this->start_controls_section(
			'section_style_button',
			array(
				'label' => esc_html__( 'Book Now Button', 'radius-booking' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'button_bg_color',
			array(
				'label'       => esc_html__( 'Background', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty to use Primary Color.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'button_text_color',
			array(
				'label'   => esc_html__( 'Text Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);

		$this->add_control(
			'button_hover_bg_color',
			array(
				'label'       => esc_html__( 'Hover Background', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty for default opacity hover.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'button_hover_text_color',
			array(
				'label'       => esc_html__( 'Hover Text Color', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty to keep same text color.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'button_font_size',
			array(
				'label'      => esc_html__( 'Font Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 24,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 14,
				),
			)
		);

		$this->add_control(
			'button_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 8,
				),
			)
		);

		$this->add_control(
			'button_padding_x',
			array(
				'label'      => esc_html__( 'Horizontal Padding', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 5,
						'max' => 50,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
			)
		);

		$this->add_control(
			'button_padding_y',
			array(
				'label'      => esc_html__( 'Vertical Padding', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 5,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 10,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Read More ─────────────────────────── */
	private function register_read_more_style_controls() {
		$this->start_controls_section(
			'section_style_read_more',
			array(
				'label'     => esc_html__( 'Read More Link', 'radius-booking' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'show_description' => 'yes',
				),
			)
		);

		$this->add_control(
			'read_more_color',
			array(
				'label'       => esc_html__( 'Color', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty to use Primary Color.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'read_more_font_size',
			array(
				'label'      => esc_html__( 'Font Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 18,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 12,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Category Filter ─────────────────────────── */
	private function register_category_filter_style_controls() {
		$this->start_controls_section(
			'section_style_filter',
			array(
				'label'     => esc_html__( 'Category Filter', 'radius-booking' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'category' => '',
				),
			)
		);

		$this->add_control(
			'filter_heading_active',
			array(
				'label'     => esc_html__( 'Active State', 'radius-booking' ),
				'type'      => Controls_Manager::HEADING,
			)
		);

		$this->add_control(
			'filter_active_bg',
			array(
				'label'       => esc_html__( 'Background', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty to use Primary Color.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'filter_active_text',
			array(
				'label'   => esc_html__( 'Text Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);

		$this->add_control(
			'filter_heading_inactive',
			array(
				'label'     => esc_html__( 'Inactive State', 'radius-booking' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);

		$this->add_control(
			'filter_inactive_bg',
			array(
				'label'   => esc_html__( 'Background', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);

		$this->add_control(
			'filter_inactive_text',
			array(
				'label'   => esc_html__( 'Text Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#4b5563',
			)
		);

		$this->add_control(
			'filter_inactive_border',
			array(
				'label'   => esc_html__( 'Border Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#e5e7eb',
			)
		);

		$this->add_control(
			'filter_heading_general',
			array(
				'label'     => esc_html__( 'General', 'radius-booking' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);

		$this->add_control(
			'filter_font_size',
			array(
				'label'      => esc_html__( 'Font Size', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 20,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 14,
				),
			)
		);

		$this->add_control(
			'filter_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 9999,
				),
			)
		);

		$this->add_control(
			'filter_gap',
			array(
				'label'      => esc_html__( 'Gap', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 20,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 8,
				),
			)
		);

		$this->add_control(
			'filter_margin_bottom',
			array(
				'label'      => esc_html__( 'Spacing Bottom', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 24,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ─────────────────────────── STYLE: Pagination ─────────────────────────── */
	private function register_pagination_style_controls() {
		$this->start_controls_section(
			'section_style_pagination',
			array(
				'label' => esc_html__( 'Pagination', 'radius-booking' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'pagination_active_bg',
			array(
				'label'       => esc_html__( 'Active Background', 'radius-booking' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'description' => esc_html__( 'Leave empty to use Primary Color.', 'radius-booking' ),
			)
		);

		$this->add_control(
			'pagination_active_text',
			array(
				'label'   => esc_html__( 'Active Text Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);

		$this->add_control(
			'pagination_inactive_bg',
			array(
				'label'   => esc_html__( 'Inactive Background', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);

		$this->add_control(
			'pagination_inactive_text',
			array(
				'label'   => esc_html__( 'Inactive Text Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#4b5563',
			)
		);

		$this->add_control(
			'pagination_inactive_border',
			array(
				'label'   => esc_html__( 'Inactive Border Color', 'radius-booking' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#e5e7eb',
			)
		);

		$this->add_control(
			'pagination_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'radius-booking' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 20,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 8,
				),
			)
		);

		$this->end_controls_section();
	}

	/* ═════════════════════════════ RENDER ═════════════════════════════ */

	private function slider_val( $settings, $key, $fallback = 0 ) {
		return ( $settings[ $key ]['size'] ?? $fallback ) . ( $settings[ $key ]['unit'] ?? 'px' );
	}

	protected function render() {
		$s = $this->get_settings_for_display();

		$widget_styles = array(
			// Card.
			'primaryColor'       => $s['primary_color'] ?? '#0040ff',
			'cardBgColor'        => $s['card_bg_color'] ?? '#ffffff',
			'cardBorderColor'    => $s['card_border_color'] ?? '#e5e7eb',
			'cardBorderRadius'   => $this->slider_val( $s, 'card_border_radius', 12 ),
			'cardPadding'        => $this->slider_val( $s, 'card_padding', 20 ),
			'cardGap'            => $this->slider_val( $s, 'card_gap', 24 ),
			// Image.
			'imageHeight'        => $this->slider_val( $s, 'image_height', 192 ),
			'imageBorderRadius'  => $this->slider_val( $s, 'image_border_radius', 0 ),
			// Title.
			'titleColor'         => $s['title_color'] ?? '#111827',
			'titleFontSize'      => $this->slider_val( $s, 'title_font_size', 18 ),
			'titleFontWeight'    => $s['title_font_weight'] ?? '600',
			'titleMarginBottom'  => $this->slider_val( $s, 'title_margin_bottom', 4 ),
			// Description.
			'descColor'          => $s['desc_color'] ?? '#6b7280',
			'descFontSize'       => $this->slider_val( $s, 'desc_font_size', 14 ),
			'descLineHeight'     => $this->slider_val( $s, 'desc_line_height', 22 ),
			// Price.
			'priceColor'         => $s['price_color'] ?? '',
			'priceFontSize'      => $this->slider_val( $s, 'price_font_size', 18 ),
			'priceFontWeight'    => $s['price_font_weight'] ?? '700',
			// Duration.
			'durationColor'      => $s['duration_color'] ?? '#9ca3af',
			'durationFontSize'   => $this->slider_val( $s, 'duration_font_size', 15 ),
			'durationIconSize'   => $this->slider_val( $s, 'duration_icon_size', 14 ),
			// Category Badge.
			'badgeBgColor'       => $s['badge_bg_color'] ?? '',
			'badgeTextColor'     => $s['badge_text_color'] ?? '',
			'badgeFontSize'      => $this->slider_val( $s, 'badge_font_size', 12 ),
			'badgeBorderRadius'  => $this->slider_val( $s, 'badge_border_radius', 9999 ),
			// Staff.
			'staffAvatarSize'    => $this->slider_val( $s, 'staff_avatar_size', 28 ),
			'staffAvatarBg'      => $s['staff_avatar_bg'] ?? '',
			'staffNameColor'     => $s['staff_name_color'] ?? '#9ca3af',
			'staffNameFontSize'  => $this->slider_val( $s, 'staff_name_font_size', 12 ),
			// Button.
			'buttonBgColor'      => $s['button_bg_color'] ?? '',
			'buttonTextColor'    => $s['button_text_color'] ?? '#ffffff',
			'buttonHoverBgColor' => $s['button_hover_bg_color'] ?? '',
			'buttonHoverTextColor' => $s['button_hover_text_color'] ?? '',
			'buttonFontSize'     => $this->slider_val( $s, 'button_font_size', 14 ),
			'buttonBorderRadius' => $this->slider_val( $s, 'button_border_radius', 8 ),
			'buttonPaddingX'     => $this->slider_val( $s, 'button_padding_x', 20 ),
			'buttonPaddingY'     => $this->slider_val( $s, 'button_padding_y', 10 ),
			// Read More.
			'readMoreColor'      => $s['read_more_color'] ?? '',
			'readMoreFontSize'   => $this->slider_val( $s, 'read_more_font_size', 12 ),
			// Category Filter.
			'filterActiveBg'     => $s['filter_active_bg'] ?? '',
			'filterActiveText'   => $s['filter_active_text'] ?? '#ffffff',
			'filterInactiveBg'   => $s['filter_inactive_bg'] ?? '#ffffff',
			'filterInactiveText' => $s['filter_inactive_text'] ?? '#4b5563',
			'filterInactiveBorder' => $s['filter_inactive_border'] ?? '#e5e7eb',
			'filterFontSize'     => $this->slider_val( $s, 'filter_font_size', 14 ),
			'filterBorderRadius' => $this->slider_val( $s, 'filter_border_radius', 9999 ),
			'filterGap'          => $this->slider_val( $s, 'filter_gap', 8 ),
			'filterMarginBottom' => $this->slider_val( $s, 'filter_margin_bottom', 24 ),
			// Pagination.
			'paginationActiveBg'   => $s['pagination_active_bg'] ?? '',
			'paginationActiveText' => $s['pagination_active_text'] ?? '#ffffff',
			'paginationInactiveBg'   => $s['pagination_inactive_bg'] ?? '#ffffff',
			'paginationInactiveText' => $s['pagination_inactive_text'] ?? '#4b5563',
			'paginationInactiveBorder' => $s['pagination_inactive_border'] ?? '#e5e7eb',
			'paginationBorderRadius'   => $this->slider_val( $s, 'pagination_border_radius', 8 ),
		);

		$display_options = array(
			'showImage'          => 'yes' === $s['show_image'],
			'showPrice'          => 'yes' === $s['show_price'],
			'showDuration'       => 'yes' === $s['show_duration'],
			'showCategory'       => 'yes' === $s['show_category'],
			'showDescription'    => 'yes' === $s['show_description'],
			'showCategoryFilter' => 'yes' === ( $s['show_category_filter'] ?? 'yes' ),
			'showStaff'          => 'yes' === ( $s['show_staff'] ?? 'yes' ),
			'buttonText'         => $s['button_text'] ?? 'Book Now',
		);

		$atts = wp_json_encode(
			array(
				'layout'   => $s['layout'] ?? 'grid',
				'columns'  => $s['columns'] ?? '3',
				'per_page' => $s['per_page'] ?? '9',
				'category' => $s['category'] ?? '',
			)
		);

		$elementor_styles  = wp_json_encode( $widget_styles );
		$elementor_display = wp_json_encode( $display_options );

		echo '<div class="radius-booking">';
		echo '<div class="rtrb-root rtrb-service-list" data-atts="' . esc_attr( $atts ) . '" data-elementor-styles="' . esc_attr( $elementor_styles ) . '" data-elementor-display="' . esc_attr( $elementor_display ) . '">';
		echo '<div class="rtrb-initial-loader" style="display:flex;align-items:center;justify-content:center;min-height:300px;">';
		echo '<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation:rtrb-spin 1s linear infinite;color:#6B7280;"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>';
		echo '</div>';
		echo '</div>';
		echo '</div>';
		echo '<style>@keyframes rtrb-spin{to{transform:rotate(360deg)}}</style>';
	}
}
