@extends('layouts.web')

@section('page-title', 'Galería de Fotos')

@section('meta')
    <meta property="og:url" content="{{url('fotos/'.$foto->id)}}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="{{ $foto->title }}" />
    <meta property="og:image" content="{{asset('assets/fotos/'.$foto->file)}}" />
    <meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="630" />  
    <meta property="og:description" content="{{ strip_tags($foto->description)}}" />
	<meta property="fb:app_id" content="116494819024922" />
	<meta property="article:author" content="268002723664026" />
	<meta property="article:publisher" content="268002723664026" /> 
  
@endsection

@section('content')
	<h1 class="headerSection">Galería de Fotos</h1>

	@if (Auth::user())

	<div class="fixed-action-btn toolbar">
	  <span class="new badge blue badgeButtom" style="float:left;"> Agregar</span>
	  <a class="btn-floating btn-large blue z-depth-4">
	    <i class="large material-icons">library_add</i> 
	  </a>
	  <ul>
	    <li class="waves-effect waves-light">
	        <a href="{{route('fotos.create')}}"><i class="fa fa-picture-o"></i> Registrar nueva Fotografía</a>
	    </li> 
	    <li class="waves-effect waves-light">
	        <a href="{{route('albums.create')}}"><i class="fa fa-folder-open"></i> Registrar nuevo Album</a>
	    </li> 
	  </ul>
	</div>
	@endif

<div class="row">         
				 
             <div class="col-xs-12 {{ $foto->status ?: 'despublicado' }}">
              <div class="card">
                <div class="card-image">
                  <div class="text-center material-placeholder">
                    {{HTML::image('assets/fotos/'.$foto->file, $foto->title, array('class'=>'materialboxed image-album__'))}}
                  </div>
                    <span class="card-title titlePrimary">
                        <a href="{{route('fotos.show',$foto->id)}}" class="text-white">
                            {{ $foto->title }}
                        </a>
                    </span>
                </div>
                <div class="card-content">
                  
                    <div class="chip pull-right">
                      <i class='fa fa-calendar' aria-hidden='true'></i> Publicado el:
                      {{date('d M Y',strtotime($foto->publish_up))}}
                      <span class="new badge">
                        {{\Carbon\Carbon::now()->subMinutes( \Carbon\Carbon::now()->diffInMinutes( \Carbon\Carbon::parse($foto->publish_up)))->diffForHumans()}}
                      </span>
                    </div><br>
                    <div class="row">{!! $foto->description !!}</div>
                </div> 


                <div class="card-action teal darken-1"> 
                    
                    <div class="fb-like" data-href="{{url('fotos'.$foto->id)}}" data-width="500" data-layout="button" data-action="like" data-size="large" data-show-faces="true" data-share="true">Me Gusta </div>  
                    <div class="fb-comments" data-href="{{url('fotos'.$foto->id)}}" data-numposts="5"></div>
                        
                  @if (Auth::user())
                        <a onclick="trash('{{$foto->id}}','{{$foto->title}}')" class="pull-right btn-floating waves-effect waves-light btn-small red">
                          <i class="fa fa-trash" aria-hidden="true"></i>
                        </a>
                        <a href="{{route('fotos.edit',$foto->id)}}" class="pull-right btn-floating waves-effect waves-light btn-small blue">
                          <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                        </a>   
                    @if($foto->status)
                        <a onclick="statusChange('{{$foto->id}}','{{$foto->status}}','{{$foto->title}}')" class="pull-right btn-floating waves-effect waves-light btn-small green tooltipped" data-position="bottom" data-delay="50" data-tooltip="Este registro está PUBLICADO">
                          <i class="fa fa-eye" aria-hidden="true"></i>
                        </a>    
                    @else 
                      <a onclick="statusChange('{{$foto->id}}','{{$foto->status}}','{{$foto->title}}')" class="pull-right btn-floating waves-effect waves-light btn-small green tooltipped" data-position="bottom" data-delay="50" data-tooltip="Este registro está DESPUBLICADO">
                          <i class="fa fa-eye-slash" aria-hidden="true"></i>
                        </a>    
                    @endif                        

                @endif
                </div>


              </div>
            </div>
     
</div>	    

 @include('partials.share')

@stop
   <hr>
@section('scripts')

<script>
function trash(id,title){ 
    var ident = id;
    swal({
     text: 'Esta seguro de realizar esta Acción?',
     title: 'Si procede <span class="btn btn-danger">'+title+'</span> será eliminado!',
     type: 'warning',
     showCancelButton: true,
     confirmButtonColor: '#DD6B55',
     confirmButtonText: 'Eliminar!',
     cancelButtonText: 'Cancelar', 
     closeOnConfirm: false,
     closeOnCancel: false,
     html: true

   },
   function(isConfirm){
       if (isConfirm) { 
       //	console.log(id+'-'+title)
           $.ajax({
               url: '{{ url('/fotos/delete') }}' + '/' + id, 
               type: "GET",  
               dataType: "JSON", 
               headers: {
                'X-CSRF-TOKEN': $('meta[title="token"]').attr('content')
            },
            success: function (res) {
                console.log(res);
            },
            error: function(res){
                console.log("Error :" + res );
            }
               }); 
               swal(title+' eliminado!', 'Este registro fue eliminado.', 'success');
               window.location.reload(true);

       }else {
           swal('Cancelado!', 'Este registro NO fue eliminado.', 'error');
       }
   });
}
</script>
<script>
function statusChange(id,status,title){
   $.ajax({
       url: '{{ url('/fotos/statusChange') }}' + '/' + id + '/' + status,
       type: 'GET', 
       headers: {
           'X-CSRF-TOKEN': $('meta[title="token"]').attr('content')
       },
       dataType: "JSON",
       success: function (res) {
           console.log(res);
            if(res.now){
                swal(title+', modificado!', 'este registro está publicado.', 'success');
                window.location.reload(true);
            }else{
                swal(title+', modificado!', 'este registro está despublicado.', 'warning');
                window.location.reload(true);
            }
       },
       error: function(res){
           console.log("Error :" + res );
       }
   }); 
}

</script>
    <script type="text/javascript">
$(document).ready(function(){
    $('.materialboxed').materialbox();
    $(this).removeClass("image-album");
  });
        

    </script> 
@stop