<?php
/**
 * Logo Grid / Client Logos Widget
 * 
 * Display client logos in grid or carousel mode with grayscale hover effects.
 * 
 * @package AdMoreWidgetsSuite
 * @since   1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) exit;

class EPPRO_Logo_Grid_Widget extends EPPRO_Base_Widget {

    public function get_name() {
        return 'eppro-logo-grid';
    }

    public function get_title() {
        return __( 'Logo Grid / Clients', 'admore-widgets-suite' );
    }

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

    public function get_categories() {
        return [ 'eppro-elements' ];
    }

    public function get_keywords() {
        return [ 'logo', 'client', 'brand', 'partner', 'grid', 'carousel', 'slider' ];
    }

    public function get_script_depends() {
        return [ 'eppro-logo-grid', 'swiper' ];
    }

    public function get_style_depends() {
        return [ 'eppro-logo-grid' ];
    }

    protected function register_controls() {
        
        // ═══════════════════════════════════════════════════════════════
        // CONTENT TAB
        // ═══════════════════════════════════════════════════════════════
        
        // Logos
        $this->start_controls_section(
            'section_logos',
            [
                'label' => __( 'Logos', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'logo_image',
            [
                'label'   => __( 'Logo Image', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control(
            'logo_title',
            [
                'label'       => __( 'Title', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => __( 'Client Name', 'admore-widgets-suite' ),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'logo_link',
            [
                'label'       => __( 'Link', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::URL,
                'placeholder' => 'https://example.com',
                'default'     => [
                    'url' => '',
                ],
            ]
        );

        $this->add_control(
            'logos',
            [
                'label'       => __( 'Logo Items', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'default'     => array_fill( 0, 6, [
                    'logo_title' => __( 'Client Logo', 'admore-widgets-suite' ),
                    'logo_image' => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
                ] ),
                'title_field' => '{{{ logo_title }}}',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Image_Size::get_type(),
            [
                'name'    => 'logo_image_size',
                'default' => 'medium',
            ]
        );

        $this->end_controls_section();

        // Layout Settings
        $this->start_controls_section(
            'section_layout',
            [
                'label' => __( 'Layout', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'layout_mode',
            [
                'label'   => __( 'Layout Mode', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'default' => 'grid',
                'options' => [
                    'grid'     => __( 'Grid', 'admore-widgets-suite' ),
                    'carousel' => __( 'Carousel', 'admore-widgets-suite' ),
                ],
            ]
        );

        $this->add_control(
            'logo_style',
            [
                'label'   => __( 'Item Style', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'default' => 'default',
                'options' => [
                    'default'  => __( 'Default (Card)', 'admore-widgets-suite' ),
                    'minimal'  => __( 'Minimal', 'admore-widgets-suite' ),
                    'bordered' => __( 'Bordered', 'admore-widgets-suite' ),
                    'card'     => __( 'Card with Shadow', 'admore-widgets-suite' ),
                    'dark'     => __( 'Dark Background', 'admore-widgets-suite' ),
                ],
                'condition' => [ 'layout_mode' => 'grid' ],
            ]
        );

        $this->add_responsive_control(
            'columns',
            [
                'label'   => __( 'Columns', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'default' => '4',
                'tablet_default' => '3',
                'mobile_default' => '2',
                'options' => [
                    '1' => '1',
                    '2' => '2',
                    '3' => '3',
                    '4' => '4',
                    '5' => '5',
                    '6' => '6',
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
                ],
                'condition' => [
                    'layout_mode' => 'grid',
                ],
            ]
        );

        $this->add_responsive_control(
            'slides_per_view',
            [
                'label'   => __( 'Slides Per View', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'min'     => 1,
                'max'     => 10,
                'default' => 4,
                'tablet_default' => 3,
                'mobile_default' => 2,
                'condition' => [
                    'layout_mode' => 'carousel',
                ],
            ]
        );

        $this->add_responsive_control(
            'gap',
            [
                'label'      => __( 'Gap Between Items', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 24,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-grid' => 'gap: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'layout_mode' => 'grid',
                ],
            ]
        );

        $this->add_responsive_control(
            'space_between',
            [
                'label'   => __( 'Space Between', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'min'     => 0,
                'max'     => 100,
                'default' => 24,
                'condition' => [
                    'layout_mode' => 'carousel',
                ],
            ]
        );

        $this->end_controls_section();

        // Carousel Settings
        $this->start_controls_section(
            'section_carousel',
            [
                'label'     => __( 'Carousel Settings', 'admore-widgets-suite' ),
                'tab'       => \Elementor\Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'layout_mode' => 'carousel',
                ],
            ]
        );

        $this->add_control(
            'autoplay',
            [
                'label'        => __( 'Autoplay', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );

        $this->add_control(
            'autoplay_speed',
            [
                'label'     => __( 'Autoplay Speed (ms)', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::NUMBER,
                'default'   => 3000,
                'min'       => 1000,
                'max'       => 10000,
                'step'      => 100,
                'condition' => [
                    'autoplay' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'pause_on_hover',
            [
                'label'        => __( 'Pause on Hover', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => 'yes',
                'condition'    => [
                    'autoplay' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'infinite_loop',
            [
                'label'        => __( 'Infinite Loop', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );

        $this->add_control(
            'show_arrows',
            [
                'label'        => __( 'Show Arrows', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => '',
            ]
        );

        $this->add_control(
            'show_dots',
            [
                'label'        => __( 'Show Dots', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => '',
            ]
        );

        $this->add_control(
            'speed',
            [
                'label'   => __( 'Transition Speed (ms)', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 500,
                'min'     => 100,
                'max'     => 3000,
                'step'    => 100,
            ]
        );

        $this->end_controls_section();

        // ═══════════════════════════════════════════════════════════════
        // STYLE TAB
        // ═══════════════════════════════════════════════════════════════

        // Logo Item Style
        $this->start_controls_section(
            'section_item_style',
            [
                'label' => __( 'Logo Item', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'logo_size',
            [
                'label'      => __( 'Logo Size', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%' ],
                'range'      => [
                    'px' => [
                        'min' => 50,
                        'max' => 300,
                    ],
                    '%' => [
                        'min' => 20,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 100,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-item img' => 'max-width: {{SIZE}}{{UNIT}}; height: auto;',
                ],
            ]
        );

        $this->add_responsive_control(
            'logo_height',
            [
                'label'      => __( 'Logo Height', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 30,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-item img' => 'height: {{SIZE}}{{UNIT}}; width: auto;',
                ],
            ]
        );

        $this->add_responsive_control(
            'item_padding',
            [
                'label'      => __( 'Padding', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'selectors'  => [
                    '{{WRAPPER}} .eppro-logo-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Background::get_type(),
            [
                'name'     => 'item_background',
                'selector' => '{{WRAPPER}} .eppro-logo-item',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name'     => 'item_border',
                'selector' => '{{WRAPPER}} .eppro-logo-item',
            ]
        );

        $this->add_control(
            'item_border_radius',
            [
                'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors'  => [
                    '{{WRAPPER}} .eppro-logo-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'item_alignment',
            [
                'label'   => __( 'Alignment', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'flex-start' => [
                        'title' => __( 'Left', 'admore-widgets-suite' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => __( 'Center', 'admore-widgets-suite' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'flex-end' => [
                        'title' => __( 'Right', 'admore-widgets-suite' ),
                        'icon'  => 'eicon-text-align-right',
                    ],
                ],
                'default'   => 'center',
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-item' => 'justify-content: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Hover Effects Style
        $this->start_controls_section(
            'section_hover_style',
            [
                'label' => __( 'Hover Effects', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'grayscale_normal',
            [
                'label'      => __( 'Normal Grayscale (%)', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ '%' ],
                'range'      => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 100,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-item img' => 'filter: grayscale({{SIZE}}%);',
                ],
            ]
        );

        $this->add_control(
            'grayscale_hover',
            [
                'label'      => __( 'Hover Grayscale (%)', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ '%' ],
                'range'      => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-item:hover img' => 'filter: grayscale({{SIZE}}%);',
                ],
            ]
        );

        $this->add_control(
            'opacity_normal',
            [
                'label'      => __( 'Normal Opacity', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ '%' ],
                'range'      => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 60,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-item img' => 'opacity: calc({{SIZE}} / 100);',
                ],
            ]
        );

        $this->add_control(
            'opacity_hover',
            [
                'label'      => __( 'Hover Opacity', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ '%' ],
                'range'      => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 100,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-item:hover img' => 'opacity: calc({{SIZE}} / 100);',
                ],
            ]
        );

        $this->add_control(
            'scale_hover',
            [
                'label'      => __( 'Hover Scale', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 0.5,
                        'max' => 1.5,
                        'step' => 0.01,
                    ],
                ],
                'default' => [
                    'size' => 1.05,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-item:hover img' => 'transform: scale({{SIZE}});',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'item_hover_shadow',
                'selector' => '{{WRAPPER}} .eppro-logo-item:hover',
            ]
        );

        $this->end_controls_section();

        // Navigation Style
        $this->start_controls_section(
            'section_navigation_style',
            [
                'label'     => __( 'Navigation', 'admore-widgets-suite' ),
                'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => [
                    'layout_mode' => 'carousel',
                ],
            ]
        );

        $this->add_control(
            'arrows_size',
            [
                'label'      => __( 'Arrows Size', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 50,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-carousel-arrow' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'show_arrows' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'arrows_color',
            [
                'label'     => __( 'Arrows Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .eppro-logo-carousel-arrow' => 'color: {{VALUE}};',
                ],
                'condition' => [
                    'show_arrows' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'dots_color',
            [
                'label'     => __( 'Dots Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet' => 'background-color: {{VALUE}};',
                ],
                'condition' => [
                    'show_dots' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'dots_active_color',
            [
                'label'     => __( 'Dots Active Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet-active' => 'background-color: {{VALUE}};',
                ],
                'condition' => [
                    'show_dots' => 'yes',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        
        if ( empty( $settings['logos'] ) ) {
            if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
                echo '<div class="eppro-editor-placeholder">
                    <svg width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" class="eppro-editor-placeholder__icon"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a4 4 0 0 1 8 0v2"/></svg>
                    <p class="eppro-editor-placeholder__title">' . esc_html__( 'Logo Grid', 'admore-widgets-suite' ) . '</p>
                    <p class="eppro-editor-placeholder__desc">' . esc_html__( 'Add logo items in the Content tab.', 'admore-widgets-suite' ) . '</p>
                </div>';
            }
            return;
        }

        $is_carousel = $settings['layout_mode'] === 'carousel';
        
        $wrapper_classes = [
            'eppro-logo-grid-wrapper',
            $is_carousel ? 'eppro-logo-carousel-wrapper' : '',
        ];

        if ( $is_carousel ) {
            $carousel_settings = [
                'slidesPerView' => $settings['slides_per_view_mobile'] ?? 2,
                'spaceBetween'  => $settings['space_between'] ?? 24,
                'loop'          => $settings['infinite_loop'] === 'yes',
                'speed'         => $settings['speed'] ?? 500,
                'autoplay'      => $settings['autoplay'] === 'yes' ? [
                    'delay' => $settings['autoplay_speed'] ?? 3000,
                    'disableOnInteraction' => false,
                    'pauseOnMouseEnter' => $settings['pause_on_hover'] === 'yes',
                ] : false,
                'navigation'    => $settings['show_arrows'] === 'yes' ? [
                    'nextEl' => '.eppro-logo-carousel-next',
                    'prevEl' => '.eppro-logo-carousel-prev',
                ] : false,
                'pagination'    => $settings['show_dots'] === 'yes' ? [
                    'el' => '.swiper-pagination',
                    'clickable' => true,
                ] : false,
                'breakpoints'   => [
                    768 => [
                        'slidesPerView' => $settings['slides_per_view_tablet'] ?? 3,
                    ],
                    1024 => [
                        'slidesPerView' => $settings['slides_per_view'] ?? 4,
                    ],
                ],
            ];
        }
        ?>

        <div class="<?php echo esc_attr( implode( ' ', array_filter( $wrapper_classes ) ) ); ?>">
            
            <?php if ( $is_carousel ) : ?>
                <div class="swiper eppro-logo-carousel" data-settings='<?php echo wp_json_encode( $carousel_settings ); ?>'>
                    <div class="swiper-wrapper">
                        <?php foreach ( $settings['logos'] as $index => $item ) : ?>
                            <?php $this->render_logo_item( $item, $settings ); ?>
                        <?php endforeach; ?>
                    </div>
                    
                    <?php if ( $settings['show_dots'] === 'yes' ) : ?>
                        <div class="swiper-pagination"></div>
                    <?php endif; ?>
                    
                    <?php if ( $settings['show_arrows'] === 'yes' ) : ?>
                        <div class="eppro-logo-carousel-arrow eppro-logo-carousel-prev">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
                        </div>
                        <div class="eppro-logo-carousel-arrow eppro-logo-carousel-next">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
                        </div>
                    <?php endif; ?>
                </div>
            <?php else :
                $logo_style       = sanitize_key( $settings['logo_style'] ?? 'default' );
                $grid_class       = 'eppro-logo-grid';
                if ( 'default' !== $logo_style ) {
                    $grid_class .= ' eppro-logo-grid--' . $logo_style;
                }
            ?>
                <div class="<?php echo esc_attr( $grid_class ); ?>">
                    <?php foreach ( $settings['logos'] as $index => $item ) : ?>
                        <?php $this->render_logo_item( $item, $settings ); ?>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

        </div>

        <?php
    }

    private function render_logo_item( $item, $settings ) {
        $is_carousel = $settings['layout_mode'] === 'carousel';
        $wrapper_tag = $is_carousel ? 'div' : 'div';
        $wrapper_class = $is_carousel ? 'swiper-slide' : '';
        
        $image_url = $item['logo_image']['url'];
        $image_alt = $item['logo_title'] ?: '';
        
        $has_link = ! empty( $item['logo_link']['url'] );
        ?>

        <<?php echo tag_escape( $wrapper_tag ); ?> class="<?php echo esc_attr( $wrapper_class ); ?>">
            <div class="eppro-logo-item">
                <?php if ( $has_link ) : ?>
                    <a href="<?php echo esc_url( $item['logo_link']['url'] ); ?>"
                       <?php if ( ! empty( $item['logo_link']['is_external'] ) ) : ?>target="_blank"<?php endif; ?>
                       <?php if ( ! empty( $item['logo_link']['nofollow'] ) ) : ?>rel="nofollow"<?php endif; ?>
                       title="<?php echo esc_attr( $image_alt ); ?>">
                        <img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $image_alt ); ?>" loading="lazy">
                    </a>
                <?php else : ?>
                    <img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $image_alt ); ?>" loading="lazy">
                <?php endif; ?>
            </div>
        </<?php echo tag_escape( $wrapper_tag ); ?>>

        <?php
    }
}