<?php

namespace Unlockafe_addons\Widgets;

use Unlockafe_addons\Traits\Utils as UnlockafeUtils;
use Unlockafe_addons\Traits\Widget_helper;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use \Elementor\Group_Control_Border;
use \Elementor\Group_Control_Background;
use \Elementor\Group_Control_Image_Size;
use \Elementor\Group_Control_Typography;
use \Elementor\Group_Control_Box_Shadow;

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

/**
 * Blog Post Widget
 *
 * @since 1.0.0
 */
class Blog_Post extends Widget_Base
{

    use Widget_helper, UnlockafeUtils;

    /**
     * Retrieve the widget name.
     *
     * @since 1.0.0
     *
     * @access public
     *
     * @return string Widget name.
     */
    public function get_name()
    {
        return 'unlockafe-blog-post';
    }

    /**
     * Retrieve the widget title.
     *
     * @since 1.0.0
     *
     * @access public
     *
     * @return string Widget title.
     */
    public function get_title()
    {
        return __('Blog Post', 'unlock-addons-for-elementor');
    }

    /**
     * Retrieve the widget icon.
     *
     * @since 1.0.0
     *
     * @access public
     *
     * @return string Widget icon.
     */
    public function get_icon()
    {
        return 'eicon-post-list ulicon';
    }

    /**
     * Retrieve the list of categories the widget belongs to.
     *
     * Used to determine where to display the widget in the editor.
     *
     * Note that currently Elementor supports only one category.
     * When multiple categories passed, Elementor uses the first one.
     *
     * @since 1.0.0
     *
     * @access public
     *
     * @return array Widget categories.
     */
    public function get_categories()
    {
        return ['unlockafe-addons'];
    }

    /**
     * Retrieve the list of scripts the widget depended on.
     *
     * Used to set scripts dependencies required to run the widget.
     *
     * @since 1.0.0
     *
     * @access public
     *
     * @return array Widget scripts dependencies.
     */
    public function get_script_depends()
    {
        return [];
    }

    public function get_style_depends()
    {
        return ['unlockafe-global'];
    }

    /**
     * Register the widget controls.
     *
     * Adds different input fields to allow the user to change and customize the widget settings.
     *
     * @since 1.0.0
     *
     * @access protected
     */
    protected function register_controls()
    {
        $this->register_controls_section();
        $this->style_tab_content();
    }

    protected function register_controls_section()
    {

        // layout Panel
        $this->start_controls_section(
            'wpr_layout',
            [
                'label' => esc_html__('Design Layout', 'unlock-addons-for-elementor'),
            ]
        );
        $this->add_control(
            'wpr_design_style',
            [
                'label' => esc_html__('Select Layout', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'layout-1' => esc_html__('Layout 1', 'unlock-addons-for-elementor'),
                    'layout-2' => esc_html__('Layout 2', 'unlock-addons-for-elementor'),
                    'layout-3' => esc_html__('Layout 3', 'unlock-addons-for-elementor'),
                    'layout-4' => esc_html__('Layout 4', 'unlock-addons-for-elementor'),
                    'layout-5' => esc_html__('Layout 5', 'unlock-addons-for-elementor'),
                    'layout-6' => esc_html__('Layout 6', 'unlock-addons-for-elementor'),
                ],
                'default' => 'layout-1',
            ]
        );

        $this->add_control(
            'wpr_services_arrow_switcher',
            [
                'label' => esc_html__('Arrow SWITCHER', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'unlock-addons-for-elementor'),
                'label_off' => esc_html__('No', 'unlock-addons-for-elementor'),
                'return_value' => 'yes',
                'default' => 'yes',
                'separator' => 'before',
                'condition' => [
                    'wpr_design_style' => ['layout-12']
                ]
            ]
        );

        $this->end_controls_section();


        // blog content section
        $this->start_controls_section(
            'wpr_blog_content_section',
            [
                'label' => __('Blog Content', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'wpr_design_style' => ['layout-10']
                ]
            ]
        );

        $this->add_control(
            'wpr_blog_subtitle',
            [
                'label' => esc_html__('Section Subtitle', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('Subtitle', 'unlock-addons-for-elementor'),
                'label_block' => true,
            ]
        );

        $this->add_control(
            'wpr_blog_title',
            [
                'label' => esc_html__('Blog Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('Section Title', 'unlock-addons-for-elementor'),
                'label_block' => true,
            ]
        );

        $this->add_control(
            'wpr_blog_btn_text',
            [
                'label' => esc_html__('Blog Button Text', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('Blog & News', 'unlock-addons-for-elementor'),
                'label_block' => true,
            ]
        );

        // blog link 
        $this->tp_render_links_controls('blog_link');

        $this->end_controls_section();


        // section column
        $this->tp_columns('col', ['layout-1', 'layout-2', 'layout-5']);

        // Query Panel
        $this->tp_query_controls('blog', 'Blog', 'post', 'category', 6, 10, 6, 0, 'date', 'desc', true, true, true, '');

        $this->tp_query_meta_controls('blog_grid_meta', 'Meta Controls', true, true, true, '');

        // animation
        $this->tp_creative_animation(['layout-10', 'layout-12']);
    }

    // style_tab_content
    protected function style_tab_content()
    {
        $this->tp_section_style_controls('section', 'Section - Style', '.wpr-el-section');
        $this->tp_basic_style_controls('blog_post_sec_title', 'Section Title', '.wpr-el-sec-title', ['layout-10']);
        $this->tp_basic_style_controls('blog_post_sec_subtitle', 'Section SubTitle', '.wpr-el-sec-subtitle', ['layout-10']);
        $this->tp_link_controls_style('blog_btn1_style', 'Blog Section Button', '.wpr-el-sec-btn', ['layout-10']);

        $this->tp_basic_style_controls('blog_post_date', 'Post Date', '.wpr-el-date');
        $this->tp_basic_style_controls('blog_post_cate', 'Post Categories', '.wpr-el-cat');
        $this->tp_basic_style_controls('blog_post_title', 'Title', '.wpr-el-title');
        $this->tp_basic_style_controls('blog_post_content', 'Content', '.wpr-el-content', ['layout-10']);

        $this->start_controls_section(
            'wpr_blog_post_avator_section',
            [
                'label' => esc_html__('Blog Image', 'unlock-addons-for-elementor'),
                'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'wpr_blog_post_avator_before',
            [
                'label' => __('Border Hover Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#FD5D39',
                'selectors' => [
                    '{{WRAPPER}} .blog-2:hover .thumb::before' => 'border-color: {{VALUE}};',
                ],
                'condition' => [
                    'wpr_design_style' => ['layout-2']
                ]
            ]
        );


        $this->add_responsive_control(
            'wpr_blog_post_avator_w',
            [
                'type' => \Elementor\Controls_Manager::SLIDER,
                'label' => esc_html__('Image Width', 'unlock-addons-for-elementor'),
                'size_units' => ['px', '%'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 2000,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-avator img' => 'min-width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'wpr_blog_post_avator_h',
            [
                'type' => \Elementor\Controls_Manager::SLIDER,
                'label' => esc_html__('Image Height', 'unlock-addons-for-elementor'),
                'size_units' => ['px', '%'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 2000,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-avator img' => 'min-height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'wpr_blog_post_object_style',
            [
                'label' => esc_html__('Object Fit', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'cover',
                'options' => [
                    'none' => esc_html__('None', 'unlock-addons-for-elementor'),
                    'contain'  => esc_html__('Contain', 'unlock-addons-for-elementor'),
                    'cover' => esc_html__('Cover', 'unlock-addons-for-elementor'),
                    'fill' => esc_html__('fill', 'unlock-addons-for-elementor'),
                ],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-avator img' => 'object-fit: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();



        $this->start_controls_section(
            'tp_theme_btn_style_sec',
            [
                'label' => esc_html__('Button Style', 'unlock-addons-for-elementor'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'tp_theme_btn_typography',
                'label' => esc_html__('Typhography', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .wpr-el-theme-btn, {{WRAPPER}} .wpr-el-theme-circle-btn .rotate',
            ]
        );

        $this->add_control(
            'tp_theme_btn_icon_image_size',
            [
                'label' => esc_html__('Icon Image Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100000,
                        'step' => 10,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => '',
                ],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'tp_theme_btn_icon_show' => 'yes',
                    'tp_theme_btn_icon_type' => 'image'
                ],
            ]
        );

        $this->add_control(
            'tp_theme_btn_icon_size',
            [
                'label' => esc_html__('Icon Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1000,
                        'step' => 1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => '',
                ],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'tp_theme_btn_icon_show' => 'yes',
                    'tp_theme_btn_icon_type' => 'icon'
                ],
            ]
        );

        $this->add_control(
            'tp_theme_btn_icon_svg_size',
            [
                'label' => esc_html__('Icon SVG Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1000,
                        'step' => 1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => '',
                ],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'tp_theme_btn_icon_show' => 'yes',
                    'tp_theme_btn_icon_type' => 'svg'
                ],
            ]
        );

        $this->start_controls_tabs(
            'tp_theme_btn_state_tabs',
        );

        // button normal state
        $this->start_controls_tab(
            'tp_theme_btn_normal_tab',
            [
                'label' => esc_html__('Normal', 'unlock-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'tp_theme_btn_color',
            [
                'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn, .wpr-el-theme-circle-btn .rotate' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'tp_theme_btn_icon_color',
            [
                'label' => esc_html__('Icon Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon' => 'color: {{VALUE}};',
                ],
                'condition' => [
                    'tp_theme_btn_icon_show' => 'yes',
                    'tp_theme_btn_icon_type' => 'icon'
                ],
            ]
        );

        $this->add_control(
            'tp_theme_btn_bg_color',
            [
                'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'tp_theme_btn_line_color',
            [
                'label' => esc_html__('Button Line Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-line-btn:before' => 'background: {{VALUE}};',
                ],
                'condition' => [
                    'tp_theme_btn_line_effect' => 'yes'
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'tp_theme_btn_border',
                'selector' => '{{WRAPPER}} .wpr-el-theme-btn',
            ]
        );

        $this->add_control(
            'tp_theme_btn_border_radius',
            [
                'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'tp_theme_btn_box_shadow',
                'selector' => '{{WRAPPER}} .wpr-el-theme-btn',
            ]
        );

        $this->end_controls_tab();
        // end normal state

        // button hover state
        $this->start_controls_tab(
            'tp_theme_btn_hover_tab',
            [
                'label' => esc_html__('Hover', 'unlock-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'tp_theme_btn_hover_color',
            [
                'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn:hover' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'tp_theme_btn_hover_icon_color',
            [
                'label' => esc_html__('Icon Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn:hover .theme-btn-icon' => 'color: {{VALUE}};',
                ],
                'condition' => [
                    'tp_theme_btn_icon_show' => 'yes',
                    'tp_theme_btn_icon_type' => 'icon'
                ],

            ]
        );

        $this->add_control(
            'tp_theme_btn_hover_bg_color',
            [
                'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn:hover' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'tp_theme_btn_line_hvr_color',
            [
                'label' => esc_html__('Line Hover Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-line-btn:after' => 'background: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'tp_theme_btn_hover_border',
                'selector' => '{{WRAPPER}} .wpr-el-theme-btn:hover',
            ]
        );

        $this->add_control(
            'tp_theme_btn_hover_border_radius',
            [
                'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'tp_theme_btn_hover_box_shadow',
                'selector' => '{{WRAPPER}} .wpr-el-theme-btn:hover',
            ]
        );

        $this->end_controls_tab();
        // end hover state


        $this->end_controls_tabs();
        // end button state tabs

        $this->add_control(
            'tp_theme_btn_margin',
            [
                'label' => esc_html__('Button Margin', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'tp_theme_btn_padding',
            [
                'label' => esc_html__('Button Padding', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'tp_theme_btn_icon_margin',
            [
                'label' => esc_html__('Icon Margin', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors' => [
                    '{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();


    }

    /**
     * Render the widget output on the frontend.
     *
     * Written in PHP and used to generate the final HTML.
     *
     * @since 1.0.0
     *
     * @access protected
     */
    protected function render()
    {
        $settings = $this->get_settings_for_display();

?>

        <div class="unlockafe-blog-post-wrapper">
        <?php if ($settings['wpr_design_style'] == 'layout-2'):

            $query_args = $this->tp_query_args('post', 'category', $this->get_settings());
            $the_query = new \WP_Query($query_args);
            $delay = 0.45; // Initialize delay for layout-2
            
        ?>

            <div class="row g-4">
                <?php
                if ($the_query->have_posts()):
                    while ($the_query->have_posts()):

                    $the_query->the_post();

                    $categories = get_the_category();
                ?>
                <div class="<?php echo esc_attr($this->col_show($settings)); ?>">
                    <div class="blog__item blog__item-height fade-anim" data-delay="<?php echo esc_attr(number_format($delay, 2)); ?>">

                        <?php if (has_post_thumbnail()): ?>
                        <a href="<?php the_permalink(); ?>" class="blog-thumb wpr-el-avator">
                            <?php 
                                the_post_thumbnail('full', [
                                    'class' => 'w-100'
                                ]); 
                            ?>

                            <?php if ($settings['tp_post_date'] == 'yes'): ?>
                            <span class="blog-date wpr-el-date">
                               <?php echo get_the_date('j F'); ?>
                            </span>
                            <?php endif; ?> 
                        </a>
                        <?php endif; ?>

                        <div class="blog-content">
                            <?php if (!empty($settings['tp_post_category'])): ?>
                            <?php if (!empty($categories[0]->name)): ?>
                            <span class="blog-author">
                                <a href="<?php print esc_url(get_category_link($categories[0]->term_id)); ?>" class="wpr-el-cat">
                                   <?php echo esc_html($categories[0]->name); ?>
                                </a>
                            </span>
                            <?php endif; ?>
                            <?php endif; ?>

                            <?php if (!empty($settings['tp_post_title_word'])): ?>
                            <h5 class="blog-title wpr-el-title">
                                <a href="<?php the_permalink(); ?>">
                                    <?php echo wp_trim_words(get_the_title(), $settings['tp_post_title_word'], ''); ?>
                                </a>
                            </h5>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php
                    $delay += 0.15; // Increase delay after each item
                    endwhile;
                    wp_reset_postdata();
                endif;
                ?>
            </div>


        <?php elseif ($settings['wpr_design_style'] == 'layout-3'):
            $query_args = $this->tp_query_args('post', 'category', $this->get_settings());
            $the_query = new \WP_Query($query_args);
        ?>

            <div class="row g-4">
                <div class="col-12 position-relative">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/shape/blog-shap.png" alt="blog-shape" class="blog-shape" />
                    <div class="blog-6__slider swiper">
                        <div class="swiper-wrapper">
                            <?php
                            if ($the_query->have_posts()):
                                while ($the_query->have_posts()):

                                $the_query->the_post();

                                $categories = get_the_category();
                            ?>
                            <div class="swiper-slide">
                                <div class="blog-6__item">
                                    <?php if (has_post_thumbnail()): ?>
                                    <a href="<?php the_permalink(); ?>" class="wpr-el-avator blog-thumb">
                                        <?php 
                                            the_post_thumbnail('full', [
                                                'class' => 'w-100'
                                            ]); 
                                        ?>
                                    </a>
                                    <?php endif; ?>

                                    <div class="blog-content">
                                        <div class="blog-meta">
                                            <?php if (!empty($settings['tp_post_category'])): ?>
                                            <?php if (!empty($categories[0]->name)): ?>
                                            <a href="<?php print esc_url(get_category_link($categories[0]->term_id)); ?>" class="wpr-el-cat">
                                               <?php echo esc_html($categories[0]->name); ?>
                                            </a>
                                            <?php endif; ?>
                                            <?php endif; ?>


                                            <?php if ($settings['tp_post_date'] == 'yes'): ?>
                                            <?php if (!empty($settings['tp_post_date_format'])):
                                                $date_format = $settings['tp_post_date_format'] == 'default' ? get_option('date_format') : $settings['tp_post_date_format'];
                                                $date_format = $settings['tp_post_date_format'] == 'custom' ? $settings['tp_post_date_custom_format'] : $date_format;
                                            ?>
                                            <a class="wpr-el-date">
                                                <?php the_time($date_format); ?>  
                                            </a>
                                            <?php endif; ?>
                                            <?php endif; ?> 
                                        </div>

                                        <?php if (!empty($settings['tp_post_title_word'])): ?>
                                        <h5 class="blog-title line-clamp-2 wpr-el-title">
                                            <a href="<?php the_permalink(); ?>">
                                                <?php echo wp_trim_words(get_the_title(), $settings['tp_post_title_word'], ''); ?>
                                            </a>
                                        </h5>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                            <?php
                                endwhile;
                                wp_reset_postdata();
                            endif;
                            ?>
                        </div>
                    </div>
                </div>
            </div>

        <?php elseif ($settings['wpr_design_style'] == 'layout-4'):
            $query_args = $this->tp_query_args('post', 'category', $this->get_settings());
            $the_query = new \WP_Query($query_args);
        ?>

                <div class="blog-7__slider swiper wpr-el-section">
                    <div class="swiper-wrapper">
                        <?php
                        if ($the_query->have_posts()):

                            while ($the_query->have_posts()):
                                $the_query->the_post();
                                $categories = get_the_category();
                        ?>
                        <div class="swiper-slide">
                            <div class="blog-7__item">
                                <?php if (has_post_thumbnail()): ?>
                                <div class="blog-thumb">
                                    <a href="<?php the_permalink(); ?>" class="wpr-el-avator">
                                        <?php the_post_thumbnail('full', ['class' => 'w-100']); ?>
                                    </a> 
                                </div>
                                <?php endif; ?>

                                <div class="blog-content">
                                    <div class="blog-meta">
                                        <?php if (!empty($settings['tp_post_category'])): ?>
                                        <?php if (!empty($categories[0]->name)): ?>
                                        <a href="<?php print esc_url(get_category_link($categories[0]->term_id)); ?>" class="tag wpr-el-cat">
                                           <?php echo esc_html($categories[0]->name); ?>
                                        </a>
                                        <?php endif; ?>
                                        <?php endif; ?>

                                        <?php if ($settings['tp_post_date'] == 'yes'): ?>
                                        <?php if (!empty($settings['tp_post_date_format'])):
                                            $date_format = $settings['tp_post_date_format'] == 'default' ? get_option('date_format') : $settings['tp_post_date_format'];
                                            $date_format = $settings['tp_post_date_format'] == 'custom' ? $settings['tp_post_date_custom_format'] : $date_format;
                                        ?>
                                        <a class="dat wpr-el-date">
                                            <?php the_time($date_format); ?>
                                        </a>
                                        <?php endif; ?>
                                        <?php endif; ?> 
                                    </div>

                                    <?php if (!empty($settings['tp_post_title_word'])): ?>
                                    <h5 class="blog-title wpr-el-title">
                                        <a href="<?php the_permalink(); ?>">
                                            <?php echo wp_trim_words(get_the_title(), $settings['tp_post_title_word'], ''); ?>
                                        </a>
                                    </h5>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                        <?php
                            endwhile;

                            wp_reset_postdata();
                        endif;
                        ?>
                    </div>
                </div>


        <?php elseif ($settings['wpr_design_style'] == 'layout-5'):

            $query_args = $this->tp_query_args('post', 'category', $this->get_settings());
            $the_query = new \WP_Query($query_args);
        ?>


            <div class="row g-4 wpr-el-section">
                <?php
                if ($the_query->have_posts()):
                    $delay = 0.45; // Start delay before the loop

                    while ($the_query->have_posts()):
                        $the_query->the_post();
                        $categories = get_the_category();
                ?>
                <div class="<?php echo esc_attr($this->col_show($settings)); ?>">
                  <div class="blog-5__item">
                    <div class="blog-thumb wpr-el-avator">
                        <?php the_post_thumbnail('full', ['class' => 'w-100']); ?>
                        <a href="<?php the_permalink(); ?>" class="blog-link"></a>
                    </div>
                            
                    <div class="blog-content">
                        <?php if (!empty($settings['tp_post_title_word'])): ?>
                        <h5 class="blog-title line-clamp-2 wpr-el-title">
                            <a href="<?php the_permalink(); ?>">
                                <?php echo wp_trim_words(get_the_title(), $settings['tp_post_title_word'], ''); ?>
                            </a>
                        </h5>
                        <?php endif; ?>

                        <div class="blog-meta">
                            <ul>
                                <?php if (!empty($settings['tp_post_category'])): ?>
                                <?php if (!empty($categories[0]->name)): ?>
                                <li>
                                    <a href="<?php print esc_url(get_category_link($categories[0]->term_id)); ?>" class="author wpr-el-cat">
                                    <?php echo esc_html($categories[0]->name); ?>
                                    </a>
                                </li>
                                <?php endif; ?>
                                <?php endif; ?>

                                <?php if ($settings['tp_post_date'] == 'yes'): ?>
                                <li>
                                    <a class="wpr-el-date" href="#0"><?php echo get_the_date('j,F,y'); ?></a>
                                </li>
                                <?php endif; ?>
                            </ul>
                        </div>
                    </div>
                  </div>
                </div>
                <?php
                    $delay += 0.15; // Increase delay after each item
                    endwhile;

                    wp_reset_postdata();
                endif;
                ?>
            </div>

        <?php elseif ($settings['wpr_design_style'] == 'layout-6'):

            $query_args = $this->tp_query_args('post', 'category', $this->get_settings());
            $the_query = new \WP_Query($query_args);
        ?>

            <div class="blog-wrapper blog-wrapper-grid wpr-el-section">
                <?php
                if ($the_query->have_posts()):
                    while ($the_query->have_posts()):

                    $the_query->the_post();

                    $categories = get_the_category();
                ?>
                <article class="blog-2 fade-anim" data-delay="0.30" data-direction="right">
                    <div class="thumb">
                        <?php if (!empty($settings['tp_post_category'])): ?>
                        <?php if (!empty($categories[0]->name)): ?>
                        <div class="tags">
                            <span class="tag">
                                <a href="<?php print esc_url(get_category_link($categories[0]->term_id)); ?>"  class="wpr-el-cat">
                                   <?php echo esc_html($categories[0]->name); ?>
                                </a>
                            </span>
                        </div>
                        <?php endif; ?>
                        <?php endif; ?>

                        <?php if (has_post_thumbnail()): ?>
                        <a href="<?php the_permalink(); ?>">
                            <?php 
                                the_post_thumbnail('full', [
                                    'class' => 'wpr-el-avator'
                                ]); 
                            ?>
                        </a>
                        <?php endif; ?>
                    </div>
                    <div class="content-wrapper">
                        <div class="content">
                            <?php if (!empty($settings['tp_post_title_word'])): ?>
                            <h2 class="title wpr-el-title">
                                <a href="<?php the_permalink(); ?>">
                                    <?php echo wp_trim_words(get_the_title(), $settings['tp_post_title_word'], ''); ?>
                                </a>
                            </h2>
                            <?php endif; ?>
                        </div>
                        <div class="btn-wrapper">
                            <a class="t-btn t-btn-circle wpr-el-theme-btn" href="<?php the_permalink(); ?>">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </article>
                <?php
                    endwhile;
                    wp_reset_postdata();
                endif;
                ?>
            </div>


        <?php else:

            $query_args = $this->tp_query_args('post', 'category', $this->get_settings());
            $the_query = new \WP_Query($query_args);

            $attrs = $this->tp_get_repeater_links_attr($settings, 'blog_link');
            extract($attrs);

            $links_attrs = [
                'href' => $link,
                'target' => $target,
                'rel' => $rel,
            ];
        ?>

            <div class="row g-4 ">
                <?php
                if ($the_query->have_posts()):
                    $delay = 0.45; // Start delay before the loop

                    while ($the_query->have_posts()):
                        $the_query->the_post();
                        $categories = get_the_category();
                ?>
                <div class="<?php echo esc_attr($this->col_show($settings)); ?>">
                    <div class="blog-2__item fade-anim" data-delay="<?php echo esc_attr(number_format($delay, 2)); ?>">
                        <?php if (has_post_thumbnail()): ?>
                        <div class="blog-thumb">
                            <a href="<?php the_permalink(); ?>" class="wpr-el-avator">
                                <?php the_post_thumbnail('full', ['class' => 'w-100']); ?>
                            </a> 

                            <?php if ($settings['tp_post_date'] == 'yes'): ?>
                            <div class="blog-date wpr-el-date">
                                <?php echo get_the_date('j'); ?>
                                <span class="month"><?php echo get_the_date('F'); ?></span>
                            </div>
                            <?php endif; ?>
                        </div>
                        <?php endif; ?>

                        <div class="blog-content">
                            <?php if (!empty($settings['tp_post_category']) && !empty($categories[0]->name)): ?>
                            <span>
                                <a href="<?php echo esc_url(get_category_link($categories[0]->term_id)); ?>" class="blog-sub-title wpr-el-cat">
                                    <?php echo esc_html($categories[0]->name); ?>
                                </a>
                            </span>
                            <?php endif; ?>

                            <?php if (!empty($settings['tp_post_title_word'])): ?>
                            <h5 class="blog-title wpr-el-title">
                                <a href="<?php the_permalink(); ?>">
                                    <?php echo wp_trim_words(get_the_title(), $settings['tp_post_title_word'], ''); ?>
                                </a>
                            </h5>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php
                    $delay += 0.15; // Increase delay after each item
                    endwhile;

                    wp_reset_postdata();
                endif;
                ?>

            </div>


<?php endif; ?>
        </div>
<?php
    }
}


