$(function() {

    $.get( '/api/products/list' , function( data ){
    }).done(function( data ) {
        // TO DO ON DONE
        //console.log("data: ", data);
        //console.log("Success");
        showProducts(data);
    }).fail(function(data, textStatus, xhr) {
        //This shows status code eg. 403
        //console.log("error", data.status);
        //This shows status message eg. Forbidden
        //console.log("STATUS: "+xhr);
    }).always(function() {
        //TO-DO after fail/done request.
        //console.log("ended");
    });
    // Initialize form validation on the registration form.
    // It has the name attribute "registration"
    $("#frmLogin").validate({
        // Specify validation rules
        rules: {
            // The key name on the left side is the name attribute
            // of an input field. Validation rules are defined
            // on the right side
            userName: "required",
            password: {
                required: true,
                //minlength: 8
            }
        },
        // Specify validation error messages
        messages: {
            userName: "Please enter your user name",
            password: {
                required: "Please provide a password",
                //minlength: "Your password must be at least 8 characters long"
            }
        },
        // Make sure the form is submitted to the destination defined
        // in the "action" attribute of the form when valid
        submitHandler: function(form) {

        }
    });
});


function showProducts(data) {
    var htmlShopProducts = "";
    var htmlShopProduct = "";
    var htmlImg = "";
    $("#lblShopList").html("");
    for (var i = 0; i < data.length; i++) {
        if( data[i].Product_PictureURL == "test" || data[i].Product_PictureURL == ""){
            htmlImg = '<img src="/images/1000.png" class="img-fluid img-thumbnail" alt="product">'
        } else {
            htmlImg = '<img src="' +data[i].Product_PictureURL +'" class="img-fluid img-thumbnail" alt="product">';
        }

        htmlShopProduct =   '<div class="col-3 single-product">\
                                <a href="#">\
                                    ' + htmlImg+'\
                                    <span class="caption simple-caption">\
                                       <span class="name">'+data[i].Product_Name+'</span>\
                                       <span class="price">₤'+data[i].Product_Price+'</span>\
                                       <button class="btnViewProduct btn btn-gold my-2 my-sm-0 text-uppercase" data-id="'+ data[i].Product_UID +'">View</button>\
                                    </span>\
                                </a>\
                           </div>';

        htmlShopProducts += htmlShopProduct;

    }
    $("#lblShopList").html(htmlShopProducts);
    accessSingleProduct();
}

checkSession();