/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({

    el: '#vueJsContainer',

    data: {

        // Variables
        todos: [], // Direction for v-for tag. array 1
        quantityOfRecords: null, // quantity of records
        name: '',
        errors: ''

    },

    methods: {

        // Button event handler
        greet: function(event){
            console.log("Search button clicked. Vue even handler2");

            // Ajax request. Axios
            axios.get('/addmsgws/' + document.getElementById("searchInputTextField").value)
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });

        },

        message: function(message){

            // Ajax request. Axios
            axios.get('public/assetcreate/' + message[0] + '/' + message[1] + '/' + message[2] + '/' + message[3] + '/' + message[4])
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }


    },

    created() {

        Echo.channel('tbrChannel')

            .listen('TbrAppSearchResponse', (e) => {
            var jsonParsedResponse = JSON.parse(e.update);
            console.log("search responce: " + jsonParsedResponse);
            this.quantityOfRecords = jsonParsedResponse; // Loop through the length or received json

        }); // echo.listen
    }, // created


}); // new Vue



const app2 = new Vue({

    el: '#vueJsForm',

    data: {

        inp: '',
        basketid: ''

    },

    methods: {

        onSubmit(basket_id){
            this.basketid = basket_id;
            axios.post('/getbasketname', this.$data )
                .then(response => console.log(response.data)) // Output returned data by controller
                .catch(error => {
                console.log(error.response);
             })
        }

    },

    // When page is loaded and dom created
    created(){
        //this.basketid = basket_id;
        this.onSubmit();
        axios.post('/getbasketname', this.$data )
            .then(response => {
                console.log(response.data);
                this.basketid = response.data;
            })
            .catch(error => {
                console.log(error.response);
    })
    }


}); // Vue




/*
// Buttons handlers
$('#search').click(function () {
    console.log("Search button clicked");
    // //alert($("#searchInputTextField").val());

    //$("tbody").remove();
    var request1 = $.get('/public/addmsgws/' + $("#searchInputTextField").val() + ''); // Controller call
    request1.done(function(response) { // When the request is done
        console.log("Request1 is done");
    });
});
*/