<template>
    <form>
        <div class="row">
            <div class="col-md-2">
                <!--Label: Prefix, Attributes: gender-->
                <div class="form-group">
                    <label for="gender" class=" control-label">Prefix</label>
                    <div class="">
                        <select class="form-control" name="prefix" id="prefix" v-model="prefix"
                                :class="{ 'parsley-validated parsley-error' : errors.prefix }" autocomplete="off">>
                            <option value="Mr.">Mr</option>
                            <option value="Ms.">Ms</option>
                            <option value="Eng.">Eng</option>
                            <option value="Dr.">Dr</option>
                            <option value="Prof.">Prof</option>
                        </select>
                        <div class="parsley-error-list" v-if="errors.prefix">
                            <strong>{{ errors.prefix.toString() }}</strong>
                        </div>
                    </div>
                </div>
            </div>
            <!--Label: Gender, Attributes: gender-->
            <div class="form-group col-md-3">
                <label for="gender" class=" col-form-label">Gender</label>
                <div class="">
                    <select class="form-control" name="gender" id="gender" v-model="gender"
                            :class="{ 'parsley-validated parsley-error' : errors.gender }" autocomplete="off">>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                        <option value="Other">Other</option>
                    </select>
                    <div class="parsley-error-list" v-if="errors.gender">
                        <strong>{{ errors.gender.toString() }}</strong>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md-4">
                <!--Label: First Name, Attributes: firstname-->
                <div class="form-group">
                    <label for="firstname" class=" control-label">First Name</label>
                    <div class="">
                        <input type="text" class="form-control" id="firstname"
                               v-model="firstname"
                               name="firstname"
                               :class="{ 'parsley-validated parsley-error' : errors.firstname }" autocomplete="off">
                        <div class="parsley-error-list" v-if="errors.firstname">
                            <strong>{{ errors.firstname.toString() }}</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-md-4">
                <label for="middlename" class="control-label">Middle Name</label>
                <div class="">
                    <input type="text" class="form-control" id="middlename"
                           v-model="middlename"
                           name="middlename"
                           :class="{ 'parsley-validated parsley-error' : errors.middlename }" autocomplete="off">
                    <div class="parsley-error-list" v-if="errors.middlename">
                        <strong>{{ errors.middlename.toString() }}</strong>
                    </div>
                </div>
            </div>
            <!--Label: Last Name, Attributes: lastname-->
            <div class="form-group col-md-4">
                <label for="lastname" class=" control-label">Last Name</label>
                <div class="">
                    <input type="text" class="form-control" id="lastname"
                           v-model="lastname"
                           name="lastname"
                           :class="{ 'parsley-validated parsley-error' : errors.lastname }" autocomplete="off">
                    <div class="parsley-error-list" v-if="errors.lastname">
                        <strong>{{ errors.lastname.toString() }}</strong>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!--Label: Personal Number, Attributes: phonenumber-->
            <div class="form-group col-md-4">
                <label for="phonenumber" class=" control-label">Personal Phone Number</label>
                <div class="">
                    <input type="text" class="form-control" id="phonenumber"
                           v-model="phonenumber"
                           name="phonenumber"
                           :class="{ 'parsley-validated parsley-error' : errors.phonenumber }" autocomplete="off">
                    <div class="parsley-error-list" v-if="errors.phonenumber">
                        <strong>{{ errors.phonenumber.toString() }}</strong>
                    </div>
                </div>
            </div>
            <!--Label: KRA PIN, Attributes: krapin-->
            <div class="form-group col-md-4">
                <label for="krapin" class=" control-label">KRA PIN</label>
                <div class="">
                    <input type="text" class="form-control" id="krapin"
                           v-model="krapin"
                           name="krapin"
                           :class="{ 'parsley-validated parsley-error' : errors.krapin }" autocomplete="off">
                    <div class="parsley-error-list" v-if="errors.krapin">
                        <strong>{{ errors.krapin.toString() }}</strong>
                    </div>
                </div>
            </div>
            <!--Label: NHIF Number, Attributes: nhif-->
            <div class="form-group col-md-4">
                <label for="nhif" class="control-label">NHIF Number</label>
                <div class="">
                    <input type="text" class="form-control" id="nhif"
                           v-model="nhif"
                           name="nhif"
                           :class="{ 'parsley-validated parsley-error' : errors.nhif }" autocomplete="off">
                    <div class="parsley-error-list" v-if="errors.nhif">
                        <strong>{{ errors.nhif.toString() }}</strong>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">

            <!--Label: NSSF Number, Attributes: nssf-->
            <div class="form-group col-md-4">
                <label for="nssf" class=" control-label">NSSF Number</label>
                <div class="">
                    <input type="text" class="form-control" id="nssf"
                           v-model="nssf"
                           name="nssf"
                           :class="{ 'parsley-validated parsley-error' : errors.nssf }" autocomplete="off">
                    <div class="parsley-error-list" v-if="errors.nssf">
                        <strong>{{ errors.nssf.toString() }}</strong>
                    </div>
                </div>
            </div>
            <!--Label: Date of Joining, Attributes: employmentdate-->
            <div class="form-group col-md-4">
                <label for="employmentdate" class="control-label">Date of Joining</label>
                <div class="">
                    <input type="date" class="form-control" id="employmentdate"
                           v-model="employmentdate"
                           name="employmentdate"
                           :class="{ 'parsley-validated parsley-error' : errors.employmentdate }" autocomplete="off">
                    <div class="parsley-error-list" v-if="errors.employmentdate">
                        <strong>{{ errors.employmentdate.toString() }}</strong>
                    </div>
                </div>
            </div>
            <!--Label: Years of Experience, Attributes: yearsofexperience-->
            <div class="form-group col-md-4">
                <label for="yearsofexperience" class="col-form-label">Years of Experience</label>
                <div class="">
                    <input type="text" class="form-control" id="yearsofexperience"
                           v-model="yearsofexperience"
                           name="yearsofexperience"
                           :class="{ 'parsley-validated parsley-error' : errors.yearsofexperience }" autocomplete="off">
                    <div class="parsley-error-list" v-if="errors.yearsofexperience">
                        <strong>{{ errors.yearsofexperience.toString() }}</strong>
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary" v-on:click.prevent="sendForm">Save changes
            <i :class="{'fa fa-spin fa-spinner':saving}"></i></button>
    </form>
</template>

<script>
    export default {
        name: "createEmployee",
        data() {
            return {
                errors: '',
                prefix: '',
                gender: '',
                firstname: '',
                middlename: '',
                lastname: '',
                phonenumber: '',
                krapin: '',
                nhif: '',
                nssf: '',
                employmentdate: '',
                yearsofexperience: '',
                saving: false
            }
        },
        methods: {
            sendForm() {
                this.saving = true;
                axios.post('/employees', this.$data).then(resp => {
                    this.saving = false;
                }).catch(err => {
                    this.saving = false;
                    this.errors = err.response.data.errors;
                })

            }
        },
    }
</script>

<style scoped>

</style>