<template>
    <div>
        <div class="card shadow-sm border-0 mh-v100">
            <div class="card-header d-flex justify-content-between flex-wrap p-4 bg-white border-bottom-0">
                <div>
                    <h1 class="mb-0 fw-bold h2">{{ trans('em.promocodes') }}</h1>
                </div>
                <div>
                    <PromocodeAdd :organizer_id="organizer_id" @promocode-added="getPromocodes"></PromocodeAdd>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table text-wrap">
                    <thead class="table-light text-nowrap">
                        <tr>
                            <th class="border-top-0 border-bottom-0">{{ trans('em.code') }}</th>
                            <th class="border-top-0 border-bottom-0">{{ trans('em.discount') }}</th>
                            <th class="border-top-0 border-bottom-0">{{ trans('em.quantity') }}</th>
                            <th class="border-top-0 border-bottom-0">{{ trans('em.type') }}</th>
                            <th class="border-top-0 border-bottom-0">{{ trans('em.expires_at') }}</th>
                            <th class="border-top-0 border-bottom-0">{{ trans('em.status') }}</th>
                            <th class="border-top-0 border-bottom-0">{{ trans('em.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in promocodes" :key="item.id">
                            <td class="align-middle" :data-title="trans('em.code')">
                                {{ item.code }}
                            </td>
                            <td class="align-middle" :data-title="trans('em.discount')">
                                {{ item.reward }}
                            </td>
                            <td class="align-middle" :data-title="trans('em.quantity')">
                                {{ item.quantity }}
                            </td>
                            <td class="align-middle" :data-title="trans('em.type')">
                                {{ item.p_type == 'percent' ? trans('em.percent') : trans('em.fixed') }}
                            </td>
                            <td class="align-middle" :data-title="trans('em.type')">
                                {{ formatDate(item.expires_at) }}
                            </td>
                            <td class="align-middle" :data-title="trans('em.status')">
                                {{ item.status == 1 ? trans('em.enabled') : trans('em.disabled') }}
                            </td>
                            <td class="align-middle border-top-0 text-wrap" :data-title="trans('em.actions')"> 
                                <div class="d-flex flex-lg-row flex-column gap-2">
                                    <button type="button" class="btn btn-sm btn-primary" @click="edit_index = index"><i class="fas fa-edit"></i> {{ trans('em.edit') }}</button>
                                    <button type="button" class="btn btn-sm btn-danger" @click="deleteTag(item.id)"><i class="fas fa-trash"></i> {{ trans('em.delete') }}</button>
                                </div>
                                <PromocodeAdd v-if="edit_index == index" :edit_tag="item" @update-tags="getPromocodes"></PromocodeAdd>
                            </td>                            
                        </tr>
                        <tr v-if="promocodes.length <= 0">
                            <td colspan="6" class="text-center align-middle">{{ trans('em.no') }} {{ trans('em.promocode') }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="px-4 pb-4" v-if="promocodes.length > 0">
                <pagination-component v-if="pagination.last_page > 1" :pagination="pagination" :offset="pagination.total" @paginate="getPromocodes()">
                </pagination-component>
            </div>
        </div>
    </div>
</template>

<script>
import PromocodeAdd from './Promocode.vue';
import PaginationComponent from '../../../../eventmie-pro/resources/js/common_components/Pagination.vue';
import mixinsFilters from '../../mixins.js';

export default {
    props: [
        'organizer_id', 'page',
    ],

    components: {
        PromocodeAdd,
        PaginationComponent,
    },

    mixins: [
        mixinsFilters
    ],

    data() {
        return {
            promocodes: [],
            edit_index: null,
            pagination: {
                'current_page': 1
            },
        }
    },
    computed: {
        current_page() {
            return this.page || 1; // Default to 1 if page prop is undefined
        },
    },
    methods: {
        formatDate(datetime) {
            // const date = new Date(datetime);
            // return date.toISOString().split('T')[0]; // Returns date in 'YYYY-MM-DD' format
            return datetime;
        },
        getPromocodes() {
            axios.post(route('promocodes.getPromocodesByOrganizer'), {
               organizer_id : this.organizer_id, 
            })
            .then(res => {
                console.log("res.data", res.data.promocodes);
                // Fill data promocodes array
                this.promocodes = res.data.promocodes;
            })
            .catch(error => {
                Vue.helpers.axiosErrors(error);
            });
        },

        deleteTag(promocode_id) {
            this.showConfirm(trans('em.delete_promocode_ask')).then((res) => {
                if (res) {
                    axios.post(route('promocodes.delete_promocode'), { promocode_id })
                    .then(res => {
                        if (res.data.status) {
                            this.getPromocodes();
                            this.showNotification('success', trans('em.delete_promocode_succcess'));
                        }
                    })
                    .catch(error => {
                        Vue.helpers.axiosErrors(error);
                    });
                }
            })
        }
    },

    mounted() {
        this.getPromocodes();
    }
}
</script>
