<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
</html>
<?php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class MYEA_About1_Area_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'myea_about1_area';
    }

    public function get_title() {
        return 'TG About1 Area';
    }

    public function get_icon() {
        return 'eicon-info-box';
    }

    public function get_categories() {
        return [ 'general' ];
    }

    protected function register_controls() {

        // Content Section
        $this->start_controls_section(
            'section_about_content',
            [
                'label' => 'About Content',
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'about_title',
            [
                'label' => 'Title',
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'default' => 'About Our <span>Education</span> Group',
            ]
        );

        $this->add_control(
            'about_description',
            [
                'label' => 'Description',
                'type' => \Elementor\Controls_Manager::WYSIWYG,
                'default' => 'Description goes here...',
            ]
        );

        $this->add_control(
            'about_image',
            [
                'label' => 'About Image',
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="about1-area">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                        <div class="about-content-left">
                            <?php if ( ! empty( $settings['about_title'] ) ) : ?>
                                <h2><?php echo wp_kses_post( $settings['about_title'] ); ?></h2>
                            <?php endif; ?>

                            <?php if ( ! empty( $settings['about_description'] ) ) : ?>
                                <div class="about-desc">
                                    <?php echo wp_kses_post( $settings['about_description'] ); ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                        <div class="about-img-right">
                            <?php if ( ! empty( $settings['about_image']['url'] ) ) : ?>
                                <img src="<?php echo esc_url( $settings['about_image']['url'] ); ?>" alt="About">
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php
    }
}