<template>
    <div class="row" @keyup.enter="submitForm">
        <div class="col">
            <error-message-component class="m-b-20" :error="error"></error-message-component>
            <div class="row">
                <div class="col">
                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.email">
                        <label class="text-primary">Email Address</label>
                        <input type="text" class="form-control fs-12" v-model.trim="parameters.email">
                    </validation-wrapper-component>
                    <validation-wrapper-component :validator="$v.parameters.password">
                        <label class="text-primary">Password</label>
                        <input type="password" class="form-control fs-12" v-model="parameters.password">
                    </validation-wrapper-component>
                    <div class="row m-t-15 align-items-center justify-content-center">
                        <div class="col-auto">
                            <div class="checkbox check-complete no-margin">
                                <input type="checkbox" checked="checked" value="1" id="checkbox2">
                                <label for="checkbox2 bold no-margin">Remember Me</label>
                            </div>
                        </div>
                        <div class="col text-right">
                            <p class="muted fs-11 font-arial m-b-0 pointer bold" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: true})">Forgot password?</p>
                        </div>
                    </div>
                    <div class="row m-t-15 align-items-center justify-content-center">
                        <div class="col">
                            <div class="btn btn-block btn-lg b-rad-none no-border" :class="[{'btn-primary': currentUrl.indexOf('last_mile_delivery') === -1 }, {'btn-info': currentUrl.indexOf('last_mile_delivery') > -1 }]" @click="submitForm">Sign In</div>
                        </div>
                    </div>
                    <div class="row m-t-15">
                        <div class="col text-center">
                            <div class="col">
                                <p>New Customer? <strong class=" m-b-0 pointer" @click="$store.dispatch('toggleSection', {name: 'registrationForm', status: true})">Create Account</strong></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import loginFormValidation from '../../../general/mixins/accounts/validation/loginFormValidation'
    export default {
        props: {
            section:{
                type: String,
                required: true
            }
        },
        data() {
            return {
                error: '',
                parameters: {
                    email: this.email,
                    password: ''
                },
                currentUrl: window.location.href,
            };
        },
        methods: {
          submitForm(){
              this.submit(this.route('api.account.authentication.authenticate.attempt'), 'post', this.section, false, false)
          }
        },
        mixins: [loginFormValidation]
    }

</script>