@extends($_ENV['admin-url'].'.layouts.main')

@section('title')
Photos
@stop

@section('content')
<!-- Blank Header -->
<div class="content-header">
    <div class="header-section">
        <h1>Photos</h1>
    </div>
</div>
<!-- END Blank Header -->
<ul class="breadcrumb breadcrumb-top">
    <li><a href="{{ route('admin') }}">Admin</a></li>
    <li>Photos</li>
</ul>

@include('includes.notification')

<span id="photo">photo</span>
<div id="queue-photo"></div>

<div class="block full">
    <div class="block-content-full" style="padding:25px;">
	    <div class="row photos">
		    @foreach($photos as $p)
		    <div class="col-md-2 photo text-center" data-id="{{ $p->id }}">
		       	<a class="thumbnail" href="#" style="margin-bottom:5px;">
			    	<img src="{{ URL::route('photogallery',[200,200,$p->name]) }}"/>
		       	</a>
	       		<div class="text-center" style="margin-bottom:15px;">
			    	<span class="btn btn-info btn-xs edit-photo" data-title="{{ $p->title }}" data-description="{{ $p->description }}" data-id="{{ $p->id }}"><i class="fa fa-edit"></i></span>
			    	&nbsp;
			    	<span class="btn btn-danger btn-xs delete-photo" style="width:24px" data-id="{{ $p->id }}"><i class="fa fa-trash"></i></span>
		    	</div>
		    </div>
	        @endforeach
	    </div>
    </div>
</div>
@stop

@section('scripts')
@parent
<!-- Load and execute javascript code used only in this page -->
<script>
$(document).ready(function(){
	
	function popover_photo(){
		$('.edit-photo').popover({
			trigger: 'click',
			html: true,
			title: 'Modification d\'une photo',
			placement: 'bottom',
			content: function(){
				return '<label>Titre</label><input class="form-control" value="'+$(this).attr('data-title')+'" name="title" data-id="'+$(this).attr('data-id')+'"/><label style="margin-top:10px">Description</label><textarea class="form-control" name="description" data-id="'+$(this).attr('data-id')+'" style="height:100px;width:250px">'+$(this).attr('data-description')+'</textarea><div class="text-center" style="margin-top:10px"><span class="btn btn-success btn-xs save-infos" data-id="'+$(this).attr('data-id')+'">Enregistrer</span>&nbsp;&nbsp;<span class="btn btn-xs btn-white cancel-infos" style="border: 1px solid #C3C3C3;" data-id="'+$(this).attr('data-id')+'">Annuler</span></div>';
			}
		});		
	}
	
	popover_photo();
	
	$('#photo').uploadifive({
		'auto'             : true,
		'buttonClass'      : 'btn btn-success',
		'buttonText'       : '<i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Ajouter des photos',
		'removeCompleted'  : true,
		'queueID'          : 'queue-photo',
		'height'           : 'auto',
		'width'            : 'auto',
		'uploadScript'     : "{{ URL::route($_ENV['admin-url'].'.photos.upload') }}",
		'onUploadComplete' : function(file, data) {
			var datas = $.parseJSON(data);
			if(datas.status == 'ok'){
				$('<div class="col-md-2 photo text-center" data-id="'+datas.id+'"><a class="thumbnail" href="#" style="margin-bottom:5px;"><img src="'+datas.src+'"/></a><div class="text-center" style="margin-bottom:15px;"><span class="btn btn-info btn-xs edit-photo" data-title="" data-description="" data-id="'+datas.id+'"><i class="fa fa-edit"></i></span>&nbsp;&nbsp;&nbsp;<span class="btn btn-danger btn-xs delete-photo" style="width:24px" data-id="'+datas.id+'"><i class="fa fa-trash"></i></span></div></div>').appendTo('.photos');	
				popover_photo();
			}					
			else alert(datas.message);
		}
	});
	
	$('.uploadifive-button').removeClass('btn-default');
	
	$('.photos').sortable({
		stop: function( event, ui ) {
			var photo_ids = [];
			$('.photo').each(function(){
				photo_ids.push($(this).data('id'));
			});			
			$.ajax({
				method: "POST",
				url: "{{ URL::route($_ENV['admin-url'].'.photos.order') }}",
				data: {
					photo_ids: photo_ids
				}
			});
		}
	});
		
	$(document).on('click','.save-infos',function(){
		var photo_id = $(this).attr('data-id');
		var title = $('input[name="title"][data-id="'+$(this).attr('data-id')+'"]').val();
		var description = $('textarea[name="description"][data-id="'+$(this).attr('data-id')+'"]').val();
		$.ajax({
			method: "POST",
			url: "{{ URL::route($_ENV['admin-url'].'.photos.save') }}",
			data: {
				photo_id: photo_id,
				title: title,
				description: description,
			}
		}).done(function(result){
			if(result != 'error'){
				var datas = $.parseJSON(result);
				$('.photo[data-id="'+datas.photo_id+'"] .edit-photo').attr({
					'data-title': datas.title,
					'data-description': datas.description,
				});
				$('.edit-photo[data-id="'+datas.photo_id+'"]').popover('hide');
			}
		});
	});
	$(document).on('click','.cancel-infos',function(){
		$('.edit-photo[data-id="'+$(this).attr('data-id')+'"]').popover('hide');
	});
	
	$(document).on('click','.delete-photo',function(){
		if(confirm("Voulez-vous vraiment supprimer cette photo?")){
			var photo_id = $(this).attr('data-id');
			$.ajax({
				method: "POST",
				url: "{{ URL::route($_ENV['admin-url'].'.photos.delete') }}",
				data: {
					photo_id: photo_id,
				}				
			}).done(function(result){
				if(result == 'ok'){
					$('.photo[data-id="'+photo_id+'"]').remove();
				}
			});
		}
	});
	
	
});
</script>
@stop