Vue.component('header-1', {
    delimiters: ['[[', ']]'],
    data: function () {
        return {
        }
    },
    template: `<div class="tickets_form_nav"><a href="#" class="active">Available races</a><span>Passenger Information</span><span>Seat selection</span><span>Order informations</span></div>`
});
Vue.component('header-2', {
    delimiters: ['[[', ']]'],
    data: function () {
        return {
        }
    },
    template: `<div class="tickets_form_nav"><a href="#">Available races</a><a href="#" class="active">Passenger Information</a><span>Seat selection</span><span>Order informations</span></div>`
});
Vue.component('header-3', {
    delimiters: ['[[', ']]'],
    data: function () {
        return {
        }
    },
    template: `<div class="tickets_form_nav"><a href="#">Available races</a><a href="#">Passenger Information</a><a href="#" class="active">Seat selection</a><span>Order informations</span></div>`
});
Vue.component('header-4', {
    delimiters: ['[[', ']]'],
    data: function () {
        return {
        }
    },
    template: `<div class="tickets_form_nav"><a href="#">Available races</a><a href="#">Passenger Information</a><a href="#">Seat selection</a><a href="#" class="active">Order informations</a></div>`
});
Vue.component('step-btn', {
    delimiters: ['[[', ']]'],
    props: ['step', 'destination', 'is_added', 'next_text', 'prev_text', 'passengers'],
    data: function () {
        return {
        }
    },
    methods:{
        show_next: function(){
            console.log(this.passengers.length, this.passengers)
            if(this.step==0 && this.destination){
                return true;
            }
            if(this.step==1 && this.is_added){
                return true;
            }
            if(this.step==2 && this.destination.passengers.length && this.passengers.length == this.destination.passengers.length){
                return true;
            }
            if(this.step==3){
                return true;
            }
            return false;
        }
    },
    template: `
    <div class="tickets_form_btns">
        <a v-if="step!=0" v-on:click="$parent.prev_step($event)" href="#" class="btn btn_left"><span><i class="fal fa-chevron-left"></i></span>[[prev_text]]</a>
        <a v-if="show_next()" v-on:click="$parent.next_step($event)" href="#" class="btn btn_right">[[next_text]]<span><i class="fal fa-chevron-right"></i></span></a>
    </div>
    `
});
Vue.component('step-price', {
    delimiters: ['[[', ']]'],
    props: ['step', 'computed_price'],
    data: function () {
        return {
        }
    },
    template: `
    <div v-if="step>=1" class="tickets_form_data">
        <ul>
            <li><span>Qiymət:</span><h2>[[computed_price.toFixed(2)]] AZN</h2></li>
        </ul>
    </div>
    `
});
Vue.component('step-data', {
    delimiters: ['[[', ']]'],
    props: ['date', 'destination', 'passengers_size', 'seets'],
    data: function () {
        return {
        }
    },
    template: `
    <div class="tickets_form_data">
        <ul>
            <li v-if="destination"><span>Direction:</span><h4>[[destination.route]]</h4></li>
            <li v-if="date"><span>Departure date:</span><h4>[[date]]</h4></li>
            <li v-if="destination"><span>Departure time:</span><h4>[[destination.time]]</h4></li>
            <li v-if="destination && destination.passengers.length"><span>Number of passengers:</span><h4>[[destination.passengers.length]]</h4></li>
            <li v-if="destination"><span>Bus:</span><h4>[[destination.model]]</h4></li>
            <li v-if="destination && destination.passengers.length"><span>Seats:</span><h4>[[seets]]</h4></li>
        </ul>
    </div>
    `
});
Vue.component('step-1', {
    delimiters: ['[[', ']]'],
    props: ['loading', 'destinations', 'is_full_added'],
    data: function () {
        return {
        }
    },
    mounted: function(){
    },
    template: `
    <div>
    <div v-if="!is_full_added" class="sits_info">
        <div class="tickets_timer">
            <span>Enter the user information to continue</sapn> <a href="#" v-on:click="$parent.goto_account($event)">User account</a>
        </div>
    </div>
    <div v-if="loading" class="loader" style="position:relative; margin-top:40px;top:0;"><svg class="svg-inline--fa fa-spinner fa-w-16" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="spinner" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M288 32c0 17.673-14.327 32-32 32s-32-14.327-32-32 14.327-32 32-32 32 14.327 32 32zm-32 416c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm256-192c0-17.673-14.327-32-32-32s-32 14.327-32 32 14.327 32 32 32 32-14.327 32-32zm-448 0c0-17.673-14.327-32-32-32S0 238.327 0 256s14.327 32 32 32 32-14.327 32-32zm33.608 126.392c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm316.784 0c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zM97.608 65.608c-17.673 0-32 14.327-32 32 0 17.673 14.327 32 32 32s32-14.327 32-32c0-17.673-14.327-32-32-32z"></path></svg></div>
    <ul v-if="!loading" class="timetable_table">
        <li class="timetable_head">
            <span>Departure time</span><span>Route</span><span>Bus brand</span><span>Seats</span><span>Carrier</span><span>Free seats</span>
        </li>
        <li v-for="dest in destinations" class="timetable_item">
            <a href="#" v-bind:class="{active: dest.selected}" v-on:click="$parent.select_destionation($event, dest)">
                <span>[[dest.time]]</span><span>[[dest.route]]</span><span>[[dest.model]]</span><span>[[dest.capacity]]</span><span>[[dest.carrier]]</span><span>[[dest.free_seets]]</span></a>
        </li>
    </ul>
    </div>
    `
});

Vue.component('step-2', {
    delimiters: ['[[', ']]'],
    props: ['passenger', 'index', 'passengers'],
    data: function () {
        return {
            user: {
                name: '',
                cart_id: '',
                gender: 1
            }
        }
    },
    mounted: function(){
        $('.selectpicker').selectpicker();
    },
    watch: {
        passenger: {
            handler: function() {
              this.$emit('newdata', []);
            },
            deep: true
        }
    },
    template: `
        <div class="single_ticket_form">
            <div class="tickets_field tickets_user_name">
                <label>Sərnişinin S.A.A</label>
                <input type="text" placeholder="Please enter your full name" v-model="passenger.name" />
            </div>
            <div class="tickets_field tickets_user_doc">
                <label>Şəxsiyyəti təsdiq edən sənəd</label>
                <input type="text" placeholder="Please enter your ID number" v-model="passenger.cart_id" />
            </div>
            <div class="tickets_user_type">
                <label>Cins / Tip</label>
                <div class="select_wrap">
                    <select class="selectpicker form-control" data-hide-disabled="true" v-model="passenger.gender">
                        <option value="1">Man</option>
                        <option value="2">Woman</option>
                        <option value="3">Child</option>
                    </select>
                </div>
            </div>
        </div>
    `
});

Vue.component('step-3', {
    delimiters: ['[[', ']]'],
    props: ['structure', 'passengers', 'seets'],
    data: function () {
        return {
            element_id: '',
        }
    },
    mounted: function(){
        $('.seet_number').tooltip('hide');
    },
    methods: {
        select: function(col, seet){
            this.$parent.select_seat(col, seet);
            // console.log(55)
        },
        gender_name: function(gender){
            return this.$parent.genders_name[gender].slice(0, 1);
        },
        get_seat_text: function(col){
            for(i=0; i<this.passengers.length; i++){
                if(col.seat_no*1 == this.passengers[i].seat*1){
                    return this.gender_name(this.passengers[i].gender-1);
                }
            }
            if(col.seat_no*1 > 0 && col.seat_no*1 < 5){
                return this.$parent.genders_name[0].slice(0, 1);
            }
            return col.seat_no;
        },
    },
    template: `
    <div>
        <div class="sits_info">
            <div class="quantity">
            Seats must be selected within 5 minutes!<br>Otherwise, the transaction will be canceled!
            </div>
            <div class="sits_desk_wrap">
                <div class="sits_desk sit_choosen">
                    <span>x</span><h6>selected seat</h6></div>
                <div class="sits_desk sit_free">
                    <span>x</span><h6>free seat</h6></div>
                <div class="sits_desk sit_busy">
                    <span>x</span><h6>purchased</h6></div>
            </div>
        </div>
        <div class="train_wrap">
            <div class="sits top_sits">
                <div v-for="cols in structure.top" class="sits_wrap">
                    <span class="seet_number" v-for="col in cols" :key="col.id" v-bind:id="'seat-'+col.seat_no" v-bind:class="{empty: !col.seat_no, disabled: col.disabled, active: col.selected}" v-on:click="select(col, col.seat_no)" class="seat-tooltip">[[get_seat_text(col)]]</span>
                </div>
            </div>
            <div class="sits bottom_sits">
                <div v-for="cols in structure.bottom" class="sits_wrap">
                    <span class="seet_number" v-for="col in cols" :key="col.id" v-bind:id="'seat-'+col.seat_no" v-bind:class="{empty: !col.seat_no, 'disabled': col.disabled, active: col.selected }" v-on:click="select(col, col.seat_no)" class="seat-tooltip">[[get_seat_text(col)]]</span>
                </div>
            </div>
        </div>
    </div>
    `
});
Vue.component('step-4', {
    delimiters: ['[[', ']]'],
    props: ['destination'],
    data: function () {
        return {
        }
    },
    mounted: function(){
    },
    methods: {
        gender_name: function(gender){
            return this.$parent.$data.genders_name[gender];
        },
        remove_passenger: function(event){
            this.$parent.remove_passenger(event);
            this.$parent.prev_step(event);
        }
    },
    template: `
    <div>
        <div>
            <div class="sits_info sits_info_cta">
                <div class="tickets_timer">If within span class="tickets_time">5</span><span> minutes the payment is not made, the order will be canceled!</span></div>
                <div class="ticket_cancel">
                    <button v-on:click="remove_passenger($event)"><i class="fal fa-window-close"></i></button> Sifarişi ləğv et
                </div>
            </div>
            <div class="ticket_blank">
                <div class="ticket_block_wrap" v-for="passenger in destination.passengers">
                    <div class="ticket_block"><span class="ticket_label">Full name of the passenger</span><span class="ticket_info">[[passenger.name]]</span></div>
                    <div class="ticket_block"><span class="ticket_label">Identity document</span><span class="ticket_info">Ş.V.  [[passenger.cart_id]]</span></div>
                    <div class="ticket_block"><span class="ticket_label">Gender / Type</span><span class="ticket_info">[[gender_name(passenger.gender*1-1)]]</span></div>
                    <div class="ticket_block"><span class="ticket_label">Seat</span><span class="ticket_info">[[passenger.seat]]</span></div>
                </div>
            </div>
        </div>
    </div>
    `
});