<?php
if ( ! defined('ABSPATH') ) exit;

class Nikan_ImageSlider_Widget extends \Elementor\Widget_Base {

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

    public function get_title() {
        return 'اسلایدر (Hero)';
    }

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

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

    public function get_keywords() {
        return [ 'nikan', 'home', 'slider', 'hero' ];
    }

    protected function register_controls() {
        $theme_uri = defined('THEME_DIR') ? THEME_DIR : get_template_directory_uri();

        $this->start_controls_section(
            'section_slides',
            [
                'label' => 'اسلایدها',
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'image',
            [
                'label'   => 'تصویر',
                'type'    => \Elementor\Controls_Manager::MEDIA,
                'default' => [ 'url' => $theme_uri . '/src/img/DESKTOPSLIDE-2.jpg' ],
            ]
        );

        $repeater->add_control(
            'alt',
            [
                'label'       => 'متن جایگزین (alt)',
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => 'slide',
                'label_block' => true,
            ]
        );

        $this->add_control(
            'slides',
            [
                'type'        => \Elementor\Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'title_field' => '{{{ alt }}}',
                'default'     => [
                    [ 'image' => [ 'url' => $theme_uri . '/src/img/DESKTOPSLIDE-2.jpg' ], 'alt' => 'slide 1' ],
                    [ 'image' => [ 'url' => $theme_uri . '/src/img/DESKTOPSLIDE-3.webp' ], 'alt' => 'slide 2' ],
                    [ 'image' => [ 'url' => $theme_uri . '/src/img/DESKTOPSLIDE-4.webp' ], 'alt' => 'slide 3' ],
                    [ 'image' => [ 'url' => $theme_uri . '/src/img/banner_SlideBanner_Z9fi1m_58b66e43-3eb0-4662-9a86-e56fc0472e2d.png' ], 'alt' => 'slide 4' ],
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings  = $this->get_settings_for_display();
        $slides    = isset($settings['slides']) && is_array($settings['slides']) ? $settings['slides'] : [];

        if ( empty($slides) ) {
            return;
        }
        ?>
        <section class="mt-6">
            <div id="imageSlider" class="relative overflow-hidden rounded-2xl">
                <!-- slider track -->
                <div id="imageSliderTrack" class="flex transition-transform duration-700 ease-in-out">
                    <?php foreach ( $slides as $slide ):
                        $url = isset($slide['image']['url']) ? $slide['image']['url'] : '';
                        if ( ! $url ) continue;
                        $alt = isset($slide['alt']) ? $slide['alt'] : '';
                        ?>
                        <img
                            src="<?php echo esc_url($url); ?>"
                            alt="<?php echo esc_attr($alt); ?>"
                            class="min-w-full h-[180px] sm:h-[260px] md:h-[340px] lg:h-[420px] object-cover"
                        >
                    <?php endforeach; ?>
                </div>

                <!-- prev -->
                <button id="sliderPrev"
                    class="absolute hidden mdp:flex top-1/2 -translate-y-1/2 right-3 bg-white/80 hover:bg-white p-2 rounded-xl transition">
                    <i class="ri-arrow-right-s-line text-xl"></i>
                </button>

                <!-- next -->
                <button id="sliderNext"
                    class="absolute hidden mdp:flex top-1/2 -translate-y-1/2 left-3 bg-white/80 hover:bg-white p-2 rounded-xl transition">
                    <i class="ri-arrow-left-s-line text-xl"></i>
                </button>

                <!-- dots -->
                <div id="sliderDots" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2"></div>
            </div>
        </section>
        <?php
    }
}
