<?php

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

class Vista_Section_Title_Widget extends \Elementor\Widget_Base {


    public function get_name() {
        return 'vista-section-title';
    }

    public function get_title() {
        return esc_html__( 'عنوان بخش', 'vista' );
    }

    public function get_icon() {
        return 'eicon-t-letter';
    }

    public function get_categories() {
        return [ 'vista-widgets' ];
    }

    public function get_keywords() {
        return [ 'title', 'heading', 'section', 'عنوان', 'تیتر', 'بخش' ];
    }


    protected function register_controls() {


        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__( 'عنوان', 'vista' ),
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'title',
            [
                'label'       => esc_html__( 'متن عنوان', 'vista' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => esc_html__( 'آخرین نوشته‌ها', 'vista' ),
                'placeholder' => esc_html__( 'عنوان بخش را وارد کنید', 'vista' ),
                'label_block' => true,
                'dynamic'     => [ 'active' => true ],
            ]
        );

        $this->add_control(
            'title_tag',
            [
                'label'   => esc_html__( 'تگ HTML عنوان', 'vista' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'options' => [
                    'h1' => 'H1',
                    'h2' => 'H2',
                    'h3' => 'H3',
                    'h4' => 'H4',
                    'h5' => 'H5',
                    'h6' => 'H6',
                    'p'  => 'P',
                ],
                'default' => 'h2',
            ]
        );

        $this->add_control(
            'sub_title',
            [
                'label'       => esc_html__( 'زیرعنوان (اختیاری)', 'vista' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => '',
                'placeholder' => esc_html__( 'زیرعنوان را وارد کنید', 'vista' ),
                'label_block' => true,
                'dynamic'     => [ 'active' => true ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_line_settings',
            [
                'label' => esc_html__( 'تنظیمات خط', 'vista' ),
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'show_line',
            [
                'label'        => esc_html__( 'نمایش خط', 'vista' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => esc_html__( 'بله', 'vista' ),
                'label_off'    => esc_html__( 'خیر', 'vista' ),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );

        $this->add_control(
            'line_position',
            [
                'label'     => esc_html__( 'موقعیت خط', 'vista' ),
                'type'      => \Elementor\Controls_Manager::SELECT,
                'options'   => [
                    'before' => esc_html__( 'قبل از عنوان', 'vista' ),
                    'after'  => esc_html__( 'بعد از عنوان', 'vista' ),
                    'both'   => esc_html__( 'هر دو طرف', 'vista' ),
                ],
                'default'   => 'before',
                'condition' => [ 'show_line' => 'yes' ],
            ]
        );

        $this->end_controls_section();


        $this->start_controls_section(
            'section_layout',
            [
                'label' => esc_html__( 'چیدمان', 'vista' ),
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_responsive_control(
            'alignment',
            [
                'label'     => esc_html__( 'تراز محتوا', 'vista' ),
                'type'      => \Elementor\Controls_Manager::CHOOSE,
                'options'   => [
                    'right'  => [
                        'title' => esc_html__( 'راست', 'vista' ),
                        'icon'  => 'eicon-text-align-right',
                    ],
                    'center' => [
                        'title' => esc_html__( 'وسط', 'vista' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'left'   => [
                        'title' => esc_html__( 'چپ', 'vista' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                ],
                'default'   => 'right',
                'toggle'    => false,
                'selectors' => [
                    '{{WRAPPER}} .vista-section-title-wrap' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();


        $this->start_controls_section(
            'style_title',
            [
                'label' => esc_html__( 'عنوان', 'vista' ),
                'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'title_color',
            [
                'label'     => esc_html__( 'رنگ عنوان', 'vista' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => 'var(--t1);',
                'selectors' => [
                    '{{WRAPPER}} .vista-section-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name'     => 'title_typography',
                'label'    => esc_html__( 'تایپوگرافی عنوان', 'vista' ),
                'selector' => '{{WRAPPER}} .vista-section-title',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'title_text_shadow',
                'label'    => esc_html__( 'سایه متن', 'vista' ),
                'selector' => '{{WRAPPER}} .vista-section-title',
            ]
        );

        $this->add_responsive_control(
            'title_margin',
            [
                'label'      => esc_html__( 'مارجین عنوان', 'vista' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', 'rem', '%' ],
                'selectors'  => [
                    '{{WRAPPER}} .vista-section-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

      
        $this->start_controls_section(
            'style_sub_title',
            [
                'label'     => esc_html__( 'زیرعنوان', 'vista' ),
                'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => [ 'sub_title!' => '' ],
            ]
        );

        $this->add_control(
            'sub_title_color',
            [
                'label'     => esc_html__( 'رنگ زیرعنوان', 'vista' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => '#666666',
                'selectors' => [
                    '{{WRAPPER}} .vista-section-subtitle' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name'     => 'sub_title_typography',
                'label'    => esc_html__( 'تایپوگرافی زیرعنوان', 'vista' ),
                'selector' => '{{WRAPPER}} .vista-section-subtitle',
            ]
        );

        $this->add_responsive_control(
            'sub_title_margin',
            [
                'label'      => esc_html__( 'مارجین زیرعنوان', 'vista' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', 'rem', '%' ],
                'selectors'  => [
                    '{{WRAPPER}} .vista-section-subtitle' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

   
        $this->start_controls_section(
            'style_line',
            [
                'label'     => esc_html__( 'خط کناری', 'vista' ),
                'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => [ 'show_line' => 'yes' ],
            ]
        );

        $this->add_control(
            'line_color',
            [
                'label'     => esc_html__( 'رنگ خط', 'vista' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => '#333',
                'selectors' => [
                    '{{WRAPPER}} .vista-title-line' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'line_thickness',
            [
                'label'      => esc_html__( 'ضخامت خط', 'vista' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [ 'min' => 1, 'max' => 20, 'step' => 1 ],
                ],
                'default'    => [ 'unit' => 'px', 'size' => 3 ],
                'selectors'  => [
                    '{{WRAPPER}} .vista-title-line' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'line_grow',
            [
                'label'        => esc_html__( 'خط کشیده (Flexible)', 'vista' ),
                'description'  => esc_html__( 'خط تمام عرض باقی‌مانده را پر می‌کند.', 'vista' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => esc_html__( 'بله', 'vista' ),
                'label_off'    => esc_html__( 'خیر', 'vista' ),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );

        $this->add_responsive_control(
            'line_width',
            [
                'label'      => esc_html__( 'عرض خط', 'vista' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%' ],
                'range'      => [
                    'px' => [ 'min' => 10, 'max' => 500, 'step' => 1 ],
                    '%'  => [ 'min' => 1,  'max' => 100, 'step' => 1 ],
                ],
                'default'    => [ 'unit' => 'px', 'size' => 50 ],
                'condition'  => [ 'line_grow!' => 'yes' ],
                'selectors'  => [
                    '{{WRAPPER}} .vista-title-line' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'line_border_radius',
            [
                'label'      => esc_html__( 'گردی گوشه‌های خط', 'vista' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [ 'min' => 0, 'max' => 20, 'step' => 1 ],
                ],
                'default'    => [ 'unit' => 'px', 'size' => 3 ],
                'selectors'  => [
                    '{{WRAPPER}} .vista-title-line' => 'border-radius: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'line_gap',
            [
                'label'      => esc_html__( 'فاصله خط از عنوان', 'vista' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [ 'min' => 0, 'max' => 60, 'step' => 1 ],
                ],
                'default'    => [ 'unit' => 'px', 'size' => 12 ],
                'selectors'  => [
                    '{{WRAPPER}} .vista-section-title-inner' => 'gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        
        $this->start_controls_section(
            'style_wrapper',
            [
                'label' => esc_html__( 'ظرف (Wrapper)', 'vista' ),
                'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'wrapper_padding',
            [
                'label'      => esc_html__( 'پدینگ', 'vista' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', 'rem', '%' ],
                'selectors'  => [
                    '{{WRAPPER}} .vista-section-title-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'wrapper_margin',
            [
                'label'      => esc_html__( 'مارجین', 'vista' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', 'rem', '%' ],
                'selectors'  => [
                    '{{WRAPPER}} .vista-section-title-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

    } 



    protected function render() {

        $settings = $this->get_settings_for_display();

        $title     = ! empty( $settings['title'] )         ? $settings['title']         : '';
        $sub_title = ! empty( $settings['sub_title'] )     ? $settings['sub_title']     : '';
        $title_tag = ! empty( $settings['title_tag'] )     ? $settings['title_tag']     : 'h2';
        $show_line = ( 'yes' === $settings['show_line'] );
        $line_pos  = ! empty( $settings['line_position'] ) ? $settings['line_position'] : 'before';
        $line_grow = ( 'yes' === $settings['line_grow'] );
        $alignment = ! empty( $settings['alignment'] )     ? $settings['alignment']     : 'right';

        $line_class = 'vista-title-line';
        if ( $line_grow ) {
            $line_class .= ' vista-title-line-grow';
        }

        $line_html = $show_line
            ? '<span class="' . esc_attr( $line_class ) . '"></span>'
            : '';

        $this->add_render_attribute( 'wrapper', [
            'class'      => 'vista-section-title-wrap vista-align-' . esc_attr( $alignment ),
            'data-align' => esc_attr( $alignment ),
        ] );

        ?>
        <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
            <div class="vista-section-title-inner">

                <?php if ( $show_line && in_array( $line_pos, [ 'before', 'both' ], true ) ) : ?>
                    <?php echo $line_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
                <?php endif; ?>

                <div class="vista-section-title-text">

                    <?php if ( $title ) : ?>
                        <<?php echo tag_escape( $title_tag ); ?> class="vista-section-title">
                            <?php echo esc_html( $title ); ?>
                        </<?php echo tag_escape( $title_tag ); ?>>
                    <?php endif; ?>

                    <?php if ( $sub_title ) : ?>
                        <span class="vista-section-subtitle">
                            <?php echo esc_html( $sub_title ); ?>
                        </span>
                    <?php endif; ?>

                </div>

                <?php if ( $show_line && in_array( $line_pos, [ 'after', 'both' ], true ) ) : ?>
                    <?php echo $line_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
                <?php endif; ?>

            </div>
        </div>
        <?php
    } 

    protected function content_template() {
        ?>
        <#
            var title     = settings.title         || '';
            var subTitle  = settings.sub_title     || '';
            var titleTag  = settings.title_tag     || 'h2';
            var showLine  = ( settings.show_line   === 'yes' );
            var linePos   = settings.line_position || 'before';
            var lineGrow  = ( settings.line_grow   === 'yes' );
            var alignment = settings.alignment     || 'right';

            var lineClass = 'vista-title-line' + ( lineGrow ? ' vista-title-line-grow' : '' );
            var lineHtml  = showLine ? '<span class="' + lineClass + '"></span>' : '';

            var wrapClass = 'vista-section-title-wrap vista-align-' + alignment;
        #>
        <div class="{{ wrapClass }}">
            <div class="vista-section-title-inner">

                <# if ( showLine && ( linePos === 'before' || linePos === 'both' ) ) { #>
                    {{{ lineHtml }}}
                <# } #>

                <div class="vista-section-title-text">
                    <# if ( title ) { #>
                        <{{{ titleTag }}} class="vista-section-title">{{{ title }}}</{{{ titleTag }}}>
                    <# } #>
                    <# if ( subTitle ) { #>
                        <span class="vista-section-subtitle">{{{ subTitle }}}</span>
                    <# } #>
                </div>

                <# if ( showLine && ( linePos === 'after' || linePos === 'both' ) ) { #>
                    {{{ lineHtml }}}
                <# } #>

            </div>
        </div>
        <?php
    } 

} 