<?php
/**
 * DS About Three Widget (Team Section)
 *
 * @since 1.0.0
 */

namespace dreamsalonelementor\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;

if (!defined('ABSPATH')) {
    exit;
}

class DSAboutThree extends Widget_Base
{
    public function get_name() {
        return 'dreamsalon-ds-about-three';
    }

    public function get_title() {
        return __('DS About Three', 'dreamsalon_elementor');
    }

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

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

    public function get_script_depends() {
        return ['wowjs'];
    }

    protected function _register_controls() {

        /**
         * Section Header Controls
         */
        $this->start_controls_section(
            'section_header',
            [
                'label' => __('Section Header', 'dreamsalon_elementor'),
            ]
        );

        $this->add_control(
            'section_title',
            [
                'label' => __('Section Title', 'dreamsalon_elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Meet Our Experts', 'dreamsalon_elementor'),
            ]
        );

        // ✅ New control for image
        $this->add_control(
            'section_image',
            [
                'label' => __('Section Image', 'dreamsalon_elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->add_control(
            'section_description',
            [
                'label' => __('Section Description', 'dreamsalon_elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __('Our experienced stylists and beauty experts are here to bring out your best look.', 'dreamsalon_elementor'),
            ]
        );

        $this->end_controls_section();

        /**
         * Team Member Controls
         */
        $this->start_controls_section(
            'team_section',
            [
                'label' => __('Team Members', 'dreamsalon_elementor'),
            ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'member_image',
            [
                'label' => __('Team Image', 'dreamsalon_elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control(
            'member_name',
            [
                'label' => __('Name', 'dreamsalon_elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('John Doe', 'dreamsalon_elementor'),
            ]
        );

        $repeater->add_control(
            'member_position',
            [
                'label' => __('Position', 'dreamsalon_elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Hair Stylist', 'dreamsalon_elementor'),
            ]
        );

        $repeater->add_control(
            'member_link',
            [
                'label' => __('Profile Link', 'dreamsalon_elementor'),
                'type' => Controls_Manager::URL,
                'placeholder' => __('https://your-link.com', 'dreamsalon_elementor'),
            ]
        );

        $this->add_control(
            'team_members',
            [
                'label' => __('Team Members', 'dreamsalon_elementor'),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'title_field' => '{{{ member_name }}}',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <!-- Start Team Section -->
        <section class="team-section section">
            <div class="container">

                <!-- Section Header -->
                <div class="row justify-content-center">
                    <div class="col-xxl-6 col-xl-7 col-lg-9">
                        <div class="section-header text-center wow fadeInUp" data-wow-delay="0.2s">
                            <h2 class="section-title"><?php echo esc_html($settings['section_title']); ?></h2>

                            <?php if (!empty($settings['section_image']['url'])) : ?>
                                <img src="<?php echo esc_url($settings['section_image']['url']); ?>" alt="section-image" class="img-fluid my-3">
                            <?php endif; ?>

                            <p><?php echo esc_html($settings['section_description']); ?></p>
                        </div>
                    </div>
                </div>

                <!-- Team Members -->
                <div class="row row-gap-4 mt-4">
                    <?php
                    if (!empty($settings['team_members'])) :
                        $delay = 0.2;
                        foreach ($settings['team_members'] as $member) :
                            $img_url = !empty($member['member_image']['url']) ? $member['member_image']['url'] : \Elementor\Utils::get_placeholder_image_src();
                            $name = $member['member_name'];
                            $position = $member['member_position'];
                            $link = !empty($member['member_link']['url']) ? $member['member_link']['url'] : '#';
                            ?>
                            <div class="col-lg-3 col-md-6 col-sm-6">
                                <div class="team-item mb-0 wow fadeInUp" data-wow-delay="<?php echo esc_attr($delay); ?>s">
                                    <div class="position-relative overflow-hidden mb-3 team-item-img">
                                        <img src="<?php echo esc_url($img_url); ?>" alt="<?php echo esc_attr($name); ?>" class="img-fluid">
                                    </div>
                                    <div>
                                        <h3 class="title mb-1">
                                            <a href="<?php echo esc_url($link); ?>"><?php echo esc_html($name); ?></a>
                                        </h3>
                                        <p class="mb-0"><?php echo esc_html($position); ?></p>
                                    </div>
                                </div>
                            </div>
                            <?php
                            $delay += 0.2;
                        endforeach;
                    endif;
                    ?>
                </div>

            </div>
        </section>
        <!-- End Team Section -->
        <?php
    }
}