<template>
    <div class="custom_model">

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-secondary" @click="openModal = true" v-if="!edit_tag"><i class="fa fa-user-tag"></i> {{ trans('em.add') }} {{ trans('em.promocodes') }}</button>

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

                    <div class="modal-header">
                        <h1 class="modal-title fs-3" id="exampleModalLabel">{{ !edit_tag ? trans('em.new') : trans('em.edit') }} {{ trans('em.promocodes') }}</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">    
                        <form ref="form" @submit.prevent="validateForm" method="POST" enctype="multipart/form-data">
                            <input v-if="edit_tag" type="hidden" name="promocode_id" v-model="edit_tag.id">
                            <input type="hidden" name="organizer_id" v-model="organiser_id">
                            
                            <div class="mb-3">
                                <label class="form-label text-black" for="code">{{ trans('em.code') }}<sup>*</sup></label>
                                <input type="text" class="form-control lgxname" v-model="code" name="code" v-validate="'required'">
                                <span v-show="errors.has('code')" class="help text-danger">{{ errors.first('code') }}</span>
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-black" for="type">{{ trans('em.type') }}</label>
                                <select class="form-control" name="p_type" v-model="p_type">
                                    <option value="fixed">{{ trans('em.fixed') }}</option>
                                    <option value="percent">{{ trans('em.percent') }}</option>
                                </select>
                                <span v-show="errors.has('p_type')" class="help text-danger">{{ errors.first('p_type') }}</span>
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-black" for="reward">{{ trans('em.promocode_reward') }}<sup>*</sup></label>
                                <input type="text" class="form-control lgxname" v-model="reward" name="reward" v-validate="'required|decimal'" placeholder="e.g. 5.00">
                                <span class="help text-muted">e.g 5.50</span>
                                <span v-show="errors.has('reward')" class="help text-danger">{{ errors.first('reward') }}</span>
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-black" for="quantity">{{ trans('em.quantity') }}</label>
                                <input type="number" class="form-control lgxname" v-model="quantity" name="quantity">
                                <span v-show="errors.has('quantity')" class="help text-danger">{{ errors.first('quantity') }}</span>
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-black" for="status">{{ trans('em.status') }}</label>
                                <select class="form-control" name="status" v-model="status">
                                    <option value="1">{{ trans('em.enabled') }}</option>
                                    <option value="0">{{ trans('em.disable') }}</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-black" for="expires_at">{{ trans('em.expires_at') }}<sup>*</sup></label>
                                <input type="datetime-local" format="YYYY-MM-DD HH:mm:ss" class="form-control lgxname" v-model="expires_at" name="expires_at" step="1">
                                <span v-show="errors.has('expires_at')" class="help text-danger">{{ errors.first('expires_at') }}</span>
                            </div>

                            <div class="modal-footer">
                                <button type="submit" :disabled="disable" class="btn btn-primary"><i class="fas fa-sd-card"></i> {{ trans('em.save') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { mapMutations } from 'vuex';
import mixinsFilters from '../../mixins.js';

export default {
    props: ["edit_tag", "organiser_id"],
    mixins: [mixinsFilters],
    
    data() {
        return {
            openModal: false,
            disable: false,
            
            // form fields
            code: null,
            reward: null,
            quantity: null,
            p_type: 'fixed',
            status: 1,
            expires_at: null,
            promocode_id: this.edit_tag?.id,
        }
    },

    methods: {
        ...mapMutations(['add', 'update']),
        

       
        close() {
            this.$validator.reset();  // Reset validation errors
            // Clear all form fields
            this.code = null;
            this.reward = null;
            this.quantity = null;
            this.p_type = 'fixed';
            this.status = 1;
            this.expires_at = null;
            this.promocode_id = null;
            this.openModal = false;
        },

        editTags() {
            this.code = this.edit_tag.code;
            this.reward = this.edit_tag.reward;
            this.quantity = this.edit_tag.quantity;
            this.p_type = this.edit_tag.p_type;
            this.status = this.edit_tag.status;
            this.status = this.edit_tag.status;
            this.expires_at = this.edit_tag.expires_at;
        },


        validateForm(event) {
            this.$validator.validateAll().then((result) => {
                if (result) {
                    this.formSubmit(event);            
                }
            });
        },

        serverValidate(serrors) {
            this.$validator.errors.add(serrors);
        },

        formSubmit(event) {
            this.disable = true;

            let post_url = this.edit_tag ? route('promocodes.store') : route('promocodes.store');
            let post_data = new FormData(this.$refs.form);

            axios.post(post_url, post_data)
            .then(res => {
                this.close();
                this.showNotification('success', trans('em.promocode_update_successfully'));
                setTimeout(function() {
                    location.reload(true);
                }, 1000);
            })
            .catch(error => {
                this.disable = false;
                let serrors = Vue.helpers.axiosErrors(error);
                if (serrors.length) {
                    this.serverValidate(serrors);
                }
            });
        },
    },

    mounted() {
        if (typeof this.edit_tag !== 'undefined') {
            this.editTags();
            this.openModal = true;
        }
    }
}
</script>
