✘✘ GRAYBYTE WORDPRESS FILE MANAGER ✘✘

<?php
namespace Elementor;

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

/**
 * Kinsley Features Widget.
 *
 * @since 1.0
 */
class Kinsley_Features_Widget extends Widget_Base {

	public function get_name() {
		return 'kinsley-features';
	}

	public function get_title() {
		return esc_html__( 'Features (Main)', 'kinsley-plugin' );
	}

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

	public function get_categories() {
		return [ 'kinsley-category' ];
	}

	/**
	 * Register widget controls.
	 *
	 * @since 1.0
	 */
	protected function register_controls() {

		$this->start_controls_section(
			'items_tab',
			[
				'label' => esc_html__( 'Items', 'kinsley-plugin' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'icon', [
				'label' => esc_html__( 'Icon', 'kinsley-plugin' ),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

		$repeater->add_control(
			'label', [
				'label'       => esc_html__( 'Label', 'kinsley-plugin' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'Enter title', 'kinsley-plugin' ),
				'default'	=> esc_html__( 'Title', 'kinsley-plugin' ),
			]
		);

		$this->add_control(
			'items',
			[
				'label' => esc_html__( 'Items', 'kinsley-plugin' ),
				'type' => Controls_Manager::REPEATER,
				'prevent_empty' => false,
				'fields' => $repeater->get_controls(),
				'title_field' => '{{{ label }}}',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'items_styling',
			[
				'label'     => esc_html__( 'Items', 'kinsley-plugin' ),
				'tab'       => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'item_title_color',
			[
				'label'     => esc_html__( 'Title Color', 'kinsley-plugin' ),
				'type'      => Controls_Manager::COLOR,
				'default'	=> '',
				'selectors' => [
					'{{WRAPPER}} .knsl-features-card h5' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'item_title_typography',
				'label'     => esc_html__( 'Title Typography', 'kinsley-plugin' ),
				'selector' => '{{WRAPPER}} .knsl-features-card h5',
			]
		);

		$this->add_control(
			'item_bg_color',
			[
				'label'     => esc_html__( 'Item BG Color', 'kinsley-plugin' ),
				'type'      => Controls_Manager::COLOR,
				'default'	=> '',
				'selectors' => [
					'{{WRAPPER}} .knsl-features-card .knsl-icon-box' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}


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

		?>

		<!-- features -->
	    <section class="knsl-p-0-100" id="knsl-triger-1">
	      <div class="container">

	        <!-- features card -->
	        <div class="knsl-features-card" style="margin-top: -80px;">
	          <?php if ( $settings['items'] ) : ?>
	          <div class="row">
	            <?php foreach ( $settings['items'] as $index => $item ) :
								$item_label = $this->get_repeater_setting_key( 'label', 'items', $index );
								$this->add_inline_editing_attributes( $item_label, 'basic' );
							?>
	            <div class="col-6 col-lg-3">
	              <!-- icon box -->
	              <div class="knsl-icon-box">
	                <?php if ( $item['icon'] ) : $image = wp_get_attachment_image_url( $item['icon']['id'], 'kinsley_950xAuto' ); ?>
	                <img src="<?php echo esc_url( $image ); ?>" alt="<?php echo esc_attr( $item['label'] ); ?>" class="knsl-mb-10" />
	                <?php endif; ?>
	                <?php if ( $item['label'] ) : ?>
	                <h5>
	                	<span <?php echo $this->get_render_attribute_string( $item_label ); ?>>
					        		<?php echo wp_kses_post( $item['label'] ); ?>
					        	</span>
	                </h5>
	                <?php endif; ?>
	              </div>
	              <!-- icon box end -->
	            </div>
	            <?php endforeach; ?>
	          </div>
	          <?php endif; ?>
	        </div>
	        <!-- features card end -->

	      </div>
	    </section>
	    <!-- features end -->

		<?php
	}

	/**
	 * Render widget output in the editor.
	 *
	 * Written as a Backbone JavaScript template and used to generate the live preview.
	 *
	 * @since 1.0.0
	 * @access protected
	 */
	protected function content_template() {
		?>

		<!-- features -->
	    <section class="knsl-p-0-100" id="knsl-triger-1">
	      <div class="container">

	        <!-- features card -->
	        <div class="knsl-features-card" style="margin-top: -80px;">
	          <# if ( settings.items ) { #>
	          <div class="row">
	            <# _.each( settings.items, function( item, index ) {
								var item_label = view.getRepeaterSettingKey( 'label', 'items', index );
								view.addInlineEditingAttributes( item_label, 'basic' );
							#>
	            <div class="col-6 col-lg-3">
	              <!-- icon box -->
	              <div class="knsl-icon-box">
	                <# if ( item.icon ) { #>
	                <img src="{{{ item.icon.url }}}" alt="{{{ item.label }}}" class="knsl-mb-10" />
	                <# } #>
	                <# if ( item.label ) { #>
	                <h5>
	                	<span {{{ view.getRenderAttributeString( item_label ) }}}>
											{{{ item.label }}}
										</span>
	                </h5>
	                <# } #>
	              </div>
	              <!-- icon box end -->
	            </div>
	            <# }); #>
	          </div>
	          <# } #>
	        </div>
	        <!-- features card end -->

	      </div>
	    </section>
	    <!-- features end -->

		<?php
	}
}

Plugin::instance()->widgets_manager->register( new Kinsley_Features_Widget() );