<?php

use elementor\Widget_Base;
use elementor\Controls_Manager;
use elementor\Utils;
use elementor\Control_Media;

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


class Widget_Team_Carousel extends Widget_Base
{

    public function get_name()
    {
        return 'team_section';
    }

    public function get_title()
    {
        return __('Team Carousel', 'angel');
    }

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

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

    public function get_script_depends() {
        return [ 'imagesloaded', 'owl-carousel-live-version'];
    }

    protected function _register_controls()
    {
        $this->start_controls_section(
            'section_tab',
            [
                'label' => __('Team', 'angel'),
            ]
        );

        $this->add_control(
            'teams',
            [
                'type' => Controls_Manager::REPEATER,
                'fields' => [
                    [
                        'name' => 'team_image',
                        'label' => __('Add Image', 'angel'),
                        'type' => Controls_Manager::MEDIA,
                        'default' => [
                            'url' => Utils::get_placeholder_image_src(),
                        ],
                    ],
                    [
                        'name' => 'team_name',
                        'label' => __('Name', 'angel'),
                        'type' => Controls_Manager::TEXT,
                        'default' => __('Team Member', 'angel'),
                        'placeholder' => __('Name', 'angel'),
                    ],
                    [
                        'name' => 'team_designation',
                        'label' => __('Designation', 'angel'),
                        'type' => Controls_Manager::TEXT,
                        'default' => __('Designer', 'angel'),
                        'placeholder' => __('Job', 'angel'),
                    ],
                    [
                        'name' => 'fb_url',
                        'label' => __('Facebook URL', 'angel'),
                        'type' => Controls_Manager::URL,
                        'placeholder' => __('Add With URL', 'angel'),
                    ],
                    [
                        'name' => 'twitter_url',
                        'label' => __('Twitter URL', 'angel'),
                        'type' => Controls_Manager::URL,
                    ],
                    [
                        'name' => 'dribbble_url',
                        'label' => __('Dribbble URL', 'angel'),
                        'type' => Controls_Manager::URL,
                    ],
                    [
                        'name' => 'google_url',
                        'label' => __('Google Plus URL', 'angel'),
                        'type' => Controls_Manager::URL,
                    ],

                ],
                'title_field' => '{{{ team_name }}}',
            ]
        );


        $this->end_controls_section();

    }

    protected function render()
    {
        $teams = $this->get_settings('teams');?>
            <div class="team-slider">
                <?php foreach ($teams as $team) :
                    $has_image = !!$team['team_image']['url'];
                    $has_name = !!$team['team_name'];
                    $has_job = !!$team['team_designation'];
                    $has_fb = !!$team['fb_url']['url'];
                    $has_twitter = !!$team['twitter_url']['url'];
                    $has_dribbble = !!$team['dribbble_url']['url'];
                    $has_googleplus = !!$team['google_url']['url'];
                    
                    ?>


                <div class="expertBox">
                    <div class="expertImage">
                        <img src="<?php echo esc_attr($team['team_image']['url']); ?>"
                     alt="<?php echo esc_attr(Control_Media::get_image_alt($team['team_image'])); ?>"/>
                        <div class="expertMask">
                            <div class="socialArea">
                                <ul class="list-inline">
                                    <?php if ($has_fb): ?>
                                        <li><a href="<?php echo $team['fb_url']['url'] ?>"><i class="fa fa-facebook"></i></a></li>
                                    <?php endif ; ?>
                                    <?php if ($has_twitter): ?>
                                        <li><a href="<?php echo $team['twitter_url']['url'] ?>"><i class="fa fa-twitter"></i></a></li>
                                    <?php endif ; ?>
                                    <?php if ($has_dribbble): ?>
                                        <li><a href="<?php echo $team['dribbble_url']['url'] ?>"><i class="fa fa-dribbble"></i></a></li>
                                    <?php endif ; ?>
                                    <?php if ($has_googleplus): ?>
                                        <li><a href="<?php echo $team['google_url']['url'] ?>"><i class="fa fa-google-plus"></i></a></li>
                                    <?php endif ; ?>
                                  
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="expertCaption ">
                        <?php if ($has_name): ?>
                            <h2><?php echo $team['team_name']; ?> </h2>
                        <?php endif; ?>
                        <?php if ($has_job): ?>
                            <p><?php echo $team['team_designation']; ?></p>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; ?>
            </div>
                
    
        <?php
    }

    protected function _content_template() {?>
        <div class="team-slider">
            <# _.each( settings.teams, function( team ) { #>
                <div class="expertBox">
                    <div class="expertImage">
                        <img src="{{team.team_image.url}}"
                     alt="<?php echo esc_attr(Control_Media::get_image_alt($team['team_image'])); ?>"/>
                        <div class="expertMask">
                      <div class="socialArea">
                            <ul class="list-inline">
                                <li><a href=""><i class="fa fa-facebook"></i></a></li>
                                <li><a href=""><i class="fa fa-twitter"></i></a></li>
                                <li><a href=""><i class="fa fa-dribbble"></i></a></li>
                                <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                            </ul>
                      </div>
                        </div>
                    </div>
                    <div class="expertCaption ">
                        <h2>{{team.team_name}}</h2>
                        <p>{{team.team_designation}}</p>
                    </div>
                </div>
                
            <# } ); #>
        </div>
            
    <?php }
}
