<div class="col-md-3" id="sidebar">
  <nav class="profile-navigation">
    <?php if(get_theme_mod('charsoogh_profile_avatar' , 'yes') == 'yes' || get_theme_mod('charsoogh_profile_name' , 'yes') == 'yes'): ?>
    <div class="top-nav-head">
      <?php
      if(get_theme_mod('charsoogh_profile_avatar' , 'yes') == 'yes'){
      $attachment_id = get_user_meta( $user_id, 'user_avatar', true );
      if ( !empty($attachment_id) ) {
          $original_image_url = wp_get_attachment_url( $attachment_id );
          echo wp_get_attachment_image( $attachment_id, 'thumbnail');
      }else{
        echo '<img src="'. get_template_directory_uri() . '/assets/img/avatar.png" alt="'. $display_name .'" />';
      }
    }
       ?>
      <?php if(get_theme_mod('charsoogh_profile_name' , 'yes') == 'yes'){ ?>
      <h3><?php echo $display_name; ?></h3>
      <?php } ?>
    </div>
  <?php endif; ?>
  <ul>
  <?php if($authorNumber && get_theme_mod('charsoogh_profile_phone' , 'yes') == 'yes'){ ?>
  <li><strong><i class="fa fa-phone" aria-hidden="true"></i> <?php _e('Phone Number:' , 'charsoogh'); ?> </strong> <p><a href="tel:<?php echo $authorNumber; ?>"><?php echo $authorNumber; ?></a></p>
  </li>
<?php }if($email && get_theme_mod('charsoogh_profile_email' , 'yes') == 'yes'){ ?>
  <li><strong><i class="fa fa-envelope-open" aria-hidden="true"></i> <?php _e('Email:' , 'charsoogh'); ?> </strong> <p><a href="mailto:<?php echo $email; ?>"><?php echo $email; ?></a></p></li>
<?php }if(get_user_meta( $user_id, 'user_address' , true ) && get_theme_mod('charsoogh_profile_address' , 'yes') == 'yes'){ ?>
  <li><strong><i class="fa fa-map-marker" aria-hidden="true"></i> <?php _e('Address:' , 'charsoogh'); ?> </strong> <p><?php echo get_user_meta( $user_id, 'user_address' , true ); ?></p></li>
<?php } if(get_user_meta( $user_id, 'user_description' , true ) && get_theme_mod('charsoogh_profile_description' , 'yes') == 'yes'){ ?>
  <li><strong><i class="fa fa-align-right" aria-hidden="true"></i> <?php _e('Description:' , 'charsoogh'); ?> </strong> <p><?php echo get_user_meta( $user_id, 'user_description' , true ); ?></p></li>
<?php } ?>
  </ul>
</nav>
<?php if(get_user_meta( $user_id, 'user_map_show' , true ) == 'on' && get_theme_mod('charsoogh_profile_map' , 'yes') == 'yes'){ ?>
<section class="box mapbox" style="padding: 5px;">
  <div class="ribbon-featured"><div class="ribbon-start"></div><div class="ribbon-content"><?php _e('Ad Location on Map' ,'charsoogh'); ?></div><div class="ribbon-end"><figure class="ribbon-shadow"></figure></div></div>
  <div id='map' style='width: 100%; height: 300px;'></div>
  <a href="http://maps.google.com/maps?q=loc:<?php echo get_user_meta($user_id , 'user_latitude' , true); ?>,<?php echo get_user_meta($user_id , 'user_longitude' , true); ?>" target="_blank">
  <button type="button" class="btn btn-primary info-btn col-md-5 col-sm-12 location-send"></i> <?php _e('Navigation' , 'charsoogh'); ?></button>
  </a>
  <?php
  $mapbox_style = get_theme_mod( 'charsoogh_map_style' , 'light-v10');
	$mapbox_marker = get_theme_mod( 'charsoogh_map_marker' , IMAGES ."/" . "icon/marker-icon.png");
  ?>
  <script>
  jQuery(document).ready(function() {
  var token ="<?php echo get_option('mapbox_token_key'); ?>";
  var map = L.map('map').setView([<?php echo get_user_meta($user_id , 'user_latitude' , true); ?>, <?php echo get_user_meta($user_id , 'user_longitude' , true); ?>], 16);

  L.marker(
         [<?php echo get_user_meta($user_id , 'user_latitude' , true); ?>, <?php echo get_user_meta($user_id , 'user_longitude' , true); ?>],
       {
      icon: new L.DivIcon({
      className: 'l-marker-icon',
      html: '<img class="l-marker-image" src="<?php echo $mapbox_marker; ?>" width="25px" height="41px"/>'+
   '<span class="l-marker-span"><?php _e('User Location' ,'charsoogh'); ?></span>',
      iconSize: [25, 41],
      iconAnchor: [25, 41],
      }),
       riseOnHover: true,
       draggable: false,
       autoPan: true,
      }
    ).addTo(map);

      L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + token, {
          maxZoom: 18,
          id: 'mapbox/<?php echo $mapbox_style; ?>',
          tileSize: 512,
          zoomOffset: -1,
          accessToken: token
      }).addTo(map);
  });
  </script>
</section>
<?php } ?>
</div>
