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

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;

class Luman_Video_Testimonials extends Widget_Base {

    public function get_name() {
        return 'luman-video-testimonials';
    }

    public function get_title() {
        return esc_html__('نظرات ویدیویی', 'luman-plus');
    }

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

    public function get_categories() {
        return ['luman-plus'];
    }

    public function get_style_depends() {
        return ['luman-video-testimonials-style'];
    }

    public function get_script_depends() {
        return ['luman-video-testimonials-script'];
    }

    protected function register_controls() {
        $this->start_controls_section('content_section', [
            'label' => esc_html__('محتوا', 'luman-plus'),
        ]);

        $repeater = new \Elementor\Repeater();

        $repeater->add_control('cover_image', [
            'label' => 'تصویر کاور',
            'type' => Controls_Manager::MEDIA,
        ]);

        $repeater->add_control('video_file', [
            'label' => 'فایل ویدیو (یا لینک خارجی)',
            'type' => Controls_Manager::TEXT,
            'placeholder' => 'https://... یا آپلود مستقیم',
        ]);

        $repeater->add_control('avatar', [
            'label' => 'آواتار کاربر',
            'type' => Controls_Manager::MEDIA,
        ]);

        $repeater->add_control('name', [
            'label' => 'نام کاربر',
            'type' => Controls_Manager::TEXT,
        ]);

        $repeater->add_control('location', [
            'label' => 'موقعیت جغرافیایی',
            'type' => Controls_Manager::TEXT,
        ]);

        $repeater->add_control('description', [
            'label' => 'متن توضیح',
            'type' => Controls_Manager::TEXTAREA,
        ]);

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

        $repeater->add_control('button_link', [
            'label' => 'لینک دکمه',
            'type' => Controls_Manager::URL,
        ]);

        $this->add_control('items', [
            'label' => 'نظرات ویدیویی',
            'type' => Controls_Manager::REPEATER,
            'fields' => $repeater->get_controls(),
            'default' => [],
        ]);

        $this->end_controls_section();

        // 🎨 استایل نام کاربر
$this->start_controls_section('style_name_section', [
    'label' => __('استایل نام کاربر', 'luman-plus'),
    'tab' => Controls_Manager::TAB_STYLE,
]);

$this->add_control('name_color', [
    'label' => __('رنگ نام', 'luman-plus'),
    'type' => Controls_Manager::COLOR,
    'selectors' => [
        '#lumanPlus-video-info #info-name' => 'color: {{VALUE}};',
    ],
]);

$this->add_group_control(Group_Control_Typography::get_type(), [
    'name' => 'name_typography',
    'selector' => '#lumanPlus-video-info #info-name',
]);

$this->end_controls_section();

// 📍 استایل لوکیشن
$this->start_controls_section('style_location_section', [
    'label' => __('استایل موقعیت', 'luman-plus'),
    'tab' => Controls_Manager::TAB_STYLE,
]);

$this->add_control('location_color', [
    'label' => __('رنگ موقعیت', 'luman-plus'),
    'type' => Controls_Manager::COLOR,
    'selectors' => [
        '#lumanPlus-video-info #info-location' => 'color: {{VALUE}};',
    ],
]);

$this->add_group_control(Group_Control_Typography::get_type(), [
    'name' => 'location_typography',
    'selector' => '#lumanPlus-video-info #info-location',
]);

$this->end_controls_section();

$this->start_controls_section('style_description_section', [
    'label' => __('استایل توضیح', 'luman-plus'),
    'tab' => Controls_Manager::TAB_STYLE,
]);

$this->add_control('desc_color', [
    'label' => __('رنگ توضیح', 'luman-plus'),
    'type' => Controls_Manager::COLOR,
    'selectors' => [
        '#lumanPlus-video-info #info-desc' => 'color: {{VALUE}};',
    ],
]);

$this->add_group_control(Group_Control_Typography::get_type(), [
    'name' => 'desc_typography',
    'selector' => '#lumanPlus-video-info #info-desc',
]);

$this->end_controls_section();

$this->start_controls_section('style_button_section', [
    'label' => __('استایل دکمه', 'luman-plus'),
    'tab' => Controls_Manager::TAB_STYLE,
]);

$this->add_control('btn_text_color', [
    'label' => __('رنگ متن', 'luman-plus'),
    'type' => Controls_Manager::COLOR,
    'selectors' => [
        '#lumanPlus-video-info #info-link' => 'color: {{VALUE}};',
    ],
]);

$this->add_control('btn_bg_color', [
    'label' => __('رنگ پس‌زمینه', 'luman-plus'),
    'type' => Controls_Manager::COLOR,
    'selectors' => [
        '#lumanPlus-video-info #info-link' => 'background-color: {{VALUE}};',
    ],
]);

$this->add_control('btn_hover_color', [
    'label' => __('رنگ متن هنگام هاور', 'luman-plus'),
    'type' => Controls_Manager::COLOR,
    'selectors' => [
        '#lumanPlus-video-info #info-link:hover' => 'color: {{VALUE}};',
    ],
]);

$this->add_control('btn_hover_bg', [
    'label' => __('رنگ پس‌زمینه هاور', 'luman-plus'),
    'type' => Controls_Manager::COLOR,
    'selectors' => [
        '#lumanPlus-video-info #info-link:hover' => 'background-color: {{VALUE}};',
    ],
]);

$this->add_responsive_control('btn_border_radius', [
    'label' => __('گردی گوشه‌ها', 'luman-plus'),
    'type' => Controls_Manager::DIMENSIONS,
    'selectors' => [
        '#lumanPlus-video-info #info-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
    ],
]);

$this->end_controls_section();

$this->start_controls_section('style_nav_section', [
    'label' => __('استایل فلش‌ها', 'luman-plus'),
    'tab' => Controls_Manager::TAB_STYLE,
]);

$this->add_control('nav_bg_color', [
    'label' => __('رنگ پس‌زمینه فلش‌ها', 'luman-plus'),
    'type' => Controls_Manager::COLOR,
    'selectors' => [
        '.lumanPlus-info-box .nav-buttons button' => 'background-color: {{VALUE}};',
    ],
]);

$this->add_responsive_control('nav_size', [
    'label' => __('سایز فلش‌ها', 'luman-plus'),
    'type' => Controls_Manager::SLIDER,
    'selectors' => [
        '.lumanPlus-info-box .nav-buttons button' => 'font-size: {{SIZE}}{{UNIT}};',
    ],
]);

$this->add_responsive_control('nav_radius', [
    'label' => __('گردی فلش‌ها', 'luman-plus'),
    'type' => Controls_Manager::DIMENSIONS,
    'selectors' => [
        '.lumanPlus-info-box .nav-buttons button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
    ],
]);

$this->end_controls_section();

    }

    protected function render() {
    $settings = $this->get_settings_for_display();
    $items = $settings['items'];

    if (empty($items)) return;

    ?>
    <div class="lumanPlus-video-section">
        <div class="lumanPlus-video-wrapper">
            <swiper-container class="mySwiper" effect="cards" grab-cursor="true">
                <?php foreach ($items as $item): ?>
                    <swiper-slide>
                        <div class="video-cover" style="background-image: url('<?php echo esc_url($item['cover_image']['url']); ?>')" onclick="lumanPlusPlayVideo(this)">
                            <div class="play-button"></div>
                        </div>
                        <video preload="none" playsinline muted>
                            <source src="<?php echo esc_url($item['video_file']); ?>" type="video/mp4" />
                        </video>
                        <!-- محتوای متنی داخل هر اسلاید (برای سئو) -->
                        <div class="lumanPlus-slide-info" style="display: none;">
                            <div class="slide-name"><?php echo esc_html($item['name']); ?></div>
                            <div class="slide-location"><?php echo esc_html($item['location']); ?></div>
                            <div class="slide-desc"><?php echo esc_html($item['description']); ?></div>
                            <div class="slide-avatar"><?php echo esc_url($item['avatar']['url']); ?></div>
                            <div class="slide-link"><?php echo esc_url($item['button_link']['url']); ?></div>
                            <div class="slide-link-text"><?php echo esc_html($item['button_text']); ?></div>
                        </div>
                    </swiper-slide>
                <?php endforeach; ?>
            </swiper-container>
        </div>

        <div class="lumanPlus-info-box" id="lumanPlus-video-info">
            <div class="nav-buttons">
                <button id="nextBtn" onclick="lumanPlusGoToNext()">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10 6L16 12L10 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </button>
                <button id="prevBtn" onclick="lumanPlusGoToPrev()">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 6L8 12L14 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </button>
            </div>
            <div class="info-header">
                <img src="<?php echo esc_url($items[0]['avatar']['url']); ?>" alt="avatar" id="info-avatar" />
                <div>
                    <div id="info-name"><?php echo esc_html($items[0]['name']); ?></div>
                    <div class="info-location" id="info-location"><?php echo esc_html($items[0]['location']); ?></div>
                </div>
            </div>
            <div class="info-description" id="info-desc">
                <?php echo esc_html($items[0]['description']); ?>
            </div>
            <a href="<?php echo esc_url($items[0]['button_link']['url']); ?>" class="info-button" id="info-link"><?php echo esc_html($items[0]['button_text']); ?></a>
        </div>
    </div>
    <?php
}
}