@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.contractors.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.contractors.create') }}</a>
	            </div>
	            <table id="datable_main" class="table table-hover w-100 display pb-30">
	                <thead>
	                    <tr>
	                    	<th>id</th>
	                    	<th>{{ trans('pages.contractors.login') }}</th>
	                        <th>{{ trans('pages.contractors.fio') }}</th>
	                        <th>{{ trans('pages.contractors.email') }}</th>
	                        <th>{{ trans('pages.contractors.phone') }}</th>
	                        <th>*</th>
	                    </tr>
	                </thead>
	            </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.contractors.create') }}</h5>
	                <h5 v-else class="modal-title">{{ trans('pages.contractors.edit_user') }}</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="dropdownFormFio">{{ trans('pages.contractors.fio') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormFio" v-model="forms.fio_user">
	                    </div>
	                    <div class="form-group">
	                        <label for="dropdownFormLogin">{{ trans('pages.contractors.login') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormLogin" v-model="forms.login_user">
	                    </div>
	                    <div class="form-group">
	                        <label for="dropdownFormEmail">{{ trans('pages.contractors.email') }}</label>
	                        <input type="email" class="form-control" id="dropdownFormEmail" v-model="forms.email_user">
	                    </div>
	                    <div class="form-group">
	                        <label for="dropdownFormPhone">{{ trans('pages.contractors.phone') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormPhone" v-model="forms.phone_user">
	                    </div>
	                    <div class="form-group">
	                        <label for="dropdownFormMaxCars">{{ trans('pages.contractors.max_cars') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormMaxCars" v-model="forms.max_cars">
	                    </div>
	                    <div class="form-group">
	                        <label for="dropdownFormPassword">{{ trans('pages.contractors.password') }}</label>
	                        <input type="text" class="form-control" id="dropdownFormPassword" v-model="forms.pass_user">
	                    </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.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: {
					showContractor: "{{ route('api.contractors.show') }}",
					createContractors: "{{ route('api.contractors.create') }}",
					editContractors: "{{ route('api.contractors.edit') }}",
					getContractors: "{{ route('api.contractors.index') }}"
				},
				contractors: [],
				is_load: false,
				is_create: true,
				groups: [],
				hasErrorsForms: false,
				hasErrorsUser: false,
				errorText: "",
				forms: {
					fio_user: "",
					login_user: "",
					email_user: "",
					phone_user: "",
					max_cars: "",
					pass_user: ""
				}
			}
		},
		methods: {
			getContractors(){
				axios
		         .post(this.url.getContractors,{
	            	
		         })
		         .then(function(result){
		         	Modal.contractors = result.data;
		         	for(i=0;i<Modal.contractors.length;i++){
                        Modal.addRowToTable({
                        	'id_user': Modal.contractors[i].id_user,
                            'login_user': Modal.contractors[i].login_user,
                            'fio_user': Modal.contractors[i].fio_user,
                            'email_user': Modal.contractors[i].email_user,
                            'phone_user': Modal.contractors[i].phone_user,
                            'action': '<button onclick="Modal.show('+Modal.contractors[i].id_user+')" class="btn btn-success btn-xs">Редактировать</button>'
                        });
                    }
		         });
			},
			loadTable(){
				$('#datable_main').DataTable( {
			        dom: 'Bfrtip',
			        responsive: true,
			        autoWidth: false,
			        "bPaginate": false,
			        language: { 
			            search: "",
			            searchPlaceholder: "Быстрый поиск",
			            sLengthMenu: "_MENU_items",
			            info: "",
			        },
			        buttons: [
			            'copy', 'excel', 'print'
			        ],
			        sScrollX: "100%",
			        "aoColumnDefs" : [ {
			            "bSortable" : false,
			            "aTargets" : [ "no-sort" ]
			        } ],

                    columns: [
                    	{data: 'id_user'},
                        {data: 'login_user'},
                        {data: 'fio_user'},
                        {data: 'email_user'},
                        {data: 'phone_user'},
                        {data: 'action'}
                    ],
                    data: []
			    } );
			},
			addRowToTable(elem){
                $('#datable_main').DataTable().row.add(
                    elem
                ).draw();
            },
			validation(){
				no_error = false;
				this.errorText = "Не заполненые поля: ";
				if(this.forms.login_user == ""){
					this.errorText = this.errorText + "Логин,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				if(this.forms.fio_user == ""){
					this.errorText = this.errorText + "ФИО,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				matchEmail = this.forms.email_user.match('^([A-Za-z0-9_-]+\.)*[A-Za-z0-9_-]+@[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+)*\.[A-Za-z]{2,6}$');
				if(this.forms.email_user == "" || matchEmail == null){
					this.errorText = this.errorText + "Е-мейл,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				if(this.forms.max_cars == ""){
					this.errorText = this.errorText + "Максимальное колличество машин,";
					this.hasErrorsForms = true;
					no_error = true;
				}
				if(this.forms.pass_user == "" && 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.createContractors;
				}
				else{
					url = this.url.editContractors;
				}
				axios
		         .post(url,{
	            	data: this.forms
		         })
		         .then(function(result){
		         	console.log(result);
		         	if(result.data == 'register'){
		         		Modal.hasErrorsForms = true;
		         		Modal.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] = "";
				}
				$('#modalForms').modal('show');
			},
			show(id){
				this.hasErrorsForms = false;
				this.is_create = false;
				axios
		         .post(this.url.showContractor,{
	            	id: id
		         })
		         .then(function(result){
		         	console.log(result);
		         	for (var key in result.data){
		         		Modal.forms[key] = result.data[key];
		         	}
					Modal.forms.pass_user = "";
		         	$('#modalForms').modal('show');
		         });
			},
		},
		mounted: function(){
			this.getContractors();
			this.loadTable();
		}
	})
</script>
@endsection