<template>
    <modal modal-id="test-mail-modal"
           v-model="showModal"
           :title="$t('send_test_email')"
           @submit="submitData"
           :preloader="preloader"
           :btnLabel="$t('send')"
    >
        <template #body>
            <form
                ref="form"
                :data-url="TEST_MAIL"
                @submit.prevent="submitData"
            >
                <div class="form-group">
                    <div class="row">
                        <div class="col-lg-3 col-xl-3 d-flex align-items-center">
                            <label class="text-left d-block mb-lg-2 mb-xl-0">{{ $t('email_address') }}</label>
                        </div>
                        <div class="col-lg-8 col-xl-8">
                            <app-input
                                type="email"
                                :placeholder="$t('enter_email_address')"
                                :required="true"
                                v-model="formData.email"
                                :error-message="$errorMessage(errors, 'email')"
                            />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-lg-3 col-xl-3 d-flex align-items-center">
                            <label class="text-left d-block mb-lg-2 mb-xl-0">{{ $t('subject') }}</label>
                        </div>
                        <div class="col-lg-8 col-xl-8">
                            <app-input
                                type="text"
                                :placeholder="$t('enter_subject')"
                                :required="true"
                                v-model="formData.subject"
                                :error-message="$errorMessage(errors, 'subject')"
                            />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-lg-3 col-xl-3 d-flex align-items-center">
                            <label class="text-left d-block mb-lg-2 mb-xl-0">{{ $t('message') }}</label>
                        </div>
                        <div class="col-lg-8 col-xl-8">
                            <app-input
                                type="textarea"
                                :placeholder="$t('enter_message')"
                                :required="true"
                                v-model="formData.message"
                                :error-message="$errorMessage(errors, 'message')"
                            />
                        </div>
                    </div>
                </div>
            </form>
        </template>
    </modal>
</template>

<script>

import {FormMixin} from "../../../../core/mixins/form/FormMixin";
import {ModalMixin} from "../../../mixins/ModalMixin";
import {TEST_MAIL} from "../../../config/ApiUrl";

export default {
    name: "TestMailModal",
    mixins: [FormMixin, ModalMixin],
    data() {
        return {
            formData: {},
            TEST_MAIL,
            errors: {}
        }
    },
    methods: {
        afterSuccess({data}) {
            this.formData = {};
            $('#test-mail-modal').modal('hide');
            this.$emit('input', false);
            this.$toastr.s(data.message);
        },
        submitData() {
            this.preloader = true;
            this.message = '';
            this.errors = {};
            this.save(this.formData);
        }
    },
}
</script>

