<?php
class AboutWidget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'zodiac_about_author', // Base ID
            'Zodiac About Author Widget', // Name
            ['description' => __('Displays information about an author', 'text_domain')] // Args
        );
    }

    function widget($args, $instance) {
        echo $args['before_widget'];

        // Use default values if not set
        $title = !empty($instance['title']) ? $instance['title'] : 'Anna Kovach';
        $bio = !empty($instance['bio']) ? $instance['bio'] : 'My name is Anna Kovach, and I’m a Relationship Astrologer. Welcome to my blog about the Aries man.';
        $image_url = !empty($instance['image_url']) ? $instance['image_url'] : 'https://ariesmansecrets.com/wp-content/uploads/2019/05/6635.jpg';
        ?>

        <div class="p-5 mb-3 about-box">
            <div class="text-center">
                <a href="/about-me/" class="d-inline-block p-2">
                    <img alt="<?php echo esc_attr($title); ?>" src="<?php echo esc_url($image_url); ?>" class="rounded-circle shadow img-fluid" height="96" width="96">
                </a>
            </div>

            <div class="text-center">
                <h3>
                    <a href="/about-me/"><?php echo esc_html($title); ?></a>
                </h3>
                <p>
                    <?php echo esc_html($bio); ?>
                </p>
            </div>
        </div>

        <?php
        echo $args['after_widget'];
    }

    function update($new_instance, $old_instance) {
        $instance = [];
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        $instance['bio'] = (!empty($new_instance['bio'])) ? strip_tags($new_instance['bio']) : '';
        $instance['image_url'] = (!empty($new_instance['image_url'])) ? esc_url_raw($new_instance['image_url']) : '';

        return $instance;
    }

    function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : 'Anna Kovach';
        $bio = !empty($instance['bio']) ? $instance['bio'] : 'My name is Anna Kovach, and I’m a Relationship Astrologer.';
        $image_url = !empty($instance['image_url']) ? $instance['image_url'] : 'https://ariesmansecrets.com/wp-content/uploads/2019/05/6635.jpg';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">Title:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>"/>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('bio'); ?>">Bio:</label>
            <textarea class="widefat" id="<?php echo $this->get_field_id('bio'); ?>" name="<?php echo $this->get_field_name('bio'); ?>"><?php echo esc_textarea($bio); ?></textarea>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('image_url'); ?>">Image URL:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('image_url'); ?>" name="<?php echo $this->get_field_name('image_url'); ?>" type="text" value="<?php echo esc_url($image_url); ?>"/>
        </p>
        <?php
    }

}

function load_about_widget() {
    register_widget('AboutWidget');
}

add_action('widgets_init', 'load_about_widget');