Vue.component('course-selector2',{
    props: ['courses','value'],
    template: '<select style="width:290px;" class="custom-select" v-model="course"><option value="">Select date and location</option><option v-for="option in options" v-bind:value="option.value">{{ option.label }}</option></select>',
    computed: {
        options: function() {
            var type = this.courses.type;
            var list = this.courses.list.map(
                function(obj){ 
                    //var label = type+' - '+obj.location+' - '+obj.start_date_formatted+' - '+obj.price;
                    var label;
                    if(obj.location.match(/Online/)){
                        label = obj.dates+' | '+obj.timezone+' | '+obj.location;
                    }
                    else {
                        label = obj.dates+' | '+obj.location;
                    }
                    return {'value':obj.eventInternalid,'label':label}; 
                }
            );
            //list.push({'value':'-2','label':'I\'m not sure yet. Please have someone call me.'});
            //list.push({'value':'-1','label':'Please notify me about future dates and/or locations.'});
            return list;
        }
    },
    data: function() {
        return {
            course: ''
        }
    },
    watch: {
        course: function() {
            console.log(this.course);
            this.$emit('input',this.course);
        }
    }
});

window.onload = function(){
ES6Promise.polyfill();
var app = new Vue({
    el: '#app',
    data: {
        fun: [ ],
        course1: '',
        event_internal_id: '',
        event_name: '',
        accesscode: '',
        display_reg: true,
        display_reg_btn: true,
        display_call: false,
        display_notify: false,
        display_sold_out: false,
        display_call_header: false,
        display_notify_header: false,
        display_cart_text: false,
        load_count: 0,
        spinner: false,
        submit_text: "Add to Cart"
    },
    methods: {
        onSubmit: function(e) {
            if(this.event_internal_id == ''){
                alert('Please select a date and location');
                e.preventDefault();
                return false;
            }
            if(this.event_internal_id == -1){
                this.display_reg = false;
                this.display_notify = false;
                this.display_call = true;
                this.display_call_header = true;
                e.preventDefault();
                return false;
            }
            else if(this.event_internal_id == -2){
                this.display_reg = false;
                this.display_call = false;
                this.display_notify = true;
                this.display_notify_header = true;
                e.preventDefault();
                return false;
            }
            else {
                this.spinner = true;
                this.submit_text = "Please wait...";
                document.getElementById('fun-form').submit();
            }
        },
        hideNotifyHeader: function() {
            //this.display_notify_header = false;
            this.load_count++;
            if(this.load_count > 2) this.display_reg = false;
        },
        hideCallHeader: function() {
            //this.display_call_header = false;
            this.load_count++;
            if(this.load_count > 2) this.display_reg = false;
        }
    },
    watch: {
        course1: function() {
            // FUN
            this.event_internal_id = this.course1;
            console.log('Selected '+this.event_internal_id);
            // find event in list
            this.event_name = '';
            for(var i=0;i<this.fun.length;i++){
                if(this.fun[i].eventInternalid == this.event_internal_id){
                    this.event_name = '<br><strong>Co-Active Coaching Fundamentals</strong><br>'+this.fun[i].location+' - '+this.fun[i].dates +' - '+this.fun[i].timezone;
                        //+' - '+this.fun[i].price
                }
            }
            if(this.event_name.match(/SOLD OUT/)){
                this.display_cart_text = false;
                this.display_reg_btn = false;
                this.display_call = false;
                this.display_notify = false;
                this.display_sold_out = true;
            }
            else if(this.event_internal_id > 0){
                //document.getElementById('add-reg-btn').setAttribute('src','https://coactive.com/images/acton/add-cart.png');
                this.display_cart_text = true;
                this.display_reg_btn = true;
                this.display_notify = false;
                this.display_call = false;
                this.display_sold_out = false;
            }
            else if(this.event_internal_id == -1){
                this.display_cart_text = false;
                this.display_reg_btn = false;
                this.display_notify = false;
                this.display_call = true;
                this.display_sold_out = false;
            }
            else if(this.event_internal_id == -2){
                this.display_cart_text = false;
                this.display_reg_btn = false;
                this.display_call = false;
                this.display_notify = true;
                this.display_sold_out = false;
            }
            else {
                //document.getElementById('add-reg-btn').setAttribute('src','https://coactive.com/images/acton/continue.png');
                this.display_cart_text = false;
                this.display_reg_btn = true;
                this.display_notify = false;
                this.display_call = false;
                this.display_sold_out = false;
            }
        }
    },
    template: '<div class="" style="width:350px;margin:0 auto;">' +
        //'<h2 v-show="display_reg" style="text-align: left;"><span style="color: #ffffff;"><a name="register"></a><strong>Register</strong></span></h2>' +
        '<form v-show="display_reg" id="fun-form" method="post" action="http://coactive.na1.onlinecheckout.com/app/site/backend/intl/additemtocart.nl">' +
        '<input type="hidden" name="c" value="3958684">' +
        '<input type="hidden" name="qtyadd" id="qtyadd" value="1">' +
        '<input type="hidden" name="buyid" id="buyid" value="154">' +
        '<input type="hidden" name="selcurrency" id="selcurrency" value="1">' +
        '<input type="hidden" name="selsubsidiary" id="selsubsidiary" value="1">' +
        '<input type="hidden" name="custcol_ns_currency" id="custcol_ns_currency" value="1">' +
        '<input type="hidden" name="custcol_dsg_program_advisor" value="214330">' +
        '<input type="hidden" name="custcol_dsg_eventid" v-model="event_internal_id" value="">' +
        '<input type="hidden" name="custcol_dsg_event_name" v-model="event_name" value="">' +
        '<input type="hidden" name="acton_accesscode" v-model="accesscode" value="">' +
        '<div style="margin-top:0px;">' +
        // '<label style="display:block;color:#ffffff;">Course Date and Location</label>' +
        '<course-selector2 v-model="course1" v-bind:courses="{type:\'Co-Active Fundamentals\',list:fun}"></course-selector2></div>' +
        //'<div style="margin-top:24px;"><img v-show="display_reg_btn" style="cursor:pointer;" id="add-reg-btn" v-on:click="onSubmit" type="image" src="https://coactive.com/images/acton/continue.png" border="0"></div>' +
        '<input type="submit" v-model="submit_text" v-on:click="onSubmit" >' +
        '<p style="color:#ffffff;" v-show="display_cart_text">You will be directed to an online cart to complete your purchase and confirm registration.</p>' +
        '</form>' +
        //'<h2 v-show="display_notify_header" style="text-align: left;"><span style="color: #ffffff;"><a name="register"></a><strong>Register</strong></span></h2>' +
        '<div class="wrapper"><iframe class="custom-iframe"  v-on:load="hideNotifyHeader" v-show="display_notify" src="//marketing.coactive.com/acton/form/27563/0013:d-000a/1/27563:p-001e/index.htm" style="border: 0; min-height: 560px;margin-left:-10px;"></iframe></div>' +
        //'<h2 v-show="display_call_header" style="text-align: left;"><span style="color: #ffffff;"><a name="register"></a><strong>Register</strong></span></h2>' +
        '<div class="wrapper"><iframe class="custom-iframe" v-on:load="hideCallHeader" v-show="display_call" src="//experience.coactive.com/acton/form/27563/002c:d-0001/0/-/-/-/-/index.htm" style="border: 0;  min-height: 565px;margin-left:-10px;"></iframe></div>' +
        '<p style="color:#ffffff;" v-show="display_sold_out"><strong>*SOLD OUT:</strong> Please call 1-800-691-6008 (Option 5) to be placed on the waitlist.</p>' +
        '</div>'
});

        

// get the courses and populate the v-select
getCourses();

function getCourses(){
    var url = window.location.href;
    if(window.location.href.match(/accesscode=/)){
        var captured = /accesscode=([^&]+)/.exec(url)[1];
        app.accesscode = captured;
    }


    var guid = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    console.log(guid);

    axios.get('https://launchpad.coactive.com/data/cache/fun_events.json?guid='+guid)
    //axios.get('https://launchpad.coactive.com/data/registration-api.php')
        .then(function (response) {
            console.log(response);
            var events = response.data;
            events.sort(by_timestamp);
            console.log(events);
            app.fun = events.filter( function(e){ return e.fullCourse !== 'T' }); // only display available courses
            console.log(app.fun);
        })
        .catch(function (error) {
            console.log(error);
        });
}

    
} // end of window.onload()

function by_timestamp(a,b){
    if (a.startTimestamp > b.startTimestamp) return 1;
    if (b.startTimestamp > a.startTimestamp) return -1;
    return 0;
}