<template>
    <div class="mt-3">
        <div  v-if="openModal" ref="modal_custom" :class="{ 'overflow-hidden': overflowHidden  }">
            <div >
                <div>
                    <div>    
                        <div class="alert alert-primary" v-if="show_checkout_timer">
                            <div class="text-sm d-flex flex-wrap justify-content-between">
                                <div>
                                    <p class="fw-bold text-primary m-0"> {{ trans('em.checkout_timer') }}
                                    </p>
                                </div>

                                <div>
                                    <i  class="fas fa-clock fa-spin text-danger"></i>
                                    <span class="fw-bold text-primary">
                                        <vue-countdown :time="480000" v-slot="{ minutes, seconds }">
                                             {{ minutes }} : {{ seconds }} {{ trans('em.minutes') }}
                                        </vue-countdown>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <form ref="form" @submit.prevent="validateForm" method="POST" >
                            <input type="hidden" class="form-control" name="event_id" :value="tickets[0].event_id" >
                            <input type="hidden" class="form-control" name="booking_date" :value="serverTimezone(moment(booking_date).format('dddd LL')+' '+start_time, 'dddd LL HH:mm a').locale('en').format('YYYY-MM-DD')" >
                            <input type="hidden" class="form-control" name="booking_end_date"
                                :value="(booking_end_date != null && typeof(booking_end_date) != 'undefined' && booking_end_date != false) ?
                                serverTimezone(moment(booking_date).format('dddd LL')+' '+end_time, 'dddd LL HH:mm a').locale('en').format('YYYY-MM-DD') : null"
                                v-if="!event.merge_schedule"
                            >
                            <input type="hidden" class="form-control" name="booking_end_date"
                                :value="(booking_end_date != null && typeof(booking_end_date) != 'undefined' && booking_end_date != false) ?
                                serverTimezone(moment(booking_end_date).format('dddd LL')+' '+end_time, 'dddd LL HH:mm a').locale('en').format('YYYY-MM-DD') : null"
                                v-else
                            >
                            <input type="hidden" class="form-control" name="start_time" :value="serverTimezone( moment(booking_date).format('dddd LL')+' '+start_time, 'dddd LL HH:mm a').locale('en').format('HH:mm:ss')" >
                            <input type="hidden" class="form-control" name="end_time" :value="serverTimezone(((booking_end_date == null || booking_end_date == false) ? moment(booking_date).format('dddd LL') : moment(booking_end_date).format('dddd LL')) +' '+end_time, 'dddd LL HH:mm a').locale('en').format('HH:mm:ss')" >
                            <input type="hidden" class="form-control" name="merge_schedule" :value="event.merge_schedule" >
                            <input type="hidden" name="customer_id" v-model="customer_id" v-validate="'required'" >

                            <!-- Admin, Organiser & POS section -->
                            <div v-if="is_customer <= 0 || is_admin > 0" class="row align-items-start mx-0 mb-3 p-3 border border-2 rounded-3 bg-white text-black">
                                <div class="col-12 mb-2">
                                    <small><i class="fas fa-info-circle"></i> {{ trans('em.not_visible_to_customers') }}</small>
                                </div>
                                <!-- LEFT COLUMN: Add New Attendee + Search Customer -->
                                <div class="col-md-6 pe-md-4 border-end border-1" v-if="is_customer <= 0 && is_bulk <= 0">
                                    <!-- Search Customer -->
                                    <div class="mb-3">
                                        <label class="form-label h6 d-block mb-2">{{ trans('em.select_customer') }}</label>
                                         <v-select
                                            label="name"
                                            class="style-chooser"
                                            :placeholder="trans('em.search_customer_email')"
                                            v-model="customer"
                                            :required="!customer"
                                            :filterable="false"
                                            :options="options"
                                            @search="onSearch"
                                        ><div slot="no-options">{{ trans('em.customer_not_found') }}</div></v-select>
                                        <div class="invalid-feedback text-danger" v-show="errors.has('customer_id')">{{ errors.first('customer_id') }}</div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label h6 d-block mb-2">{{ trans('em.add') }} {{ trans('em.new') }} {{ trans('em.attendee') }}</label>
                                        <button class="btn btn-dark btn-sm" type="button" @click="add_attendee = 1">
                                            <i class="fas fa-user-plus me-1"></i> {{ trans('em.create') }} {{ trans('em.attendee') }}
                                        </button>
                                        <add-attendee v-if="add_attendee > 0" :add_attendee="add_attendee"/>
                                    </div>
                                </div>

                                <!-- RIGHT COLUMN: Complimentary Booking Switch -->
                                <div class="col-md-6" v-if="is_admin > 0">
                                    <label class="form-label h6 d-block mb-2">{{ trans('em.complimentary_bookings_ie') }}</label>
                                    <div class="form-check form-switch mb-0 p-0">
                                        <input class="form-check-input" type="checkbox" id="is_bulk" :value="1" name="is_bulk" v-model="is_bulk" >
                                        <label class="form-check-label h6 mb-0 mt-1" for="complimentarySwitch" >{{ trans('em.complimentary_bookings') }}</label>
                                    </div>
                                    <br>
                                    <div class="form-group" v-if="is_bulk > 0">
                                        <label class="form-label h6" >{{ trans('em.distributor') }}</label>
                                        <input type="text" class="form-control" name="distributor_tag" v-model="distributor_tag" placeholder="e.g Abc Company">
                                    </div>
                                </div>

                            </div>

                            <div>
                                
                                <!-- CUSTOM -->
                                <div class="row" v-if="is_twilio > 0">
                                    <input type="hidden" class="form-control"  name="phone_t" v-model="phone_t" >
                                    <div class="col-4 mb-3" v-if="customer != null && customer.phone == null ">
                                        <label>{{ trans('em.phone') + '('+ trans('em.required') +')' }}</label>
                                        <input type="text" class="form-control"  name="phone_t" v-model="phone_t" v-validate="'required'" :placeholder="trans('em.phone_info')">
                                        <span v-show="errors.has('phone_t')" class="help text-danger">{{ errors.first('phone_t') }}</span>
                                    </div>
                                </div>
                                <!-- CUSTOM -->

                                <div class="row">

                                    <!-- only for admin & organizer -->
                                    <!-- <div class="col-md-12 mb-5" v-if="is_customer <= 0"> -->

                                    <!-- Tickets -->
                                    <div class="col-12">
                                        <ul class="list-group">

                                            <!-- <li class="list-group-item d-flex  justify-content-between lh-condensed d-flex-wrap"
                                                v-for="(item, index) in tickets"
                                                :key = "index"
                                            > -->
                                            <!-- CUSTOM -->
                                            <li class="list-group-item mb-3 rounded-3 border-2"
                                                v-for="(item, index) in tickets"
                                                :key = "index"
                                            >

                                                <div
                                                    v-if="item.sale_start_date != null &&
                                                        userTimezone(item.sale_start_date, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') <= moment().tz(Intl.DateTimeFormat().resolvedOptions().timeZone).format('YYYY-MM-DD HH:mm:ss') &&
                                                        userTimezone(item.sale_end_date, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') > moment().tz(Intl.DateTimeFormat().resolvedOptions().timeZone).format('YYYY-MM-DD HH:mm:ss')"
                                                    :key="'sale-timer-' + item.id"
                                                    class="d-inline-flex align-items-center px-3 py-2 rounded-3 sale-timer-badge mb-2 flex-wrap"
                                                    style="min-width: 220px; background: var(--sale-timer-bg, #f8f9fa); color: var(--sale-timer-color, #212529); border: 1px solid var(--sale-timer-border, #e0e0e0);"
                                                >
                                                    <i class="fas fa-bolt me-2 text-warning"></i>
                                                    <span class="fw-semibold me-2">{{ trans('em.on_sale') }}</span>
                                                    <i class="fas fa-clock fa-spin text-danger me-1"></i>
                                                    <span class="fw-light">
                                                        <vue-countdown
                                                            :time="timerOnSale(item.sale_start_date, item.sale_end_date)"
                                                            v-slot="{ days, hours, minutes, seconds }"
                                                        >
                                                            <span class="countdown-numbers">
                                                                <span class="countdown-unit">{{ days }}<small class="text-muted ms-1">{{ trans('em.days') }}</small></span>
                                                                <span class="mx-1">|</span>
                                                                <span class="countdown-unit">{{ hours }}<small class="text-muted ms-1">h</small></span>
                                                                <span>:</span>
                                                                <span class="countdown-unit">{{ minutes }}<small class="text-muted ms-1">m</small></span>
                                                                <span>:</span>
                                                                <span class="countdown-unit">{{ seconds }}<small class="text-muted ms-1">s</small></span>
                                                            </span>
                                                            <span class="ms-1">{{ trans('em.left') }}</span>
                                                        </vue-countdown>
                                                    </span>
                                                </div>

                                                <!-- CUSTOM -->
                                                <input type="hidden" class="form-control" name="ticket_id[]" :value="item.id" >
                                                <input type="hidden" class="form-control" name="ticket_title[]" :value="item.title" >

                                                <div class="d-flex justify-content-between lh-condensed d-flex-wrap ticket-title-padding" :class="{'selected-ticket-bg': quantity[index] > 0}">

                                                        <div class="w-50">
                                                            <h6 class="my-0 ticket-title"><strong>{{ item.title }}</strong></h6>
                                                            <p class="my-0 h6 ticket-price">

                                                                <!-- CUSTOM -->
                                                                <del v-if="item.sale_price != null && userTimezone(item.sale_start_date, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') <= moment().tz(Intl.DateTimeFormat().resolvedOptions().timeZone).format('YYYY-MM-DD HH:mm:ss') &&
                                                                        userTimezone(item.sale_end_date, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') > moment().tz(Intl.DateTimeFormat().resolvedOptions().timeZone).format('YYYY-MM-DD HH:mm:ss')
                                                                ">
                                                                    <span> {{ item.old_price > 0 ? item.old_price : '0.00' }}  </span>
                                                                    <small>{{event.currency != null ? event.currency : currency }}</small>
                                                                </del>
                                                                <!-- CUSTOM -->

                                                                {{ item.price > 0 ? item.price : '0.00' }}
                                                                <!-- <small>{{currency}}</small> -->
                                                                <!-- CUSTOM -->
                                                                <small>{{event.currency != null ? event.currency : currency }}</small>
                                                                <!-- CUSTOM -->
                                                            </p>
                                                            
                                                            <!-- show tax only if quantity is set -->
                                                            <!-- <div class="event-tax" v-if="quantity[index] > 0 && item.price > 0 && item.taxes.length > 0"> -->
                                                            <!-- CUSTOM -->

                                                        </div>

                                                        <div  v-if="item.t_soldout > 0" class="w-25">
                                                            <p class="text-danger"><small><i class="fas fa-times-circle"></i> {{ trans('em.t_soldout') }}</small></p>
                                                        </div>

                                                        <div  v-show="item.t_soldout <= 0" class="w-25">
                                                            <!-- CUSTOM -->
                                                            <div  v-if="item.seatchart != null && item.seatchart.status > 0 && is_bulk <= 0">
                                                                <p>{{ trans('em.quantity') }}: {{ quantity[index] }}</p>
                                                            </div>

                                                            <!-- <div class="w-10 w-20-mobile"> -->
                                                            <!-- Hide quantity dropdown in case of reserved seating -->
                                                            <div  v-if="(item.seatchart == null || (item.seatchart != null  && item.seatchart.status <= 0) )  && is_bulk <= 0 " >
                                                            <!-- CUSTOM -->


                                                                <!-- Live stock alert  -->
                                                                <!-- if any booked tickets -->
                                                                <div v-if='typeof(booked_tickets[item.id+"-"+booked_date_server]) != "undefined"
                                                                '>
                                                                    <select class="form-select border-2 border-dark form-select-lg"
                                                                        :class="{'selected-ticket-bg': quantity[index] > 0}"
                                                                        name="quantity[]"
                                                                        v-model="quantity[index]"
                                                                        v-if='((item.customer_limit != null ? item.customer_limit : max_ticket_qty) <= 100)'
                                                                    >
                                                                        <option value="0" selected>0</option>
                                                                        <option :key="ind"
                                                                            v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant <= (item.customer_limit != null ? item.customer_limit : max_ticket_qty)"
                                                                            :value="itm" v-for=" (itm, ind) in booked_tickets[item.id+'-'+booked_date_server].total_vacant"
                                                                        >{{itm }}</option>
                                                                        <option v-else :value="itm" v-for=" (itm, ind) in (item.quantity > (item.customer_limit != null ? item.customer_limit : max_ticket_qty) ?  parseInt(item.customer_limit != null ? item.customer_limit : max_ticket_qty) : parseInt(item.quantity))"  :key="ind">{{itm }}</option>
                                                                    </select>
                                                                    <input v-else type="number" name="quantity[]"
                                                                        v-model="quantity[index]" value="0" class="form-control form-input-sm"
                                                                        min="0" :max="booked_tickets[item.id+'-'+booked_date_server].total_vacant < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) ? booked_tickets[item.id+'-'+booked_date_server].total_vacant : (item.customer_limit != null ? item.customer_limit : max_ticket_qty)">
                                                                    <!-- Show if vacant less than max_ticket_qty -->
                                                                    <p class="text-dark"
                                                                        v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) && booked_tickets[item.id+'-'+booked_date_server].total_vacant > 0 && booked_tickets[item.id+'-'+booked_date_server].total_vacant < 5">
                                                                        <small><i class="fas fa-exclamation"></i> {{ trans('em.vacant') }}
                                                                        {{ booked_tickets[item.id+'-'+booked_date_server].total_vacant }}</small>
                                                                    </p>
                                                                    <p class="text-danger"
                                                                        v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) && booked_tickets[item.id+'-'+booked_date_server].total_vacant <= 0">
                                                                        <small><i class="fas fa-times-circle"></i>  {{ trans('em.vacant') }} 0</small>
                                                                    </p>
                                                                </div>
                                                                <div v-else>
                                                                    <select class="form-select border-2 border-dark form-select-lg"
                                                                        :class="{'selected-ticket-bg': quantity[index] > 0}"
                                                                        name="quantity[]"
                                                                        v-model="quantity[index]"
                                                                        v-if="((item.customer_limit != null ? item.customer_limit : max_ticket_qty) <= 100)"
                                                                    >
                                                                        <option value="0" selected>0</option>
                                                                        <option :value="itm" v-for=" (itm, ind) in item.quantity > (item.customer_limit != null ? item.customer_limit : max_ticket_qty) ? parseInt(item.customer_limit != null ? item.customer_limit : max_ticket_qty) : parseInt(item.quantity)"  :key="ind">{{itm }}</option>
                                                                    </select>
                                                                    <input v-else type="number" name="quantity[]" v-model="quantity[index]" value="0" class="form-control form-input-sm" min="0" :max="item.quantity > (item.customer_limit != null ? item.customer_limit : max_ticket_qty) ?  parseInt(item.customer_limit != null ? item.customer_limit : max_ticket_qty) : parseInt(item.quantity)" >
                                                                    <!-- Show if vacant less than max_ticket_qty -->
                                                                    <p class="text-dark"
                                                                        v-if="item.quantity < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) && item.quantity > 0 && item.quantity < 5">
                                                                        <small><i class="fas fa-exclamation"></i> {{ trans('em.vacant') }}
                                                                        {{ item.quantity }}</small>
                                                                    </p>
                                                                    <p class="text-danger"
                                                                        v-if="item.quantity <= 0">
                                                                        <small><i class="fas fa-times-circle"></i>  {{ trans('em.vacant') }} 0</small>
                                                                    </p>
                                                                </div>
                                                            </div>

                                                            <!-- CUSTOM -->
                                                            <!-- FOR BULK BOOKING -->
                                                            <div  v-else >

                                                                <div v-if="is_bulk > 0 ">
                                                                <!-- Live stock alert  -->
                                                                    <!-- if any booked tickets -->
                                                                    <div v-if='typeof(booked_tickets[item.id+"-"+booked_date_server]) != "undefined"
                                                                    '>

                                                                        <input  type="number" name="quantity[]"
                                                                            v-model="quantity[index]"  value="0" class="form-control form-input-sm"
                                                                            min="0"
                                                                        >
                                                                        <!-- Show if vacant less than max_ticket_qty -->
                                                                        <p class="text-dark"
                                                                            v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) && booked_tickets[item.id+'-'+booked_date_server].total_vacant > 0 && booked_tickets[item.id+'-'+booked_date_server].total_vacant < 5">
                                                                            <small><i class="fas fa-exclamation"></i> {{ trans('em.vacant') }}
                                                                            {{ booked_tickets[item.id+'-'+booked_date_server].total_vacant }}</small>
                                                                        </p>
                                                                        <p class="text-danger"
                                                                            v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) && booked_tickets[item.id+'-'+booked_date_server].total_vacant <= 0">
                                                                            <small><i class="fas fa-times-circle"></i>  {{ trans('em.vacant') }} 0</small>
                                                                        </p>
                                                                    </div>
                                                                    <div v-else>

                                                                        <input  type="number" name="quantity[]" v-model="quantity[index]" value="0" class="form-control form-input-sm" min="0"  >
                                                                        <!-- Show if vacant less than max_ticket_qty -->
                                                                        <p class="text-dark"
                                                                            v-if="item.quantity < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) && item.quantity > 0 && item.quantity < 5">
                                                                            <small><i class="fas fa-exclamation"></i> {{ trans('em.vacant') }}
                                                                            {{ item.quantity }}</small>
                                                                        </p>
                                                                        <p class="text-danger"
                                                                            v-if="item.quantity <= 0">
                                                                            <small><i class="fas fa-times-circle"></i>  {{ trans('em.vacant') }} 0</small>
                                                                        </p>
                                                                    </div>
                                                                </div>


                                                                <div v-else class="w-10 w-20-mobile" :class="{'no-display': (item.seatchart != null && item.seatchart.status > 0) }"   >



                                                                    <!-- Live stock alert  -->
                                                                    <!-- if any booked tickets -->
                                                                    <div v-if='typeof(booked_tickets[item.id+"-"+booked_date_server]) != "undefined"
                                                                    '>
                                                                        <select class="form-select border-2 border-dark form-select-lg"
                                                                            :class="{'selected-ticket-bg': quantity[index] > 0}"
                                                                            name="quantity[]"
                                                                            v-model="quantity[index]"
                                                                            v-if='((item.customer_limit != null ? item.customer_limit : max_ticket_qty) <= 100)'
                                                                        >
                                                                            <option value="0" selected>0</option>
                                                                            <option :key="ind"
                                                                                v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant <= (item.customer_limit != null ? item.customer_limit : max_ticket_qty)"
                                                                                :value="itm" v-for=" (itm, ind) in booked_tickets[item.id+'-'+booked_date_server].total_vacant"
                                                                            >{{itm }}</option>
                                                                            <option v-else :value="itm" v-for=" (itm, ind) in (item.quantity > (item.customer_limit != null ? item.customer_limit : max_ticket_qty) ?  parseInt(item.customer_limit != null ? item.customer_limit : max_ticket_qty) : parseInt(item.quantity))"  :key="ind">{{itm }}</option>
                                                                        </select>
                                                                        <input v-else type="number" name="quantity[]"
                                                                            v-model="quantity[index]" value="0" class="form-control form-input-sm"
                                                                            min="0" :max="booked_tickets[item.id+'-'+booked_date_server].total_vacant < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) ? booked_tickets[item.id+'-'+booked_date_server].total_vacant : (item.customer_limit != null ? item.customer_limit : max_ticket_qty)">
                                                                        <!-- Show if vacant less than max_ticket_qty -->
                                                                        <p class="text-dark"
                                                                            v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) && booked_tickets[item.id+'-'+booked_date_server].total_vacant > 0 && booked_tickets[item.id+'-'+booked_date_server].total_vacant < 5">
                                                                            <small><i class="fas fa-exclamation"></i> {{ trans('em.vacant') }}
                                                                            {{ booked_tickets[item.id+'-'+booked_date_server].total_vacant }}</small>
                                                                        </p>
                                                                        <p class="text-danger"
                                                                            v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) && booked_tickets[item.id+'-'+booked_date_server].total_vacant <= 0">
                                                                            <small><i class="fas fa-times-circle"></i>  {{ trans('em.vacant') }} 0</small>
                                                                        </p>
                                                                    </div>
                                                                    <div v-else>
                                                                        <select class="form-select border-2 border-dark form-select-lg"
                                                                            :class="{'selected-ticket-bg': quantity[index] > 0}"
                                                                            name="quantity[]"
                                                                            v-model="quantity[index]"
                                                                            v-if="((item.customer_limit != null ? item.customer_limit : max_ticket_qty) <= 100)"
                                                                        >
                                                                            <option value="0" selected>0</option>
                                                                            <option :value="itm" v-for=" (itm, ind) in item.quantity > (item.customer_limit != null ? item.customer_limit : max_ticket_qty) ?  parseInt(item.customer_limit != null ? item.customer_limit : max_ticket_qty) : parseInt(item.quantity)"  :key="ind">{{itm }}</option>
                                                                        </select>
                                                                        <input v-else type="number" name="quantity[]" v-model="quantity[index]" value="0" class="form-control form-input-sm" min="0" :max="item.quantity > (item.customer_limit != null ? item.customer_limit : max_ticket_qty) ?  parseInt(item.customer_limit != null ? item.customer_limit : max_ticket_qty) : parseInt(item.quantity)" >
                                                                        <!-- Show if vacant less than max_ticket_qty -->
                                                                        <p class="text-dark"
                                                                            v-if="item.quantity < (item.customer_limit != null ? item.customer_limit : max_ticket_qty) && item.quantity > 0 && item.quantity < 5">
                                                                            <small><i class="fas fa-exclamation"></i> {{ trans('em.vacant') }}
                                                                            {{ item.quantity }}</small>
                                                                        </p>
                                                                        <p class="text-danger"
                                                                            v-if="item.quantity <= 0">
                                                                            <small><i class="fas fa-times-circle"></i>  {{ trans('em.vacant') }} 0</small>
                                                                        </p>
                                                                    </div>
                                                                </div>


                                                            </div>
                                                        </div>

                                                            
                                                        <!-- CUSTOM -->
                                                        <div v-if="item.is_donation <= 0 && item.t_soldout <= 0" class="ticket-price w-25 text-end">
                                                            <strong>
                                                                {{ total_price[index] ? total_price[index] : '0.00' }}
                                                                <small>{{currency}}</small>
                                                            </strong>
                                                            <span v-if="quantity[index] > 0">&nbsp;<i class="fas fa-check-circle ticket-selected-text"></i></span>
                                                        </div>

                                                        <div v-show="item.is_donation > 0 && quantity[index] > 0 && item.t_soldout <= 0" class="w-25 w-m-100 text-end">
                                                                <div class="d-flex justify-content-end align-items-center">
                                                                    <input type="text" name="is_donation[]"
                                                                        v-model="is_donation[index]" class="form-control form-select-lg border-secondary ms-2 me-2"
                                                                        @keypress="NumbersOnly"
                                                                        @change="validateDonationAmount(index)"
                                                                        :id="'donation_'+index"
                                                                        :min="ticket_price_unchanged[index].price"
                                                                        :placeholder="ticket_price_unchanged[index].price"
                                                                    >
                                                                    <div class="ticket-price w-100">
                                                                        <strong class="mt-2">
                                                                            {{ total_price[index] ? total_price[index] : '0.00' }}
                                                                            <small>{{currency}}</small>
                                                                            <span v-if="quantity[index] > 0">&nbsp;<i class="fas fa-check-circle ticket-selected-text"></i></span>
                                                                        </strong>
                                                                    </div>
                                                                </div>

                                                                <div class="btn-group btn-group-sm mt-1 d-flex ms-2" role="group" aria-label="Second group">
                                                                     <button type="button" class="btn btn-outline-secondary btn-sm"
                                                                            @click="setDonationValue(index, donationPriceSuggestion(ticket_price_unchanged[index].price, 1.5))">
                                                                        {{ donationPriceSuggestion(ticket_price_unchanged[index].price, 1.5) }}
                                                                    </button>
                                                                    <button type="button" class="btn btn-outline-secondary btn-sm"
                                                                        @click="setDonationValue(index, donationPriceSuggestion(ticket_price_unchanged[index].price, 2))">
                                                                        {{ donationPriceSuggestion(ticket_price_unchanged[index].price, 2) }}
                                                                    </button>
                                                                    <button type="button" class="btn btn-outline-secondary btn-sm"
                                                                        @click="setDonationValue(index, donationPriceSuggestion(ticket_price_unchanged[index].price, 4))">
                                                                        {{ donationPriceSuggestion(ticket_price_unchanged[index].price, 4) }}
                                                                    </button>
                                                                    <button type="button" class="btn btn-outline-secondary btn-sm"
                                                                        @click="setDonationValue(index, donationPriceSuggestion(ticket_price_unchanged[index].price, 8))">
                                                                        {{ donationPriceSuggestion(ticket_price_unchanged[index].price, 8) }}
                                                                    </button>
                                                                </div>

                                                        </div>

                                                        <div v-show="item.is_donation > 0 && quantity[index] <= 0 && item.t_soldout <= 0" class="w-25 text-end">

                                                            <p>&nbsp;<i class="fas fa-check-circle ticket-selected-text"></i>{{ trans('em.is_donation') }}</p>

                                                        </div>
                                                        <!-- CUSTOM -->
                                                        <!-- *** CUSTOM *** end-->
                                                        <!-- CUSTOM -->
                                                </div>

                                                <div class="break-flex mt-2 text-center">
                                                    <button v-if="item.seatchart != null && item.seatchart.status > 0 && is_bulk <= 0 && item.t_soldout <= 0" type="button" @click.prevent="zoomIn(item.id)" class="btn btn-sm text-primary"><i class="fa fa-search-plus" aria-hidden="true"></i> </button>
                                                    <button v-if="item.seatchart != null && item.seatchart.status > 0 && is_bulk <= 0 && item.t_soldout <= 0" type="button" @click.prevent="zoomOut(item.id)" class="btn btn-sm text-primary"><i class="fa fa-search-minus" aria-hidden="true"></i> </button>
                                                    <button v-if="item.seatchart != null && item.seatchart.status > 0 && is_bulk <= 0 && item.t_soldout <= 0" type="button" @click.prevent="zoomReset(item.id)" class="btn btn-sm text-primary"><i class="fas fa-sync" aria-hidden="true"></i> </button>
                                                </div>


                                                <!-- *** CUSTOM *** start-->

                                                <div style="overflow: auto;" class="break-flex" v-if="item.seatchart != null && item.seatchart.status > 0 && is_bulk <= 0 && item.t_soldout <= 0" >
                                                    <div class="break-flex my-2 text-center " v-if="!register_user_id">
                                                        <button type="button"  @click="register_modal = 1; is_seatchart = true" class="btn btn-primary" >{{ trans('em.enter_guest_details') }} </button>
                                                    </div>
                                                    <seat-component :ticket="item" :ticket_index="index" :max_ticket_qty="(item.customer_limit != null ? item.customer_limit : max_ticket_qty)" :quantity="quantity[index]" :event="event" :class="{ 'unclickable' : !register_user_id  }"></seat-component>
                                                </div>

                                                <div class="break-flex" v-if="parseInt(quantity[index]) > 0 && is_bulk <= 0"  v-for=" (q_num, q_index) in parseInt(quantity[index])"  :key="q_index">
                                                    <attendee-component ref="attendee" v-if="parseInt(q_num) > 0" :ticket_index="index" :quantity_index="q_index" ></attendee-component>
                                                </div>

                                                <div class="break-flex w-50 w-m-100 my-2" v-show="item.promocodes.length > 0">
                                                    <div class="input-group mt-3 col-md-5" v-show="item.price > 0 && item.t_soldout <= 0 && is_bulk <= 0">
                                                        <input type="text" name="promocode[]" class="form-control form-control-sm border-dark border-end-0" :placeholder="trans('em.enter_promocode')"
                                                            v-model="promocode[index]"
                                                            :id="'pc_'+index"
                                                            aria-describedby="button-addon2"
                                                        >
                                                        <button class="btn btn-sm btn-success text-white border border-success" type="button"
                                                            @click="pc_readonly[index] > 0 ? '' : applyPromocode(item.id, index)"
                                                            :id="'pcb_'+index"
                                                        >
                                                                {{ trans('em.apply') }}
                                                        </button>

                                                    </div>
                                                    <span class="text-success fw-bolder" :id="'pc_success_'+index"></span>
                                                    <span class="text-danger fw-bolder" :id="'pc_error_'+index"></span>
                                                </div>

                                                <!-- CUSTOM -->
                                                <div class="break-flex mt-2 w-30 w-m-100" v-if="quantity[index] > 0 && item.price > 0 && item.taxes.length > 0 && item.is_donation <= 0">
                                                    <a class="pointer small text-black" @click="tax_info = !tax_info">
                                                        <small v-if="tax_info"><i class="fas fa-eye-slash"></i> {{ trans('em.hide_tax_info') }}</small>
                                                        <small v-else><i class="fas fa-circle-exclamation"></i> {{ trans('em.show_tax_info') }}</small>
                                                    </a>
                                                    <ul class="list-group list-group-flush mb-2" v-if="tax_info">
                                                        <li class="list-group-item small p-1 text-muted" v-for="(tax, index1) in item.taxes" :key ="index1">
                                                            <span>{{ tax.title }}
                                                                <small>{{ total_price[index] > 0 ? countTax(item.price, tax.rate, tax.rate_type, tax.net_price, quantity[index]) : 0 }}</small>
                                                            </span>
                                                        </li>
                                                    </ul>
                                                </div>


                                                <!-- CUSTOM -->
                                                <div class="break-flex mt-2 w-30 w-m-100" v-if="quantity[index] > 0 && item.price > 0 && item.taxes.length > 0 &&  item.is_donation > 0">
                                                    <a class="pointer small text-black" @click="tax_info = !tax_info">
                                                        <small v-if="tax_info"><i class="fas fa-eye-slash"></i> {{ trans('em.hide_tax_info') }}</small>
                                                        <small v-else><i class="fas fa-circle-exclamation"></i> {{ trans('em.show_tax_info') }}</small>
                                                    </a>
                                                    <ul class="list-group list-group-flush mb-2" v-if="tax_info">
                                                        <li class="list-group-item small p-1 text-muted" v-for="(tax, index1) in item.taxes" :key ="index1">
                                                            <span>{{ tax.title }}
                                                                <small>{{ total_price[index] > 0 ? countTax(item.price, tax.rate, tax.rate_type, tax.net_price, 1) : 0 }}</small>
                                                            </span>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <!-- CUSTOM -->

                                                <div class="break-flex mt-2">
                                                    <!-- hide/show below ticket description -->
                                                    <a class="pointer ticket-info-toggle small text-black" @click="ticket_info = !ticket_info">
                                                        <small v-if="ticket_info"><i class="fas fa-eye-slash"></i> {{ trans('em.hide_info') }}</small>
                                                        <small v-else><i class="fas fa-info-circle"></i> {{ trans('em.show_info') }}</small>
                                                    </a>
                                                    <p class="ticket-info small text-muted" v-if="ticket_info">{{ item.description }}</p>
                                                </div>
                                                <!-- CUSTOM -->
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- Cart Totals -->
                                    <div class="col-12">
                                        <ul class="list-group list-group-cart">
                                            <li class="list-group-item mb-3 rounded-3 border-2">
                                                <div class="d-flex justify-content-between">
                                                    <h6 class="my-0 fs-5"><strong>{{ trans('em.total_tickets') }}</strong></h6>
                                                    <strong class="fs-5" :class="{'ticket-selected-text': bookedTicketsTotal() > 0 }">{{ bookedTicketsTotal() }}</strong>
                                                </div>

                                                <div class="d-flex justify-content-between">
                                                    <h6 class="my-0 fs-4"><strong>{{ trans('em.total_order') }}</strong></h6>
                                                    <strong class="fs-4" :class="{'ticket-selected-text': bookedTicketsTotal() > 0 }">{{ total }} <small>{{currency}}</small></strong>
                                                </div>
                                            </li>


                                            <!-- *** CUSTOM *** -->
                                            <li class="list-group-item mb-3 rounded-3 border-2" v-if="total > 0 && promocode_reward > 0">
                                                <div class="d-flex justify-content-between">
                                                    <h6 class="my-0 fs-4"><strong>{{ trans('em.discount') }}</strong></h6>
                                                    <strong class="fs-4 ticket-selected-text">{{'-' + promocode_reward.toFixed(2)}} {{currency}}</strong>
                                                </div>
                                            </li>
                                            <li class="list-group-item mb-3 rounded-3 border-2" v-if="total > 0 && promocode_reward > 0">
                                                <div class="d-flex justify-content-between">
                                                    <h6 class="my-0 fs-4"><strong>{{ trans('em.net_order_total') }}</strong></h6>
                                                    <strong class="fs-4 ticket-selected-text">{{ (parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) }} {{currency}}</strong>
                                                </div>
                                            </li>
                                            <!-- *** CUSTOM *** -->

                                        </ul>
                                    </div>

                                    <!-- If not logged in -->
                                    <!-- <div class="col-md-12" v-if="!login_user_id"> -->
                                    <!-- CUSTOM -->
                                    <!-- <div class="col-md-12" v-if="!register_user_id">
                                        <div class="alert alert-danger">
                                            {{ trans('em.please_login_signup') }}
                                        </div>
                                    </div> -->

                                    <!-- Payments -->
                                    <!-- <div class="col-md-12" v-if="bookedTicketsTotal() > 0 && login_user_id"> -->
                                    <!-- CUSTOM -->
                                    <div class="col-12 payment-options mb-3" v-if="bookedTicketsTotal() > 0 ">
                                    <!-- CUSTOM -->
                                        <div class="border rounded-3 border-1 border-dark list-group-flush px-2 bg-white">
                                            <!-- Free -->
                                            <!-- <div class="d-block my-3 pl-3" v-if="total <= 0"> -->
                                            <div class="d-block my-3 pl-3" v-if="(parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) <= 0">
                                                <div class="radio-inline">
                                                    <input id="free_order" name="payment_method" type="radio" class="custom-control-input me-1" checked v-model="payment_method" value="free">
                                                    <label class="custom-control-label text-dark" for="free_order"> &nbsp;<i class="fas fa-glass-cheers"></i> {{ trans('em.free') }} <small>({{ trans('em.rsvp') }} )</small></label>
                                                </div>
                                            </div>

                                            <!-- Paid -->
                                            <div class="d-block my-3 pl-3" v-else-if="(parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) > 0">

                                                <!-- For Organizer & Customer -->
                                                <div class="radio-inline" v-if="is_admin <= 0 && is_paypal > 0 && is_bulk <= 0">
                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_paypal" name="payment_method" v-model="payment_method" value="1" >
                                                    <label class="custom-control-label text-dark" for="payment_method_paypal"> 
                                                        <img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png" alt="PayPal" class="img-fluid" style="height: 20px;">    
                                                    </label>
                                                </div>
                                                
                                                <!--  CUSTOM -->
                                                <!-- For Organizer & Customer stripe-->
                                                <div class="radio-inline" v-if="is_admin <= 0 && isStripe > 0 && is_bulk <= 0 && is_stripe_direct <= 0" >
                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_stripe" name="payment_method" v-model="payment_method" value="2" >
                                                    <label class="custom-control-label text-dark gap-0" for="payment_method_stripe"> 
                                                        <img src="https://images.stripeassets.com/fzn2n1nzq965/HTTOloNPhisV9P4hlMPNA/cacf1bb88b9fc492dfad34378d844280/Stripe_icon_-_square.svg?q=80&w=1082" alt="Stripe" class="img-fluid" style="height: 20px;">    
                                                        <img src="https://images.stripeassets.com/fzn2n1nzq965/6XFEUA9FzMBMphYdcUab19/37a1e07201366a351f7956560ccac09d/Stripe_wordmark_-_slate.svg?q=80&w=1082" alt="Stripe" class="img-fluid" style="height: 20px;">    
                                                    </label>
                                                </div>


                                                <div class="radio-inline" v-if="is_admin <= 0 && isAuthorizeNet > 0 && is_bulk <= 0">
                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_authorize" name="payment_method" v-model="payment_method" value="3" >
                                                    <label class="custom-control-label text-dark" for="payment_method_authorize"> 
                                                        <img src="https://cdn.brandfetch.io/idNgQpEjrP/theme/dark/logo.svg?c=1bxid64Mup7aczewSAYMX&t=1669552253143" alt="Authorize.net" class="img-fluid" style=" height: 20px;">
                                                    </label>
                                                </div>



                                                <div class="radio-inline" v-if="is_admin <= 0 && is_bitpay > 0 && is_bulk <= 0">
                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_bitpay" name="payment_method" v-model="payment_method" value="4" >
                                                    <label class="custom-control-label text-dark" for="payment_method_bitpay"> 
                                                        <img src="https://static.cdnlogo.com/logos/b/14/bitpay.svg" alt="Bitpay" class="img-fluid" style="height: 20px;">
                                                    </label>
                                                </div>

                                                <div class="radio-inline" v-if="is_admin <= 0 && is_stripe_direct > 0 && is_bulk <= 0">
                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_stripe_direct" name="payment_method" v-model="payment_method" value="5" >
                                                    <label class="custom-control-label text-dark gap-0" for="payment_method_stripe_direct"> 
                                                        <img src="https://images.stripeassets.com/fzn2n1nzq965/HTTOloNPhisV9P4hlMPNA/cacf1bb88b9fc492dfad34378d844280/Stripe_icon_-_square.svg?q=80&w=1082" alt="Stripe" class="img-fluid" style="height: 20px;">    
                                                        <img src="https://images.stripeassets.com/fzn2n1nzq965/6XFEUA9FzMBMphYdcUab19/37a1e07201366a351f7956560ccac09d/Stripe_wordmark_-_slate.svg?q=80&w=1082" alt="Stripe" class="img-fluid" style="height: 20px;">    
                                                    </label>
                                                </div>

                                                <div class="radio-inline" v-if="is_admin <= 0 && is_bulk <= 0 && is_pay_stack > 0">
                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_paystack" name="payment_method" v-model="payment_method" value="6" >
                                                    <label class="custom-control-label text-dark" for="payment_method_paystack">
                                                        <img src="https://static.cdnlogo.com/logos/p/27/paystack.svg" alt="PayStack" class="img-fluid" style="height: 20px;">
                                                    </label>
                                                </div>

                                                <div class="radio-inline" v-if="is_admin <= 0 && is_bulk <= 0 && is_razorpay > 0">
                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_razorpay" name="payment_method" v-model="payment_method" value="7" >
                                                    <label class="custom-control-label text-dark" for="payment_method_razorpay">
                                                        <img src="https://razorpay.com/newsroom-content/uploads/2020/12/output-onlinepngtools-1-1.png" alt="Razorpay" class="img-fluid" style="height: 20px;">
                                                    </label>
                                                </div>

                                                <div class="radio-inline" v-if="is_admin <= 0 && is_bulk <= 0 && is_paytm > 0">
                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_paytm" name="payment_method" v-model="payment_method" value="8" >
                                                    <label class="custom-control-label text-dark" for="payment_method_paytm">
                                                        <img src="https://pwebassets.paytm.com/commonwebassets/paytmweb/header/images/logo_new.svg" alt="Paytm" class="img-fluid" style="height: 20px;">
                                                    </label>
                                                </div>
                                             

                                                <div class="radio-inline" v-if="is_admin <= 0 && is_mercadopago > 0">
                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_mercado" name="payment_method" v-model="payment_method" value="10" >
                                                    <label class="custom-control-label text-dark" for="payment_method_mercado">
                                                        <img src='https://http2.mlstatic.com/frontend-assets/mp-web-navigation/ui-navigation/6.7.71/mercadopago/logo__large@2x.png' alt="MercadoPago" class="img-fluid" style="height: 20px;">
                                                    </label>
                                                </div>

                                                
                                                <div class="radio-inline" v-if="is_admin <= 0 && is_flutterwave > 0">
                                                    <input type="radio" class="custom-control-input" id="payment_method_flutterwave" name="payment_method" v-model="payment_method" value="11" >
                                                    <label class="custom-control-label" for="payment_method_flutterwave">
                                                        <img src="https://static.cdnlogo.com/logos/f/6/flutterwave.svg" alt="Flutterwave" class="img-fluid" style="height: 20px;">
                                                    </label>
                                                </div>


                                                <!-- CUSTOM -->

                                                <!-- For Admin & Organizer & Customer -->
                                                <div class="radio-inline"
                                                    v-if="(is_organiser > 0 && is_offline_payment_organizer > 0) || (is_customer > 0 && is_offline_payment_customer > 0) || (is_admin > 0) || (is_bulk > 0)">

                                                    <input type="radio" class="custom-control-input me-1" id="payment_method_offline" name="payment_method" v-model="payment_method" value="offline">

                                                    <label class="custom-control-label text-dark" for="payment_method_offline">
                                                        &nbsp;<i class="fas fa-suitcase-rolling"></i> {{ trans('em.offline') }}
                                                        <small>({{ trans('em.cash_on_arrival') }})</small>
                                                    </label>

                                                </div>

                                                <p v-if="payment_method == 'offline'" class="text-mute h6 px-3 mt-1"><strong>{{ trans('em.offline_payment_info') }}: </strong><small class="preserve-whitespace" v-html="event.offline_payment_info"></small></p>

                                                <p class="text-mute h6 mt-2 mx-3" v-html="trans('em.order_terms')"></p>

                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <!--  CUSTOM -->

                                <authorize-net v-if="payment_method == 3 && total > 0 && register_user_id  && is_admin <= 0 && isAuthorizeNet > 0 && (parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) > 0"></authorize-net>

                                <pay-stack ref="pay_stack" v-if="payment_method == 6 && total > 0 && register_user_id  && is_admin <= 0 && is_pay_stack > 0 && (parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) > 0"></pay-stack>
                                <!--  CUSTOM -->

                                <div class="row mt-1">
                                    <!-- <div class="col-xs-12" v-if="login_user_id"> -->
                                    <!-- CUSTOM -->
                                    <div class="col-xs-12 d-grid" v-if="register_user_id && show_checkout_button">
                                    <!-- CUSTOM -->
                                        <button :class="{ 'disabled' : disable }"  :disabled="disable" type="submit" class="btn btn-primary btn-lg btn-block fs-4 text-uppercase text-white btn-checkout" ><i class="fas fa-solid fa-shield-halved"></i> {{ (total <= 0) ? trans('em.rsvp') : trans('em.checkout') }}</button>
                                    </div>
                                    
                                    <!-- <div class="col-xs-12" v-else> -->
                                    <!-- CUSTOM -->
                                    <div class="col-xs-12 d-grid" v-if="!register_user_id && show_checkout_button">
                                    <!-- CUSTOM -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary btn-lg btn-block fs-4 text-uppercase btn-checkout"  @click="register_modal = 1"><i class="fas fa-fingerprint"></i> {{ trans('em.checkout') }}</button>
                                        </div>
                                    </div>
                                    
                                    <register-user v-if="register_modal > 0" :register_user_id="register_user_id" :register_modal="register_modal" ></register-user>

                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>

    </div>
</template>

<script>

import { mapState, mapMutations} from 'vuex';
import mixinsFilters from '../../../../mixins.js';
import _ from 'lodash';
//   CUSTOM
import Stripe from './custom/Stripe.vue';
import RegisterUser   from './custom/RegisterUser.vue';
import AuthorizeNet from './custom/AuthorizeNet.vue';
import AddAttendee   from './custom/AddAttendee.vue';
import VueCountdown from '@chenfengyuan/vue-countdown';
import AttendeeComponent from './custom/Attendee.vue';
import SeatComponent from './custom/Seat.vue';
import PayStack from './custom/PayStack.vue';

//  CUSTOM
// moment.locale('en');
export default {

    components: {
        //  CUSTOM
        'stripe-component' : Stripe,
        RegisterUser,
        AuthorizeNet,
        AddAttendee,
        VueCountdown,
        AttendeeComponent,
        SeatComponent,
        'pay-stack'        : PayStack,
        // CUSTOM
    },

    mixins:[
        mixinsFilters
    ],

    props : [
        'tickets',
        'max_ticket_qty',
        'event',
        'currency',
        'login_user_id',
        'is_admin',
        'is_organiser',
        'is_pos',
        'is_customer',
        'is_paypal',
        'is_offline_payment_organizer',
        'is_offline_payment_customer',
        'booked_tickets',
    ],
    data() {
        return {
            openModal           : false,
            ticket_info         : false,
            tax_info            : false,
            moment              : moment,
            quantity            : [1],
            price               : null,
            total_price         : [],
            customer_id         : 0,
            total               : 0,
            disable             : false,
            payment_method      : 'offline',

            // customers options
            options             : [],
            //selected customer
            customer            : null,

            /* CUSTOM */
            //promocode
            bookings_data         : null,
            stripePublishableKey  : stripe_publishable_key,
            stripe_secret_key     : stripe_secret_key,
            isStripe              : is_stripe,

            name                  : '',
            email                 : '',
            register_user_id      : this.login_user_id,
            register_modal        : 0,

               //promocode
            promocode           : [],
            ticket_promocodes   : [],
            pc_readonly         : [],
            promocode_reward    : 0,

            cardName    : "",
            cardNumber  : "",
            cardMonth   : "",
            cardYear    : "",
            cardCvv     : "",
            isAuthorizeNet   : is_authorize_net,
            is_bitpay        : is_bitpay,
            is_stripe_direct : is_stripe_direct,
            add_attendee        : 0,
            is_twilio           : is_twilio,
            phone_t               : '',

            name                : [[],[]],
            phone               : [[],[]],
            address             : [[],[]],
            is_bulk             : 0,
            distributor_tag     : '',

            is_donation         : [],
            pay_stack           : 0,
            is_pay_stack        : is_pay_stack,
            is_razorpay          : is_razorpay,
            is_paytm             : is_paytm,
            show_checkout_button : false,
            show_checkout_timer : false,
            zoom : 1,
            
            route : route,
            is_seatchart : false,
            overflowHidden : false,
            
            ticket_price_unchanged         : [],

            is_mercadopago : is_mercadopago,
            is_flutterwave :is_flutterwave
            
            
            /* CUSTOM */
        }
    },

     computed: {
        // get global variables
        ...mapState( ['booking_date', 'start_time', 'end_time', 'booking_end_date', 'booked_date_server', 'disableSeats']),
    },

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

        // reset form and close modal
        close: function () {
            this.price          = null;
            this.quantity       = [];
            this.total_price    = [];

            this.add({
                booking_date        : null,
                booked_date_server  : null,
                booking_end_date    : null,
                start_time          : null,
                end_time            : null,
            })


            this.openModal      = false;
            this.overflowHidden      = false;
        },

        bookTickets(){

            // show loader
            this.showLoaderNotification(trans('em.processing'));

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

            let post_url = route('eventmie.bookings_book_tickets');
            let post_data = new FormData(this.$refs.form);


            //CUSTOM
            post_data.append('name', JSON.stringify(this.name) );
            post_data.append('phone', JSON.stringify(this.phone) );
            post_data.append('address', JSON.stringify(this.address) );
            post_data.append('disableSeats', JSON.stringify(this.disableSeats));

            //CUSTOM

            /* CUSTOM */
            // in case of Stripe
            if(this.payment_method == 6 && this.total > 0){
                this.PayStack(post_data);
            } else {
            /* CUSTOM */
                // axios post request
                axios.post(post_url, post_data)
                .then(res => {

                    if(res.data.status && res.data.message != ''  && typeof(res.data.message) != "undefined") {

                        // hide loader
                        Swal.hideLoading();

                        // close popup
                        this.close();
                        this.showNotification('success', res.data.message);

                    }
                    else if(!res.data.status && res.data.message != '' && res.data.url != ''  && typeof(res.data.url) != "undefined"){

                        // hide loader
                        Swal.hideLoading();

                        // close popup
                        this.close();
                        this.showNotification('error', res.data.message);

                        setTimeout(() => {
                            window.location.href = res.data.url;
                        }, 1000);
                    }

                    if(res.data.url != '' && res.data.status  && typeof(res.data.url) != "undefined") {

                        // hide loader
                        Swal.hideLoading();

                        setTimeout(() => {
                            window.location.href = res.data.url;
                        }, 1000);
                    }

                    if(!res.data.status && res.data.message != ''  && typeof(res.data.message) != "undefined") {

                        // hide loader
                        Swal.hideLoading();

                        // close popup
                        this.close();
                        this.showNotification('error', res.data.message);

                    }

                })
                .catch(error => {
                    this.disable = false;
                    let serrors = Vue.helpers.axiosErrors(error);
                    if (serrors.length) {

                        this.serverValidate(serrors);

                    }
                });
            }
        },



        // validate data on form submit
        validateForm(e) {
            this.$validator.validateAll().then((result) => {
                if (result) {
                    this.disable = true;
                    // this.formSubmit(e);
                    //CUSTOM
                    this.bookTickets();
                    //CUSTOM
                }
                else{
                    this.disable = false;
                }
            });
        },

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


        // count total tax
        countTax(price, tax, rate_type, net_price, quantity) {

            price           = parseFloat(price).toFixed(2);
            tax             = parseFloat(tax).toFixed(2);
            var total_tax   = parseFloat(quantity * tax).toFixed(2);


                // in case of percentage
                if(rate_type == 'percent')
                {
                    if(isNaN((price * total_tax)/100))
                        return 0;

                    total_tax = (parseFloat((price*total_tax)/100)).toFixed(2);

                    if(net_price == 'excluding')
                        return total_tax+' '+this.currency+' ('+tax+'%'+' '+trans('em.exclusive')+')';
                    else
                        return total_tax+' '+this.currency+' ('+tax+'%'+' '+trans('em.inclusive')+')';
                }

                // for fixed tax
                if(rate_type == 'fixed')
                {
                    if(net_price == 'excluding')
                        return total_tax+' '+this.currency+' ('+tax+' '+this.currency+' '+trans('em.exclusive')+')';
                    else
                        return total_tax+' '+this.currency+' ('+tax+' '+this.currency+' '+trans('em.inclusive')+')';
                }

            return 0;
        },

        // count total price
        totalPrice(){
            if(this.quantity != null || this.quantity.length > 0)
            {
                let amount;
                let tax;
                let total_tax ;
                this.quantity.forEach(function(value, key) {
                    total_tax               = 0;
                    this.total_price[key]   = [];

                    //CUSTOM
                    if(this.tickets[key].is_donation <= 0){

                        amount                  = (parseFloat(value * this.tickets[key].price)).toFixed(2);
                    }else if( value > 0 && this.tickets[key].is_donation > 0){

                        amount                  = (parseFloat(value * this.tickets[key].price)).toFixed(2);
                    }else if(value <= 0 && this.tickets[key].is_donation > 0){
                        // don't make donation Zero by default
                        // this.$parent.tickets[key].price = 0;
                        this.$parent.tickets[key].price = this.tickets[key].donation_price;
                        this.is_donation[key] = 0;
                        amount = 0;
                    }else if(value > 0 && this.tickets[key].is_donation > 0){
                        // Initialize donation value with minimum price when quantity becomes > 0
                        if(this.is_donation[key] == undefined || this.is_donation[key] == '' || this.is_donation[key] == 0){
                            const minPrice = Number(this.ticket_price_unchanged[key].price);
                            this.is_donation[key] = minPrice.toFixed(2);
                            this.tickets[key].price = minPrice.toFixed(2);
                        }
                        amount = (parseFloat(value * this.tickets[key].price)).toFixed(2);
                    }
                    //CUSTOM

                    // amount                  = (parseFloat(value * this.tickets[key].price)).toFixed(2);

                    // when have no taxes set set total_price with actual ammount without taxes
                    if(Object.keys(this.total_price).length > 0)
                    {
                        this.total_price.forEach(function(v, k){

                            // if(Object.keys(v).length <= 0);
                            //CUSTOM
                            if(Object.keys(v).length <= 0 && !isNaN(v));
                            //CUSTOM
                                this.total_price[key] = amount;

                        }.bind(this))
                    }
                    if(this.tickets[key].taxes.length > 0 && amount > 0) {

                        this.tickets[key].taxes.forEach(function(tax_v, tax_k) {
                                    // in case of percentage
                            if(tax_v.rate_type == 'percent')
                            {
                                // in case of excluding
                                if(tax_v.net_price == 'excluding')
                                {
                                    tax = isNaN((amount * tax_v.rate)/100) ? 0 : (parseFloat((amount*tax_v.rate)/100)).toFixed(2);

                                    total_tax   =  parseFloat(total_tax) + parseFloat(tax);
                                }
                            }

                            // // in case of percentage
                            if(tax_v.rate_type == 'fixed')
                            {
                                tax   = parseFloat(value *tax_v.rate);

                                // // in case of excluding
                                if(tax_v.net_price == 'excluding')
                                    total_tax   = parseFloat(total_tax) + parseFloat(tax);

                            }

                        }.bind(this))
                    }

                    this.total_price[key] = (parseFloat(amount) + parseFloat(total_tax)).toFixed(2);

                }.bind(this));
            }
        },

        updateItem() {
            this.$emit('changeItem');
        },

        setDefaultQuantity() {
            // only set default value once
            var _this   = this;
            var promise = new Promise(function(resolve, reject) {
                // only set default value once
                if(_this.quantity.length == 1) {
                    _this.tickets.forEach(function(value, key) {
                        if(key == 0)
                            _this.quantity[key] = 0;
                        else
                            _this.quantity[key] = 0;

                    }.bind());
                }
                resolve(true);
            });

            promise.then(function(successMessage) {
                _this.totalPrice();
                _this.orderTotal();
                  /* CUSTOM start*/
                _this.resetPromocode();
                /* CUSTOM end*/
            }, function(errorMessage) {

            });
        },

        // count prise all booked tickets
        orderTotal() {
            this.total = 0
            if(Object.keys(this.total_price).length > 0)
            {
                this.total_price.forEach(function(value, key){


                    //CUSTOM
                    if(isNaN(value))
                        value = 0;
                    //CUSTOM

                    this.total = (parseFloat(this.total) + parseFloat(value)).toFixed(2);

                }.bind(this))

                return this.total;
            }
            return 0;
        },

        // total booked tickets
        bookedTicketsTotal() {
            let  total = 0
            if(this.quantity.length > 0)
            {
                this.quantity.forEach(function(value, key){
                    total = parseInt(total) + parseInt(value);

                }.bind(this))

                return total;
            }
            return 0;
        },

        defaultPaymentMethod() {
            // if not admin
            // total > 0
            // if(this.is_admin <= 0 && this.bookedTicketsTotal() > 0)
            //     this.payment_method = 1;

               //CUSTOM
            // if premium order & not-admin
            if(this.is_admin <= 0 && this.orderTotal() > 0 && (parseFloat(this.total) - parseFloat(this.promocode_reward)).toFixed(2) > 0)
                this.payment_method = default_payment_method;
            // if premium order & admin
            else if(this.is_admin >= 1 && this.orderTotal() > 0 && (parseFloat(this.total) - parseFloat(this.promocode_reward)).toFixed(2) > 0)
                this.payment_method = 'offline';
            else
                this.payment_method = default_payment_method;

            if(this.is_bulk > 0)
            {
                this.payment_method = 'offline';
            }

            // for free
            if((parseFloat(this.total) - parseFloat(this.promocode_reward)).toFixed(2) <= 0)
                this.payment_method = 'free';


            //CUSTOM
        },

        loginFirst() {
            window.location.href = route('eventmie.login_first');
        },
        signupFirst() {
            window.location.href = route('eventmie.signup_first');
        },

        // get customers

        getCustomers(loading, search = null){
            var postUrl     = route('eventmie.get_customers');
            var _this       = this;
            axios.post(postUrl,{
                'search' :search,
            }).then(res => {

                var promise = new Promise(function(resolve, reject) {

                    _this.options = res.data.customers;

                    resolve(true);
                })

                promise
                    .then(function(successMessage) {
                        loading(false);
                    }, function(errorMessage) {
                    //error handler function is invoked
                        console.log(errorMessage);
                    })
            })
            .catch(error => {
                let serrors = Vue.helpers.axiosErrors(error);
                if (serrors.length) {
                    this.serverValidate(serrors);
                }
            });
        },

        // v-select methods
        onSearch(search, loading) {
            loading(true);
            this.search(loading, search, this);
        },

        // v-select methods
        search: _.debounce((loading, search, vm) => {

            if(vm.validateEmail(search))
                vm.getCustomers(loading, search);
            else
                loading(false);

        }, 350),

        validateEmail(email) {
            const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        },

        //CUSTOM
        // stipe open modal
        stripePayment(bookings_data = null) {
           this.bookings_data = bookings_data;
           this.$refs.stripe.stripeCheckout();

        },

        //apply promocode
        applyPromocode(ticket_id =  null, index = null){

            if(this.register_user_id == null){
                this.showNotification('error', trans('em.please_login'));
                return true;
            }

            if((this.is_admin > 0 || this.is_organiser > 0) && this.customer == null){
                this.showNotification('error', trans('em.select_customer'));
                return true;
            }


            if(ticket_id != null && this.promocode[index] != null && this.promocode[index] != '' && this.promocode[index] != 'undefined'){
                axios.post(route('apply_promocodes'),{
                    'ticket_id' : ticket_id,
                    'promocode' : this.promocode[index],
                    'customer_id' : (this.is_customer > 0) ? this.register_user_id : this.customer_id,
                })
                .then(res => {
                    if(res.data.status > 0) {
                        console.log('success');

                        var _this   = this;
                        var promise = new Promise(function(resolve, reject) {
                            _this.ticket_promocodes[index] = res.data.promocode;
                            resolve(true);
                        });

                        promise
                        .then(function(successMessage) {
                            _this.promocodeReward();
                        }, function(errorMessage) {
                            console.log(errorMessage);
                        });

                        // success
                        this.pc_readonly[index]  = 1;

                        // promocode apply button text change
                        document.getElementById('pcb_'+index).innerHTML = trans('em.applied');

                        // error field set null
                        document.getElementById('pc_error_'+index).innerHTML = '';

                        // show promocode's reward
                        document.getElementById('pc_success_'+index).innerHTML = res.data.promocode.reward+
                        (res.data.promocode.p_type == 'fixed' ? this.currency : '%')+' OFF!';

                        // promocode input field readonly
                        document.getElementById('pc_'+index).readOnly = true;

                        // promocode apply button disable
                        document.getElementById('pcb_'+index).disabled = true;

                    } else {
                        console.log('error');
                        // error
                        this.pc_readonly[index]  = 0;

                        // promocode input field readonly
                        document.getElementById('pc_'+index).readOnly = false;

                        // error field set
                        document.getElementById('pc_error_'+index).innerHTML   = res.data.message;

                        //success message set null
                        document.getElementById('pc_success_'+index).innerHTML = '';

                        // promocode input field clear
                        document.getElementById('pc_'+index).value = '';

                        // promocode v-model value set null
                        this.promocode[index] = '';
                    }

                })
                .catch(error => {
                    Vue.helpers.axiosErrors(error);
                });
            }
        },

        // promocode' reward
        promocodeReward(){

            this.promocode_reward = 0;

            if(Object.keys(this.ticket_promocodes).length > 0){

                this.ticket_promocodes.forEach(function(value, key){
                    if(value != 'undefined' && value != '' && value != null) {

                        if(value.p_type == 'fixed'){

                            this.promocode_reward =  isNaN(parseFloat(this.promocode_reward) + parseFloat(value.reward)) ? this.promocode_reward :
                                                     (parseFloat(this.promocode_reward) + parseFloat(value.reward));
                        }
                        else {

                            // Apply percentage promocode on pre-tax subtotal (price x quantity)
                            let preTaxAmount = parseFloat(this.quantity[key] * this.tickets[key].price);
                            if(preTaxAmount > 0) {
                                this.promocode_reward = this.promocode_reward + (isNaN((preTaxAmount*value.reward)/100) ? this.promocode_reward : parseFloat((preTaxAmount*value.reward)/100));
                            }
                        }
                    }

                }.bind(this))
            }
            this.defaultPaymentMethod();
            return this.promocode_reward.toFixed(2);
        },

        // reset promocode fields
        resetPromocode(){

            this.quantity.forEach(function(value, key){

                if(Number(value) <= 0 || value == '' || value == 'undefined'  || value == null  ){

                    // promocode apply button disable
                    document.getElementById('pcb_'+key).disabled = false;

                    // promocode input field readonly
                    document.getElementById('pc_'+key).readOnly = false;

                    // success
                    this.pc_readonly[key]  = 1;

                    //clear field
                    this.promocode[key] = '';
                    document.getElementById('pc_'+key).value = '';

                    // promocode apply button text change
                    document.getElementById('pcb_'+key).innerHTML = trans('em.apply');

                    // error field set null
                    document.getElementById('pc_error_'+key).innerHTML = '';

                    // show promocode's reward
                    document.getElementById('pc_success_'+key).innerHTML = '';

                    // promocode input field readonly
                    document.getElementById('pc_'+key).readOnly = true;

                    // promocode apply button disable
                    document.getElementById('pcb_'+key).disabled = true;

                    this.ticket_promocodes[key] = '';
                }
                else{

                    if(this.promocode[key] == 'undefined' || this.promocode[key] == '') {

                        // promocode apply button disable
                        document.getElementById('pcb_'+key).disabled = false;

                        // promocode input field readonly
                        document.getElementById('pc_'+key).readOnly = false;

                        this.pc_readonly[key]  = 0;

                        document.getElementById('pc_'+key).value = '';

                        // promocode apply button text change
                        document.getElementById('pcb_'+key).innerHTML = trans('em.apply');

                        // error field set null
                        document.getElementById('pc_error_'+key).innerHTML = '';

                        // show promocode's reward
                        document.getElementById('pc_success_'+key).innerHTML = '';
                    }


                }

            }.bind(this))
        },

        timerOnSale(sale_start_date = null, sale_end_date = null){

            if(sale_start_date == null || sale_end_date == null)
                return true;

            var local_tz = Intl.DateTimeFormat().resolvedOptions().timeZone;

            var a    = this.userTimezone(sale_end_date, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY HH:mm:ss');
            var b    = moment().tz(local_tz).format('DD/MM/YYYY HH:mm:ss');
            var ms   = 0; // milliseconds

            if(moment(a,"DD/MM/YYYY HH:mm:ss") > moment(b,"DD/MM/YYYY HH:mm:ss")){
                ms = moment(a,"DD/MM/YYYY HH:mm:ss").tz(local_tz).diff(moment(b,"DD/MM/YYYY HH:mm:ss").tz(local_tz)); //milliseconds

            }

            return ms;
        },

        // create attenddes fields
        createFields(){

            this.tickets.forEach(function(v, k){
                this.name[k]    = [];
                this.phone[k]   = [];
                this.address[k] = [];
            }.bind(this))
        },

        // for input box
        isDonation(){

            if(this.tickets.length > 0)
            {
                this.tickets.forEach(function(value, key){
                    if(value.is_donation > 0 ){

                        if(this.is_donation[key] == undefined || this.is_donation[key] == '' || this.is_donation[key] == 0){
                            // Set default minimum price for donation tickets
                            const minPrice = Number(this.ticket_price_unchanged[key].price);
                            this.is_donation[key] = minPrice.toFixed(2);
                            this.total_price[key] = parseFloat(0);
                        }

                        this.$parent.tickets[key].price =  parseFloat(this.is_donation[key]).toFixed(2);

                        this.is_donation[key] = this.is_donation[key];

                    }

                }.bind(this))
            }
        },

        // for group button
        setDonationValue(index = null, price = 0){

            if(index == null)
                return true;

            if(this.tickets[index].is_donation > 0){

                var id                             = 'donation_'+index;
                document.getElementById(id).value  = parseFloat(price).toFixed(2);
                this.is_donation[index]            = parseFloat(price).toFixed(2);
                this.tickets[index].price          = parseFloat(price).toFixed(2);
                this.quantity[index]               = this.quantity[index];

                this.isDonation();
                this.totalPrice();
                this.orderTotal();
                this.$forceUpdate();
            }

        },


        // accept only numeric value
        NumbersOnly(evt) {
            var evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
                evt.preventDefault();;
            } else {
                return true;
            }
        },

                        //paystack payment
        PayStack(booking_data){
            this.$refs.pay_stack.PayStack(booking_data)
        },

        checkTicketQuantity() {
            let _this = this;
            console.log('q', this.quantity);
            this.quantity.every(function(value, key){

                if(Number(value) <= 0 || value == '' || value == 'undefined'  || value == null  ){
                    _this.show_checkout_button = false;
                 

                    return true;
                } else {
                    _this.show_checkout_button = true;
                    _this.show_checkout_timer = true
                    return false;
                }
            });
        },

        zoomIn(id){
            this.zoom += 0.1;
            document.getElementById(`seat-container_${id}`).style.transform = `scale(${this.zoom})`  ;

        },

        zoomOut(id){
            this.zoom -= 0.1;
			document.getElementById(`seat-container_${id}`).style.transform = `scale(${this.zoom})`;
        },

        zoomReset(id){
            this.zoom = 1;
            document.getElementById(`seat-container_${id}`).style.transform = `scale(${this.zoom})`;

        },

        reloadPage() {

            // Set a timeout to reload the page after a specified delay
            setTimeout(() => {
                location.reload();
                
            }, 479999);
        },

        setTicketPriceUnchanged: function() {
            this.ticket_price_unchanged = JSON.parse(JSON.stringify(this.tickets));
        },
      
        donationPriceSuggestion: function(price, multiply) {
            return price * multiply;
        },

        // validate donation amount to ensure minimum price
        validateDonationAmount(index) {
            const minPrice = parseFloat(this.ticket_price_unchanged[index].price);
            const currentValue = parseFloat(this.is_donation[index]);
            
            if (currentValue < minPrice) {
                this.is_donation[index] = minPrice.toFixed(2);
                this.setDonationValue(index, minPrice.toFixed(2));
            } else {
                this.setDonationValue(index, this.is_donation[index]);
            }
        },

        // initialize donation values with minimum price
        initializeDonationValues() {
            this.tickets.forEach((ticket, index) => {
                if (ticket.is_donation > 0) {
                    const minPrice = Number(this.ticket_price_unchanged[index].price);
                    this.is_donation[index] = minPrice.toFixed(2);
                    this.tickets[index].price = minPrice.toFixed(2);
                }
            });
        },

        // Ensure modal container is fully visible and scrolled to top
        scrollModalIntoView() {
            const container = this.$refs && this.$refs.modal_custom ? this.$refs.modal_custom : null;
            if (!container) {
                return;
            }

            // Reset internal scroll position to top
            if (typeof container.scrollTo === 'function') {
                container.scrollTo({ top: 0, behavior: 'auto' });
            } else {
                container.scrollTop = 0;
            }
            const isMobile = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 991px)').matches;
            const extraOffset = isMobile ? 700 : 500;
            if (typeof window !== 'undefined' && typeof window.scrollTo === 'function') {
                window.scrollTo({ top: extraOffset, behavior: 'smooth' });
            }
        }

        //CUSTOM

    },

    watch: {
        quantity: function () {
            //CUSTOM
            this.checkTicketQuantity();
            this.isDonation();
            //CUSTOM

            this.totalPrice();
            this.orderTotal();
            this.defaultPaymentMethod();

            /* CUSTOM */
            this.resetPromocode();
            this.promocodeReward();

            /* CUSTOM */
            this.$nextTick(() => {
                this.scrollModalIntoView();
            });
        },
        tickets: function() {
            //CUSTOM
            this.checkTicketQuantity();
            this.isDonation();
            this.initializeDonationValues();
            //CUSTOM

            this.totalPrice();
            this.orderTotal();
        },

        // active when customer search
        customer: function () {
            this.customer_id = this.customer != null ?  this.customer.id : null;
        },


        // CUSTOM
        is_donation: function() {
            this.isDonation();
            this.totalPrice();
            this.orderTotal();
        },

        show_checkout_timer: function() {
            
            if(this.show_checkout_timer) {
                this.reloadPage();
            }

        },

        // CUSTOM
        register_modal: function (val) {
            if (val > 0) {
                this.$nextTick(() => {
                    this.scrollModalIntoView();
                });
            }
        },

    },

    mounted() {
        this.openModal = true;
        this.setDefaultQuantity();
        this.defaultPaymentMethod();
         //  CUSTOM
        this.createFields();

        //  CUSTOM
        this.setTicketPriceUnchanged();
        this.initializeDonationValues();
    },
}
</script>

<style scoped>
.unclickable{
    pointer-events: none; 
    opacity: 0.5
}
.preserve-whitespace {
    white-space: pre-line;
}
</style>

