<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Image_Size;

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

class CRT_Projects_Pin extends Widget_Base {

	public function get_name() {
		return 'crt-projects-pin';
	}

	public function get_title() {
		return esc_html__( 'Projects Pin', 'crt-manage' );
	}

	public function get_icon() {
		return 'crt-icon eicon-accordion';
	}

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

    public function get_script_depends() {
        return [ 'crt-manage-lib-gsap', 'crt-manage-lib-scroll-trigger', 'crt-projects-pin' ];
    }

    public function get_style_depends() {
        return [ 'crt-projects-pin' ];
    }

	protected function register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Projects Items', 'crt-manage' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'project_title',
            [
                'label' => esc_html__( 'Title', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__( 'Project Title', 'crt-manage' ),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'project_description',
            [
                'label' => esc_html__( 'Description', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'default' => esc_html__( 'Summary of the project goes here.', 'crt-manage' ),
            ]
        );

        $repeater->add_control(
            'project_image',
            [
                'label' => esc_html__( 'Choose Image', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control(
            'project_link',
            [
                'label' => esc_html__( 'Project Link', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::URL,
                'placeholder' => esc_html__( 'https://your-link.com', 'crt-manage' ),
                'default' => [
                    'url' => '',
                ],
            ]
        );

        $this->add_control(
            'projects',
            [
                'label' => esc_html__( 'Projects List', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'project_title' => esc_html__( 'Project #1', 'crt-manage' ),
                        'project_description' => esc_html__( 'This is the first example project.', 'crt-manage' ),
                    ],
                    [
                        'project_title' => esc_html__( 'Project #2', 'crt-manage' ),
                        'project_description' => esc_html__( 'This is the second example project.', 'crt-manage' ),
                    ],
                    [
                        'project_title' => esc_html__( 'Project #3', 'crt-manage' ),
                        'project_description' => esc_html__( 'This is the third example project.', 'crt-manage' ),
                    ],
                    [
                        'project_title' => esc_html__( 'Project #4', 'crt-manage' ),
                        'project_description' => esc_html__( 'This is the fourth example project.', 'crt-manage' ),
                    ],
                ],
                'title_field' => '{{{ project_title }}}',
            ]
        );

		$this->end_controls_section();

        // Style Tab
        $this->start_controls_section(
            'style_section',
            [
                'label' => esc_html__( 'General Style', 'crt-manage' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'pin_direction',
            [
                'label' => esc_html__( 'Layout Mode', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'horizontal',
                'options' => [
                    'horizontal' => 'Horizontal Scroll',
                    'vertical' => 'Vertical Stacked Cards',
                    'grid' => 'Standard Grid (Rows)',
                ],
            ]
        );

        $this->add_control(
            'offset_pin_top',
            [
                'label' => esc_html__( 'Offset Pin Top (px)', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 60,
                'min' => 0,
                'step' => 1,
                'condition' => [
                    'pin_direction' => 'vertical',
                ],
            ]
        );

        $this->add_control(
            'project_columns',
            [
                'label' => esc_html__( 'Columns', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => '3',
                'options' => [
                    '1' => '1 Column',
                    '2' => '2 Columns',
                    '3' => '3 Columns',
                    '4' => '4 Columns',
                    '5' => '5 Columns',
                    '6' => '6 Columns',
                ],
                'condition' => [
                    'pin_direction' => ['horizontal', 'grid'],
                ],
                'selectors' => [
                    '{{WRAPPER}} .crt-projects-pin-wrapper' => '--crt-pin-columns: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'vertical_full_width',
            [
                'label' => esc_html__( 'Vertical Full Width', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__( 'Yes', 'crt-manage' ),
                'label_off' => esc_html__( 'No', 'crt-manage' ),
                'return_value' => 'yes',
                'default' => '',
                'condition' => [
                    'pin_direction' => 'vertical',
                ],
                'selectors' => [
                    '{{WRAPPER}} .crt-pin-layout-vertical .crt-project-card' => 'max-width: 100%;',
                ],
            ]
        );

        $this->add_control(
            'item_auto_height',
            [
                'label' => esc_html__( 'Item Auto Height', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__( 'Yes', 'crt-manage' ),
                'label_off' => esc_html__( 'No', 'crt-manage' ),
                'return_value' => 'yes',
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .crt-project-card' => 'height: auto;',
                ],
            ]
        );

        $this->add_control(
            'card_bg_color',
            [
                'label' => esc_html__( 'Card Background', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .crt-project-card' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'image_position',
            [
                'label' => esc_html__( 'Image Position', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'row' => [
                        'title' => esc_html__( 'Left', 'crt-manage' ),
                        'icon' => 'eicon-h-align-left',
                    ],
                    'column' => [
                        'title' => esc_html__( 'Top', 'crt-manage' ),
                        'icon' => 'eicon-v-align-top',
                    ],
                    'row-reverse' => [
                        'title' => esc_html__( 'Right', 'crt-manage' ),
                        'icon' => 'eicon-h-align-right',
                    ],
                ],
                'default' => 'column',
                'selectors' => [
                    '{{WRAPPER}} .crt-projects-pin-wrapper' => '--crt-pin-flex-dir: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'image_width',
            [
                'label' => esc_html__( 'Image Width', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%', 'vw' ],
                'selectors' => [
                    '{{WRAPPER}} .crt-projects-pin-wrapper' => '--crt-pin-img-width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_height',
            [
                'label' => esc_html__( 'Image Height', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%', 'vh' ],
                'selectors' => [
                    '{{WRAPPER}} .crt-projects-pin-wrapper' => '--crt-pin-img-height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_gutter',
            [
                'label' => esc_html__( 'Image Gutter', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'selectors' => [
                    '{{WRAPPER}} .crt-projects-pin-wrapper' => '--crt-pin-img-gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'image_border',
                'label' => esc_html__( 'Image Border', 'crt-manage' ),
                'selector' => '{{WRAPPER}} .crt-project-image img',
            ]
        );

        $this->add_responsive_control(
            'image_border_radius',
            [
                'label' => esc_html__( 'Image Border Radius', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .crt-project-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'crt_project_image_border_color',
            [
                'label' => esc_html__( 'Image Border Color', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .crt-project-image img' => 'border-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'card_border',
                'label' => esc_html__( 'Card Border', 'crt-manage' ),
                'selector' => '{{WRAPPER}} .crt-project-card',
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'card_border_radius',
            [
                'label' => esc_html__( 'Border Radius', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .crt-project-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'card_padding',
            [
                'label' => esc_html__( 'Card Padding', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .crt-project-card' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'card_margin',
            [
                'label' => esc_html__( 'Card Margin', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .crt-project-card' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'content_padding',
            [
                'label' => esc_html__( 'Content Padding', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .crt-project-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'card_box_shadow',
                'label' => esc_html__( 'Card Box Shadow', 'crt-manage' ),
                'selector' => '{{WRAPPER}} .crt-project-card',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'label' => esc_html__( 'Title Typography', 'crt-manage' ),
                'selector' => '{{WRAPPER}} .crt-project-title',
            ]
        );

        $this->add_control(
            'title_color',
            [
                'label' => esc_html__( 'Title Color', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .crt-project-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'desc_typography',
                'label' => esc_html__( 'Description Typography', 'crt-manage' ),
                'selector' => '{{WRAPPER}} .crt-project-desc',
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'desc_color',
            [
                'label' => esc_html__( 'Description Color', 'crt-manage' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .crt-project-desc' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();
	}
    
    protected function render() {
        $settings = $this->get_settings_for_display();

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

        $pin_direction = !empty($settings['pin_direction']) ? $settings['pin_direction'] : 'horizontal';
        $offset_pin_top = isset($settings['offset_pin_top']) ? intval($settings['offset_pin_top']) : 60;

        echo '<div class="crt-projects-pin-wrapper crt-pin-layout-' . esc_attr($pin_direction) . '" data-pin-direction="' . esc_attr($pin_direction) . '" data-pin-offset="' . esc_attr($offset_pin_top) . '">';
        echo '<div class="crt-projects-pin-container">';

        foreach ( $settings['projects'] as $index => $item ) {
            echo '<div class="crt-project-card elementor-repeater-item-' . esc_attr($item['_id']) . '">';
            
            if ( ! empty( $item['project_link']['url'] ) ) {
                $this->add_link_attributes( 'link_' . $index, $item['project_link'] );
                echo '<a ' . $this->get_render_attribute_string( 'link_' . $index ) . ' class="crt-project-link-overlay"></a>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
            }

            if ( ! empty( $item['project_image']['url'] ) ) {
                echo '<div class="crt-project-image">';
                echo '<img src="' . esc_url( $item['project_image']['url'] ) . '" alt="' . esc_attr( $item['project_title'] ) . '">';
                echo '</div>';
            }

            echo '<div class="crt-project-content">';
            echo '<h3 class="crt-project-title">' . esc_html( $item['project_title'] ) . '</h3>';
            if ( ! empty( $item['project_description'] ) ) {
                echo '<p class="crt-project-desc">' . esc_html( $item['project_description'] ) . '</p>';
            }
            echo '</div>';

            echo '</div>';
        }

        echo '</div>';
        echo '</div>';
    }
}
