<template>
<div>
    <div class="card shadow-sm border-0">
        <div class="card-header p-4 bg-white border-bottom-0">

            <h1 class="fw-bold h2">{{ trans('em.complimentary_bookings') }}</h1>

            <div  class="row">
                <div class="col-md-5 mb-3">
                    <div class="form-group">
                        <label class="form-label" for="exampleFormControlSelect1">{{ trans('em.events') }}</label>
                        <select class="form-control" name="state" v-model="event_id" >
                            <option  value=0>{{ trans('em.all_events') }} </option>
                            <option v-for="(event, index) in events" :key ="index" :value="event.id">{{event.title}} </option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="exampleFormControlSelect1">{{ trans('em.show') }}</label>
                        <select class="form-control" v-model="length" @change="resetPagination()">
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="500">500</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="mt-5">
                        <button type="button" class="btn btn-outline-secondary btn-sm" @click="reset()"><i class="fas fa-redo"></i> {{ trans('em.reset_filters') }}</button>
                    </div>    
                </div>
            </div>
        </div>
        <div class=" table-responsive">
            <table class="table text-wrap">
                <thead class="table-light text-nowrap">
                    <tr>
                        <!-- CUSTOM  -->
                        <th class="align-middle">{{ trans('em.event') }}</th>
                        <th class="align-middle">{{ trans('em.downloads') }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(booking, index) in paginatedBookings" :key="index" >
                        <td :data-title="trans('em.event')">
                            <div class="d-flex align-items-center flex-wrap">
                                <div class="ms-3 lh-1">
                                    <h6 class="mb-1 lh-1">{{ booking.event_title }}</h6>
                                    <p class="text-mute mb-1 pb-1">
                                        <small class="text-muted" v-if="booking.event_start_date != booking.event_end_date">
                                            {{ moment(userTimezone(booking.event_start_date+' '+booking.event_start_time, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')).format(date_format.vue_date_format) }}
                                        </small>
                                        <small class="text-muted" v-else>
                                            {{ moment(userTimezone(booking.event_start_date+' '+booking.event_start_time,'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')).format(date_format.vue_date_format) }}
                                        </small>
                                        
                                        <small class="text-muted">
                                            {{ userTimezone(booking.event_start_date+' '+booking.event_start_time, 'YYYY-MM-DD HH:mm:ss').format(date_format.vue_time_format) }}
                                        </small>
                                        <small class="text-muted"> 
                                            {{ showTimezone() }}
                                        </small>
                                    </p>
                                    <p class="text-mute my-1 pb-1">
                                        <small class="text-muted">
                                            <i class="fa-solid fa-bag-shopping" title="Booked On"></i>
                                            {{ moment(userTimezone(booking.created_at, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')).format(date_format.vue_date_format) }} {{ showTimezone()  }}&emsp;
                                        </small>
                                    </p>
                                    <p class="text-mute my-1 pb-1">
                                        <small class="text-muted">
                                            <i class="fas fa-ticket"></i> {{ booking.ticket_title }} <strong>{{ ' x '+booking.total_quantity }}</strong>
                                        </small>
                                    </p>
                                    <p class="text-mute my-1 pb-1">
                                        <small class="text-muted">
                                            {{ trans('em.distributor') }}: {{ booking.distributor_tag }}
                                        </small>
                                    </p>
                                    
                                    <p>
                                        <small class="text-success fw-bold">{{ trans('em.bulk_order') }}: #{{ booking.bulk_code }}</small>
                                        <span v-if="(moment(booking.event_end_date+' '+booking.event_end_time, 'YYYY-MM-DD HH:mm:ss').tz(Intl.DateTimeFormat().resolvedOptions().timeZone) <= moment().tz(Intl.DateTimeFormat().resolvedOptions().timeZone))">
                                            <span class="badge bg-danger text-white fw-normal py-1 my-1">{{ trans('em.expired') }} / {{trans('em.yes')}} </span>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </td>
                
                        <td class="align-middle text-left" :data-title="trans('em.downloads')">
                            <div class="btn-group-vertical text-nowrap" role="group" aria-label="Vertical button group">
                                <div>
                                    <a class="btn btn-sm btn-primary mb-1" :href="downloadBulkZip(booking.ticket_id, booking.bulk_code)"><i class="fas fa-download"></i> {{ trans('em.tickets_zip') }}</a>&nbsp;
                                    <a class="btn btn-sm btn-primary mb-1" :href="exportAttendeesCSV(booking.ticket_id, booking.bulk_code)"><i class="fas fa-download"></i> {{ trans('em.attendees_csv') }}</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="px-4 pb-4" v-if="bookings.length > 0">
            <pagination-component v-if="pagination.last_page > 1" :pagination="pagination" :offset="pagination.total"  @paginate="getOrganiserBookings()">
            </pagination-component>
        </div> 

    </div>


</div>
</template>

<script>

import _ from 'lodash';
import PaginationComponent from '../../../../eventmie-pro/resources/js/common_components/Pagination.vue';
import mixinsFilters from '../../mixins.js';

export default {
    
    mixins:[
        mixinsFilters
    ],

    props: [
        'date_format',
    ],
    
    components: {
        PaginationComponent,
    },

    
    data() {
        return {
            isOpen     : false,
            bookings   : [],
            moment     : moment,
            pagination: {
                'current_page': 1
            },
            currency   : null,

            events    : [],
            event_id  : 0,

            length     : 10,
        }
    },

     computed: {
        current_page() {
            // get page from route
            if(typeof this.page === "undefined")
                return 1;
            return this.page;
        },
        
        filteredBookings() {
            let bookings = this.bookings;
            
            return bookings;
        },

        paginatedBookings() {
            return this.filteredBookings;
        }
    },

    methods:{
          // get all events
        getOrganiserBookings() {
            let booking_route = route('organiser_complimentary_bookings');

            axios.get(booking_route+'?page='+this.current_page+'&event_id='+this.event_id+'&length='+this.length+'&search='+this.search)
            .then(res => {
                this.currency   = res.data.currency;
                this.bookings   = res.data.bookings.data;
                this.pagination = {
                    'total' : res.data.bookings.total,
                    'per_page' : res.data.bookings.per_page,
                    'current_page' : res.data.bookings.current_page,
                    'last_page' : res.data.bookings.last_page,
                    'from' : res.data.bookings.from,
                    'to' : res.data.bookings.to
                };
            })
            .catch(error => {
                
            });
        },

        // return route with download URL
        downloadBulkZip(ticket_id, bulk_code) {
            if(ticket_id && bulk_code) {
                return route('voyager.bookings.bulk_zip', [ticket_id, bulk_code]);
            }
        },
        // return route with download URL
        exportAttendeesCSV(ticket_id, bulk_code) {
            if(ticket_id && bulk_code) {
                return route('voyager.bookings.bulk_export', [ticket_id, bulk_code]);
            }
        },

        // get all events
        getMyEvents() {
            let events_route = route('eventmie.all_myevents');
            axios.get(events_route)
            .then(res => {
                this.events  = res.data.myevents;
            })
            .catch(error => {
                
            });
        },
   
        
        // reset pagination
        resetPagination: _.debounce(function(){
            this.my_page = 1;

            this.$router.push({ query: Object.assign({}, this.$route.query, {  page: 1 }) }).catch(()=>{});


            this.getOrganiserBookings();
        }, 1000),
        
        // reset searching fields
        reset(){
            this.event_id   = "0";
            this.length = "10";
        },
        
    },
   
    mounted() {
        this.getOrganiserBookings();
        this.getMyEvents();
    },

    watch : {
        event_id: function () {
            this.getOrganiserBookings();
        },
    }
}
</script>