<?php
/**
 * F4w Our Team shortcode.
 *
 * @param
 * @return
 */
function our_team_shortcode( $attr = array() ) {
  global $post;

  $prefix = "f4w_";

  $teamid = absint( $attr['teamid'] );
  $members = get_post_meta ( $teamid, $prefix.'otmeta', true );
  $title_font_size = get_post_meta ( $teamid, $prefix . 'title_font_size', 18 );
  $job_role_font_size = get_post_meta ( $teamid, $prefix . 'job_role_font_size', 14 );
  $description_font_size = get_post_meta ( $teamid, $prefix . 'description_font_size', 14 );
  $social_icon_font_size = get_post_meta ( $teamid, $prefix . 'social_icon_font_size', 18 );
  $description_characters = get_post_meta ( $teamid, $prefix . 'description_characters', 160 );

  // Pro Settings
  // Column Shows
  $column_box = get_post_meta ( $teamid, $prefix . 'column_box', 3 );
  
  $column = 12 / $column_box;
  
  //Collor Settings 
  $primary_color = get_post_meta ( $teamid, $prefix . 'primary_color', '#2196F3' );
  $secondary_color = get_post_meta ( $teamid, $prefix . 'secondary_color', '#0069d9' );
  $background_color = get_post_meta ( $teamid, $prefix . 'background_color', '#E3F2FD' );
  $social_icon_background_color = get_post_meta ( $teamid, $prefix . 'social_icon_background_color', '#0069d9' );

  $title_font_color = get_post_meta ( $teamid, $prefix . 'title_font_color', '#ffffff' );
  $job_role_font_color = get_post_meta ( $teamid, $prefix . 'job_role_font_color', '#ffffff' );
  $description_font_color = get_post_meta ( $teamid, $prefix . 'description_font_color', '#333333' );
  $social_icon_font_color = get_post_meta ( $teamid, $prefix . 'social_icon_font_color', '#ffffff' );

  ?>

<style media="screen">
  .f4w-card h2 span {
    font-size: <?php echo $title_font_size; ?>px;
    color: <?php echo $title_font_color; ?>;
  }

  .f4w-card h2 strong {
    font-size: <?php echo $job_role_font_size; ?>px;
    color: <?php echo $job_role_font_color; ?>;
  }
  .f4w-card.f4w-active .f4w-description{
    font-size: <?php echo $description_font_size; ?>px;
    color: <?php echo $description_font_color; ?>;
  }
  .f4w-card .f4w-footer a{
    font-size: <?php echo $social_icon_font_size; ?>px;
    color: <?php echo $social_icon_font_color; ?>;
  }

  /**
    Pro Settings CSS
   */
.f4w-card.Blue h2,
.f4w-card.Blue .f4w-btn-action {
  background-color: <?php echo $primary_color; ?>;
}

.f4w-card.Blue h2:after {
  border-top-color: <?php echo $primary_color; ?>;
  border-right-color: <?php echo $primary_color; ?>;
}
.f4w-card.Blue.f4w-active h2:before {
  border-right-color: <?php echo $primary_color; ?>;
  border-bottom-color: <?php echo $primary_color; ?>;
}

.f4w-card.Blue.f4w-active h2:after {
  border-top-color: <?php echo $primary_color; ?>;
  border-right-color: <?php echo $primary_color; ?>;
}

.f4w-card.Blue h2:before {
  border-right-color: <?php echo $primary_color; ?>;
  border-bottom-color: <?php echo $primary_color; ?>;
}

.f4w-card.Blue .f4w-btn-action:hover {
  background-color: <?php echo $secondary_color; ?>;
}

.f4w-card.Blue .f4w-footer h4 {
  color: <?php echo $secondary_color; ?>;
}
.f4w-card .img-container,
.f4w-card.Blue.f4w-active .f4w-content {
  background-color: <?php echo $background_color; ?>;
}

.f4w-card.Blue.f4w-active .f4w-footer {
  background-color: <?php echo $secondary_color; ?>;
}

.f4w-card.Blue.f4w-active .f4w-btn-action {
  border-color: <?php echo $secondary_color; ?>;
}
.f4w-card.Blue .f4w-footer a{
  background-color: <?php echo $social_icon_background_color; ?>;
}

/*End Pro Settings CSS*/

</style>


<div class="row">

<?php

if(!empty ($members)) :
  
  //Get data field name
  $full_name_meta = $prefix.'full_name';
  $job_role_meta = $prefix.'job_role';
  $member_image_meta = $prefix.'member_image';
  $description_meta = $prefix.'description';
  $facebook_meta = $prefix.'facebook_url';
  $instagram_meta = $prefix.'instagram_url';
  $twitter_meta = $prefix.'twitter_url';
  $linkedin_meta = $prefix.'linkedin_url';
  
  $facebook = '';
  $instagram = '';
  $twitter = '';
  $linkedin = '';

  foreach($members as $member) :
    if(isset($member[$facebook_meta])){
      $facebook = esc_attr($member[$facebook_meta]);
    }
    if(isset($member[$instagram_meta])){
      $instagram = esc_attr($member[$instagram_meta]);
    }
    if(isset($member[$twitter_meta])){
      $twitter = esc_attr($member[$twitter_meta]);
    }
    if(isset($member[$linkedin_meta])){
      $linkedin = esc_attr($member[$linkedin_meta]);
    }
        
    
?>
  <div class="col-sm-12 col-md-<?php echo $column; ?>">
      <div class="f4w-card Blue">
        <h2>
            <span class="truncate" title="<?php echo esc_attr( $member[$full_name_meta] );  ?>"><?php echo esc_attr( $member[$full_name_meta] );  ?></span>
            <strong class="truncate" title="<?php echo esc_attr( $member[$job_role_meta] );  ?>">
                <i class="fa fa-fw fa-star"></i>
                <?php echo esc_attr( $member[$job_role_meta] );  ?>
            </strong>
        </h2>
        <div class="f4w-content">
            <div class="img-container">
                <img class="img-fluid" src="<?php echo esc_attr( $member[$member_image_meta] );  ?>" alt="<?php echo esc_attr( $member[$full_name_meta] ); ?>">
            </div>
            <div class="f4w-description">
                <?php echo substr(esc_attr( $member[$description_meta] ), 0, $description_characters);  ?>
            </div>
        </div>
        <a class="f4w-btn-action">
            <i class="fa fa-bars"></i>
        </a>
        <div class="f4w-footer">
        <?php 
          if(!empty($facebook)) :
        ?>
            <a href="<?php echo esc_attr($facebook);  ?>" target="_blank" class="fa fa-fw fa-facebook"></a>
          <?php endif; ?>    
          <?php 
            if(!empty($twitter)) :
          ?>
            <a href="<?php echo esc_attr($twitter);  ?>" target="_blank" class="fa fa-fw fa-twitter"></a>
            <?php endif; ?> 
            <?php 
              if(!empty($linkedin)) :
            ?>
            <a href="<?php echo esc_attr($linkedin);  ?>" target="_blank" class="fa fa-fw fa-linkedin"></a>
            <?php endif; ?> 
            <?php 
              if(!empty($instagram)) :
            ?>
            <a href="<?php echo esc_attr($instagram);  ?>" target="_blank" class="fa fa-fw fa-instagram"></a>
            <?php endif; ?> 
        </div>
      </div>
    </div>

<?php  endforeach; endif; ?>

</div>

<?php

}

 add_shortcode( 'f4w-our-team', 'our_team_shortcode' ); 
 
?>