function setCookie(cname, cvalue, excmins) {
    var d = new Date();
    d.setTime(d.getTime() + (excmins * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
function getCookieValue(a) {
    var b = document.cookie.match('(^|[^;]+)\\s*' + a + '\\s*=\\s*([^;]+)');
    return b ? b.pop() : '';
}
var login_url = '/en/accounts/signin';
var forgot_url = '/en/accounts/forgot';
var usernamePlaceholder = 'Enter your username';
var emailPlaceholder = 'Email';
var passwordPlaceholder = 'Enter your password';
var forgotTxt = 'Forgot password?';
var backForgot = 'Remembered';
var signinTxt = 'Sign in';
var sendForgot = 'Reset password';
var ticket_form = null;
$(document).ready(function () {
    $.ajaxSetup({
        headers: {
           'X-CSRFToken': $('meta[name="csrf-token"]').attr('content')
        }
     });

    account_form = new Vue({
        delimiters: ['[[', ']]'],
        el: '#account_form',
        data: {
            new_password: false
        },
        mounted: function(){
            $("#save-user-account").on("click", function (e) {
                e.preventDefault();
                $("#account_form").submit()
            });
        },
        methods: {
            open_password: function(event){
                if(event){
                    event.preventDefault();
                    event.stopImmediatePropagation();
                }
                this.new_password = true;
            }
        }
    });
    ticket_form = new Vue({
        delimiters: ['[[', ']]'],
        el: '#ticket_form',
        data: {
            is_authenticated: 'False' == 'True',
            region: '',
            date: '',
            passenger: '',
            to_redirect: false,
            loading: false
        },
        methods: {
            passenger_validate: function(){
                return this.passenger*1>0 && this.passenger*1<5
            },
            send: function () {
                if(!this.region || !this.date || !this.passenger){
                    if(!this.region){
                        $('.select2').tooltip({title:'Təyinat məntəqəsini seçin!', placement: 'bottom', delay: { "show": 100000, "hide": 100000 }}).tooltip('show')
                    }
                    if(!this.date){
                        $('.gj-datepicker').tooltip({title:'Choose the departure date!', placement: 'bottom', delay: { "show": 100000, "hide": 100000 }}).tooltip('show')
                    }
                    if(!this.passenger){
                        $('.field_people').tooltip({title:'Choose the number of passengers!', placement: 'bottom', delay: { "show": 100000, "hide": 100000 }}).tooltip('show')
                    }else if(!this.passenger_validate()){
                        $('.field_people').tooltip({title:'Passengers can be up to 4 people!', placement: 'bottom', delay: { "show": 100000, "hide": 100000 }}).tooltip('show')
                    }
                    return;
                }
                this.loading = false;
                var that = this;
                $.ajax({
                    url: '/en/accounts/destinations',
                    type: 'post',
                    cache: false,
                    async: false,
                    dataType: 'json',
                    data: {
                        seets: this.passenger,
                        date: this.date,
                        region: this.region
                    },
                    success: function (data, textStatus) {
                        if(data.destinations.length>0){
                            that.loading = true;
                            setCookie('ticket_region', that.region, 120);
                            setCookie('ticket_date', that.date, 120);
                            setCookie('ticket_passenger', that.passenger, 120);
                            window.location.href = '/en/accounts/ticketprocess';
                        }else{
                            this.loading = true;
                            alert('No tickets were found for selected parameters'+"\n\n"+data.info);
                        }
                    }
                });
            }
        },
        mounted: function(){
            this.region = getCookie('ticket_region');
            this.date = getCookie('ticket_date');
            this.passenger = getCookie('ticket_passenger');
            $('.select2-city').val(this.region);
            $('.select2-city').select2({ width: '100%', placeholder: "Destination"}).on("select2:open", function (e) { $('.select2').tooltip('hide'); });
            $('.select2-city').on('select2:select', function (e) {
                var data = e.params.data;
                ticket_form.region = data.id
            });
            var datepicker = $('#datepicker').datepicker({
                format: "dd.mm.yyyy",
                minDate: function () {
                    var date = new Date();
                    //date.setDate(date.getDate() + 1);
                    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
                },
                maxDate: function () {
                    var date = new Date();
                    date.setDate(date.getDate() + 10);
                    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
                },
                change: function (e) {
                    ticket_form.date = this.value
                },
                open: function (e) {
                    $('.gj-datepicker').tooltip('hide');
                }
            });
        },
        created: function () {
        },
        watch: {
            passenger: function(val) {
                $('.field_people').tooltip('hide');

                if(!this.passenger_validate()){
                    this.passenger = ''
                }
            }
        }
    });
    
    ticket_order = new Vue({
        delimiters: ['[[', ']]'],
        el: '#ticket_order',
        data: {
            is_authenticated: 'False' == 'True',
            is_full_added: 'False' == 'True',
            texts: ['Available races', 'Passenger Information', 'Seat selection', 'Order informations', 'Payment'],
            genders_name: ['Kişi', 'Qadın', 'Uşaq'],
            next_text: '',
            prev_text: '',
            step: 0,
            loading_step1: true,
            passengers_size: 0,
            passengers:[],
            is_added: false,
            region: 0,
            date: '',
            destinations: [],
            destination: '',
            seets: [],
            price: 0.0,
            computed_price: 0.0,
            form_data: []
        },
        created: function(){
            this.next_text = this.texts[this.step+1];
            this.passengers_size = ticket_form.passenger*1;
            var i = 0;
            var that = this;
            while(i++<this.passengers_size){
                this.passengers.push({id: i, name:'', cart_id: '', gender:1, seat:0, dsid: 0, rrid: 0, toString: function(){return this.seat;} });
            }
            this.region = ticket_form.region*1;
            this.date = ticket_form.date;
            var that = this;
            $.ajax({
                url: '/en/accounts/destinations',
                type: 'post',
                cache: false,
                async: false,
                dataType: 'json',
                data: {
                    seets: this.passengers_size,
                    date: this.date,
                    region: this.region
                },
                success: function (data, textStatus) {
                    if(data.destinations){
                        that.loading_step1 = false;
                        that.destinations = data.destinations;
                        that.price = data.price;
                        that.computing_price();
                    }
                }
            });
        },
        mounted() {
        },
        watch: {
        },
        methods: {
            get_cols_all: function(){
                var structure = this.destination.bus_structure
                var cols = []
                for (i = 0; i < structure.top.length; i++) {
                    var elements = structure.top[i];
                    $.each(elements, function(key, value) {
                        if(value.id){
                            cols.push(value);
                        }
                    });
                }
                for (i = 0; i < structure.bottom.length; i++) {
                    var elements = structure.bottom[i];
                    $.each(elements, function(key, value) {
                        if(value.id){
                            cols.push(value);
                        }
                    });
                }
                return cols;
            },
            calc_seats: function(){
                var seats = [];
                if(this.destination){
                    for (let i = 0; i < this.destination.passengers.length; i++) {
                        const pass = this.destination.passengers[i];
                        seats.push(pass.seat);
                    }
                }
                return seats.join(', ')
            },
            payment: function(event){
                // window.location.href = '/en/order/payment';
                var that = this;
                $.ajax({
                    url: '/en/order/payment',
                    type: 'post',
                    cache: false,
                    async: false,
                    dataType: 'json',
                    data: {
                        raceid: that.destination.id,
                    },
                    success: function (data, textStatus) {
                        if(data.code == 200){
                            that.form_data = data.data;
                            Vue.nextTick(function () {
                                // that.remove_passenger(event);
                                $('#payment-form').submit();
                            });
                        }else if(data.code == 404){
                            alert('ATTENTION !!! Your order has been canceled because the session has expired! The session time is calculated from the first seat selection and should not exceed 5 minutes!');
                            
                        }else{
                            alert('Error, Please try again later.');
                            that.remove_passenger(event);
                            that.prev_step(event);
                        }
                    }
                });
            },
            remove_passenger: function(event){
                event.preventDefault();
                var that = this;
                console.log('remove_passenger')
                $.ajax({
                    url: '/en/accounts/del_all_seat',
                    type: 'post',
                    cache: false,
                    async: false,
                    dataType: 'json',
                    data: {
                        raceid: that.destination.id,
                    },
                    success: function (data, textStatus) {
                        if(data.code == 200){
                            var passengers = [];
                            for(i=0; i<that.destination.passengers.length; i++){
                                passengers.push(that.destination.passengers[i])
                            }
                            that.destination.passengers = [];
                            that.destination = JSON.parse(JSON.stringify(that.destination));
            
                            var cols_all = that.get_cols_all();
                            for(i=0; i<cols_all.length; i++){
                                cols_all[i].selected = false;
                            }
                            that.form_data = [];
                        }else{
                            alert('Error, Please try again later.')
                        }
                    }
                });
            },
            select_seat: function(col, seat){
                var that = this;
                function takeSeat(i){
                    $.ajax({
                        url: '/en/accounts/take_seat',
                        type: 'post',
                        cache: false,
                        async: false,
                        dataType: 'json',
                        data: {
                            raceid: that.destination.id,
                            seat_no: seat,
                            gender: that.passengers[i].gender,
                            destinationid: that.destination.dsid,
                            passnames: that.passengers[i].name,
                            passdocs: that.passengers[i].cart_id,
                            racedt: that.destination.date+' 00:00:00',
                            vhid: that.destination.vhid
                        },
                        success: function (data, textStatus) {
                            if(data.code == 200){
                                col.selected = true;
                                col.id += '1';
                                col.selected_gender = that.genders_name[that.passengers[i].gender-1];
                                that.passengers[i].seat = seat;
                                that.destination.passengers.push(that.passengers[i]);
                                that.destination = JSON.parse(JSON.stringify(that.destination));
                                that.$forceUpdate();
                            }else if(data.code == 423){
                                col.disabled = true;
                                col.selected = false;
                                col.id += '1';
                                col.seat_no = data.gender;
                                alert('This seat is already booked. Please choose another seat')
                            }else{
                                alert('Error, Please try again later.')
                            }
                        }
                    });
                }
                $('.seat-tooltip').tooltip('dispose');
                var title = '';
                var is_show = false;
                if(col.selected){
                    title = '<a href="#" class="select_seet col-'+col.id+'">Return the seat</a><br>';
                    $('#seat-'+seat).tooltip({title:'<div class="select_seet_container">'+title+'</div>', html: true, placement: 'bottom', delay: { "show": 15000, "hide": 15000 }}).tooltip('show')
                }else if(!col.disabled){
                    var is_show = false;
                    for (let i = 0; i < this.passengers.length; i++) {
                        const pas = this.passengers[i];
                        var is_in = false;
                        for (let j = 0; j < this.destination.passengers.length; j++) {
                            if(pas.id == this.destination.passengers[j].id){
                                is_in = true;
                            }
                        }
                        if(!is_in){
                            title += '<a href="#" class="select_seet '+col.id+'-'+i+'">'+pas.name+'</a><br>';
                            is_show = true;
                        }
                    }
                    if(is_show){
                        $('#seat-'+seat).tooltip({title:'<div class="select_seet_container">'+title+'</div>', html: true, placement: 'bottom', delay: { "show": 15000, "hide": 15000 }}).tooltip('show')
                    }
                }
                if(is_show || col.selected)
                Vue.nextTick(function () {
                    var his = this;
                    $('.select_seet').unbind();
                    $('.col-'+col.id).on('click', function(e){
                        e.preventDefault();
                        $('.seat-tooltip').tooltip('dispose');


                        $.ajax({
                            url: '/en/accounts/del_seat',
                            type: 'post',
                            cache: false,
                            async: false,
                            dataType: 'json',
                            data: {
                                raceid: that.destination.id,
                                seat_no: seat,
                            },
                            success: function (data, textStatus) {
                                if(data.code == 200){
                                    col.selected_gender = '';
                                    col.selected = false;
                                    col.id += '1';
                                    // col = JSON.parse(JSON.stringify(col));
                                    var passengers = [];
                                    var d_passengers = JSON.parse(JSON.stringify(that.destination.passengers));
                                    that.destination.passengers = JSON.parse(JSON.stringify([]));
                                    for(i=0; i<d_passengers.length; i++){
                                        if(d_passengers[i].seat*1 != col.seat_no*1){
                                            that.destination.passengers.push(d_passengers[i])
                                        }
                                    }
                                    that.destination = JSON.parse(JSON.stringify(that.destination));
                                    that.$forceUpdate();
                                }else if(data.code == 404){
                                    col.selected = false;
                                    col.seat_no = seat;
                                    col.id += '1';
                                    alert('The operation has been canceled. Please select again.')
                                }else{
                                    alert('Error, Please try again later.')
                                }
                            }
                        });
                    });
                    for (let i = 0; i < that.passengers.length; i++) {
                        $('.'+col.id+'-'+i).unbind();
                        $('.'+col.id+'-'+i).on('click', function(e){
                            e.preventDefault();
                            $('.seat-tooltip').tooltip('dispose');

                            $.ajax({
                                url: '/en/accounts/take_seat',
                                type: 'post',
                                cache: false,
                                async: false,
                                dataType: 'json',
                                data: {
                                    raceid: that.destination.id,
                                    seat_no: seat,
                                    gender: that.passengers[i].gender,
                                    destinationid: that.destination.dsid,
                                    passnames: that.passengers[i].name,
                                    passdocs: that.passengers[i].cart_id,
                                    racedt: that.destination.date+' 00:00:00',
                                    vhid: that.destination.vhid
                                },
                                success: function (data, textStatus) {
                                    if(data.code == 200){
                                        col.selected = true;
                                        col.id += '1';
                                        col.selected_gender = that.genders_name[that.passengers[i].gender-1];
                                        that.passengers[i].seat = seat;
                                        that.destination.passengers.push(that.passengers[i]);
                                        that.destination = JSON.parse(JSON.stringify(that.destination));
                                        that.$forceUpdate();
                                    }else if(data.code == 423){
                                        col.disabled = true;
                                        col.selected = false;
                                        col.id += '1';
                                        col.seat_no = data.gender;
                                        alert('This seat is already booked. Please choose another seat')
                                    }else{
                                        alert('Error, Please try again later.')
                                    }
                                }
                            });
                        });
                    }
                    
                });
            },
            unselect_seat: function(col, seat){
                
            },
            goto_account: function(event){
                if(event){
                    event.preventDefault();
                    if(this.is_authenticated){
                        window.location.href = '/en/accounts/';
                    }else{
                        $(".link_acc.auth-link").trigger("click");
                    }
                    
                }
            },
            computing_price: function(){
                var price = 0.0;
                var man = 0,
                woman=0,
                child=0;
                for (let i = 0; i < this.passengers.length; i++) {
                    const el = this.passengers[i];
                    if(el.gender*1 == 1) man++;
                    if(el.gender*1 == 2) woman++;
                    if(el.gender*1 == 3) child++;
                }
                price = (man+woman)*this.price;
                price += child*(this.price/2);
                this.computed_price = price;
            },
            passengers_is_added: function(){
                if(this.step == 1){
                    for (let i = 0; i < this.passengers.length; i++) {
                        const passenger = this.passengers[i];
                        if(!passenger.name || !passenger.cart_id){
                            return false;
                        }
                        for (let j = 0; j < this.passengers.length; j++) {
                            const passenger2 = this.passengers[j];
                            if(passenger.id == passenger2.id) continue;
                            if(passenger.cart_id.replace(/ /g, '') == passenger2.cart_id.replace(/ /g, '')){
                                return false;
                            }
                        }
                    }
                }
                return true;
            },
            handleData: function(e) {
                // [index, name, cart_id, gender] = e;
                // this.passengers[index] = {
                //     name: name,
                //     cart_id: cart_id,
                //     gender: gender
                // };
                this.is_added = this.passengers_is_added();
                this.computing_price();
            },
            select_destionation: function(event, destination){
                if(event){
                    event.preventDefault();
                    if(this.is_authenticated){
                        if(!this.is_full_added){
                            window.location.href = '/en/accounts/';
                            return ;
                        }
                    }else{
                        $(".link_acc.auth-link").trigger("click");
                        return ;
                    }
                    this.destination = destination;
                    
                    for (let i = 0; i < this.destinations.length; i++) {
                        const dest = this.destinations[i];
                        if(dest.id == destination.id){
                            dest.selected = true;
                        }else{
                            dest.selected = false;
                        }
                    }
                    this.next_step(event);
                }

                // $('.timetable_item a').on('click', function (e) {
                    
                //     $('.timetable_item a').removeClass('active');
                //     $(this).addClass('active');
                // });
            },
            goto_step: function(step){
                this.step = step;
            },
            next_step: function(event){
                $('.seat-tooltip').tooltip('dispose');
                if (event) {
                    event.preventDefault();
                    // event.stopImmediatePropagation()
                }
                if(this.step < 3){
                    this.prev_text = this.texts[this.step]
                    this.step++;
                    this.next_text = this.texts[this.step+1]
                }else{
                    this.payment(event);
                }
                
            },
            prev_step: function(event){
                $('.seat-tooltip').tooltip('dispose');
                if (event) {
                    event.preventDefault();
                    // event.stopImmediatePropagation()
                }
                if(this.step > 0){
                    this.next_text = this.texts[this.step]
                    this.step--;
                    this.prev_text = this.texts[this.step-1]

                    if(this.step == 1){
                        return this.remove_passenger(event);
                    }
                }
            }
        }
    });
    singin_form = new Vue({
        delimiters: ['[[', ']]'],
        el: '#singin_form',
        data: {
            username: '',
            usernamePlaceholder: usernamePlaceholder,
            usernameError: false,
            password: '',
            passwordPlaceholder: passwordPlaceholder,
            passwordError: false,
            remember_me: true,
            forgot_password: false,
            forgotTxt: forgotTxt,
            signinTxt: signinTxt,
            redirect: true,
            fetching: false,
            forgotStatus: 0,
            forgotResult: ""
        },
        methods: {
            forgot_password_func: function () {
                if (this.forgot_password) {
                    this.forgot_password = false;
                    this.forgotTxt = forgotTxt;
                    this.signinTxt = signinTxt;
                    this.usernamePlaceholder = usernamePlaceholder;
                    this.usernameError = false;
                    this.username = '';
                    this.fetching = false;
                    this.forgotStatus = 0;
                } else {
                    this.forgot_password = true;
                    this.forgotTxt = backForgot;
                    this.signinTxt = sendForgot;
                    this.usernamePlaceholder = emailPlaceholder;
                    this.usernameError = false;
                    this.username = '';
                    this.passwordPlaceholder = passwordPlaceholder;
                    this.passwordError = false;
                    this.password = '';
                    this.fetching = false;
                    this.forgotStatus = 0;
                }
            },
            send: function () {
                var that = this;
                console.log(this.fetching, that.forgot_password ? forgot_url : login_url)
                if(this.fetching) return;
                this.usernameError = false;
                this.passwordError = false;
                if(this.username == ''){
                    this.usernameError = true;
                    return;
                }
                if(!this.forgot_password){
                    if(this.password == ''){
                        this.passwordError = true;
                        return;
                    }
                }
                this.fetching = true;
                console.log(this.fetching, that.forgot_password ? forgot_url : login_url)
                $.ajax({
                    url: that.forgot_password ? forgot_url : login_url,
                    type: 'post',
                    cache: false,
                    async: false,
                    dataType: 'json',
                    data: {
                        username: this.username,
                        password: this.password,
                        redirect: that.redirect
                    },
                    success: function (data, textStatus) {
                        that.fetching = false;
                        console.log(!data.error)
                        if (data.error) {
                            that.usernameError = false;
                            that.passwordError = false;
                            if (data.error.username) {
                                that.usernameError = true;
                                that.username = '';
                                that.usernamePlaceholder = data.error.username;
                            }
                            if (data.error.passwd) {
                                that.password = '';
                                that.passwordPlaceholder = data.error.passwd;
                                that.passwordError = true;
                            }
                        }
                        if (data.redirect) {
                            // if(ticket_form.to_redirect){
                            //     ticket_form.is_authenticated = true;
                            //     ticket_form.send();
                            //     return;
                            // }
                            that.usernameError = false;
                            that.passwordError = false;
                            window.location.href = data.redirect;
                        }
                        if(data.code){
                            that.forgotStatus = 1;
                            if(data.code == 200){
                                that.forgotResult = "Rules for updating your password have been sent to your e-mail address";
                            }else if(data.code = 404){
                                that.forgotResult = "Error, try it out a bit later!";
                            }
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        that.fetching = false;
                        that.forgotStatus = 1;
                        that.forgotResult = "Error, try it out a bit later!";
                        // console.log('Error ', xhr.responseText)
                    }
                });
    
            }
        }
    });
    
    singup_form = new Vue({
        delimiters: ['[[', ']]'],
        el: '#singup_form',
        data: {
            emailPlaceholder: 'Email',
            email: '',
            emailError: false,
            password: '',
            passwordPlaceholder: 'Password',
            passwordError: false,
            username: '',
            usernamePlaceholder: 'Username',
            usernameError: false,
            redirect: true,
        },
        methods: {
            send: function () {
                if (this.username == '') {
                    this.usernameError = true;
                    return;
                } else {
                    this.usernameError = false;
                }
                var that = this;
                $.ajax({
                    url: '/en/accounts/signup',
                    type: 'post',
                    cache: false,
                    async: false,
                    dataType: 'json',
                    data: {
                        email: this.email,
                        password1: this.password,
                        username: this.username,
                        redirect: that.redirect
                    },
                    success: function (data, textStatus) {
                        if (data.error) {
                            if (that.emailError) {
                                tusername = ''
                                that.emailError = false;
                            }
                            if (that.passwordError) {
                                that.passwordPlaceholder = '';
                                that.passwordError = false;
                            }
                            if (that.usernameError) {
                                that.usernamePlaceholder = '';
                                that.usernameError = false;
                            }
                            if (data.error.username) {
                                that.username = '';
                                that.usernamePlaceholder = data.error.username
                                that.usernameError = true;
                            }
                            if (data.error.email) {
                                that.email = '';
                                tusername = data.error.email
                                that.emailError = true;
                            }
                            if (data.error.passwd) {
                                that.password = '';
                                that.passwordPlaceholder = data.error.passwd
                                that.passwordError = true;
                            }
                        }
                        if (data.redirect) {
                            // if(ticket_form.to_redirect){
                            //     ticket_form.is_authenticated = true;
                            //     ticket_form.send();
                            //     return;
                            // }
                            that.emailError = false;
                            that.passwordError = false;
                            window.location.href = data.redirect;
                        }
                    }
                });
    
            }
        }
    });
    
    

});