@extends('main')

@section('css')
<link href="{{ asset('/css/bootstrapValidator.min.css')}}" rel="stylesheet">
@endsection

@section('content')
<section class="main_content">
    <div class="container">
    <ol class="breadcrumb cust-breadcrumb">
              <li><a href="{{url('/')}}">Home</a></li>
               @if($follow_type == 'following')
              <li class="active"><a href="{{url('/follow/following')}}">My Following</a></li>
              @else
              <li class="active"><a href="{{url('/follow/followers')}}">My Followers</a></li>
              @endif
            </ol>
              <div class="row">
          <div class="col-md-12">
          @if (Session::get('error_msg'))
              <div class="alert alert-danger clearfix">
                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
                 </button>
                  {{Session::get('error_msg')}}
              </div>
          @endif
          @if (Session::get('succ_msg'))
              <div class="alert alert-success clearfix">
                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
                 </button>
                  {{Session::get('succ_msg')}}
              </div>
          @endif
          </div>
        </div>
    
      <div class="row talent_home">
        @include("left_menu")
        <div class="col-md-9 col-sm-8 "> 
            @if($follow_type == 'following')
             <h1 class="heading mtop-0 mylikes-head">
                                  My Following
                                </h1>
            @else
              <h1 class="heading mtop-0 mylikes-head">
                                  My Followers
                                </h1>
            @endif
            <div class="clearfix"></div>
            <div class="mtop-0" id="mylikes_div">
            
             @if(count($likes) > 0)
             @foreach($likes as $lik)
            <div class="col-md-4  findsiz mylike_nopad col-sm-6 mbot10">
            
                      <div class=" mylikes-pic"><div class="col-sm-12">
            
                
                      
                        @if($lik->profile_image && is_file('../uploads/profile_images/'.$lik->profile_image))
                        <img class="pro_pic img-responsive" src="{{url('uploads/profile_images/'.$lik->profile_image)}}" alt=""/>
                      @else                    
                        <img class="pro_pic img-responsive" src="{{url('uploads/profile_images/default-profile.png')}}" alt=""/>
                      @endif
                      <input type="hidden" value="P" class="like_type">
                  </div>

                  <div class="clearfix"></div>
               <div class="row mylikes-icons-block"> <div class="col-sm-8 col-xs-6"> <h4 title="{{$lik->name}}">{{ str_limit($lik->name, $limit = 10, $end = '.....') }}</h4>
                      </div>

<div class="col-sm-4 col-xs-6"><div class="mylikes-pic-icons"><span><a href="{{ URL::to('profiles', array($lik->id)) }}" title="View Profile"><i class="fa fa-eye"></i></a></span>
 @if($follow_type == 'following')
<span class="delete-icon"><a  href="javascript:void(0)" data-id="{{$lik->id}}"  class="chk_del" title="Delete Like"><i class="fa fa-trash-o"></i></a></span>
@endif
</div></div></div>
                               </div> </div>
              @endforeach 
          @else 
             <div class="col-md-6 col-xs-6 findsiz mylike_nopad">
              <h4>No Profiles Found</h4>
             </div>
          @endif
           
          </div>
            <div id="LoadingImage" style="display: none;">
                  <img class="img-responsive" src="../images/spin.gif" width="120" height="120" alt=""/>
                  </div>
                  <input type="hidden"  id="numrows" value="{{$numrows}}">
                  <input type="hidden"  id="maxlimit" value="{{$maxlimit}}">
                  <input type="hidden" name="_token" value="{{ Session::getToken() }}">
                 
        </div>
        
            
                <div class="col-md-9 col-sm-8 mtop10">
             @if($numrows>$maxlimit)
              <div class="col-sm-4 col-md-offset-4">
             <button  class="btn mypics-more-btn" id="picture_next">More</button>
              </div>
             @endif
                </div>
        
       
      </div>
    </div>
  </section>
@endsection

<!-- Modal -->
<div class="modal fade" id="popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
         <iframe src="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="600" height="400" id="modal-iframe"></iframe>
      <div class="modal-footer video-model-foot">
          
        <button type="button" class="btn-close btn delete-btn clear_form pull-right" id="modal-close" >Close</button>
      </div>
    </div>
  </div>
</div>

<div id="view_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title img-name"></h4>
                    </div>
                    <div class="modal-body">
                      <div class="form-horizontal">
                          <div class="form-group">
                               <div class="col-sm-12 text-center"><img src="" class="img-elem img-responsive"></div>
                          </div>
                          <div class="form-group">
                              <div class="col-md-12">
                                  <button data-dismiss="modal" class="btn-close btn delete-btn clear_form pull-right" type="button">Close</button>
                              </div>
                          </div>
                      </div>          
                   </div><!-- End of Modal body -->
            </div><!-- End of Modal content -->
        </div><!-- End of Modal dialog -->
    </div><!-- End of Profile Image Modal --> 

@section('js')
@section('js')

<script src="{{ asset('js/bootstrapValidator.min.js')}}"></script>
<script src="{{ asset('js/maskedinput/jquery.maskedinput.min.js')}}"></script>
<script src="{{ asset('js/bootbox.js')}}"></script>

<script type="text/javascript">
$(document).ready(function()
{
      
       
   $('#picture_next').click(function(){
       
       var numlikes=parseInt($("#numrows").val());
       var maxlimit=parseInt($("#maxlimit").val());
       if(numlikes<=maxlimit){$('#picture_next').css("display", "none");}
        
       $("#LoadingImage").show();
       
       var findsiz= parseInt($(".findsiz").length);
       var divsiz=maxlimit;
       var like_type=$('.like_type').val();//alert(like_type);
       if(numlikes<=divsiz){$('#picture_next').css("display", "none");}
       var dataString = 'likes_type='+ like_type + '&take='+ divsiz +'&skip='+ findsiz +'&_token=' + $("input[name=_token]").val();
           $.ajax({
                    type: "GET",
                    url : "data/ajax_request",
                    data : dataString,
                    dataType: "JSON",
                    success : function(data){
                       var append_data = '';
                       var title='';
                       var image_path='';
                       var viewName='';
                       var addfile='';
                      $.each(data,function(key,val){
                        //alert(like_type);
                        if(like_type=='P')
                          { 
                             var title='My Profiles';
                             if(val.profile_image!="")
                             {
                             var image_path='<img class="img-responsive" src="../uploads/profile_images/'+val.profile_image+'" alt=""/>';
                              }
                              else 
                              {
                              var image_path='<img class="img-responsive" src="../uploads/profile_images/default-profile.png" alt=""/>';
                              }
                          }  
                  
                       
                       var txt_name = val.name;
                       var pic_title=val.name;
                        if(txt_name.length > 15)
                        {
                          txt_name = txt_name.substr(0,15) + "....";
                        }
                           
                        
                          append_data=append_data+'<div class="col-md-4  findsiz mylike_nopad col-sm-4 mbot10"><div class=" mylikes-pic"><div class="col-sm-12">'+image_path+'</div><div class="clearfix"></div><div class="row mylikes-icons-block"><div class="col-sm-8 col-xs-6"><h4 title="'+pic_title+'">'+txt_name+'</h4></div><div class="col-sm-4 col-xs-6"><div class="mylikes-pic-icons"><span><a href="{{url("profiles/")}}/'+val.profile_id+'" title="View Profile"><i class="fa fa-eye"></i></a></span><span class="delete-icon"><a  href="javascript:void(0)" data-id="'+val.id+'"  class="chk_del" title="Delete Like"><i class="fa fa-trash-o"></i></a></span></div></div></div></div></div>';
                         
                       });
                       if(!$(".findsiz").length)$('#mylikes_div').html('');
                       $('#mylikes_div').append(append_data);
                       if(numlikes>$(".findsiz").length){$('#picture_next').show();}else{$('#picture_next').hide();}
                       $("#LoadingImage").hide();
                    
                   }
                });
    
    });
    
   $("#modal-close").click(function(){
        $('#modal-iframe').attr('src',"");
        $('#popup').modal('hide');
    })
    
 $(document).on('click','.popup',function(){
       $('#modal-iframe').attr('src',$(this).attr('iframe-src'));
       $('#popup').modal('show');
 });
    
}); 
 $(document).on('click','.chk_del',function(){
    var pic_id = $(this).attr("data-id");//alert(pic_id);
   
    bootbox.confirm("Are you sure, you want to delete this?", function(result) {
      if(result)
      location.href = '{{url("follow/")}}/'+pic_id+"/delete";
    });  
  });

 $(function(){
    if($('.view_btn').length)
  {
    $(document).on('click','.view_btn',function(){
         var atr_val=$(this).attr('data-id');
         var atr_name=$(this).attr('data-title');
      $('#view_modal').modal('show');
       $('#view_modal .img-name').html(atr_name);
      $('#view_modal .img-elem').attr('src', $(this).attr('data-url'));
      $('#view_modal .assets_id_elem').val($(this).attr('data-id'));
        
         var dataString = 'atr_val='+ atr_val +  '&_token=' + $("input[name=_token]").val();
        
            $.ajax({
                              type: "POST",
                              url : "picture_view",
                              data : dataString,
                              success : function(data){//alert(data);
                              }
                          },"json");
                          
     
    });
  }
});
</script>
@endsection