@extends('layouts.template')

@section('top')
<style type="text/css">
	.tablesaw-advance{
		display: none !important;
	}
</style>
@endsection

@section('content')
<div id="app">
	<div class="card">
	    <div class="card-header">{{ trans('pages.handbook.input_index') }}</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.handbook.create') }}</a>
	            </div>
	            <table id="datable_3" class="table table-hover w-100 display pb-30">
	                <thead>
	                    <tr>
	                        <th>{{ trans('pages.handbook.id') }}</th>
	                        <th>{{ trans('pages.handbook.name') }}</th>
	                        <th>*</th>
	                        <th>*</th>
	                    </tr>
	                </thead>
	                <tbody>
	            		@foreach($input_list as $value)
	                	<tr>
	                        <td>{{ $value->id }}</td>
	                        <td>{{ $value->name }}</td>
	                        <td>
	                        	<button @click="show({{$value->id}})" class="btn btn-success btn-xs">{{ trans('pages.edit') }}</button>
	                        </td>
	                        <td>
	                        	<button @click="Delete({{$value->id}})" class="btn btn-danger btn-xs">{{ trans('pages.delete') }}</button>
	                        </td>
	                    </tr>
	                    @endforeach
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>

	<!-- Modal forms-->
	<div class="modal fade" id="modalForms" 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 v-if="is_create" class="modal-title">{{ trans('pages.handbook.create') }}</h5>
	                <h5 v-else class="modal-title">{{ trans('pages.handbook.edit_list') }}</h5>
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                    <span aria-hidden="true">×</span>
	                </button>
	            </div>
	            <div class="modal-body">
	                <form>
	                	<div class="form-group">
	                        <label for="dropdownFormName">{{ trans('pages.handbook.name') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormName" v-model="forms.name">
	                    </div>
	                    <div v-if="hasErrorsForms" class="form-group">
	                    	<p class="text-red">{{ trans('pages.users.forms_error') }}</p>
	                	</div>
	                    <button @click="sendForm()" type="button" class="btn btn-primary">{{ trans('pages.users.save') }}</button>
	                </form>
	            </div>
	        </div>
	    </div>
	</div>
</div>

@endsection

@section('footer')
<script type="text/javascript">
	const Modal = new Vue({
		el: "#app",
		data: function(){
			return {
				url: {
					show: "{{ route('api.handbook.input.show') }}",
					create: "{{ route('api.handbook.input.create') }}",
					edit: "{{ route('api.handbook.input.edit') }}",
					delete: "{{ route('api.handbook.input.delete') }}"
				},
				is_load: false,
				is_create: true,
				hasErrorsForms: false,
				forms: {
					name: "",
				}
			}
		},
		methods: {
			validation(){
				if(this.forms.name == ""){
					this.hasErrorsForms = true;
				}
			},
			sendForm(){
				this.validation();
				if(this.hasErrorsForms){
					return;
				}
				this.hasErrorsForms = false;
				if(this.is_create){
					url = this.url.create;
				}
				else{
					url = this.url.edit;
				}
				axios
		         .post(url,{
	            	data: this.forms
		         })
		         .then(function(result){
		         	console.log(result);
		         	if(result.data != 'error'){
		         		window.location = result.data;
		         	} 
		         });
			},
			create(){
				this.is_create = true;
				for (var key in this.forms){
					this.forms[key] = "";
				}
				$('#modalForms').modal('show');
			},
			show(id){
				this.is_create = false;
				axios
		         .post(this.url.show,{
	            	id: id
		         })
		         .then(function(result){
		         	for (var key in result.data){
		         		Modal.forms[key] = result.data[key];
		         	}
					Modal.forms.password = "";
		         	$('#modalForms').modal('show');
		         });
			},
			Delete(id){
				axios
		         .post(this.url.delete,{
	            	id: id
		         })
		         .then(function(result){
		         	console.log(result);
		         	if(result.data != 'error'){
		         		window.location = result.data;
		         	} 
		         });
			}
		},
		mounted: function(){
			
		}
	})
</script>
@endsection