<?php
/**
 * DS About Widget
 *
 * @since 1.0.0
 */

namespace dreamsalonelementor\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

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

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

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

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

    public function get_script_depends()
    {
        return [
            'bootstrap-bundle'
        ];
    }

    protected function _register_controls()
    {
        // === Section Controls ===
        $this->start_controls_section(
            'about_section',
            [
                'label' => __('About Content', 'dreamsalon_elementor'),
            ]
        );

        $this->add_control(
            'about_title',
            [
                'label' => __('Title', 'dreamsalon_elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Your Ultimate One Stop Salon Management Solution', 'dreamsalon_elementor'),
            ]
        );

        $this->add_control(
            'about_description',
            [
                'label' => __('Description', 'dreamsalon_elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __('At Dream Salon, our mission is simple: to ensure every client leaves feeling their absolute best. We’re committed to delivering an exceptional experience, tailored to your individual needs, from the moment you walk through our doors to the moment you leave.', 'dreamsalon_elementor'),
            ]
        );

        $this->add_control(
            'about_image_1',
            [
                'label' => __('Main Image', 'dreamsalon_elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => get_template_directory_uri() . '/assets/img/about/sub-about-img-1.jpg',
                ],
            ]
        );

        $this->add_control(
            'about_image_2',
            [
                'label' => __('Sub Image 1', 'dreamsalon_elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => get_template_directory_uri() . '/assets/img/about/sub-about-img-2.jpg',
                ],
            ]
        );

        $this->add_control(
            'about_image_3',
            [
                'label' => __('Sub Image 2', 'dreamsalon_elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => get_template_directory_uri() . '/assets/img/about/sub-about-img-3.jpg',
                ],
            ]
        );

        $this->add_control(
            'about_button_text',
            [
                'label' => __('Button Text', 'dreamsalon_elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('View Services', 'dreamsalon_elementor'),
            ]
        );

        $this->add_control(
            'about_button_link',
            [
                'label' => __('Button Link', 'dreamsalon_elementor'),
                'type' => Controls_Manager::URL,
                'default' => [
                    'url' => '#',
                ],
            ]
        );

        $this->end_controls_section();
    }

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

        $title = $settings['about_title'];
        $desc = $settings['about_description'];
        $img1 = $settings['about_image_1']['url'];
        $img2 = $settings['about_image_2']['url'];
        $img3 = $settings['about_image_3']['url'];
        $btn_text = $settings['about_button_text'];
        $btn_link = $settings['about_button_link']['url'];
        ?>

        <!-- Start About section -->
        <section class="aboutone-section section">
            <div class="container">
                <div class="row align-items-center">

                    <!-- Text Content -->
                    <div class="col-lg-6">
                        <div class="section-header mb-4 wow fadeInUp" data-wow-delay="0.2s">
                            <h2 class="section-title mb-3"><?php echo esc_html($title); ?></h2>
                            <p><?php echo esc_html($desc); ?></p>
                        </div>

                        <div class="row">
                            <div class="col-xl-5 col-md-6 text-start wow fadeInUp" data-wow-delay="0.2s">
                                <div class="about-item">
                                    <p class="fw-medium d-inline-flex align-items-center mb-2"><i class="ti ti-circle-check-filled fs-20 me-2 text-success"></i>Personalized Care</p>
                                    <p class="fw-medium d-inline-flex align-items-center mb-2"><i class="ti ti-circle-check-filled fs-20 me-2 text-success"></i>Attention to Detail</p>
                                </div>
                            </div>

                            <div class="col-xl-5 col-md-6 text-start wow fadeInUp" data-wow-delay="0.4s">
                                <div class="about-item">
                                    <p class="fw-medium d-inline-flex align-items-center mb-2"><i class="ti ti-circle-check-filled fs-20 me-2 text-success"></i>Creating Confidence</p>
                                    <p class="fw-medium d-inline-flex align-items-center mb-2"><i class="ti ti-circle-check-filled fs-20 me-2 text-success"></i>A Relaxing Experience</p>
                                </div>
                            </div>
                        </div>

                        <div class="view-more mb-2">
                            <a href="<?php echo esc_url($btn_link); ?>" class="btn btn-dark d-inline-flex align-items-center">
                                <?php echo esc_html($btn_text); ?><i class="ti ti-chevron-right ms-1"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Images -->
                    <div class="col-lg-6  d-lg-block">
                        <div class="row position-relative z-1 aboutus-image">
                            <div class="col-lg-12">
                                <img src="<?php echo esc_url($img1); ?>" alt="About Image 1" class="img-fluid mb-4 rounded">
                            </div>
                            <div class="col-lg-6 aboutus-image2">
                                <img src="<?php echo esc_url($img2); ?>" alt="About Image 2" class="img-fluid rounded">
                            </div>
                            <div class="col-lg-6">
                                <img src="<?php echo esc_url($img3); ?>" alt="About Image 3" class="img-fluid rounded">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <img src="<?php echo esc_url(get_template_directory_uri().'/assets/img/icons/line-img-2.svg'); ?>" alt="line-img-2" class="img-fluid custom-line-imgone d-none d-lg-block">
        </section>
        <!-- End About section -->
        <?php
    }
}