<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;

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

class Cat__carousel__nineteenth extends Widget_Base
{

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

    public function get_title()
    {
        return esc_html__('Category Carousel Style Nineteenth', 'kavehTheme');
    }

    public function get_icon()
    {
        return 'eicon-archive-posts';
    }

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

    protected function register_controls()
    {
        $this->start_controls_section(
            'Cat__main__details',
            [
                'label' => esc_html__('Section Information', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control(
            'section__icon',
            [
              'label' => esc_html__( 'Title Icon', 'kavehTheme' ),
              'type' => \Elementor\Controls_Manager::ICONS,
              'skin' => 'inline',
              'exclude_inline_options' => [ 'svg' ],
              'default' => [
                'value' => 'icon-filter-2',
              ],
            ]
          );
        $this->add_control(
            'section__title',
            [
                'label' => esc_html__('Title', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Your Desired Text', 'kavehTheme'),

            ]
        );
        $this->add_control(
            'section__subtitle',
            [
                'label' => esc_html__('Subtitle', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Your Desired Text', 'kavehTheme'),

            ]
        );
        $this->add_control(
            'section__details',
            [
                'label' => esc_html__('Subtitle Text', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'default' => esc_html__('Your Desired Text', 'kavehTheme'),

            ]
        );
        $this->add_control(
            'more__link',
            [
                'label' => esc_html__('Show More Button?', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'yes' => esc_html__('Yes', 'kavehTheme'),
                'no' => esc_html__('No', 'kavehTheme'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );
        $this->add_control(
            'more__link__btn',
            [
                'label' => esc_html__('Button', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('View All', 'kavehTheme'),
                'condition' => [
                    'more__link' => 'yes',
                ],

            ]
        );
        $this->add_control(
            'more__link__btn__url',
            [
                'label' => esc_html__('Button Link', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('#', 'kavehTheme'),
                'condition' => [
                    'more__link' => 'yes',
                ],

            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'Cat__item',
            [
                'label' => esc_html__('Category Items', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
        $repeater = new \Elementor\Repeater();
        $repeater->add_control(
            'Cat__loop__image',
            [
                'label' => esc_html__('Category Image', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );
        $repeater->add_control(
            'Cat__loop__title',
            [
                'label' => esc_html__('Title', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('iPhone Products', 'kavehTheme'),

            ]
        );
        $repeater->add_control(
            'Cat__loop__title__tag',
            [
                'label' => esc_html__('Title Tag', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'H2',
                'options' => [
                    'H1' => esc_html__('H1', 'kavehTheme'),
                    'H2' => esc_html__('H2', 'kavehTheme'),
                    'H3' => esc_html__('H3', 'kavehTheme'),
                    'H4' => esc_html__('H4', 'kavehTheme'),
                    'H5' => esc_html__('H5', 'kavehTheme'),
                    'H6' => esc_html__('H6', 'kavehTheme'),
                    'p' => esc_html__('p', 'kavehTheme'),
                    'div' => esc_html__('div', 'kavehTheme'),
                    'span' => esc_html__('span', 'kavehTheme'),
                ],
            ]
        );
        $repeater->add_control(
            'Cat__loop__link',
            [
                'label' => esc_html__('Button Link', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '#',
            ]
        );
        $this->add_control(
            'Cat__loop',
            [
                'label' => esc_html__('Categories', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'Cat__loop__title' => esc_html__('Title', 'kavehTheme'),
				'Cat__loop__btn__title' => esc_html__('Button Title', 'kavehTheme'),
                        'Cat__loop__link' => esc_html__('#', 'kavehTheme'),
                    ],
                ]
            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'Cat__item__setting',
            [
                'label' => esc_html__('Carousel Settings', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control(
            'carousel__desktop__number',
            [
                'label' => esc_html__('Number of Category Columns on Desktop', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 8,
                'step' => 1,
                'default' => 7,

            ]
        );
        $this->add_control(
            'carousel__tablet__number',
            [
                'label' => esc_html__('Number of Category Columns on Tablet', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 5,
                'step' => 1,
                'default' => 3,

            ]
        );
        $this->add_control(
            'carousel__mobile__number',
            [
                'label' => esc_html__('Number of Category Columns on Mobile', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 5,
                'step' => 1,
                'default' => 2,

            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'section__style',
            [
                'label' => esc_html__('Section Style', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'slider__bg',
            [
                'label' => esc_html__('Main Background Color', 'kavehTheme'),
				'type' => \Elementor\Controls_Manager::COLOR,
				'description' => 'Landing section color',
                'selectors' => [
                    '{{WRAPPER}} .category-specials::before' =>
                        'background-color: {{VALUE}}',
                ],
            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'style',
            [
                'label' => esc_html__('Style', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'slider__bg',
            [
                'label' => esc_html__('Item Background Color', 'kavehTheme'),
				'type' => \Elementor\Controls_Manager::COLOR,
				'description' => 'Landing section color',
                'selectors' => [
                    '{{WRAPPER}} .category-specials::before' =>
                        'background-color: {{VALUE}}',
                ],
            ]
        );
        $this->add_control(
            'icon__color',
            [
                'label' => esc_html__('Icon Color', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .category-specials-heading-right i' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'main__title__style',
                'label' => esc_html__('Subtitle Typography', 'kavehTheme'),
                'selector' => '{{WRAPPER}} .category-specials-heading-right .detail',
            ]
        );
        $this->add_control(
            'main__title__color',
            [
                'label' => esc_html__('Subtitle Color', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .category-specials-heading-right .detail' => 'color: {{VALUE}} !important',
                ],
            ]
        );
        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'subtitle__style',
                'label' => esc_html__('Title Typography', 'kavehTheme'),
                'selector' => '{{WRAPPER}} .category-specials-heading-right .detail b',
            ]
        );
        $this->add_control(
            'subtitle__color',
            [
                'label' => esc_html__('Title Color', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .category-specials-heading-right .detail b' => 'color: {{VALUE}}',
                ],
            ]
        );
        
        $this->add_control(
            'main__title__color',
            [
                'label' => esc_html__('Title Icon Color', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .landing-seventeen .title' => 'color: {{VALUE}} !important',
                ],
            ]
        );
        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'section__details__style',
                'label' => esc_html__('Text Typography', 'kavehTheme'),
                'selector' => '{{WRAPPER}} .category-specials p',
            ]
        );
        $this->add_control(
            'section__details__color',
            [
                'label' => esc_html__('Text Title Color', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .category-specials p' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->end_controls_section();
    }
    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $clsid = $this->get_id();
        ?>
        <!-- Start Category Specials -->
        <section class="category-specials position-relative">
            <div class="container position-relative">
                <!-- Start Heading -->
                <div
                    class="category-specials-heading d-flex align-items-sm-center justify-content-sm-between flex-column flex-sm-row gap-4 gap-sm-0">
                    <div class="category-specials-heading-right d-flex align-items-center">
                        <i class="d-flex align-items-center justify-content-center rounded-circle <?php echo  esc_html($settings['section__icon']['value']); ?>"></i>
                        <div class="detail">
                            <?php echo esc_html($settings['section__title']); ?>
                            <b class="d-block">
                                <?php echo esc_html($settings['section__subtitle']); ?>
                            </b>
                        </div>
                    </div>
                    <?php if ("yes" === $settings['more__link']) { ?>
                        <a href="<?php echo esc_url($settings['more__link__btn__url']); ?>"
                        class="btn btn-gradient-white d-flex align-items-center">
                            <?php echo esc_html($settings['more__link__btn']); ?>
                            <i class="icon-angle-circle-top-left"></i>
                        </a>
                    <?php } ?>
                </div>
                <!-- End Heading -->
                <p>
                    <?php echo esc_html($settings['section__details']); ?>
                </p>
                <!-- Start Carousel -->
                <div class="swiper swiper-category-specials" data-swiper='{
                    "navigation": {
                        "nextEl": ".swiper-button-next",
                        "prevEl": ".swiper-button-prev"
                    },
                    "watchSlidesProgress": true,
                    "breakpoints": {
                        "320": {
                        "slidesPerView": <?php echo esc_html($settings['carousel__mobile__number']); ?>,
                        "spaceBetween": 14
                        },
                        "576": {
                        "slidesPerView": <?php echo esc_html($settings['carousel__tablet__number']); ?>,
                        "spaceBetween": 20
                        },
                        "768": {
                        "slidesPerView": <?php echo esc_html($settings['carousel__desktop__number']); ?>,
                        "spaceBetween": 31
                        }
                    }
                    }'>
                    <div class="swiper-wrapper">
                        <?php
                        if ($settings['Cat__loop']) {
                            foreach ($settings['Cat__loop'] as $item) {
                                ?>
                                <!-- Start Slide -->
                                <div class="swiper-slide">
                                    <div class="category-specials-item position-relative">
                                        <a href="<?php echo esc_html($item['Cat__loop__link']); ?>" class="stretched-link"
                                            aria-label="category specials"></a>
                                        <div class="image position-relative mx-auto">
                                            <div class="img">
                                                <img src="<?php echo esc_url($item['Cat__loop__image']['url']); ?>" alt="image"
                                                    width="282" height="357" class="w-100 h-100 d-block">
                                            </div>
                                        </div>
                                        <<?php echo esc_attr($item['Cat__loop__title__tag']); ?> class="title text-center mb-0">
                                            <?php echo esc_html($item['Cat__loop__title']); ?>
                                        </<?php echo esc_attr($item['Cat__loop__title__tag']); ?>>
                                    </div>
                                </div>
                                <!-- End Slide -->
                                <?php
                            }
                        }
                        ?>
                    </div>
                    <!-- Start Button -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <!-- End Button -->
                </div>
                <!-- End Carousel -->
            </div>
        </section>
        <!-- End Category Specials -->
        

        <?php
    }

}