<?php
// End recent blog with thumlist for post single page

function enqueue_owl_carousel_service_box($atts) {
    wp_enqueue_script('glorious-slider-script', get_stylesheet_directory_uri() . '/elementor/owl-carousel/js/owl.carousel.min.js', array(
        'jquery'
    ));
    wp_enqueue_style('glorious-slider-style', get_stylesheet_directory_uri() . '/elementor/owl-carousel/css/owl.carousel.min.css');
    wp_enqueue_style('owl-slider-cases', get_stylesheet_directory_uri() . '/elementor/owl-carousel/css/owl-slider-case.css');

}
add_action('wp_footer', 'enqueue_owl_carousel_service_box');

// Register the widget
add_action('elementor/widgets/widgets_registered', function () {
    class Service_Box_slider_Widget extends \Elementor\Widget_Base {
        public function get_name() {
            return 'owl-slider-cases';
        }

        public function get_title() {
            return __('Cases Slider', 'text-domain');
        }

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

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

        protected function _register_controls() {
            // Repeater control for dynamic content
            $this->start_controls_section(
                'content_section',
                [
                    'label' => __('Content', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
                ]
            );

            $repeater = new \Elementor\Repeater();
                $repeater->add_control(
                    'title',
                    [
                        'label' => __('Title', 'text-domain'),
                        'type' => \Elementor\Controls_Manager::TEXT,
                        'default' => __('Title', 'text-domain'),
                        'label_block' => true,
                        'dynamic' => [
                            'active' => true,
                        ],
                        'title' => __('Item Title', 'text-domain'),
                        'placeholder' => __('Enter your title', 'text-domain'),
                        'default' => __('Default Title', 'text-domain'),
                        
                    ]
                );
             
             $repeater->add_control(
                'subtitle',
                [
                    'label' => __('Subtitle', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::TEXT,
                 
                    'label_block' => true,
                ]
            );

          
          
            
                 // Image field
            $repeater->add_control(
                'image',
                [
                    'label' => __('Image', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::MEDIA,
                ]
            );

            $repeater->add_control(
                'page_url',
                [
                    'label' => __('Page URL', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::URL,
                    'placeholder' => __('Enter page URL', 'text-domain'),
                    'label_block' => true,
                ]
            );
            

            $this->add_control(
                'items',
                [
                    'type' => \Elementor\Controls_Manager::REPEATER,
                    'fields' => $repeater->get_controls(),
                    'default' => [
                        [
                            'title' => __('Default Title', 'text-domain'),
                            'content' => __('Default Content', 'text-domain'),
                            'image' => '',
                            'button_text' => __('Read More', 'text-domain'),
                            'button_url' => ['url' => 'https://example.com'],
                        ],
                    ],
                    'title_field' => '{{{ title }}}',
                ]
            );

            $this->end_controls_section();
            $this->start_controls_section(
                'title_style_section',
                [
                    'label' => __('Title', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );
            // Title padding control
            $this->add_responsive_control(
                'title_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .team_name' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );
            
            $this->add_responsive_control(
                'title_color',
                [
                    'label' => __('Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .team_name' => 'color: {{VALUE}};',
                    ],
                ]
            );
            $this->add_group_control(
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'font_typography',
                    'selector' => '{{WRAPPER}} .team_name',
                ]
            );
            $this->end_controls_section();

            $this->start_controls_section(
                'subtitle_style_section',
                [
                    'label' => __('Education', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );
        
            // Title padding control
            $this->add_responsive_control(
                'subtitle_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .team_education' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );
           
            $this->add_responsive_control(
                'subtitle_color',
                [
                    'label' => __('Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .team_designation' => 'color: {{VALUE}};',
                    ],
                ]
            );
            $this->add_group_control(
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'subtitle_typography',
                    'selector' => '{{WRAPPER}} .team_designation',
                ]
            );

            $this->end_controls_section();

            $this->start_controls_section(
                'img_style_section',
                [
                    'label' => __('Image', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );

             //  padding control
             $this->add_responsive_control(
                'img_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .owl-img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

              //  padding control
              $this->add_responsive_control(
                'img_margin',
                [
                    'label' => __('Margin', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .owl-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );



            $this->end_controls_section();

            $this->start_controls_section(
                'content_style_section',
                [
                    'label' => __('Content', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );

             //  padding control
             $this->add_responsive_control(
                'content_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .testimonials_content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

              //  padding control
              $this->add_responsive_control(
                'content_margin',
                [
                    'label' => __('Margin', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .testimonials_content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_responsive_control(
                'content_color',
                [
                    'label' => __('Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .testimonials_content' => 'color: {{VALUE}};',
                    ],
                ]
            );
        


            $this->end_controls_section();


            
        }

        protected function render() {
            $settings = $this->get_settings_for_display();
            global $slider_id;
            echo  '<div class="custom-nav">
            <button class="prev-btn prev-sBox"></button>
            <button class="next-btn next-sBox"></button>
          </div>';
          echo '<div class="owl-carousel _gl_slider_service_box" id="_gl_slider_service_box">';
            foreach ($settings['items'] as $item) {
                ?>
            <div class="item">
                <?php 
                        if (!empty($item['page_url']['url'])) {
                            echo '<a class="fulllink" href="' . esc_url($item['page_url']['url']) . '">Link</a>';
                        }

                ?>
                                <div class="item_img">
                   <?php if (!empty($item['image']['url'])) : ?>
                        <div class="owl-img">
                            <img src="<?php echo esc_url($item['image']['url']); ?>" alt="<?php echo esc_attr($item['title']); ?>">
                        </div>
                    <?php endif; ?>
                   </div>
                   <div class="content_outer">
                   <div class="sub_title"> <?php echo $item['subtitle']; ?></div>
                   <div class="service_slider"> <?php echo $item['title']; ?></div>

            </div>
            </div>
          
                <?php
            }
            echo "</div>";

            ?>

            <script>

jQuery(document).ready(function($) {

            var owl = jQuery('#_gl_slider_service_box');
            owl.owlCarousel({
                stagePadding: 0,
                margin: 22,
                nav: false,
                dots: false,
                loop: false,
                autoplay:false,
                autoplayTimeout:1000,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items:2
                    },
                    1000: {
                        items: 3
                    }
                }
            });

            var prevBtn10 = jQuery('.prev-btn');
        var nextBtn10 = jQuery('.next-btn');
        var mySlider10 = jQuery('#_gl_slider_service_box'); // Replace 'mySlider10' with your actual slider ID
        // Manually control the slider navigation
        prevBtn10.click(function() {
          mySlider10.trigger('prev.owl.carousel');
        });
        
        nextBtn10.click(function() {
          mySlider10.trigger('next.owl.carousel');
        });
        
        // Update button states based on current slide index
        mySlider10.on('changed.owl.carousel', function(event) {
          var currentSlide = event.relatedTarget.current();
          var totalSlides = event.relatedTarget.maximum();
          prevBtn10.prop('disabled', currentSlide === 0);
          nextBtn10.prop('disabled', currentSlide === totalSlides - 0);
        
         
        });

    

        

    });
</script>


            <?php 
          
        }
    }

    \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Service_Box_slider_Widget());
    
});





?>