ionut1

<template>
    <div id="addDetailsPage">
        <!-- Header !-->
        <section class="hero is-primary">
            <div class="hero-body">
                <div class="container">
                    <h1 class="title has-text-centered">
                        Add record details
                    </h1>
                </div>
            </div>
        </section>

        <!-- Add record form !-->
        <div id="add-details" class="columns has-text-centered">
            <div class="column is-6-desktop is-offset-3-desktop is-10-tablet is-offset-1-tablet">

                <div class="record-attribute">
                    <div class="record-attribute__heading">
                        <div class="subtitle is-4"> Invoice Code </div>
                    </div>

                    <div id="project-code-field" class="record-attribute__body box">
                        <div class="subtitle is-4">
                            <div> {{ invoice_code }} </div>

                            <div>
                                <a @click="changeCode"> Change </a>
                            </div>
                        </div>

                        <div v-if="errors.invoice_code" class="tag is-danger">
                            {{ errors.invoice_code[0] }}
                        </div>

                        <div v-if="errors.invoice_code">
                            <a @click="updateCode"> Update code </a>
                        </div>
                    </div>
                </div>

                <form @submit.prevent="submit()">



                    <div class="record-attribute">
                        <div class="record-attribute__heading">
                            <div class="subtitle is-4"> Vehicle Registration </div>
                        </div>

                        <div class="record-attribute__body box">

                            <autocomplete-vue
                                        v-model="vehicle_registration"
                                        class="driver-input-box"
                                        inputClass="input is-normal is-fullwidth"
                                        placeholder="Vehicle Registration"
                                        :list="vehicle_registrations"
                                        :threshold="-1"
                            ></autocomplete-vue>
                        </div>
                    </div>

                    <div class="record-attribute" id="vehicle_type">
                        <div class="record-attribute__heading">
                            <div class="subtitle is-4"> Vehicle Type </div>
                        </div>

                        <div class="record-attribute__body box">
                            <div class="select-box">
                                <select class="select-option" id="vehicle_type_select" @change="vehicleTypeSelected($event)">
                                    <option class="option" v-for="item in vehicle_types" :value="item">{{item}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="record-attribute__body box hideit" id="other_vehicle_box">
                            <div v-if="staff"
                                 class="control is-expanded">
                                <input  v-model="vehicle_type"
                                            type="text" id="other_vehicle_field" placeholder="Vehicle Type" class="input is-normal is-fullwidth">
                            </div>
                        </div>

                    </div>


                    <div class="record-attribute" id="driversFields">
                        <div class="record-attribute__heading">
                            <div class="subtitle is-4"> Drivers </div>
                        </div>

                        <div class="record-attribute__body box" id="driver 1">
                            <div v-if="staff"
                                 class="control is-expanded">
                                <autocomplete-vue
                                        v-model="drivers[1]"
                                        @input="driverFieldInput($event,1)"
                                        id="driver-field 1"
                                        class="driver-input-box"
                                        inputClass="input is-normal is-fullwidth"
                                        placeholder="Driver 1"
                                        :list="staffForInvoiceCode"
                                        :threshold="-1"
                                        :from="'employee'"
                                ></autocomplete-vue>
                            </div>

                            <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
                                <div class="tag is-info">
                                    You entered a staff member name that is not in the current list.
                                </div>
                                <div class="tag is-info">
                                    Continue and when new staff members are loaded this will be validated.
                                </div>
                            </div>

                            <div v-if="errorDrivers[1]" class="tag is-danger">
                                Person already selected
                            </div>

                            <div v-if="errors_staff_name[1]" class="tag is-danger">
                                You have to select a staff person or enter a name
                            </div>
                        </div>



                        <div class="record-attribute__body box hideit" id="driver 2">
                            <div v-if="staff"
                                 class="control is-expanded">
                                <autocomplete-vue
                                        v-model="drivers[2]"
                                        @input="driverFieldInput($event,2)"
                                        id="driver-field 2"
                                        class="driver-input-box"
                                        inputClass="input is-normal is-fullwidth"
                                        placeholder="Driver 2"
                                        :list="staffForInvoiceCode"
                                        :threshold="-1"
                                        :from="'employee'"
                                ></autocomplete-vue>
                            </div>

                            <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
                                <div class="tag is-info">
                                    You entered a staff member name that is not in the current list.
                                </div>
                                <div class="tag is-info">
                                    Continue and when new staff members are loaded this will be validated.
                                </div>
                            </div>

                            <div v-if="errorDrivers[2]" class="tag is-danger">
                                Person already selected
                            </div>

                            <div v-if="errors_staff_name[2]" class="tag is-danger">
                                You have to select a staff person or enter a name
                            </div>
                        </div>



                        <div class="record-attribute__body box hideit" id="driver 3">
                            <div v-if="staff"
                                 class="control is-expanded">
                                <autocomplete-vue
                                        v-model="drivers[3]"
                                        @input="driverFieldInput($event,3)"
                                        id="driver-field 3"
                                        class="driver-input-box"
                                        inputClass="input is-normal is-fullwidth"
                                        placeholder="Driver 3"
                                        :list="staffForInvoiceCode"
                                        :threshold="-1"
                                        :from="'employee'"
                                ></autocomplete-vue>
                            </div>

                            <div v-if="errorDrivers[3]" class="tag is-danger">
                                Person already selected
                            </div>

                            <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
                                <div class="tag is-info">
                                    You entered a staff member name that is not in the current list.
                                </div>
                                <div class="tag is-info">
                                    Continue and when new staff members are loaded this will be validated.
                                </div>
                            </div>

                            <div v-if="errors_staff_name[3]" class="tag is-danger">
                                You have to select a staff person or enter a name
                            </div>
                        </div>



                        <div class="record-attribute__body box hideit" id="driver 4">
                            <div v-if="staff"
                                 class="control is-expanded">
                                <autocomplete-vue
                                        v-model="drivers[4]"
                                        @input="driverFieldInput($event,4)"
                                        id="driver-field 4"
                                        class="driver-input-box"
                                        inputClass="input is-normal is-fullwidth"
                                        placeholder="Driver 4"
                                        :list="staffForInvoiceCode"
                                        :threshold="-1"
                                        :from="'employee'"
                                ></autocomplete-vue>
                            </div>

                            <div v-if="errorDrivers[4]" class="tag is-danger">
                                Person already selected
                            </div>

                            <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
                                <div class="tag is-info">
                                    You entered a staff member name that is not in the current list.
                                </div>
                                <div class="tag is-info">
                                    Continue and when new staff members are loaded this will be validated.
                                </div>
                            </div>

                            <div v-if="errors_staff_name[4]" class="tag is-danger">
                                You have to select a staff person or enter a name
                            </div>
                        </div>



                        <div class="record-attribute__body box hideit" id="driver 5">
                            <div v-if="staff"
                                 class="control is-expanded">
                                <autocomplete-vue
                                        v-model="drivers[5]"
                                        @input="driverFieldInput($event,5)"
                                        id="driver-field 5"
                                        class="driver-input-box"
                                        inputClass="input is-normal is-fullwidth"
                                        placeholder="Driver 5"
                                        :list="staffForInvoiceCode"
                                        :threshold="-1"
                                        :from="'employee'"
                                ></autocomplete-vue>
                            </div>

                            <div v-if="errorDrivers[5]" class="tag is-danger">
                                Person already selected
                            </div>

                            <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
                                <div class="tag is-info">
                                    You entered a staff member name that is not in the current list.
                                </div>
                                <div class="tag is-info">
                                    Continue and when new staff members are loaded this will be validated.
                                </div>
                            </div>

                            <div v-if="errors_staff_name[5]" class="tag is-danger">
                                You have to select a staff person or enter a name
                            </div>
                        </div>



                        <div class="record-attribute__body box hideit" id="driver 6">
                            <div v-if="staff"
                                 class="control is-expanded">
                                <autocomplete-vue
                                        v-model="drivers[6]"
                                        @input="driverFieldInput($event,6)"
                                        id="driver-field 6"
                                        class="driver-input-box"
                                        inputClass="input is-normal is-fullwidth"
                                        placeholder="Driver 6"
                                        :list="staffForInvoiceCode"
                                        :threshold="-1"
                                        :from="'employee'"
                                ></autocomplete-vue>
                            </div>

                            <div v-if="errorDrivers[6]" class="tag is-danger">
                                Person already selected
                            </div>

                            <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
                                <div class="tag is-info">
                                    You entered a staff member name that is not in the current list.
                                </div>
                                <div class="tag is-info">
                                    Continue and when new staff members are loaded this will be validated.
                                </div>
                            </div>

                            <div v-if="errors_staff_name[6]" class="tag is-danger">
                                You have to select a staff person or enter a name
                            </div>
                        </div>



                        <div class="record-attribute__body box hideit" id="driver 7">
                            <div v-if="staff"
                                 class="control is-expanded">
                                <autocomplete-vue
                                        v-model="drivers[7]"
                                        @input="driverFieldInput($event,7)"
                                        id="driver-field 7"
                                        class="driver-input-box"
                                        inputClass="input is-normal is-fullwidth"
                                        placeholder="Driver 7"
                                        :list="staffForInvoiceCode"
                                        :threshold="-1"
                                        :from="'employee'"
                                ></autocomplete-vue>
                            </div>

                            <div v-if="errorDrivers[7]" class="tag is-danger">
                                Person already selected
                            </div>

                            <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
                                <div class="tag is-info">
                                    You entered a staff member name that is not in the current list.
                                </div>
                                <div class="tag is-info">
                                    Continue and when new staff members are loaded this will be validated.
                                </div>
                            </div>

                            <div v-if="errors_staff_name[7]" class="tag is-danger">
                                You have to select a staff person or enter a name
                            </div>
                        </div>

                    </div>

                    <div class="record-attribute" id="mileagestart">
                        <div class="record-attribute__heading">
                            <div class="subtitle is-4"> Mileage start </div>
                        </div>

                        <div class="record-attribute__body box">
                            <input v-model="mileage_start"
                                   type="number"
                                   placeholder="Mileage start"
                                   class="input is-normal"
                                   required>
                        </div>
                    </div>

                    <div class="record-attribute" id="mileageend">
                        <div class="record-attribute__heading">
                            <div class="subtitle is-4"> Mileage end </div>
                        </div>

                        <div class="record-attribute__body box">
                            <input v-model="mileage_end"
                                   type="number"
                                   placeholder="Mileage end"
                                   class="input is-normal"
                                   v-on:focus="handleFocusMileageEnd"
                                   >

                            <div v-if="errors.mileage" class="tag is-danger">
                                Ending mileage must be higher than starting value
                            </div>
                        </div>
                    </div>

                    <div class="record-attribute">
                        <div class="record-attribute__heading">
                            <div class="subtitle is-4"> Date </div>
                        </div>

                        <div class="record-attribute__body box">
                            <date-picker :date="date" :option="option" :limit="limit"></date-picker>

                            <div v-if="errors.week_ending" class="tag is-danger"> You have to select a date from above </div>
                        </div>
                    </div>

                    <div class="record-attribute">
                        <div class="record-attribute__heading">
                            <div class="subtitle is-4"> Comments </div>
                        </div>

                        <div class="record-attribute__body box">
                            <textarea v-model="comments"
                                      ref="comments"
                                      placeholder="(Optional) Enter description"
                                      class="textarea">
                            </textarea>
                        </div>
                    </div>

                    <div class="field-body" id="submit">
                        <button type="submit" class="button is-primary is-outlined">
                            <span class="icon">
                                <i class="fa fa-check" aria-hidden="true"></i>
                            </span>

                            <span>
                                Add record
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Invalid record modal !-->
        <div v-if="invalidRecordModalIsVisible" class="modal is-active">
            <div class="modal-background"></div>

            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title">Invalid record</p>

                    <button @click="invalidRecordModalIsVisible = false" class="delete"></button>
                </header>

                <section class="modal-card-body">
                    <div>
                        The project code selected for this record is invalid.
                    </div>

                    <div>
                        You may <b>change</b> it or store the record on this device for now and review it later.
                    </div>
                </section>

                <footer class="modal-card-foot">
                    <a @click="invalidRecordModalIsVisible = false" class="button">Cancel</a>
                    <a @click.prevent="submit()" class="button"> Store </a>
                    <a @click="updateCode" class="button is-success"> Change </a>
                </footer>
            </div>
        </div>

        <!-- Sign in modal !-->
        <div v-if="signInModalIsVisible" class="modal is-active">
            <div class="modal-background"></div>

            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title"> Login </p>

                    <button @click="signInModalIsVisible = false" class="delete"></button>
                </header>

                <section class="modal-card-body">
                    <div class="has-text-centered">
                        <h4 class="subtitle is-4"> You are back online! </h4>

                        <div>
                            You can now sign in to store records, or you can continue creating records with the
                            username you set (<strong>{{ storedUsername }}</strong>) and save them in the device.
                        </div>
                    </div>
                </section>

                <footer class="modal-card-foot">
                    <a @click="signInModalIsVisible = false" class="button">Cancel</a>

                    <a @click.prevent="useUsername()" class="button is-primary is-outlined"> Use username </a>
                    <a @click="login" class="button is-primary"> Sign in </a>
                </footer>
            </div>
        </div>

        <!-- Username modal !-->
        <div v-if="usernameModalIsVisible" class="modal is-active">
            <div class="modal-background"></div>

            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title">Auth</p>

                    <button @click="usernameModalIsVisible = false" class="delete"></button>
                </header>

                <section class="modal-card-body">
                    <h5 class="subtitle is-5">
                        In order to store records on this device a username is required.
                    </h5>

                    <article class="message is-danger">
                        <div class="message-header">
                            <p><strong>Attention</strong>!</p>
                        </div>
                        <div class="message-body">
                            Make sure that your username is <strong>correct</strong> because if it is not then all
                            the records that you inserted with this username will be <strong>deleted</strong>.
                        </div>
                    </article>

                    <article class="media content" v-if="storedUsername">
                        <p class="media-content"> Current username found in the device store is <strong>{{ storedUsername }}</strong></p>

                        <div class="media-right">
                            <a @click="username = storedUsername" class="button is-primary is-outlined"> Set </a>
                        </div>
                    </article>

                    <article class="media">
                        <input v-model="username"
                               class="input media-content"
                               placeholder="Enter new username">
                    </article>
                </section>

                <footer class="modal-card-foot">
                    <a @click="usernameModalIsVisible = false" class="button">Cancel</a>
                    <a @click="setUsername"
                       :disabled=" ! username"
                       class="button is-primary is-outlined"> Set username </a>
                </footer>
            </div>
        </div>
    </div>
</template>

<script>


    import autosize from 'autosize'
    import moment from 'moment';
    import Datepicker from '../components/vendor/vue-datepicker'

    import {isAuth} from "../utils/Auth";
    import Cache from "../utils/Cache";
    import {arrayDiff, arrayToObject, copyArray, exists} from "../utils/helpers";
    import {getDatePickerOptions,getCurrentDate,getTommorowsFullDate} from "../utils/Config";

    import username from "../mixins/Username"
    import connection from "../mixins/Connection";
    import {mapState, mapMutations} from "vuex";
    import LocalStorage from "../services/LocalStorage";
    import Redirect from "../utils/Redirect";
    import Date from "../utils/Date";

    const driverPrefix = "driver ";


    function deleteSpaces(text){
                let toReturn = text;
                while(toReturn.includes(' ')){
                    toReturn = toReturn.replace(' ','');
                }
                return toReturn;
            }


    function showNextDriverFieldFor(field,nextIndex=null){
        let finalID = null;
        if(nextIndex!=null){
            finalID = driverPrefix+String(nextIndex+1);
        }
        else{
            let nextIndexId = String(parseFloat(focusedField.placeholder.substr(focusedField.placeholder.length - 1))+1);
            let prefix = focusedField.placeholder.split(" ")[0].toLowerCase();
            finalID = prefix+" "+nextIndexId;
        }
        showElement(document.getElementById(finalID));
    }


    function hideOtherVehicleType(){
        let otherVehicleBox=document.getElementById("other_vehicle_box");
        if(otherVehicleBox!=null){
            if(!otherVehicleBox.classList.contains("hideit")){
                otherVehicleBox.classList.add("hideit");
            }
        }
    }

    function showOtherVehicleType(){
        let otherVehicleBox=document.getElementById("other_vehicle_box");
        if(otherVehicleBox!=null){
            if(otherVehicleBox.classList.contains("hideit")){
                otherVehicleBox.classList.remove("hideit");
            }
        }
    }


    function setOtherVehicleTypeFieldValue(value){
        let otherVehicleTypeFieldValue = document.getElementById("other_vehicle_field");
        otherVehicleTypeFieldValue.value=value;
    }


    export default {
        data() {
            return {
                vehicle_types: ["Hatchback","Sedan","MPV","SUV","Crossover","Coupe","Convertible","Other"],
                vehicle_type_model: null,
                mileage_start: '',
                mileage_end: '',
                vehicle_type: 'Hatchback',
                vehicle_registration: '',
                errorDrivers: [false,false,false,false,false,false,false,false],
                errors_staff_name: [false,false,false,false,false,false,false,false],
                drivers: ['','','','','','','',''],
                week_ending: '',
                comments: '',
                created_at: '',

                errors: {
                    invoice_code: false,
                    week_ending: false,
                    mileage: false,
                },

                // Objects
                staffForInvoiceCode: [],
                vehicle_registrations: [],
                record: {},

                showNotification: true,

                staff_field: '',
                staffNameEnteredMessageShow: false,

                // Datepicker
                date: {
                    time: ''
                },
                option: getDatePickerOptions(),
                limit: [{
                    type: 'weekday',
                    available: [1,2,3,4,5]
                },
                {
                    type: 'fromto',
                    from: '1970-08-01',
                    to: getTommorowsFullDate()
                }
                ],

                signInModalIsVisible: false,
                invalidRecordModalIsVisible: false,

                useUsernameSet: false,
            }
        },

        components: {
            'date-picker': Datepicker,
            'autocomplete-vue': require('../components/vendor/autocomplete-vue.vue')
        },

        mixins: [
            username,
            connection
        ],

        methods: {
            idOfName(name){
                for(let i=0;i<this.staffForInvoiceCode.length;i++){
                    if(this.staffForInvoiceCode[i].name===name){
                        return this.staffForInvoiceCode[i].refid;
                    }
                }
                return '';
            },
            resetFieldAndHideFieldByIndex(index){
                this.drivers[index]='';
                let driverFieldBox = document.getElementById(driverPrefix+String(index));
                hideElement(driverFieldBox);
            },
            hideAndResetFieldsFromIndex(index){
                for(let i=index+1;i<this.drivers.length;i++){
                    this.resetFieldAndHideFieldByIndex(i);
                }
            },
            driverFieldInput(event,index){
                let value = event;
                if(value===""){
                    this.hideAndResetFieldsFromIndex(index);
                    this.errorDrivers[index]=false;
                }
                else{
                    this.checkStaffNames();
                    if(this.drivers.slice(0,index).includes(value)){
                        this.errorDrivers[index]=true;
                    }
                    else{
                        showNextDriverFieldFor(null,index);
                        this.errorDrivers[index]=false;
                    }
                }
            },
            handleFocusMileageEnd(){
                let startMileageBox = document.getElementById("mileagestart");
                let startMileageField = startMileageBox.childNodes[startMileageBox.childNodes.length-1].firstChild;

                let endMileageBox = document.getElementById("mileageend");
                let endMileageField = endMileageBox.childNodes[endMileageBox.childNodes.length-1].firstChild;

                if( (this.mileage_start!=""&&this.mileage_end==="")||((parseFloat(endMileageField.value)<parseFloat(startMileageField.value) || endMileageField.value==="")&&(this.mileage_end<this.mileage_start)) ){
                    this.mileage_end=this.mileage_start;
                }
            },
            toggleDropdown (event) {
                event.currentTarget.classList.toggle('is-active')
            },
            vehicleTypeSelected(event){
                if(event!=null){
                    if(event.target.value!="Other"){
                        this.vehicle_type = event.target.value;
                        hideOtherVehicleType();
                    }
                    else{
                        setOtherVehicleTypeFieldValue("");
                        showOtherVehicleType();
                        this.vehicle_type="";
                    }
                }
            },
            bindListeners() {
                Event.$on('closeModal', () => {
                    this.signInModalIsVisible = false;
                    this.invalidRecordModalIsVisible = false;
                });

                Event.$on('submitModal', () => {
                    if ( ! this.invalidRecordModalIsVisible) {
                        return;
                    }

                    this.updateCode();
                });


                Event.$on('vehicle-registration-select', function (selectedRegistration) {
                    this.vehicle_type = selectedRegistration.vehicle_type;
                    this.mileage_start = selectedRegistration.last_mileage_end;
                });

            },
            translateNamesToIds(){
                for(let i=0;i<this.drivers.length;i++){
                    this.drivers[i] = this.idOfName(this.drivers[i]);
                }
            },
            updateCode() {
                let record = {
                    mileage_start:          this.mileage_start,
                    mileage_end:            this.mileage_end,
                    vehicle_type:           this.vehicle_type,
                    vehicle_registration:   this.vehicle_registration,
                    drivers:                this.drivers,
                    comments:               this.comments,
                    week_ending:            this.date.time,
                    created_at:   moment().format('YYYY-MM-DD HH:mm:ss'),
                };
                this.$store.dispatch('setRecordBeforeChangingProjectCode', record);

                Redirect.toAddRecord(this.$router);
            },

            changeCode() {
                this.clearStartWithData();

                Redirect.toAddRecord(this.$router);
            },

            submit() {
                this.translateNamesToIds();

                if ( ! this.validInputFields()) {
                    return;
                }
                let data = {
                    invoice_code:           this.invoice_code,
                    mileage_start:          this.mileage_start,
                    mileage_end:            this.mileage_end,
                    vehicle_type:           this.vehicle_type,
                    vehicle_registration:   this.vehicle_registration,
                    drivers:                JSON.stringify(this.drivers),
                    comments:               this.comments,
                    week_ending:            this.date.time,
                    created_at:   moment().format('YYYY-MM-DD HH:mm:ss'),
                };

                if (this.projectCodeSetIsNew()) {
                    this.showInvalidModal();

                    return;
                }

                this.invalidRecordModalIsVisible = false;

                if (this.recordReadyToBePosted()) {
                    data.creator_id = this.auth_user_id;

                    this.sendToServer(data);
                    return;
                }

                if (this.showSignInModal()) {
                    this.checkConnection()
                        .then(() => {
                            this.signInModalIsVisible = true;
                        })
                        .catch(() => {
                            this.storeLocally(data);
                        });

                    return;
                }

                this.storeLocally(data);
            },
            isStaffMember(member){
                let found=false;
                this.staffForInvoiceCode.forEach(function(staffMember){
                        if(member===staffMember['name']){
                            found = true;
                            return true;
                        }
                });
                return found;
            },
            checkStaffNames(){
                for(let i=0;i<this.drivers.length;i++){
                    if(this.drivers[i]!=""){
                        this.errors_staff_name[i]=!this.isStaffMember(this.drivers[i]);
                    }
                }
            },
            validInputFields() {
                if ( ! this.date.time) {
                    this.errors.week_ending = true;

                    return false;
                }

                if(this.mileage_end===""||this.mileage_end==="0"||this.mileage_end===0){
                    this.mileage_end=0;
                    this.errors.mileage = false;
                }
                else{
                    if(parseInt(this.mileage_end)<parseInt(this.mileage_start)){
                        this.errors.mileage = true;
                        return false;
                    }
                }
                return true;
            },

            sendToServer(record) {
                axios.post('subsistence-record', record)
                    .then(({data}) => {
                       this.subsistenceRecordSubmitted(data);
                    })
                    .catch((error) => {
                        window.error = error;
                        this.storeLocally(record);

                        if (window.DEBUGGING) {
                            Flash('Error: ' + JSON.stringify(error), 12, 'error');
                        }
                    });
            },

            storeLocally(record) {
                this.setCreator(record);
                this.setErrors(record);
                this.clearInputFields();
                this.emitStoringEvent(record);

                this.startWithLatestRecord(record);
            },

            subsistenceRecordSubmitted(data) {
                if (data === "duplicate") {
                    this.subsistenceRecordSubmitResponseDuplicate();
                } else if (data.id) {
                    this.subsistenceRecordSubmitResponseSuccess(data);
                } else {
                    this.subsistenceRecordSubmitResponseErrors(data);
                }
            },

            subsistenceRecordSubmitResponseDuplicate() {
                Flash("Record is already stored");

                this.clearInputFields();

                this.setFormStartValues('latest_record');
            },

            subsistenceRecordSubmitResponseSuccess(data) {
                this.newRecordPosted(data);
                Flash("Record saved successfully", 8);

                this.clearInputFields();
            },

            subsistenceRecordSubmitResponseErrors(data) {
                if (data.errors) {
                    this.errors = data.errors;
                }

                if (data.projects) {
                    this.$store.dispatch('addProjects', data.projects);

                    Cache.clearProjects(this);
                    Cache.storeProjects(this, data.projects);
                }

                if (data.staff) {
                    this.$store.dispatch('addStaff', data.staff);

                    Cache.clearStaff(this);
                    Cache.storeStaff(this, data.staff);
                }

                if (data.vehicle_registrations) {
                    this.$store.dispatch('addVehicles', data.vehicle_registrations);

                    Cache.clearVehicles(this);
                    Cache.storeVehicles(this, data.vehicle_registrations);
                }
            },

            newRecordPosted(record) {
                this.$store.dispatch('addStoredRecord', record);

                this.startWithLatestRecord(record);
            },

            clearInputFields() {
                this.date.time = '';
                this.staff_field = '';
                this.mileage_start = '';
                this.mileage_end = '';
                this.vehicle_type = '';
                this.vehicle_registration = '';
                this.drivers = [];
                this.comments = '';
                this.staffNameEnteredMessageShow = false;
            },

            setFormStartValues(payload) {
               if (payload === 'default') {
                   this.fillFormWithDefaultValues();

                   return;
               }

               if (payload === 'latest_record') {
                   this.fillFormWithLatestRecordValues();

                   return;
               }
            },

            fillFormWithLatestRecordValues() {
                //this.date.time = this.latestRecord.week_ending;
            },

            fillFormWithDefaultValues() {
                this.date.time = moment().format('DD MMMM YYYY');

                //this.date.time = Date.getClosestPassedFriday();
            },
            capitalize(string){
                if (typeof string !== 'string') return ''
                return string.charAt(0).toUpperCase() + string.slice(1)
            },
            setFristDriverTo(name){
                this.drivers[1]=name;
            },
            getLocalStorageUserName(){
                return localStorage.getItem('casUser');
            },
            getLocalStorageUser(reverse){
                let user_name = this.getLocalStorageUserName();
                for(let i=0;i<this.staffForInvoiceCode.length;i++){
                    if(this.staffForInvoiceCode[i].user_name===user_name){
                        return this.staffForInvoiceCode[i].name;
                    }
                }

            },
            assignStaffForInvoiceCode() {

                if ( ! this.staff) {
                    this.staffForInvoiceCode = this.all_staff;
                } else {
                    this.staffForInvoiceCode = [];
                    let staffNotOnProject = arrayDiff(this.all_staff, this.staff, 'refid');
                    copyArray(this.staffForInvoiceCode, this.staff);
                    copyArray(this.staffForInvoiceCode, staffNotOnProject);
                }

                if(this.drivers[1]===""){
                    this.setFristDriverTo(this.getLocalStorageUser());
                }
            },

            assignVehicles(){
                if ( ! this.vehicles) {
                    this.vehicle_registrations = this.all_vehicles;
                } else {
                    this.vehicles = [];
                    copyArray(this.vehicle_registrations, this.all_vehicles);
                }
            },

            setErrors(record) {
                if ( ! record.hasOwnProperty('errors')) {
                    record.errors = {};
                }

                if ( ! record.creator_id) {
                    record.errors.creator_id = "This record has been created while being a guest. Sign in to validate";
                }

                if (this.invoice_code_type === 'new') {
                    record.errors.invoice_code = [];
                    record.errors.invoice_code[0] = 'The selected value does not exist or is no longer valid.';
                }
            },

            setCreator(record) {
                if (this.auth_user_id) {
                    record.creator_id = this.auth_user_id;
                    record.creator_username = this.auth_username;
                } else if (this.storedUsername) {
                    record.creator_username = this.storedUsername;
                }
            },

            emitStoringEvent(record) {
                if (this.invoice_code_type === 'new' || ! record.invoice_code ) {
                    Event.$emit('addInvalidRecord', record);
                } else {
                    Event.$emit('addValidRecord', record);
                }
            },
            login() {
                this.storeRecordForAfterLogin();

                this.$router.push('/login/from-add-details');
            },

            useUsername() {
                this.useUsernameSet = true;
                this.signInModalIsVisible = false;

                Flash('You will be using your username to create records.');

                let data = {
                    invoice_code:           this.invoice_code,
                    mileage_start:          this.mileage_start,
                    mileage_end:            this.mileage_end,
                    vehicle_type:           this.vehicle_type,
                    vehicle_registration:   this.vehicle_registration,
                    drivers:                this.drivers,
                    comments:               this.comments,
                    week_ending:            this.date.time,
                    created_at:   moment().format('YYYY-MM-DD HH:mm:ss'),
                };

                this.storeLocally(data);
            },

            storeRecordForAfterLogin() {
                let record = {
                    invoice_code:           this.invoice_code,
                    mileage_start:          this.mileage_start,
                    mileage_end:            this.mileage_end,
                    vehicle_type:           this.vehicle_type,
                    vehicle_registration:   this.vehicle_registration,
                    drivers:                this.drivers,
                    comments:               this.comments,
                    week_ending:            this.date.time,
                    created_at:   moment().format('YYYY-MM-DD HH:mm:ss'),
                };

                this.$localForage.setItem('record_before_login', record);
                this.$localForage.setItem('redirect_after_login_to_add_details', true);

                Flash('Your record will be sent to the server after you sign in.', 6);
            },

            loadRecordBeforeLogin() {
                let vm = this;

                this.$localForage
                    .getItem('record_before_login')
                    .then(function(record) {
                        if (record) {
                            vm.invoice_code = record.invoice_code;
                            vm.mileage_start = record.mileage_start;
                            vm.mileage_end = record.mileage_end;
                            vm.vehicle_type = record.vehicle_type;
                            vm.vehicle_registration = record.vehicle_registration;
                            vm.drivers = record.drivers;
                            vm.comments = record.comments;
                            vm.date.time = record.week_ending;

                            vm.$localForage.removeItem('record_before_login');

                            Flash('Your previously created record has been loaded!');

                            vm.submit();
                        }
                    })
                    .catch((error) => {
                        if (window.DEBUGGING) {
                            Flash('Error: ' + JSON.stringify(error), 12, 'error');
                        }
                    });
            },

            setRecordBeforeChangingProjectCode() {
                if (this.record_before_changing_project_code && Object.keys(this.record_before_changing_project_code).length > 0) {
                    let record = JSON.parse(JSON.stringify(this.record_before_changing_project_code));
                    this.mileage_start       = record.mileage_start;
                    this.mileage_end         = record.mileage_end;
                    this.vehicle_type        = record.vehicle_type;
                    this.vehicle_registration= record.vehicle_registration;
                    this.drivers             = record.drivers;
                    this.comments            = record.comments;
                    this.date.time           = record.week_ending;

                    this.$store.dispatch('removeRecordBeforeChangingProjectCode');

                    Flash('Record information loaded from the session before changing the project code.');
                }
            },

            projectCodeSetIsNew() {
                return this.invoice_code_type === 'new' && ! this.invalidRecordModalIsVisible;
            },

            showInvalidModal() {
                this.invalidRecordModalIsVisible = true;
            },

            showSignInModal() {
                return ! this.auth_user_id &&
                    this.invoice_code_type !== 'new' &&
                    ! this.useUsernameSet;
            },

            recordReadyToBePosted() {
                return this.isAuth && this.invoice_code_type !== 'new';
            },

            clearStartWithData() {
                this.setLatestRecord({});
            },

            startWithLatestRecord(record) {
                LocalStorage.setLatestRecord(record);
                this.setLatestRecord(record);

                this.setFormStartValues('latest_record');
            },

            ...mapMutations([
                'setLatestRecord'
            ])
        },

        computed: {
            invoice_code: {
                get() {
                    return this.$store.getters.getInvoiceCode;
                },

                set(invoice_code) {}
            },

            invoice_code_type() {
                return this.$store.getters.getInvoiceCodeType;
            },

            online() {
                return this.$store.getters.getOnlineStatus;
            },

            isAuth() {
                return this.$store.getters.checkAuth;
            },

            staff_ready() {
                return this.all_staff && this.all_staff.length > 0;
            },

            vehicles_ready() {
                return this.vehicles && this.vehicles.length > 0;
            },

            staff() {
                return this.$store.getters.getInvoiceCodeStaff;
            },

            all_staff() {
                return this.$store.getters.getStaff;
            },

            all_vehicles() {
                return this.$store.getters.getVehicles;
            },

            auth_user_id() {
                return this.$store.getters.getUserId;
            },

            auth_username() {
                return this.$store.getters.getAuthUsername;
            },

            record_before_changing_project_code() {
                return this.$store.getters.getRecordBeforeChangingProjectCode;
            },

            triedAuthAlready() {
                return this.$store.getters.getTriedAuthAlready;
            },

            storedUsername() {
                return this.$store.getters.getUsername;
            },

            withUsername() {
                return ! this.online && ! this.isAuth && this.storedUsername;
            },

            ...mapState([
                'latestRecord',
            ])
        },

        watch: {
            staff_ready() {
                if (this.staff_ready) {
                    this.assignStaffForInvoiceCode();
                }
            },
            vehicles_ready() {
                if (this.vehicles_ready) {
                    this.assignVehicles();
                }
            },

            isAuth() {
                if (this.isAuth) {
                    this.loadRecordBeforeLogin();
                }
            },

            all_staff() {
                if (this.staff_ready) {
                    this.assignStaffForInvoiceCode();
                }
            },

            all_vehicles(){
                if (this.vehicles_ready) {
                    this.assignVehicles();
                }
            },

            record_before_changing_project_code() {
                this.setRecordBeforeChangingProjectCode();
            },

            triedAuthAlready(triedAuthAlready) {
                if (triedAuthAlready) {
                    this.submit();
                }
            },

            latestRecord() {
                if (exists(this.latestRecord)) {
                    this.setFormStartValues('latest_record');
                }
            }
        },

        mounted() {

            if (this.staff_ready) {
                this.assignStaffForInvoiceCode();
            }

            if (this.vehicles_ready) {
                this.assignVehicles();
            }

            this.$localForage.getItem('vehicles').then(
                (vehicles) => {
                    this.vehicle_registrations = vehicles;
                }
            );

            this.bindListeners();

            this.setFormStartValues('default');

            if (exists(this.latestRecord)) {
                this.setFormStartValues('latest_record');
            }

            this.loadRecordBeforeLogin();

            this.setRecordBeforeChangingProjectCode();

            autosize(this.$refs.comments);

        },

        destroyed() {
            Event.$off('submitModal');
            Event.$off('closeModal');
        }
    }




function hideElement(element){
    element.classList.add("hideit");
}

function showElement(element){
    element.classList.remove("hideit");
}

function resetValue(element){
    element.value="";
}

</script>