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

class Nikan_BestProductHomePageResponsive_Widget extends \Elementor\Widget_Base {

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

    public function get_title() {
        return 'سکشن معرفی (متن + تصویر)';
    }

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

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

    public function get_keywords() {
        return [ 'nikan', 'home', 'promo', 'banner' ];
    }

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

        $this->start_controls_section(
            'section_content',
            [
                'label' => 'محتوا',
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'title',
            [
                'label'       => 'تیتر',
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => 'کیف‌های اورجینال لپ تاپ',
                'label_block' => true,
            ]
        );

        $this->add_control(
            'subtitle',
            [
                'label'       => 'زیرتیتر',
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => 'Lenovo | ASUS | MSI | Acer',
                'label_block' => true,
            ]
        );

        $this->add_control(
            'description',
            [
                'label'       => 'توضیحات',
                'type'        => \Elementor\Controls_Manager::TEXTAREA,
                'default'     => 'طراحی ارگونومیک و پشتی طبی سری Jack Wolfskin مناسب  حمل طولانی مدته و کمترین فشار رو به گردن و کمر شما وارد میکنه !!',
                'rows'        => 4,
            ]
        );

        $this->add_control(
            'button_text',
            [
                'label'   => 'متن دکمه',
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'مشاهده همه',
            ]
        );

        $this->add_control(
            'button_url',
            [
                'label'       => 'لینک دکمه',
                'type'        => \Elementor\Controls_Manager::URL,
                'placeholder' => '#',
                'default'     => [ 'url' => '#' ],
            ]
        );

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

        $this->add_control(
            'image_alt',
            [
                'label'   => 'alt تصویر',
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'تصویر',
            ]
        );

        $this->end_controls_section();
    }

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

        $btn_url = !empty($s['button_url']['url']) ? $s['button_url']['url'] : '#';
        $btn_external = !empty($s['button_url']['is_external']);
        $btn_nofollow = !empty($s['button_url']['nofollow']);
        $btn_attrs = '';
        if ( $btn_external ) $btn_attrs .= ' target="_blank"';
        if ( $btn_nofollow ) $btn_attrs .= ' rel="nofollow"';

        $img_url = !empty($s['image']['url']) ? $s['image']['url'] : '';
        ?>
        <section class="mt-8">
            <div class="flex items-center justify-between flex-col lg:flex-row gap-6 lg:gap-0">

                <!-- متن -->
                <div class="flex flex-col gap-5 sm:gap-6 lg:gap-7 w-full lg:w-1/2 p-2">
                    <h3 class="text-2xl sm:text-3xl font-bold leading-snug">
                        <?php echo esc_html($s['title']); ?>
                    </h3>

                    <span class="text-base sm:text-xl text-gray-500">
                        <?php echo esc_html($s['subtitle']); ?>
                    </span>

                    <p class="text-sm sm:text-base text-gray-500 leading-7">
                        <?php echo esc_html($s['description']); ?>
                    </p>

                    <a href="<?php echo esc_url($btn_url); ?>" <?php echo $btn_attrs; ?>
                       class="flex items-center gap-2 bg-blue-950 text-white px-4 py-2 rounded-2xl w-40 no-underline hover:opacity-80 transition cursor-pointer">
                        <span><?php echo esc_html($s['button_text']); ?></span>
                        <i class="ri-arrow-left-line"></i>
                    </a>
                </div>

                <!-- تصویر -->
                <div class="w-full lg:w-1/2 p-2">
                    <?php if ( $img_url ) : ?>
                        <img
                            class="rounded-2xl w-full h-[220px] sm:h-[320px] lg:h-auto object-cover"
                            src="<?php echo esc_url($img_url); ?>"
                            alt="<?php echo esc_attr($s['image_alt']); ?>"
                            loading="lazy"
                        >
                    <?php endif; ?>
                </div>

            </div>
        </section>
        <?php
    }
}
