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

@section('title')
Questions
@stop

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

@include('includes.notification')

@if(!count($themes))
<p>
    <em>Aucune photo pour le moment.</em>
</p>
@else
<div class="block full">
    <div class="block-content-full" style="padding:25px;">
	    <a href="#" class="btn btn-info add-theme" style="margin-bottom:20px"><i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Ajouter un thème</a>
		<div class="row themes">
				@foreach($themes as $t)
			<div class="col-md-3 theme" data-id="{{ $t->id }}">
				<h4 class="text-center"><a href="#" class="theme-name" data-id="{{ $t->id }}" data-name="{{ $t->theme }}">{{ $t->theme }}</a></h4>
				<div class="list-group list-theme" data-id="{{ $t->id }}">
				@foreach($t->questions as $q)
					<a href="#" class="list-group-item question" data-id="{{ $q->id }}">{{ $q->isAnswered().'&nbsp;&nbsp;'.$q->question }}</a>
				@endforeach
				</div>
				<div class="text-center"><a href="#" class="btn btn-info btn-xs add-question" data-question-theme-id="{{ $t->id }}"><i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Ajouter une question</a></div>
			</div>
				@endforeach
		</div>
    </div>
</div>
@endif

<div class="modal fade" id="modalQuestion" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title text-center" id="myModalLabel">Question</h4>
      </div>
      <div class="modal-body">
      	<label>Question</label>
      	<textarea class="form-control" name="question" style="margin-bottom:15px;height:70px"></textarea>
      	<label>Réponse</label>
      	<textarea class="form-control" name="answer" style="height:150px"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-danger delete-question">Supprimer</button>
        <button type="button" class="btn btn-success action-button">Enregistrer</button>
      </div>
    </div>
  </div>
</div>

@stop

@section('scripts')
@parent
<!-- Load and execute javascript code used only in this page -->
<script>
$(document).ready(function(){
	
	function clearModal(){
		$('#modalQuestion textarea[name="question"]').val('');
		$('#modalQuestion textarea[name="answer"]').val('');
		$('#modalQuestion .delete-question').hide();
	}
	
	$(document).on('click','.question',function(e){
		e.preventDefault();
		var question_id = $(this).attr('data-id');
		$.ajax({
			method: "POST",
			url: "{{ URL::route($_ENV['admin-url'].'.questions.retrieve-infos') }}",
			data:{
				question_id: question_id,
			}
		}).done(function(result){
			if(result != 'error'){
				var datas = $.parseJSON(result);
				clearModal();
				$('#modalQuestion textarea[name="question"]').val(datas.question);
				$('#modalQuestion textarea[name="answer"]').val(datas.answer);
				$('#modalQuestion .action-button').removeClass('createQuestion').addClass('updateQuestion').attr('data-id',datas.question_id).removeAttr('data-question-theme-id');
				$('#modalQuestion .delete-question').show().attr('data-id',datas.question_id);
				$('#modalQuestion').modal('show');	
			}
		});
	});
	
	$(document).on('click','.add-question',function(e){
		e.preventDefault();
		clearModal();
		$('#modalQuestion .action-button').removeClass('updateQuestion').addClass('createQuestion').attr({
			'data-id': 0,
			'data-question-theme-id': $(this).attr('data-question-theme-id'),
		});
		$('#modalQuestion').modal('show');
	});
	
	$(document).on('click','.createQuestion',function(e){
		e.preventDefault();
		var question_theme_id = $(this).attr('data-question-theme-id');
		var question = $('#modalQuestion textarea[name="question"]').val();
		var answer = $('#modalQuestion textarea[name="answer"]').val();
		$.ajax({
			method: "POST",
			url: "{{ URL::route($_ENV['admin-url'].'.questions.create') }}",
			data: {
				question_theme_id: question_theme_id,
				question: question,
				answer: answer,
			}
		}).done(function(result){
			if(result != 'error'){
				var datas = $.parseJSON(result);
				$('<a href="#" class="list-group-item question" data-id="'+datas.id+'">'+datas.content+'</a>').appendTo('.list-theme[data-id="'+datas.theme_id+'"]');
				$('#modalQuestion').modal('hide');
			}
		});
	});

	
	$(document).on('click','.updateQuestion',function(e){
		e.preventDefault();
		var question_id = $(this).attr('data-id');
		var question = $('#modalQuestion textarea[name="question"]').val();
		var answer = $('#modalQuestion textarea[name="answer"]').val();
		$.ajax({
			method: "POST",
			url: "{{ URL::route($_ENV['admin-url'].'.questions.update') }}",
			data: {
				question_id: question_id,
				question: question,
				answer: answer,
			}
		}).done(function(result){
			if(result != 'error'){
				var datas = $.parseJSON(result);
				$('.question[data-id="'+datas.id+'"]').attr({
					'data-question': datas.question,
					'data-answer': datas.answer,
				}).html(datas.content);
				$('#modalQuestion').modal('hide');
			}
		});
	});
	
	$(document).on('click','.delete-question',function(e){
		e.preventDefault();
		if(confirm("Etes-vous sûr de vouloir supprimer cette question?")){
			var question_id = $(this).attr('data-id');
			$.ajax({
				method: "POST",
				url: "{{ URL::route($_ENV['admin-url'].'.questions.delete') }}",
				data: {
					question_id: question_id,
				}
			}).done(function(result){
				if(result == 'ok'){
					$('.question[data-id="'+question_id+'"]').remove();
					$('#modalQuestion').modal('hide');
				}
			});
		}		
	});
	
	$('.add-theme').popover({
		trigger: 'click',
		html: true,
		title: 'Ajout d\'un thème',
		placement: 'right',
		content: function(){
			return '<input class="form-control" name="new-theme" style="width:400px"/><div class="text-center" style="margin-top:10px"><a href="#" class="btn btn-success btn-xs" id="createTheme">Enregistrer</a></div>';
		}		
	});
	
	function popover_theme_name(){
		$('.theme-name').popover({	
			trigger: 'click',
			html: true,
			title: 'Modification d\'un thème',
			placement: 'top',
			content: function(){
				return '<input class="form-control" name="update-theme" data-id="'+$(this).attr('data-id')+'" value="'+$(this).attr('data-name')+'" style="width:400px"/><div class="text-center" style="margin-top:10px"><a href="#" class="btn btn-info btn-xs updateTheme" data-id="'+$(this).attr('data-id')+'">Enregistrer</a>&nbsp;<a href="#" class="btn btn-danger btn-xs deleteTheme" data-id="'+$(this).attr('data-id')+'">Supprimer</a></div>';
			}		
		});
	}
	
	popover_theme_name();
	
	$(document).on('click','#createTheme',function(e){
		e.preventDefault();
		$.ajax({
			method: "POST",
			url: "{{ URL::route($_ENV['admin-url'].'.questions-theme.create') }}",
			data: {
				theme: $('input[name="new-theme"]').val(),
			}
		}).done(function(result){
			if(result != 'error'){
				var datas = $.parseJSON(result);
				$('<div class="col-md-3 theme" data-id="'+datas.id+'"><h4 class="text-center"><a href="#" class="theme-name" data-id="'+datas.id+'" data-name="'+datas.theme+'">'+datas.theme+'</a></h4><div class="list-group list-theme" data-id="'+datas.id+'"></div><div class="text-center"><a href="#" class="btn btn-info btn-xs add-question" data-question-theme-id="'+datas.id+'"><i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Ajouter une question</a></div></div>').appendTo('.themes');
				popover_theme_name();
				$('.add-theme').popover('hide');
			}
		});		
	});
	
	$(document).on('click','.updateTheme',function(e){
		e.preventDefault();
		var theme = $('input[name="update-theme"][data-id="'+$(this).attr('data-id')+'"]').val();
		var theme_id = $(this).attr('data-id');
		$.ajax({
			method: "POST",
			url: "{{ URL::route($_ENV['admin-url'].'.questions-theme.update') }}",
			data: {
				theme_id: theme_id,
				theme: theme,
			}
		}).done(function(result){
			if(result != 'error'){
				var datas = $.parseJSON(result);
				$('.theme-name[data-id="'+theme_id+'"]').attr('data-name',datas.name).html(datas.name);
				$('.theme-name[data-id="'+theme_id+'"]').popover('hide');
			}
		});		
	});
	
	$(document).on('click','.deleteTheme',function(e){
		e.preventDefault();
		if(confirm("Etes-vous sûr de vouloir supprimer ce thème?")){
			var theme_id = $(this).attr('data-id');
			$.ajax({
				method: "POST",
				url: "{{ URL::route($_ENV['admin-url'].'.questions-theme.delete') }}",
				data: {
					theme_id: theme_id,
				}
			}).done(function(result){
				if(result == 'ok'){
					$('.theme[data-id="'+theme_id+'"]').remove();
					$('.theme-name[data-id="'+theme_id+'"]').popover('hide');
				}
			});
		}	
	});
	
});
</script>
@stop