@extends('layouts.template')

@section('top')
<style type="text/css">
	.tablesaw-advance{
		display: none !important;
	}
	input[type=checkbox]{
		margin-right: 5px;
	}
</style>
@endsection

@section('content')
<div id="app">
	<div class="card">
	    <div class="card-header">{{ trans('pages.groups.header') }}</div>

	    <div class="card-body">
	        <div class="table-wrap m-t-20">
	            <div class="button-list m-b-20">
	            	<a href="#" class="btn btn-success btn-xs m-t-0 m-r-5" @click="create()">{{ trans('pages.groups.create') }}</a>
	            </div>
	            <table id="datable_3" class="table table-hover w-100 display pb-30">
	                <thead>
	                    <tr>
	                    	<th>{{ trans('pages.groups.id') }}</th>
	                        <th>{{ trans('pages.groups.name') }}</th>
	                        <th>*</th>
	                    </tr>
	                </thead>
	                <tbody>
	            		@foreach($groups as $group)
	                	<tr>
	                		<td>{{ $group->id }}</td>
	                        <td>{{ $group->name }}</td>
	                        <td>
	                        	<button @click="getGroup({{ $group->id }})" class="btn btn-success btn-xs">{{ trans('pages.edit') }}</button>
	                        </td>
	                        </td>
	                    </tr>
	                    @endforeach
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>

	<!-- Modal forms-->
	<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalForms" aria-hidden="true">
	    <div class="modal-dialog" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h5 class="modal-title">{{ trans('pages.groups.edit') }}</h5>
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                    <span aria-hidden="true">×</span>
	                </button>
	            </div>
	            <div class="modal-body">
                	<div class="form-group">
                        <label for="dropdownFormName">{{ trans('pages.groups.name') }}</label>
                        <input type="text" class="form-control" id="groupFormName" v-model="group.name">
                    </div>

                    <div class="form-group">
                    	@foreach($premission as $key=>$value)
                    		<label>
                    			<input @click="addPremission" class="premission" type="checkbox" name="premission[]" value="{{ $key }}" v-if="premission != null && premission['{{ $key }}'] == true" checked>
                    			<input @click="addPremission" class="premission" type="checkbox" name="premission[]" value="{{ $key }}" v-else >
                    			{{ $value }}
                    		</label>
                    	@endforeach
                    </div>

                    <button @click="editGroup()" type="button" class="btn btn-primary">{{ trans('pages.save') }}</button>
	            </div>
	        </div>
	    </div>
	</div>
</div>

@endsection

@section('footer')
<script type="text/javascript">
	const Groups = new Vue({
		el: "#app",
		data: function(){
			return {
				premission: null,
				url: {
					getGroup: "{{ route('api.group.show') }}",
					editGroup: "{{ route('api.group.edit') }}" 
				},
				group: {
					name: "",
					premission: []
				}
			};
		},
		methods: {
			getGroup(id){
				this.group.premission = [];
				axios
		        .post(this.url.getGroup,{
		            id: id
		        })
		        .then(function(result){
		        	console.log(result);
		         	Groups.group = result.data;
		         	Groups.premission = JSON.parse(result.data.premission);
		         	$('#modal').modal('show');
		        });
			},
			addPremission(){
				var premission = [];
				$('input[type=checkbox]:checked').each(function() {
				   premission.push(this.value); 
				});
				this.group.premission = premission;	
			},
			editGroup(){
				axios
		        .post(this.url.editGroup,{
		            id: this.group.id,
		            name: this.group.name,
		            premission: this.group.premission
		        })
		        .then(function(result){
		        	console.log(result);
		        	if(result.data != 'error'){
		         		window.location = result.data;
		         	} 
		        });
			}
		}
	}); 
</script>
@endsection