@extends('main')
@section('css')
<link href="{{ asset('/css/bootstrapValidator.min.css')}}" rel="stylesheet">
<link href="{{ asset('plugins/select2/css/select2.min.css')}}" rel="stylesheet">
<style type="text/css">
.button {
  background: #0057b2;
  background-image: -webkit-linear-gradient(top, #0057b2, #0057b2);
  background-image: -moz-linear-gradient(top, #0057b2, #0057b2);
  background-image: -ms-linear-gradient(top, #0057b2, #0057b2);
  background-image: -o-linear-gradient(top, #0057b2, #0057b2);
  background-image: linear-gradient(to bottom, #0057b2, #0057b2);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: #ffffff;
  font-size: 17px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.button:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

</style>
@endsection
@section('content')
<section class="main_content">
    <div class="container">
    <ol class="breadcrumb cust-breadcrumb">
              <li><a href="{{url('/')}}">Home</a></li>
              <li><a href="{{url('/search')}}">Search</a></li>
              <li class="active">Search Result</li>
            </ol>
      <div class="row talent_home">
        @include("left_menu")
       
        <div class="col-md-9 col-sm-9"> 
             
             
            <div id="connectionmsg" >
                  
            </div>
             
             
             <h1 class="heading mtop-0 search-result-head">Search</h1>
             <div style="margin-bottom:10px">
               <button id="Resumes" class="button">Resumes</button>
               <button id="Profiles" class="button">Profiles</button>
               <button id="Images" class="button">Images</button>
               <button id="Videos" class="button">Videos</button>
             </div>
              <div class="col-xs-6" style="width:100%">
                <div class="div-resumes">
                   @foreach ($asset as $assests)
                      @if($assests->asset_type == 'R')
                         <div class="row myresume-view-block" style="width:40%;float:left;margin-right:10px; margin-bottom:5px;">  
                            <div class="resume-bg-block">
                             <div class="resume-type-img"> 
                              <a href="{{url('/')}}/res_download/{{$assests->id}}">  <img class="img-responsive" src="images/pdfs.png" alt=""></a>
                             </div>
                            </div>
                            <div class="clearfix"></div>
                          <div class="mypics-botm-links">            
                          <div class="col-sm-6 col-md-8 col-xs-6">
                            <h4 title="br">{{$assests->name}} </h4>
                          </div>                 
                          <div class="col-sm-6 col-md-4 col-xs-6 my-pics-action-icons">
                           <div class="user-upload-action-icons">                                
                           <!--  <span class="lock-icon">
                             <a href="javascript:;" class="share_btn" data-id="227" data-url="images/pdfs.png" title="Share"><i class="fa fa-share-alt"></i></a>
                            </span>
                             <span class="lock-icon">
                                <a href="http://localhost/go2hei5/public_html/pictures/227?access=lock" title="Unlock"><i class="fa fa-unlock"></i></a>
                              </span>
                              <span class="delete-icon"> <a href="javascript:void(0)" data-id="227" class="chk_del" title="Delete"><i class="fa fa-trash-o"></i></a></span> -->
                            </div>
                          </div>  
                        </div>      
                     </div>
                      @endif
                   @endforeach 
              </div>

              <div class="div-images" style="display:none">
                   @foreach ($asset as $assests)
                      @if($assests->asset_type == 'I')
                         <div class="row myresume-view-block" style="width:40%; height:200px;float:left;margin-right:10px; margin-bottom:5px;">  
                            <div class="resume-bg-block">
                             <center><div class="resume-type-img-keyword" style="height:160px; padding-top:10px; width:80%; margin-bottom:0px"> 
                              <a >
                                <input type="image" class="showImages " data-val='{{$assests->name}}' height="100%" width="100%" class="" src="{{url('/')}}/images/{{$assests->path}}" alt=""></a>
                             </div></center>
                            </div>
                            <div class="clearfix"></div>
                          <div class="mypics-botm-links">            
                          <div class="col-sm-6 col-md-8 col-xs-6">
                            <h4 title="br">{{$assests->name}} </h4>
                          </div>                 
                          <div class="col-sm-6 col-md-4 col-xs-6 my-pics-action-icons">
                           <div class="user-upload-action-icons">                                
                           <!--  <span class="lock-icon">
                             <a href="javascript:;" class="share_btn" data-id="227" data-url="images/pdfs.png" title="Share"><i class="fa fa-share-alt"></i></a>
                            </span>
                             <span class="lock-icon">
                                <a href="http://localhost/go2hei5/public_html/pictures/227?access=lock" title="Unlock"><i class="fa fa-unlock"></i></a>
                              </span>
                              <span class="delete-icon"> <a href="javascript:void(0)" data-id="227" class="chk_del" title="Delete"><i class="fa fa-trash-o"></i></a></span> -->
                            </div>
                          </div>  
                        </div>      
                     </div>
                      @endif
                   @endforeach 
              </div>

                <div class="div-videos" style="display:none">
                   @foreach ($asset as $video)
                      @if($assests->asset_type == 'V')
                         <div class="col-sm-6 col-md-6 col-lg-4 mbot10 vidlen">
                     <div class="row mypic-view-block">  
                      <div class="col-sm-12">
                      
                      <img src="{{$video->thumb_img}}" iframe-src ="https://player.vimeo.com/video/{{$video->path}}" view-id="{{$video->id}}" class="img-responsive popup vid-img234">
                      <!---->
                    
                      </div>
                       <div class="mypics-botm-links"> 
                      <div class="col-md-8 col-xs-6">
                        <h4 class="heading_min_height" title="{{$video->name}}">{{ str_limit($video->name, $limit = 15, $end = '.....') }}</h4>
                      </div>
                      <div class="col-md-4 col-xs-6 mtop10 my-pics-action-icons">
                         <div class="user-upload-action-icons">
                        @if($video->access=='PUB')
            
                        <span class="lock-icon">
                          <a href="javascript:;" class="share_btn" data-id="{{$video->id}}" data-url="{{$video->thumb_img}}" title="Share"><i class="fa fa-share-alt"></i></a>
                        </span>                        
                        <span class="lock-icon">
                          <a href="{{url('videos/'.$video->id.'?access=lock')}}" title="Unlock"><i class="fa fa-unlock"></i></a>
                        </span>
                        @else
                        <span class="lock-icon">
                          <a href="{{url('videos/'.$video->id.'?access=unlock')}}" title="Lock"><i class="fa fa-lock"></i></a>
                        </span>  
                        @endif
            
                       
                      </div>
                      </div></div>
                  </div></div>
                      @endif
                   @endforeach 
              </div>


              <div class="div-profile" style="display:none">
                   @foreach ($profiles as $pro)
                 <div class="row talent_data search_result search-result-right-br" id="search_result_data" style="width:45%; float:left; margin-left:0px; margin-right:10px; margin-bottom:10px;  margin-top:0px">     
                         <div class="col-md-6">
                <div class="row">
                  <div class="emty-div-row">
                   <div class="row profile-search-top-actions">
                        <div class="col-xs-4 col-md-4" style="margin-right:-110px">
                          <!-- <div class="search_input">
                            <input type="checkbox" id="profileList" name="profileList[]" value="{{$pro->id}}">
                              <label></label></div> -->
                              </div>
                    <div class="col-md-8 col-xs-8" style="width:200px">
                      <a href="{{url('profiles/'.$pro->id)}}">
                       <h4>{{$pro->name}}</h4>
                      </a>
                    </div>
                   </div>
                <div class="row profile-search-middle-actions ">
                <div class="col-xs-4 col-md-4 searchpg-profile-pic" style="width:100px">
                       <a href="{{url('profiles/'.$pro->id)}}">
                     @if($pro->profile_image && is_file('uploads/profile_images/'.$pro->profile_image))
                        <img class="img-responsive img-circle" src="{{url('uploads/profile_images/'.$pro->profile_image)}}" alt=""/>
                      @else                    
                        <img class="img-responsive img-circle" src="{{url('uploads/profile_images/default-profile.png')}}" alt=""/>
                      @endif
                      </a>
                </div>
                 <div class="col-xs-4 col-md-4">
                    <!-- <div class="search-like-div">   
                      <a href="javascript:void(0)" class="updt_pro like159 unlike_col" data-id="159"><span class="glyphicon glyphicon-thumbs-down"></span> (Unlike)</a> 
                    </div> -->
                 </div>
                    <div class="col-xs-4 col-md-4">
                    <div class="profile-addpic-search" style="width:100px">
                    <img class="img-responsive" src="http://developer.go2heights.com/public_h/images/add_pic.png" alt=""></a></div></div>
                  
                  </div>
                  </div>
                    
                </div>
                   <div class="clearfix">
                      <div id="LoadingImage" style="display: none;">
                         <img class="img-responsive" src="images/spin.gif" width="120" height="120" alt="">
                     </div>
                    </div>
                </div>
                </div>
                   @endforeach 
              </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> 

<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 height="100%" width="100%"  class="dialogImage " 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 --> 






<!-- Modal video -->
<div class="modal fade" id="popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  <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>

<!-- Profile  Video Modal -->
<div id="share_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">Share Video</h4>
    </div>
    <div class="modal-body">
      <form class="form-horizontal" method="post" id="shareForm" name="shareForm" action="{{url('share/share_asset')}}">
          <input type="hidden" name="_token" value="{{ csrf_token() }}">
          <input type="hidden" name="sel_to_prof_id" id="sel_to_prof_id">
          <input type="hidden" name="assets_id" value="" class="assets_id_elem">
          <input type="hidden" name="asset_type" value="video">
          <div class="form-group">
            <label class="col-sm-1 share_label" >To<span class="reqired-val">*</span></label>
            <div class="col-sm-11">
                <!--<input type="text" name="to" id="to" class="form-control .typeahead" data-bv-field="to">-->
                <select name="to[]" id="to" class="form-control" multiple="multiple" placeholder="Ex: Username">
                  
                </select>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 text-center"><img src="" class="img-elem"></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>
                  <button type="submit" value="Submit" class="btn-close btn delete-btn clear_form pull-left">Share</button>
              </div>
          </div>
      </form>          
    </div><!-- End of Modal body -->
    </div><!-- End of Modal content -->
    </div><!-- End of Modal dialog -->
</div><!-- End of video model --> 






  
@endsection
@section('js')
<script src="{{ asset('js/bootstrapValidator.min.js')}}"></script>
<script src="{{ asset('js/maskedinput/jquery.maskedinput.min.js')}}"></script>
<script src="{{ asset('plugins/select2/js/select2.min.js')}}"></script>
<script src="{{ asset('js/validation.js')}}"></script>
<script src="{{ asset('js/bootbox.js')}}"></script>
<script type="text/javascript">
  $('#Resumes').click(function(){
      $('.div-resumes').show();
      $('.div-images').hide();
      $('.div-videos').hide();
      $('.div-profile').hide();
      
  });

 $('#Images').click(function(){
      $('.div-images').show();
      $('.div-resumes').hide();
      $('.div-videos').hide();
      $('.div-profile').hide();
      
  });

 $('#Videos').click(function(){
      $('.div-videos').show();
      $('.div-resumes').hide();
      $('.div-images').hide();
      $('.div-profile').hide();
      
  });
  $('#Profiles').click(function(){
      $('.div-profile').show();
      $('.div-resumes').hide();
      $('.div-images').hide();
      $('.div-videos').hide();
      
  });



  // $('#showImage').click(function() {
  //   alert('asdf');
  //   //alert($(this).attr('name'));
  // });

</script>
<script type="text/javascript">
$('.showImages').click(function() {
    var dataName=$(this).data('val');
    var imgSrc=$(this).attr('src');
    $('.img-name').html(dataName);
    $('.dialogImage').attr('src',imgSrc);
    $('#view_modal').modal('show');
});
</script>




<script type="text/javascript">
  document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'complete') {
      setTimeout(function(){
          document.getElementById('interactive');
         document.getElementById('load').style.visibility="hidden";
      },1000);
  }
}
</script>
<script type="text/javascript">

$(document).ready(function(){
   /* $('.popup').click(function(){
       $('#modal-iframe').attr('src',$(this).attr('iframe-src'))
       $('#popup').modal('show');
    });*/
 
 $(document).on('click','.popup',function(){
      var atr_val=$(this).attr('view-id');
      var dataString = 'atr_val='+ atr_val +  '&_token=' + $("input[name=_token]").val();
       // alert(dataString);
                       $.ajax({
                              type: "POST",
                              url : "video_view",
                              data : dataString,
                              success : function(data){ }
                          },"json");
                          
                          $('#modal-iframe').attr('src',$(this).attr('iframe-src'));
                          $('#popup').modal('show'); 
                          
       
 });

    $("#modal-close").click(function(){
        $('#modal-iframe').attr('src',"");
        $('#popup').modal('hide');
    })
@if($numrows<=3)
$('#video_next').hide();    
@endif    

 var ajax_request;

  function load_more()
  {
    if(ajax_request != null) ajax_request.abort(); //cancel previous request      
   
       $("#LoadingImage").show();
       var current_prof_id = {{Session::get('auth_selected_profile')}};
       var findsiz= $(".vidlen").length;

       var divsiz=3;
       var numrow=$("input[name=numrows]").val();
       var sea_key = $('#auto_search').val();
       if(numrow<=divsiz){$('#video_next').css("display", "none");}
       var url = "{{url('vidoes_loadmore')}}?take="+divsiz+"&skip="+findsiz+"&sea_key="+sea_key;
       /*if(sea_key)
           $('#auto_search').attr('readonly','readonly');*/
          ajax_request = $.ajax({
                    type: "get",
                    url : url,
                    dataType: "json",
                    success : function(data){
                        ajax_request = null;
                      append_data = '';
                     // likes_data = data['likes'];
                      //var arr = Object.keys(data['likes']).map(function(k) { alert(obj[k]) });
                      var obj = data['likes'];
                        var arr = [];
                        for (elem in obj) {
                           arr.push(obj[elem]);
                        }
                      $.each(data['values'],function(i,v){
                        icon = '';icon_url='';permission='';
                        video_img='';popup='';iframe_src='';vid_likes='';
                          vid_title='';
                        if(current_prof_id==v.profile_id)
                        {
                            share = '<div class="user-upload-action-icons">';
                            if(v.access=='PUB')
                            {
                              icon = 'fa-unlock';
                              icon_url = "{{url('videos')}}/"+v.id+"?access=lock";
                              icon_title = 'Unlock';

                              share =  '<span class="lock-icon">';
                              share += '<a href="javascript:;" class="share_btn" data-id="'+v.id+'" data-url="'+v.thumb_img+'" title="Share"><i class="fa fa-share-alt"></i></a>';
                              share += '</span>';
                            }
                            else
                            {
                             icon = 'fa-lock'; icon_url = "{{url('videos')}}/"+v.id+"?access=unlock";
                             icon_title = 'Lock';
                            }
                            permission =  share + '<span class="lock-icon"><a href="'+icon_url+'" title="'+icon_title+'"><i class="fa '+icon+'"></i></a></span> <span class="delete-icon"><a href="javascript:void(0)" title="Delete" class="delete_video" data-id="'+v.id+'"><i class="fa fa-trash-o"></i></a></span></div>';
                        }   
                        else
                        { 
                          
                           
                            vid_likes='<div class="update_likes'+v.id+'">';
                            if($.inArray(v.id,arr)!=-1)
                            {
                            vid_likes=vid_likes+'<a href="javascript:void(0)" class="updt_pro like'+v.id+' unlike_col" data-id="'+v.id+'"><span class="glyphicon glyphicon-thumbs-down"></span> (Unlike)</a>';
                             }                        
                           else
                             {
                             vid_likes=vid_likes+'<a href="javascript:void(0)" class="updt_pro unlike'+v.id+'" data-id="'+v.id+'" ><span class="glyphicon glyphicon-thumbs-up"></span> (Like)</a>';
                              }
                            vid_likes=vid_likes+'</div>';
                        }
                        if(v.processed==0)
                        {
                          video_img = '/uploads/processing.jpg';
                        }
                        else
                        {
                          iframe_src ='iframe-src ="https://player.vimeo.com/video/'+v.path+'"';
                          popup = 'popup';
                          video_img = v.thumb_img;
                        }
                            len=v.name.length;
                           var vid_title=v.name;
                            if(len>15)
                            {
                              v.name=v.name.substr(0,15)+'...';
                            }
                                             append_data = append_data+'<div class="col-sm-6 col-md-6 col-lg-4 mbot10 vidlen"><div class="row mypic-view-block"><div class="col-sm-12"><img src="'+video_img+'" '+iframe_src+' class="img-responsive '+popup+' vid-img234" view-id="'+v.id+'"></div><div class="mypics-botm-links"><div class="col-sm-8 col-xs-6"><h4 title="'+vid_title+'" class="heading_min_height">'+v.name+'</h4></div><div class="col-sm-4 col-xs-6 my-pics-action-icons">'+permission+vid_likes+' </div></div></div></div>';
                      });   
                     if(append_data) append_data=append_data+'<div class="clearfix"></div>';
                    /*if(sea_key)
                        $('#auto_search').removeAttr('readonly');*/

                      if(!$(".vidlen").length)$('#videos_div').html('');
                      $('#videos_div').append(append_data);
                      if(! append_data)$('#videos_div').html('No Records Found');
/*                      if(numrow>$(".vidlen").length){$('#video_next').show();}else{$('#video_next').hide();}
                      $("#LoadingImage").hide();*/
                      if(parseInt(data['count'])>$(".vidlen").length){$('#video_next').show();}else{$('#video_next').hide();}
                      $("#LoadingImage").hide();
                      
                    }
                },"json");

  }
  $('#video_next').click(function(){
    load_more();
  });
  $(document).on('click','.delete_video',function(){
    var video_id = $(this).attr("data-id");
    bootbox.confirm("Are you sure, you want to delete video?", function(result) {
      if(result)
      location.href = '{{url("videos_delete/")}}/'+video_id;
    });  
  });

  $("#auto_search").keyup(function(){
    $("#LoadingImage").show();
    var curval=$(this).val();

      if(curval=='')
      {
        $('#videos_div').html('<a href="javascript:void(0)"><i class="fa fa-circle-o-notch fa-spin"></i> loading results</a>');
        load_more();
      }
      else
      {
          $('#videos_div').html('');
          $( document ).ajaxStop(function() {
          });  
          load_more();
    /* $('#video_next').css("display", "none");
        var dataString = 'searchdata='+ curval +  '&_token=' + $("input[name=_token]").val();
        $.ajax({
            type: "get",
            url : "/videosearch",
            data : dataString,
            success : function(data){
               $("#LoadingImage").hide();
               $('#videos_div').html(data);
            }
        },"json");*/
      }  
  });

});

//for mylikes script
     $(document).on('click','.updt_pro',function(){
    var data_id = $(this).attr("data-id");//alert(data_id);
     // location.href = '{{url("pictures/likes")}}/'+data_id;
      $("#LoadingImage").show();
      //for mylikes ajax
 var dataString = 'like_id='+ data_id +  '&_token=' + $("input[name=_token]").val();
  $.ajax({
                    type: "POST",
                    url : "/videos/likes",
                    data : dataString,
                    success : function(data){
                       $("#LoadingImage").hide();
                      var Unlike='<a href="javascript:void(0)" class="updt_pro like'+data_id+' unlike_col" data-id="'+data_id+'" ><span class="glyphicon glyphicon-thumbs-down"></span> (Unlike)</a>';
                      var Like='<a href="javascript:void(0)" class="updt_pro unlike'+data_id+'" data-id="'+data_id+'" ><span class="glyphicon glyphicon-thumbs-up"></span> (Like)</a>';
                       if(data=='Like'){ $('.like'+data_id).replaceWith(Like);}
                       if(data=='Unlike'){ $('.unlike'+data_id).replaceWith(Unlike);}}
                },"json");
   
  });

// Share js code
$(document).ready(function(){

  if($('.share_btn').length)
  {
    $(document).on('click','.share_btn',function(){
      $('#share_modal').modal('show');
      $('#share_modal .img-elem').attr('src', $(this).attr('data-url'));
      $('#share_modal .assets_id_elem').val($(this).attr('data-id'));
    });
  }

    $("#to").select2({
      ajax: {
        url: "invitation_typeahead",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            user_name: params.term, // search term
          };
        },
        processResults: function (data) {
          //alert('hi');
          // parse the results into the format expected by Select2.
          // since we are using custom formatting functions we do not need to
          // alter the remote JSON data
          var results = [];
         // console.log(data);
          $.each(data, function(index, item){
            results.push({
              id: item.id,
              text: item.value
            });
          });
          return {
              results: results
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      //minimumInputLength: 1,
      maximumSelectionLength: 5
      //templateResult: formatRepo, // omitted for brevity, see the source of this page
      //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
    });  
})
</script>
@endsection