<?php
namespace dreamsalonelementor\Widgets;

use \Elementor\Widget_Base;
use \Elementor\Controls_Manager;
use \Elementor\Utils;

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

class DS_blog_section extends Widget_Base {

    public function get_name() {
        return 'dreamsalon_elementor_blog_section';
    }

    public function get_title() {
        return __( 'DreamSalon Blog Section', 'dreamsalon_elementor' );
    }

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

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

    protected function register_controls() {
        $this->start_controls_section(
            'section_content',
            [
                'label' => __( 'Content', 'dreamsalon_elementor' ),
            ]
        );

        $this->add_control(
            'title',
            [
                'label' => __( 'Section Title', 'dreamsalon_elementor' ),
                'type' => Controls_Manager::TEXT,
                'default' => 'Recent <span class="text-primary text-decoration-underline">Articles</span>',
            ]
        );

        $this->add_control(
            'subtitle',
            [
                'label' => __( 'Section Subtitle', 'dreamsalon_elementor' ),
                'type' => Controls_Manager::TEXT,
                'default' => 'dreamsalon offers various blog resources that cater to travel enthusiasts, with a focus on adventure, gear reviews, and travel tips.',
            ]
        );

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

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

        $this->add_control(
            'posts_per_page',
            [
                'label' => __( 'Number of Posts', 'dreamsalon_elementor' ),
                'type' => Controls_Manager::NUMBER,
                'default' => 3,
                'min' => 1,
                'max' => 12,
            ]
        );

        $this->add_control(
            'category',
            [
                'label' => __( 'Category Slug (optional)', 'dreamsalon_elementor' ),
                'type' => Controls_Manager::TEXT,
                'default' => '',
                'description' => __( 'Enter a category slug to filter posts, or leave blank for all.', 'dreamsalon_elementor' ),
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings();
        $title = $settings['title'];
        $subtitle = esc_html( $settings['subtitle'] );
        $view_all_text = esc_html( $settings['view_all_text'] );
        $view_all_link = $settings['view_all_link']['url'] ? esc_url($settings['view_all_link']['url']) : '#';
        $posts_per_page = !empty($settings['posts_per_page']) ? intval($settings['posts_per_page']) : 3;
        $category = !empty($settings['category']) ? sanitize_text_field($settings['category']) : '';

        $args = [
            'post_type' => 'post',
            'posts_per_page' => $posts_per_page,
            'post_status' => 'publish',
        ];
        if ( $category ) {
            $args['category_name'] = $category;
        }
        $query = new \WP_Query($args);
        ?>
        <!-- Blog Section -->
        <section class="section blog-section pt-0">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-6 col-lg-10 text-center wow fadeInUp" data-wow-delay="0.2s">
                        <div class="section-header text-center">
                            <h2 class="mb-2"><?php echo $title; ?></h2>
                            <p class="sub-title"><?php echo $subtitle; ?></p>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
                        <div class="col-lg-4 col-md-6">
                            <div class="blog-item mb-4 wow fadeInUp" data-wow-delay="0.2s">
                                <a href="<?php the_permalink(); ?>" class="blog-img">
                                    <?php if ( has_post_thumbnail() ) : ?>
                                        <?php the_post_thumbnail('large', ['alt' => get_the_title(), 'class' => 'img-fluid']); ?>
                                    <?php else : ?>
                                        <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/blog-list-01.jpg' ); ?>" alt="img">
                                    <?php endif; ?>
                                </a>
                                <?php $cat = get_the_category(); ?>
                                <span class="badge bg-primary fs-13 fw-medium"><?php echo !empty($cat) ? esc_html($cat[0]->name) : ''; ?></span>
                                <div class="blog-info text-center">
                                    <div class="d-inline-flex align-items-center justify-content-center">
                                        <div class="d-inline-flex align-items-center border-end pe-3 me-3 mb-2">
                                            <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta('ID') ) ); ?>" class="d-flex align-items-center">
                                                <span class="avatar avatar-sm flex-shrink-0 me-2">
                                                    <?php echo get_avatar( get_the_author_meta('ID'), 32, '', '', ['class' => 'rounded-circle border border-white'] ); ?>
                                                </span>
                                                <p class="text-capitalize"><?php the_author(); ?></p>
                                            </a>
                                        </div>
                                        <p class="d-inline-flex align-items-center text-white mb-2"><i class="isax isax-calendar-2 me-2"></i><?php echo get_the_date(); ?></p>
                                    </div>
                                    <h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                                </div>
                            </div>
                        </div>
                    <?php endwhile; wp_reset_postdata(); endif; ?>
                </div>
                <div class="text-center view-all wow fadeInUp">
                    <a href="<?php echo $view_all_link; ?>" class="btn btn-dark d-inline-flex align-items-center"><?php echo $view_all_text; ?><i class="isax isax-arrow-right-3 ms-2"></i></a>
                </div>
            </div>
        </section>
        <!-- /Blog Section -->
        <?php
    }

    protected function content_template() {
        ?>
        <section class="section blog-section pt-0">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-6 col-lg-10 text-center wow fadeInUp" data-wow-delay="0.2s">
                        <div class="section-header text-center">
                            <h2 class="mb-2">{{{ settings.title }}}</h2>
                            <p class="sub-title">{{{ settings.subtitle }}}</p>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <# if ( settings.blogs ) { _.each( settings.blogs, function( blog, i ) { #>
                        <div class="col-lg-4 col-md-6">
                            <div class="blog-item mb-4 wow fadeInUp" data-wow-delay="0.2s">
                                <a href="{{ blog.link.url }}" class="blog-img">
                                    <img src="{{ blog.image.url }}" alt="img">
                                </a>
                                <span class="badge bg-primary fs-13 fw-medium">{{ blog.category }}</span>
                                <div class="blog-info text-center">
                                    <div class="d-inline-flex align-items-center justify-content-center">
                                        <div class="d-inline-flex align-items-center border-end pe-3 me-3 mb-2">
                                            <a href="javascript:void(0);" class="d-flex align-items-center">
                                                <span class="avatar avatar-sm flex-shrink-0 me-2">
                                                    <img src="{{ blog.author_image.url }}" class="rounded-circle border border-white" alt="img">
                                                </span>
                                                <p class="text-capitalize">{{ blog.author }}</p>
                                            </a>
                                        </div>
                                        <p class="d-inline-flex align-items-center text-white mb-2"><i class="isax isax-calendar-2 me-2"></i>{{ blog.date }}</p>
                                    </div>
                                    <h5><a href="{{ blog.link.url }}">{{ blog.title }}</a></h5>
                                </div>
                            </div>
                        </div>
                    <# }); } #>
                </div>
                <div class="text-center view-all wow fadeInUp">
                    <a href="{{ settings.view_all_link.url }}" class="btn btn-dark d-inline-flex align-items-center">{{ settings.view_all_text }}<i class="isax isax-arrow-right-3 ms-2"></i></a>
                </div>
            </div>
        </section>
        <?php
    }
}