@extends('layouts.template')

@section('top')
<style type="text/css">
	.tablesaw-advance{
		display: none !important;
	}
	#modalUserForms{
		display: block;
		padding-right: 15px;
	    overflow-x: hidden;
    	overflow-y: auto;
	}
	#modalUserForms:before{
		content: "";
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}
</style>
@endsection

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

	    <div class="card-body">
	        <div class="button-list">
	        	<a href="{{ route('users.index') }}" class="btn btn-primary btn-xs m-t-0 m-r-5 @if(is_null($active)) active @endif">{{ trans('pages.users.all') }}</a>
	    		@foreach($groups as $group)
	                <a href="{{ route('users.group.index',$group->id) }}" class="btn btn-primary btn-xs m-t-0 m-r-5 @if(!is_null($active) and $active==$group->id) active @endif">{{ $group->name }}</a>
	            @endforeach
	        </div>
	        <div class="table-wrap m-t-20">
	            <div class="button-list m-b-20">
	            	<a href="javascript:void(0)" class="btn btn-success btn-xs m-t-0 m-r-5" @click="create()">{{ trans('pages.users.create') }}</a>
	            </div>
	            <table id="datable_3" class="table table-hover w-100 display pb-30">
	                <thead>
	                    <tr>
	                    	<th>№</th>
	                        <th>{{ trans('pages.users.fio') }}</th>
	                        <th>{{ trans('pages.users.email') }}</th>
	                        <th>{{ trans('pages.users.group') }}</th>
	                        <th>Выбор заказчика</th>
	                        <th>*</th>
	                        <th>*</th>
	                    </tr>
	                </thead>
	                <tbody>
	            		@foreach($users as $user)
	                	<tr>
	                		<td>{{ $user->id }}</td>
	                        <td>{{ $user->last_name }} {{ $user->name }}</td>
	                        <td>{{ $user->email }}</td>
	                        <td>{{ $user->getGroupName() }}</td>
	                        <td class="text-center strong">{{ $user->is_customer_select ? '+' : '' }}</td>
	                        <td>
	                        	<button @click="show({{$user->id}})" class="btn btn-success btn-xs">{{ trans('pages.users.edit') }}</button>
	                        </td>
	                        <td>
	                        	@if($user->id != auth()->user()->id)
	                        	<button @click="Delete({{$user->id}})" class="btn btn-danger btn-xs">{{ trans('pages.users.delete') }}</button>
	                        	@endif
	                        </td>
	                    </tr>
	                    @endforeach
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>

	<!-- Modal forms-->
	<div v-if="is_open" class="modal show fade" id="modalUserForms">
	    <div class="modal-dialog" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h5 v-if="is_create" class="modal-title">{{ trans('pages.users.create') }}</h5>
	                <h5 v-else class="modal-title">{{ trans('pages.users.edit_user') }}</h5>
	                <button type="button" class="close"@click="closeShow()">
	                    <span aria-hidden="true">×</span>
	                </button>
	            </div>
	            <div class="modal-body">
	                <form>
	                	<div class="form-group">
	                        <label for="dropdownFormName">{{ trans('pages.users.name') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormName" v-model="forms.name">
	                    </div>
	                    <div class="form-group">
	                        <label for="dropdownFormLastName">{{ trans('pages.users.last_name') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormLastName" v-model="forms.last_name">
	                    </div>
	                    <div class="form-group">
	                        <label for="dropdownFormEmail">{{ trans('pages.users.email') }}</label>
	                        <input type="email" class="form-control" id="dropdownFormEmail" v-model="forms.email">
	                    </div>
	                    <div class="form-group">
	                        <label for="dropdownFormPhone">{{ trans('pages.users.phone') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormPhone" v-model="forms.phone">
	                    </div>
	                    <div class="form-group">
	                    	<label for="dropdownFormGroup">{{ trans('pages.users.group') }}</label>
	                    	<select class="form-control" id="dropdownFormGroup" v-model="forms.group_id">
	                    		<option v-for="group in groups" v-bind:value="group.id">@{{ group.name }}</option>
	                    	</select>
	                	</div>
                        <div class="form-group">
                            <input type="checkbox" id="is_customer_select" v-model="forms.is_customer_select">
                            <label for="is_customer_select"> выбор заказчика транспорта</label>
                        </div>
	                    <div class="form-group">
	                        <label for="dropdownFormPassword">{{ trans('pages.users.password') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormPassword" v-model="forms.password">
	                    </div>
	                    <div v-if="hasErrorsForms" class="form-group">
	                    	<p class="text-red">@{{ errorText }}</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: {
					getGtoups: "{{ route('api.group.index') }}",
					getUser: "{{ route('api.users.show') }}",
					createUser: "{{ route('api.users.create') }}",
					editUser: "{{ route('api.users.edit') }}",
					deleteUser: "{{ route('api.users.delete') }}"
				},
				is_load: false,
				is_create: true,
				groups: [],
				hasErrorsForms: false,
				hasErrorsUser: false,
				errorText: "",
				forms: {
					name: "",
					group_id: "",
					last_name: "",
					email: "",
					phone: "",
					password: "",
                    is_customer_select: false,
				},
				is_open: false
			}
		},
		methods: {
			getGroups(){
				axios
		         .post(this.url.getGtoups,{

		         })
		         .then(function(result){
		         	Modal.groups = result.data;
		         });
			},
			validation(){
				no_error = false;
				this.errorText = "Не заполненые поля: ";
				if(this.forms.name == ""){
					this.errorText = this.errorText + "Имя,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				if(this.forms.group_id == ""){
					this.errorText = this.errorText + "Группа,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				if(this.forms.last_name == "" || this.forms.last_name == null){
					this.errorText = this.errorText + "Фамилия,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				matchEmail = this.forms.email.match('^[-._a-z0-9]+@(?:[a-z0-9][-a-z0-9]+\.)+[a-z]{2,6}$');
				if(this.forms.email == "" || matchEmail == null){
					this.errorText = this.errorText + "Е-мейл,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				if(this.forms.phone == null){
					this.forms.phone = "";
				}
				matchPhone = this.forms.phone.match('[0-9]');
				if(this.forms.phone == "" || matchPhone == null){
					this.errorText = this.errorText + "Номер телефона,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				if(this.forms.password == "" && this.is_create == true){
					this.errorText = this.errorText + "Пароль,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				if(no_error == false){
					this.hasErrorsForms = false;
				}
			},
			sendForm(){
				this.validation();
				if(this.hasErrorsForms){
					return;
				}
				this.hasErrorsForms = false;
				if(this.is_create){
					url = this.url.createUser;
				}
				else{
					url = this.url.editUser;
				}
				axios
		         .post(url,{
	            	data: this.forms
		         })
		         .then(function(result){
		         	if(result.data == 'register'){
		         		Modal.hasErrorsForms = true;
		         		this.errorText = this.errorText + "Пользователь уже существует";
	         			return;
	         		}
		         	if(result.data != 'error'){
		         		window.location = result.data;
		         	}
		         });
			},
			create(){
				this.hasErrorsForms = false;
				this.is_create = true;
				for (var key in this.forms){
					this.forms[key] = "";
				}
				$('#modalUserForms').modal('show');
				this.is_open = true;
			},
			show(id){
				var app = this;
				this.hasErrorsForms = false;
				this.is_create = false;
				axios
		         .post(this.url.getUser,{
	            	id: id
		         })
		         .then(function(result){
		         	for (var key in result.data){
		         		Modal.forms[key] = result.data[key];
		         	}
					Modal.forms.password = "";

					app.is_open = true;
		         	// $('#modalUserForms').modal('show');
		         	// document.querySelector('#modalUserForms').classList.add('show');
		         	// document.querySelector('#modalUserForms').style.opacity = 1;
		         });
			},
			closeShow(){
				this.is_open = false;
			},
			Delete(id){
				axios
		         .post(this.url.deleteUser,{
	            	id: id
		         })
		         .then(function(result){
		         	console.log(result);
		         	if(result.data != 'error'){
		         		window.location = result.data;
		         	}
		         });
			}
		},
		mounted: function(){
			this.getGroups();
		}
	})
</script>
@endsection