<template>
    <div class="custom_model">

        

        <div class="modal show" v-if="openModal">
            <div class="modal-dialog w-100">
                <div class="modal-content">

                    <div class="modal-header">
                        <h1 class="modal-title fs-3" id="exampleModalLabel">{{ trans('em.contact_customer') }}</h1>
                        <button type="button" class="btn btn-sm bg-danger text-white close" data-bs-dismiss="modal"
                            aria-label="Close" @click="close()"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body text-start">
                        <form ref="form" @submit.prevent="validateForm" method="POST" enctype="multipart/form-data">
                            <input type="hidden" class="form-control "  name="organiser_id" v-model="organiser_id">
                            <input type="hidden" class="form-control "  name="organiser_response" value="1">
                            <div class="mb-3">
                                <label class="form-label text-black" for="name">{{ trans('em.your_name') }} </label>
                                <input class="form-control" type="text" name="name" v-model="name" v-validate="'required'">
                                <span v-show="errors.has('name')" class="help text-danger">{{ errors.first('name') }}</span>

                            </div>
                            <div class="mb-3">
                                <label class="form-label text-black" for="email">{{ trans('em.your_email') }} </label>
                                <input class="form-control" type="email" name="email" v-model="email" v-validate="'required'">
                                <span v-show="errors.has('email')" class="help text-danger">{{ errors.first('email') }}</span>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-black" for="phone">{{ trans('em.your_phone') }} </label>
                                <input class="form-control" type="text" name="phone" v-model="phone">
                                <span v-show="errors.has('phone')" class="help text-danger">{{ errors.first('phone') }}</span>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-black" for="message">{{ trans('em.message') }} </label>
                                <textarea name="message" rows="3" required="required" class="form-control" v-model="message" v-validate="'required'"></textarea>
                                <span v-show="errors.has('message')" class="help text-danger">{{ errors.first('message') }}</span>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-sm btn-primary">{{ trans('em.send_message') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import mixinsFilters from '../../../../../../../eventmie-pro/resources/js/mixins.js';

export default {

    props: ["organiser_id", "user", "openModal"],

    mixins: [
        mixinsFilters
    ],

    data() {
        return {
            openModal: this.openModal,

            // important!!! declare all form fields
            name : null,
            email : null,
            phone : null,
            message : null,
        }
    },

    methods: {
        // reset form and close modal
        close: function () {
            this.$refs.form.reset();
            this.openModal = false;
            this.user = null;
            this.$emit('close-modal');

        },

        // validate data on form submit
        validateForm(event) {
            this.$validator.validateAll().then((result) => {
                if (result) {
                    this.formSubmit(event);
                }
            });
        },

        // show server validation errors
        serverValidate(serrors) {
            this.$validator.validateAll().then((result) => {
                this.$validator.errors.add(serrors);
            });
        },

        // submit form
        formSubmit(event) {
            // show loader
            this.showLoaderNotification(trans('em.processing'));

            // prepare form data for post request
            this.disable = true;

            // prepare form data for post request
            let post_url = route('contactOrganiser');
            let post_data = new FormData(this.$refs.form);

            // axios post request
            axios.post(post_url, post_data)
                .then(res => {

                    this.close();
                    this.showNotification('success', trans('em.message_sent'));
                    // reload page   
                    setTimeout(function () {
                        location.reload(true);
                    }, 1000);

                })
                .catch(error => {

                    this.disable = false;
                    Swal.hideLoading();

                    let serrors = Vue.helpers.axiosErrors(error);
                    if (serrors.length) {
                        this.serverValidate(serrors);
                    }
                });
        },
    },

    mounted() {
        if (this.user != null) {
            this.name = this.user.name;
            this.email = this.user.email;
            this.phone = this.user.phone;
        }
        console.log(this.user);
    }
}
</script>