@extends('dashboard.layout.base')

@section('content')

      <div class="slim-mainpanel">
        @verbatim
        <div class="container" id="app">
          <div class="slim-pageheader">
            <ol class="breadcrumb slim-breadcrumb">
              <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Employés</a></li>
              <li class="breadcrumb-item active" aria-current="page">Créer nouveau Employé</li>
            </ol>
            <h6 class="slim-pagetitle">Créer nouveau Employé</h6>
          </div><!-- slim-pageheader -->
        <form action="#" method="post" enctype="multipart/form-data" autocomplete="off">
          <div class="section-wrapper">
              <div class="row">
                <div class="col-md-8">
                  <label class="section-title"></label>
                  <p class="mg-b-20 mg-sm-b-40"></p>
                </div>

              </div>

              <div class="form-layout">
                  <div class="row mg-b-25">

                    <div class="col-lg-4">
                        <div class="form-group">
                          <label class="form-control-label">N° CIN <span class="tx-danger">*</span></label>
                          <input class="form-control" type="text" v-model="inputs.cin" name="cin" required>
                        </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label class="form-control-label">Nom <span class="tx-danger">*</span></label>
                        <input class="form-control" type="text"  v-model="inputs.first_name" name="first_name" required>
                      </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                          <label class="form-control-label">Prénom <span class="tx-danger">*</span></label>
                          <input class="form-control" type="text" v-model="inputs.last_name" name="last_name" required>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="form-control-label">Permanente/Vacataire/Fonctionaire : <span class="tx-danger">*</span></label>
                            <select class="form-control" placeholder="Choisir" v-model="inputs.role">
                                <option v-for="type in inputs.types" :value="type">{{ type }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="form-control-label">N°PPR : <span class="tx-danger">*</span></label>
                            <input class="form-control" type="text" placeholder="Date de recrutement :" v-model="inputs.ppr" name="ppr" required>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="form-control-label">Date de recrutement : <span class="tx-danger">*</span></label>
                            <input class="form-control" type="text" placeholder="Date de recrutement :" v-model="inputs.d_recrutement" name="d_recrutement" required>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                          <label class="form-control-label">Nombre de jour de congé annuel</label>
                          <input class="form-control" type="text" v-model="inputs.conge" name="conge">
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                          <label class="form-control-label">Téléphone</label>
                          <input class="form-control" type="text" v-model="inputs.phone" name="phone">
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                          <label class="form-control-label">Email</label>
                          <input class="form-control"  autocomplete="new-password" v-model="inputs.email" type="email" name="email">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label class="form-control-label">Mot de passe: <span class="tx-danger">*</span></label>
                            <input id="pass" class="form-control"  autocomplete="new-password" type="password" minlength="8" name="password" v-model="inputs.password" placeholder="Mot de passe: " required>
                            <span toggle="#password" class="fa fa-fw fa-eye field_icon toggle-password"></span>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label class="form-control-label">Confirmer votre mot de passe <span class="tx-danger">*</span></label>
                            <input id="confirm_pass" class="form-control"  autocomplete="new-password" type="password" minlength="8" name="v_new_pass" required  onkeyup="validate_password()">
                            <span id="wrong_pass_alert"></span>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label class="form-control-label" >Générer un mot de passe</label>
                            <a class="btn btn-secondary btn-block text-white" v-on:click="generatePW()">Générer un mot de passe</a>
                        </div>
                    </div>
                  </div>
              </div><!-- form-layout -->

          </div><!-- section-wrapper -->
          <div>
          <template v-if="inputs.role == 'Permanente' || inputs.role == 'Vacataire'">
                <div class="section-wrapper mt-3">

                    <div class="row">
                        <div class="col-md-8">
                            <label class="section-title">Diplôme</label>
                        </div>
                        <div class="col-md-4">
                        </div>
                    </div>
                    <div class="form-layout">
                        <div class="row mg-b-25">
                            <div class="col-12">
                                <div class="table-responsive">
                                <table class="table table-bordered table-colored table-info">
                                    <thead>
                                        <tr>
                                            <th class="wd-35p">Nom de Diplôme</th>
                                            <th class="wd-35p">année</th>
                                            <th class="wd-35p">établissement</th>
                                            <th class="wd-10p"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(row, index) in inputs.diplomes">
                                            <td>
                                                <div class="form-group mg-b-0-force">
                                                    <input class="form-control" type="text" v-model="row.name" name="name" required>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-group mg-b-0-force">
                                                    <input class="form-control" type="text" maxlength="4" v-model="row.year" name="year" required>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-group mg-b-0-force">
                                                    <input class="form-control" type="text" v-model="row.school" name="school" required>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-outline-danger bd-0" v-on:click="removeDiplomeRow(index)"><i class="fa fa-times mg-r-5"></i></button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" class="text-right">
                                                <button type="button" class="btn btn-outline-primary bd-0" v-on:click="addDiplomeRow()"><i class="fa fa-plus mg-r-5"></i> Ajouter un Diplôme</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="section-wrapper mt-3">

                    <div class="row">
                        <div class="col-md-8">
                            <label class="section-title">Modules</label>
                        </div>
                        <div class="col-md-4">
                        </div>
                    </div>
                    <div class="form-layout">
                        <div class="row mg-b-25">
                            <div class="col-12">
                                <div class="table-responsive">
                                <table class="table table-bordered table-colored table-info">
                                    <thead>
                                        <tr>
                                            <th class="wd-35p">Nom de module</th>
                                            <th class="wd-10p"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(row, index) in inputs.modules">
                                            <td>
                                                <div class="form-group mg-b-0-force">
                                                    <input class="form-control" type="text" v-model="row.name" name="name" required>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-outline-danger bd-0" v-on:click="removeModuleRow(index)"><i class="fa fa-times mg-r-5"></i></button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" class="text-right">
                                                <button type="button" class="btn btn-outline-primary bd-0" v-on:click="addModuleRow()"><i class="fa fa-plus mg-r-5"></i> Ajouter un module</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-layout-footer d-flex justify-content-end">
                        <button id="send" type="button" class="btn btn-outline-primary bd-0" v-on:click="submit()">
                            <i class="fa fa-plus mg-r-5"></i>
                            Enregistrer
                        </button>
                    </div>
                </div>
            </template>
            <template v-if="inputs.role == 'Fonctionaire'">
                <div class="section-wrapper mt-3">
                    <div class="col-lg-6">
                        <div class="form-group">
                          <label class="form-control-label">Fonction<span class="tx-danger">*</span></label>
                          <input class="form-control" type="text" name="job" v-model="inputs.job" required>
                        </div>
                    </div>
                    <div class="form-layout-footer d-flex justify-content-end">
                        <button id="send" type="button" class="btn btn-outline-primary bd-0" v-on:click="submit()">
                            <i class="fa fa-plus mg-r-5"></i>
                            Enregistrer
                        </button>
                    </div>
                </div>
            </template>
        </form>

        </div><!-- container -->
        @endverbatim


      </div><!-- slim-mainpanel -->
      @include('dashboard.component.copyright')
    </div><!-- slim-body -->
@endsection

@push('styles')

    <link href="{{ asset('dashboard/lib/bootstrap-tagsinput/css/bootstrap-tagsinput.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/medium-editor/css/medium-editor.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/medium-editor/css/default.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/select2/css/select2.min.css') }}" rel="stylesheet">

    <style type="text/css">

      .editabl-wrapper textarea {
        display: none;
      }

      .bootstrap-tagsinput {
          border-radius: 0;
      }

    </style>

@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var app = new Vue({
    el: '#app',
    data: {
      values :[],
      inputs    : {
			'first_name' : '',
			'last_name' : '',
			'email' : '',
			'cin' : '',
			'conge' : '',
			'phone' : '',
			'ppr' : '',
			'd_recrutement' : '',
			'phone' : '',
			'password' : '',
			'role' : '',
			'status' : 1,
            'types' :[
                'Permanente',
                'Vacataire',
                'Fonctionaire',
            ],
			'diplomes': [{
                'name'  : null,
                'year'  : null,
                'school'  : null,
            }],
            'modules': [{
                'name'  : null,
            }],
      }
    },
	computed: {

	},
    methods: {
        generatePW(){
            let randomstring = Math.random().toString(36).slice(-8);
            let pass = $("#pass");
            let confirm_pass = $("#confirm_pass");
            pass.val(randomstring);
            confirm_pass.val(randomstring);
            this.inputs.password = randomstring
            pass.attr('type','text')
            confirm_pass.attr('type','text')
        },
		addModuleRow(){
			this.inputs.modules.push({
				'name'   : null,
			});
		},
		removeModuleRow(index){
			this.inputs.modules.splice(index, 1);
		},

        addDiplomeRow(){
			this.inputs.diplomes.push({
				'name'   : null,
				'year'   : null,
				'school'   : null,
			});
		},
		removeDiplomeRow(index){
			this.inputs.diplomes.splice(index, 1);
		},
		submit(){
            axios.post("{{ route('admin.personnel.store') }}",
            {
                first_name:     this.inputs.first_name,
                last_name:      this.inputs.last_name,
                email:          this.inputs.email,
                cin:            this.inputs.cin,
                ppr:            this.inputs.ppr,
                d_recrutement:  this.inputs.d_recrutement,
                conge:          this.inputs.conge,
                phone:          this.inputs.phone,
                password:       this.inputs.password,
                role:           this.inputs.role,
                status:         this.inputs.status,
                modules:        this.inputs.modules,
                diplomes:       this.inputs.diplomes,
                job:            this.inputs.job,
            })
            .then(response => {
                console.log(response)
                if(this.inputs.role == 'Fonctionaire'){
                    window.location.href = "{{ route('admin.personnel.index') }}"
                }
                window.location.href = "{{ route('admin.prof.index') }}"
            })
            .catch(error => {
                console.log("ERRRR:: ",error.response.data)}
            )
		}
    }

})
</script>
<script type="text/javascript">

    $(document).on('click', '.toggle-password', function() {
        $(this).toggleClass("fa-eye fa-eye-slash");
        let input = $("#pass");
        let confirm_pass = $("#confirm_pass");
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password')
        confirm_pass.attr('type') === 'password' ? confirm_pass.attr('type','text') : confirm_pass.attr('type','password')
    });
    function validate_password() {
        let pass = document.getElementById('pass').value;
        let confirm_pass = document.getElementById('confirm_pass').value;
        const button = document.getElementById('send')
        if(pass == "" || confirm_pass == ""){
            button.disabled = true
        }
        if (pass != confirm_pass || pass =="" || pass =="") {
            document.getElementById('wrong_pass_alert').style.color = 'red';
            document.getElementById('wrong_pass_alert').innerHTML
            = '☒ les mots de passe ne sont pas identiques';
            button.disabled = true
        } else {
            document.getElementById('wrong_pass_alert').style.color = 'green';
            document.getElementById('wrong_pass_alert').innerHTML =
                '🗹 Mot de passe correspondant';
            button.disabled = false

        }
    }

    </script>

@endpush