@extends("la.layouts.app")


@section("contentheader_title", "Query Graphs")
@section("contentheader_description", "Query Graphs Listing")
@section("section", "Query Graphs")
@section("sub_section", "Listing")
@section("htmlheader_title", "Query Graphs Listing")

@section("headerElems")
<button class="btn btn-success btn-sm pull-right" data-toggle="modal" data-target="#AddEditModal">Add Query Graph</button>
@endsection

@section("main-content")

<div class="box box-success">
	<!--<div class="box-header"></div>-->
	<div class="box-body">
		<table id="dt_queryGraph" class="table table-bordered">
		<thead>
		<tr class="success">
			<th>ID</th>
			<th>Name</th>
			<th>Query</th>
			<th>Actions</th>
		</tr>
		</thead>
		<tbody>
			@foreach ($queryGraphs as $query)
				<tr>
					<td>{{ $query->id }}</td>
					<td>{{ $query->name }}</td>
					<td>{{ $query->query }}</td>
					<td>
						<a queryGraph_id="{{ $query->id }}" queryGraph_name="{{ $query->name }}" queryGraph_query="{{ $query->query }}" class="btn btn-primary btn-xs edit_querygraph" style="display:inline;padding:2px 5px 3px 5px;"><i class="fa fa-edit"></i></a>
						<a queryGraph_name="{{ $query->name }}" queryGraph_id="{{ $query->id }}" class="btn btn-danger btn-xs delete_querygraph" style="display:inline;padding:2px 5px 3px 5px;"><i class="fa fa-trash"></i></a>
					</td>
				</tr>
			@endforeach
		</tbody>
		</table>
	</div>
</div>

<div class="modal fade" id="AddEditModal" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Add Query Graph</h4>
			</div>
			{!! Form::open(['route' => config('laraadmin.adminRoute') . '.querygraph.store', 'id' => 'querygraph-add-edit-form']) !!}
			<div class="modal-body">
				<div class="box-body">
					<div class="form-group">
						<label for="name">Name</label>
						{{ Form::text("name", null, ['class'=>'form-control', 'placeholder'=>'Name', 'data-rule-minlength' => 2, 'data-rule-maxlength'=>50, 'required' => 'required']) }}
					</div>
					<div class="form-group">
						<label for="query">Query</label>
						{{ Form::textarea("query", null, ['class'=>'form-control', 'placeholder'=>'Query', 'data-rule-minlength' => 5, 'required' => 'required']) }}
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				{!! Form::submit( 'Submit', ['class'=>'btn btn-success']) !!}
			</div>
			{!! Form::close() !!}
		</div>
	</div>
</div>

<!-- query graph deletion confirmation  -->
<div class="modal" id="querygraph_delete_confirm">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">Query Graph Delete</h4>
			</div>
			<div class="modal-body">
				<p>Are you sure to delete this QueryGraph?</p>
			</div>
			<div class="modal-footer">
				{{ Form::open(['route' => [config('laraadmin.adminRoute') . '.querygraph.destroy', 0], 'id' => 'querygraph_del_form', 'method' => 'delete', 'style'=>'display:inline']) }}
					<button class="btn btn-danger btn-delete pull-left" type="submit">Yes</button>
				{{ Form::close() }}
				<a data-dismiss="modal" class="btn btn-default pull-right" >No</a>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
@endsection

@push('styles')
<!-- <link rel="stylesheet" type="text/css" href="{{ asset('la-assets/plugins/datatables/datatables.min.css') }}"/> -->
@endpush

@push('scripts')
<!-- <script src="{{ asset('la-assets/plugins/datatables/datatables.min.js') }}"></script> -->
<script src="{{ asset('la-assets/plugins/iconpicker/fontawesome-iconpicker.js') }}"></script>
<script>
$(function () {
	var isUpdate = false;
	var id = 0;
	$('.delete_querygraph').on("click", function () {
    	var querygraph_id = $(this).attr('queryGraph_id');
		var querygraph_name = $(this).attr('queryGraph_name');
		
		url = $("#querygraph_del_form").attr("action").split('/');
		url[url.length - 1] = querygraph_id;
		
		$("#querygraph_del_form").attr("action", url.join("/"));
		$("#querygraph_delete_confirm").modal('show');
	});

	$('.edit_querygraph').on("click", function () {
    	id = $(this).attr('queryGraph_id');
		$('input[name="name"]').val($(this).attr('queryGraph_name'));
		$('textarea[name="query"]').val($(this).attr('queryGraph_query'));

		isUpdate = true;
		$("#AddEditModal").modal('show');
	});

	$('#querygraph_del_form').on('submit', function(e){
		e.preventDefault();
		var url = $(this).attr('action');

		$.ajax({
			url: url,
			type: 'DELETE',
			success: function(data) {
				location.reload();
			}
		});
	});

	$("#querygraph-add-edit-form").validate({

	});

	$('#querygraph-add-edit-form').on('submit', function(e){
		e.preventDefault();

		if(!$('input[name="name"]').hasClass('error') && !$('textarea[name="query"]').hasClass('error')){
			url = $(this).attr('action');
			method = $(this).attr('method');
			$postData = {};
			$postData.name = $('input[name="name"]').val();
			$postData.query = $('textarea[name="query"]').val();

			if(id != 0){
				$postData.id = id;
				url = url + '/' + id;
				method = 'PUT';

				$.ajax({
					url: url,
					type: method,
					data: $postData,
					success: function(data) {
						location.reload();
					}
				});
			}else{
				$.ajax({
					url: url,
					type: method,
					data: $postData,
					success: function(data) {
						location.reload();
					}
				});
			}
		}
	});

	$('#AddEditModal').on('hidden.bs.modal', function(){
		isUpdate = false;
		id = 0;
		$('input[name="name"]').val('');
		$('textarea[name="query"]').val('');
	});
});
</script>
@endpush