<template>
    <div class="flex flex-row w-2/3 lg:w-1/3">
        <div class="flex-col w-full">
            <div
                class="w-full border border-gray-800 rounded bg-white text-gray-800 p-5 mb-4"
                v-if="message"
                v-text="message"
            >
            </div>
            <div class="flex w-full">
                <input
                    class="bg-gray-100 h-10 px-2 rounded flex-1"
                    type="email"
                    name="email"
                    v-model="form.email"
                    placeholder="Subscribe for News Letters"
                />
                <button
                    @click="submit()"
                    :disabled="form.email == ''"
                    class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
                >
                    Subscribe
                </button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "news-letter",

    data() {
        return {
            form: {
                email: ""
            },
            errors: false,
            message: ""
        };
    },

    methods: {
        submit() {
            axios
                .post("/api/newsletter/subscribe", this.form)

                .then(response => {
                    this.message = response.data.message;
                })
                .catch(error => {
                    this.errors = true;
                   this.message = error.response.data.errors.email[0];
                });
        }
    }
};
</script>
