<?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\Repeater;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Image_Size;

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

/**
 * Card Grid Widget
 *
 * @since 1.0.0
 */
class Card_Grid extends Widget_Base
{
    use Widget_helper, UnlockafeUtils;

    /**
     * Retrieve the widget name.
     */
    public function get_name()
    {
        return 'unlockafe-card-grid';
    }

    /**
     * Retrieve the widget title.
     */
    public function get_title()
    {
        return __('Card Grid', 'unlock-addons-for-elementor');
    }

    /**
     * Retrieve the widget icon.
     */
    public function get_icon()
    {
        return 'eicon-posts-grid ulicon';
    }

    /**
     * Retrieve the list of categories.
     */
    public function get_categories()
    {
        return ['unlockafe-addons'];
    }

    /**
     * Retrieve the list of keywords.
     */
    public function get_keywords()
    {
        return ['card', 'grid', 'cards', 'portfolio', 'gallery', 'items', 'products'];
    }

    /**
     * Retrieve the list of scripts.
     */
    public function get_script_depends()
    {
        return [];
    }

    /**
     * Retrieve the list of styles.
     */
    public function get_style_depends()
    {
        return ['unlockafe-card-grid-style', 'font-awesome'];
    }

    /**
     * Register widget controls.
     */
    protected function register_controls()
    {
        $this->register_content_controls();
        $this->register_style_controls();
    }

    /**
     * Register content controls.
     */
    protected function register_content_controls()
    {
        // Layout Section
        $this->start_controls_section(
            'layout_section',
            [
                'label' => __('Layout Settings', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_responsive_control(
            'cards_per_row',
            [
                'label' => __('Cards Per Row', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 6,
                'step' => 1,
                'default' => 3,
                'tablet_default' => 2,
                'mobile_default' => 1,
            ]
        );

        $this->add_responsive_control(
            'card_gap',
            [
                'label' => __('Gap Between Cards', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 5,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 20,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-grid' => 'gap: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->end_controls_section();

        // Cards Section
        $this->start_controls_section(
            'cards_section',
            [
                'label' => __('Cards', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'card_image_1',
            [
                'label' => __('Image 1', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control(
            'card_image_2',
            [
                'label' => __('Image 2', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control(
            'card_image_3',
            [
                'label' => __('Image 3', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control(
            'card_title',
            [
                'label' => __('Card Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Card Title', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter card title', 'unlock-addons-for-elementor'),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'card_description',
            [
                'label' => __('Card Description', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __('Card description goes here. You can add detailed information about this card.', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter card description', 'unlock-addons-for-elementor'),
                'rows' => 4,
            ]
        );

        $repeater->add_control(
            'button_text',
            [
                'label' => __('Button Text', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('View Demo', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter button text', 'unlock-addons-for-elementor'),
            ]
        );

        $repeater->add_control(
            'button_link',
            [
                'label' => __('Button Link', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::URL,
                'placeholder' => __('https://your-link.com', 'unlock-addons-for-elementor'),
                'show_external' => true,
                'default' => [
                    'url' => '#',
                    'is_external' => false,
                    'nofollow' => false,
                ],
            ]
        );

        $this->add_control(
            'cards_list',
            [
                'label' => __('Cards', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'card_title' => __('Card 1', 'unlock-addons-for-elementor'),
                        'card_description' => __('This is the description for card 1.', 'unlock-addons-for-elementor'),
                        'button_text' => __('View Demo', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'card_title' => __('Card 2', 'unlock-addons-for-elementor'),
                        'card_description' => __('This is the description for card 2.', 'unlock-addons-for-elementor'),
                        'button_text' => __('View Demo', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'card_title' => __('Card 3', 'unlock-addons-for-elementor'),
                        'card_description' => __('This is the description for card 3.', 'unlock-addons-for-elementor'),
                        'button_text' => __('View Demo', 'unlock-addons-for-elementor'),
                    ],
                ],
                'title_field' => '{{{ card_title }}}',
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Register style controls.
     */
    protected function register_style_controls()
    {
        // Card Container Style
        $this->start_controls_section(
            'card_container_style_section',
            [
                'label' => __('Card Container', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'card_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-card-item',
            ]
        );

        $this->add_responsive_control(
            'card_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'card_margin',
            [
                'label' => __('Margin', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'card_border',
                'selector' => '{{WRAPPER}} .unlockafe-card-item',
            ]
        );

        $this->add_control(
            'card_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'card_box_shadow',
                'selector' => '{{WRAPPER}} .unlockafe-card-item',
            ]
        );

        $this->end_controls_section();

        // Images Style
        $this->start_controls_section(
            'images_style_section',
            [
                'label' => __('Images', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'image_height',
            [
                'label' => __('Image Height', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', '%'],
                'range' => [
                    'px' => [
                        'min' => 50,
                        'max' => 500,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 200,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-images img' => 'height: {{SIZE}}{{UNIT}} !important; object-fit: cover;',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_gap',
            [
                'label' => __('Gap Between Images', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 5,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-images' => 'gap: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->add_control(
            'image_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-images img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Title Style
        $this->start_controls_section(
            'title_style_section',
            [
                'label' => __('Title', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'title_color',
            [
                'label' => __('Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#333333',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'selector' => '{{WRAPPER}} .unlockafe-card-title',
            ]
        );

        $this->add_responsive_control(
            'title_margin',
            [
                'label' => __('Margin', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Description Style
        $this->start_controls_section(
            'description_style_section',
            [
                'label' => __('Description', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'description_color',
            [
                'label' => __('Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#666666',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-description' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'description_typography',
                'selector' => '{{WRAPPER}} .unlockafe-card-description',
            ]
        );

        $this->add_responsive_control(
            'description_margin',
            [
                'label' => __('Margin', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Button Style
        $this->start_controls_section(
            'button_style_section',
            [
                'label' => __('Button', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'button_color',
            [
                'label' => __('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#c06ef3',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-button' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'button_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-card-button',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'button_typography',
                'selector' => '{{WRAPPER}} .unlockafe-card-button',
            ]
        );

        $this->add_responsive_control(
            'button_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'button_border',
                'selector' => '{{WRAPPER}} .unlockafe-card-button',
            ]
        );

        $this->add_control(
            'button_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'button_hover_color',
            [
                'label' => __('Hover Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-card-button:hover' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'button_hover_background',
                'label' => __('Hover Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-card-button:hover',
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Render widget output on the frontend.
     */
    protected function render()
    {
        $settings = $this->get_settings_for_display();

        if (empty($settings['cards_list'])) {
            return;
        }

        // Get responsive cards per row values
        $cards_per_row_desktop = !empty($settings['cards_per_row']) ? intval($settings['cards_per_row']) : 3;
        $cards_per_row_tablet = !empty($settings['cards_per_row_tablet']) ? intval($settings['cards_per_row_tablet']) : 2;
        $cards_per_row_mobile = !empty($settings['cards_per_row_mobile']) ? intval($settings['cards_per_row_mobile']) : 1;
        $widget_id = $this->get_id();

        // Generate inline CSS for responsive grid
        $inline_css = "
        .elementor-element-{$widget_id} .unlockafe-card-grid {
            grid-template-columns: repeat({$cards_per_row_desktop}, 1fr) !important;
        }
        @media (max-width: 1024px) {
            .elementor-element-{$widget_id} .unlockafe-card-grid {
                grid-template-columns: repeat({$cards_per_row_tablet}, 1fr) !important;
            }
        }
        @media (max-width: 767px) {
            .elementor-element-{$widget_id} .unlockafe-card-grid {
                grid-template-columns: repeat({$cards_per_row_mobile}, 1fr) !important;
            }
        }
        ";

        // Add inline style
        if (wp_style_is('unlockafe-card-grid-style', 'enqueued') || wp_style_is('unlockafe-card-grid-style', 'registered')) {
            wp_add_inline_style('unlockafe-card-grid-style', $inline_css);
        } else {
            wp_register_style('unlockafe-card-grid-style', false);
            wp_enqueue_style('unlockafe-card-grid-style');
            wp_add_inline_style('unlockafe-card-grid-style', $inline_css);
        }

        ?>
        <div class="unlockafe-card-grid-wrapper">
            <div class="unlockafe-card-grid">
                <?php foreach ($settings['cards_list'] as $index => $item): 
                    $image_1 = !empty($item['card_image_1']['url']) ? $item['card_image_1']['url'] : '';
                    $image_2 = !empty($item['card_image_2']['url']) ? $item['card_image_2']['url'] : '';
                    $image_3 = !empty($item['card_image_3']['url']) ? $item['card_image_3']['url'] : '';
                    $title = !empty($item['card_title']) ? esc_html($item['card_title']) : '';
                    $description = !empty($item['card_description']) ? wp_kses_post($item['card_description']) : '';
                    $button_text = !empty($item['button_text']) ? esc_html($item['button_text']) : '';
                    $button_link = !empty($item['button_link']['url']) ? esc_url($item['button_link']['url']) : '#';
                    $button_target = !empty($item['button_link']['is_external']) ? 'target="_blank"' : '';
                    $button_nofollow = !empty($item['button_link']['nofollow']) ? 'rel="nofollow"' : '';
                ?>
                    <div class="unlockafe-card-item">
                        <?php if ($image_1 || $image_2 || $image_3): ?>
                            <div class="unlockafe-card-images">
                                <?php if ($image_1): ?>
                                    <a href="<?php echo $button_link; ?>" class="thumb" <?php echo $button_target; ?> <?php echo $button_nofollow; ?>>
                                        <img src="<?php echo esc_url($image_1); ?>" alt="<?php echo esc_attr($title); ?>">
                                    </a>
                                <?php endif; ?>
                                <?php if ($image_2): ?>
                                    <a href="<?php echo $button_link; ?>" class="thumb" <?php echo $button_target; ?> <?php echo $button_nofollow; ?>>
                                        <img src="<?php echo esc_url($image_2); ?>" alt="<?php echo esc_attr($title); ?>">
                                    </a>
                                <?php endif; ?>
                                <?php if ($image_3): ?>
                                    <a href="<?php echo $button_link; ?>" class="thumb" <?php echo $button_target; ?> <?php echo $button_nofollow; ?>>
                                        <img src="<?php echo esc_url($image_3); ?>" alt="<?php echo esc_attr($title); ?>">
                                    </a>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>

                        <div class="unlockafe-card-info">
                            <?php if ($title): ?>
                                <h5 class="unlockafe-card-title"><?php echo $title; ?></h5>
                            <?php endif; ?>

                            <?php if ($description): ?>
                                <p class="unlockafe-card-description"><?php echo $description; ?></p>
                            <?php endif; ?>

                            <div class="unlockafe-card-button-wrapper">
                                <a href="<?php echo $button_link; ?>" class="unlockafe-card-button" <?php echo $button_target; ?> <?php echo $button_nofollow; ?>>
                                    <?php echo !empty($button_text) ? esc_html($button_text) : __('View Demo', 'unlock-addons-for-elementor'); ?> <i class="fa-solid fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php
    }
}

