<?php
class ServicessectionW extends \Elementor\Widget_Base {
    public function get_name(): string { return 'ServicessectionW'; }
    public function get_title(): string { return 'ویژگی‌ها '; }
    public function get_icon(): string { return 'eicon-woo-cart'; }
    public function get_categories(): array { return ['exclusive-widget']; }
    public function get_keywords(): array { return ['ویژگی', 'services', 'barista']; }

    protected function register_controls() {
        $this->start_controls_section('content_section', [
            'label' => 'تنظیمات ویژگی‌ها',
            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
        ]);

        $this->add_control('services_main_title', [
            'type'        => \Elementor\Controls_Manager::TEXT,
            'label'       => 'عنوان بخش',
            'placeholder' => 'عنوان بخش را وارد کنید ',
            'default'     => 'ویژگی های کافیتو',
        ]);

        $this->add_control('services_items', [
            'label'  => 'آیکن و عنوان ویژگی‌ها',
            'type'   => \Elementor\Controls_Manager::REPEATER,
            'fields' => [
                [
                    'name'        => 'services_icon',
                    'type'        => \Elementor\Controls_Manager::MEDIA,
                    'label'       => 'آیکن ویژگی',
                    'description' => ' آیکن خود را انتخاب کنید.ترجیها فایل SVG.',
                    'default'     => [
                        'url' => get_template_directory_uri() . '/assets/images/services-section/guitar-duotone.svg',
                    ],
                ],
                [
                    'name'        => 'services_title',
                    'type'        => \Elementor\Controls_Manager::TEXT,
                    'label'       => 'عنوان ویژگی',
                    'default'     => 'پت فرندلی',
                ],
            ],
            'default' => [
                [
                    'services_icon'  => ['url' => get_template_directory_uri() . '/assets/images/services-section/guitar-duotone.svg'],
                    'services_title' => 'موسیقی زنده',
                ],
                [
                    'services_icon'  => ['url' => get_template_directory_uri() . '/assets/images/services-section/pint-glass-duotone.svg'],
                    'services_title' => 'آب رایگان',
                ],
                [
                    'services_icon'  => ['url' => get_template_directory_uri() . '/assets/images/services-section/battery-charging-duotone.svg'],
                    'services_title' => 'امکان شارژ',
                ],
                [
                    'services_icon'  => ['url' => get_template_directory_uri() . '/assets/images/services-section/ticket-duotone.svg'],
                    'services_title' => 'قابل رزور',
                ],
                [
                    'services_icon'  => ['url' => get_template_directory_uri() . '/assets/images/services-section/dog-duotone.svg'],
                    'services_title' => 'پت فرندلی',
                ],
            ],
            'title_field' => 'آیتم ویژگی',
        ]);

        $this->end_controls_section();
    }

    protected function render() {
        $s     = $this->get_settings_for_display();
        $title = $s['services_main_title'] ?? '';
        $items = $s['services_items'] ?? [];
        ?>
        <section class="services-section-container">
            <div class="services-section">
                <div class="services-upper">
                    <span class="bestseller-title"><?php echo esc_html($title); ?></span>
                </div>

                <div class="owl-carousel owl-theme owl-carousel-services owl-carousel-bestseller">
                    <?php foreach ($items as $it):
                        $icon = esc_url($it['services_icon']['url'] ?? '');
                        $txt  = esc_html($it['services_title'] ?? '');
                        ?>
                        <div class="item services-section-item">
                            <div class="services-section-icon-container">
                                <?php if ($icon): ?>
                                    <img src="<?php echo $icon; ?>" alt="" loading="lazy" decoding="async">
                                <?php endif; ?>
                            </div>
                            <span><?php echo $txt; ?></span>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <script>
            jQuery(document).ready(function($){
                if ($.fn.owlCarousel) {

                    $(".owl-carousel-services").owlCarousel({
                        loop: false,
                        dots: false,
                        margin: 20,
                        rtl: true,
                        nav: true,
                        navText: "",
                        responsive: {
                            0: { items: 2 },
                            700: { items: 4 }
                        }
                    });

                } else {
                    console.error("Owl Carousel is not loaded!");
                }
            });
        </script>
        <?php
    }
}