// var APIUrl = 'http://localhost/qianjin-api/api/';
const listOfImage = [];
var cloudFrontURL = "https://dnmr4h3lrek8m.cloudfront.net/"
var APIUrl = 'https://zak-ems-api.herokuapp.com/api/';
// var APIUrl = "http://localhost/qianjin-api/api/";

function viewStaffDetails(id) {
    window.location.href = "staff-details.html?id=" + id
}
var staffsData;
function $_GET(q, s) {
    s = s ? s : window.location.search;
    var re = new RegExp("&" + q + "=([^&]*)", "i");
    return (s = s.replace(/^\?/, "&").match(re)) ? (s = s[1]) : (s = "");
}
function getStaff(searchType, searchContent) {

    var noUrl = "https://dnmr4h3lrek8m.cloudfront.net/no-image.png";
    if (searchType == "all") {
        $.ajax({
            url: APIUrl + "getAllStaffFeatured",
            async: false,
            dataType: "json",
            type: "post",
            success: function (data) {
                staffsData = data;
                var staffHtml = "";
                staffsData.forEach(staff => {
                    let id = " "
                    let profile_pic_url = " ";
                    let staffName = " ";
                    let area = " ";
                    let location = " ";
                    let location_cn = " ";
                    let price = " ";
                    let price2 = " ";
                    let customer_view = " ";

                    id = staff['id'];
                    profile_pic_url = staff['key'] == null ? noUrl : staff['key'];
                    profile_pic_url = cloudFrontURL + profile_pic_url;
                    staffName = staff['name'];
                    area = staff['area'];
                    location = staff['location'];
                    location_cn = staff['location_cn'];
                    price = staff['price'];
                    price2 = staff['price2'];
                    customer_view = staff['customer_view'];
                    is_featured = staff['is_featured'] === "t" ? "visible" : "hidden";
                    is_massage = staff['is_massage'] === "t" ? "visible" : " hidden";
                    // let area= staff['area'];

                    featuredLabelSetting = '<span  ' + is_featured + ' id="featuredLabel"></span>'
                    othersLabelSetting = '<span ' + is_massage + ' id="othersLabel"></span>'

                    staffHtml += ' <li id="liUser" class="span4" > <div class="thumbnail">' + featuredLabelSetting + othersLabelSetting + '   <a href="staff-details.html?id=' + id + '" ><a href="staff-details.html?id=' + id + '" ><img src="' + profile_pic_url + '"  alt=""></a><div class="caption cntr"><hr class="soften" /><a href="staff-details.html?id=' + id + '" ><p>' + staffName + '</p></a><div style="width:100%; background-color:red"><p style="color:white"> ' + location + '&nbsp;&nbsp;</p></div><hr style="margin:-1px 0;height:0px;background-color:gray;color:gray;"><div style="width:100%; background-color:red"><p style="color:white"> ' + location_cn + '&nbsp;&nbsp;</p></div><p> ' + area + '</p> <p> ' + price + ' </p><p> ' + price2 + ' </p> <div class="actionList"><a class="pull-left" href="#"> </a><a class="pull-left" href="#">  </a> </div> </div> </div> </li>';


                });

                $('#staffList').append(staffHtml);
            }
        });

    }
    else if (searchType == "category") {
        $.ajax({
            url: APIUrl + "getAllStaffCategoryBased",
            async: false,
            dataType: "json",
            type: "post",
            data:
            {
                "area": searchContent
            },
            success: function (data) {
                staffsData = data;
                var staffHtml = "";
                staffsData.forEach(staff => {
                    let id = " "
                    let profile_pic_url = " ";
                    let staffName = " ";
                    let area = " ";
                    let location = " ";
                    let location_cn = " ";
                    let price = " ";
                    let price2 = " ";
                    let customer_view = " ";

                    id = staff['id'];
                    profile_pic_url = staff['key'] == null ? noUrl : staff['key'];
                    profile_pic_url = cloudFrontURL + profile_pic_url;
                    staffName = staff['name'];
                    area = staff['area'];
                    location = staff['location'];
                    location_cn = staff['location_cn'];
                    price = staff['price'];
                    price2 = staff['price2'];
                    customer_view = staff['customer_view'];
                    is_featured = staff['is_featured'] === "t" ? "visible" : "hidden";
                    is_massage = staff['is_massage'] === "t" ? "visible" : " hidden";
                    // let area= staff['area'];

                    featuredLabelSetting = '<span  ' + is_featured + ' id="featuredLabel"></span>'
                    othersLabelSetting = '<span ' + is_massage + ' id="othersLabel"></span>'

                    staffHtml += ' <li id="liUser" class="span4" > <div class="thumbnail">' + featuredLabelSetting + othersLabelSetting + '   <a href="staff-details.html?id=' + id + '" ><a href="staff-details.html?id=' + id + '" ><img src="' + profile_pic_url + '"   alt=""></a><div class="caption cntr"><hr class="soften" /><a href="staff-details.html?id=' + id + '" ><p>' + staffName + '</p></a><div style="width:100%; background-color:red"><p style="color:white"> ' + location + '&nbsp;&nbsp;</p></div><hr style="margin:-1px 0;height:0px;background-color:gray;color:gray;"><div style="width:100%; background-color:red"><p style="color:white"> ' + location_cn + '&nbsp;&nbsp;</p></div><p> ' + area + '</p> <p> ' + price + ' </p><p> ' + price2 + ' </p> <div class="actionList"><a class="pull-left" href="#"> </a><a class="pull-left" href="#">  </a> </div> </div> </div> </li>';


                });

                $('#staffList').append(staffHtml);
            }
        });

    }
    else if (searchType == "search") {
        $.ajax({
            url: APIUrl + "getAllStaffCategoryBasedV2",
            async: false,
            dataType: "json",
            type: "post",
            data:
            {
                "search": searchContent
            },
            success: function (data) {
                staffsData = data;
                var staffHtml = "";
                if (staffsData.length > 0) {
                    console.log(staffsData);
                    staffsData.forEach(staff => {
                        let id = staff['id'];
                        let profile_pic_url = staff['key'] == null ? noUrl : staff['key'];
                        profile_pic_url = cloudFrontURL + profile_pic_url;
                        let staffName = staff['name'];
                        let area = staff['area'];
                        let location = staff['location'];
                        let price = staff['price'];
                        let price2 = staff['price2'];
                        // let area= staff['area'];
                        let customer_view = " ";
                        customer_view = staff['customer_view'];

                        staffHtml += ' <li id="liUser"  class="span4" > <div class="thumbnail"><a href="staff-details.html?id=' + id + '" ><img src="' + profile_pic_url + '"    alt=""></a><div class="caption cntr"><hr class="soften" /><a href="staff-details.html?id=' + id + '" > <div style="width:100%; background-color:red"><p style="color:white"> ' + location + '</p></div><p>' + staffName + '</p></a><div style="width:100%; background-color:red"><p style="color:white"> ' + location + '&nbsp;&nbsp;<b>(' + customer_view + ')</b></p></div><p> ' + area + '</p> <p> ' + price + ' </p> <p> ' + price2 + ' </p> <div class="actionList"><a class="pull-left" href="#"> </a><a class="pull-left" href="#">  </a> </div> </div> </div> </li>';
                    });
                    $('#staffList').append(staffHtml);
                }

            }
        });

    }
}
function getStaffOthers() {
    var noUrl = "https://qianjin-gallery.s3.ap-southeast-1.amazonaws.com/no-image.png";
    $.ajax({
        url: APIUrl + "getAllStaffOthers",
        async: false,
        dataType: "json",
        type: "post",
        success: function (data) {
            staffsData = data;
            var staffHtml = "";
            if (staffsData.length > 0) {
                staffsData.forEach(staff => {
                    let id = staff['id'];
                    let profile_pic_url = staff['key'] == null ? noUrl : staff['key'];
                    profile_pic_url = cloudFrontURL + profile_pic_url;
                    let staffName = staff['name'];
                    let area = staff['area'];
                    let location = staff['location'];
                    let location_cn = staff['location_cn'];
                    let price = staff['price'];
                    let price2 = staff['price2'];
                    // let area= staff['area'];
                    is_featured = staff['is_featured'] === "t" ? "visible" : "hidden";
                    is_massage = staff['is_massage'] === "t" ? "visible" : " hidden";
                    // let area= staff['area'];
                    let customer_view = " ";
                    customer_view = staff['customer_view'];
                    featuredLabelSetting = '<span  ' + is_featured + ' id="featuredLabel"></span>'
                    othersLabelSetting = '<span ' + is_massage + ' id="othersLabel"></span>'


                    staffHtml += ' <li id="liUser" class="span4" > <div class="thumbnail">' + featuredLabelSetting + othersLabelSetting + '<a href="staff-details.html?id=' + id + '" ><span class="favLabel"></span><img src="' + profile_pic_url + '"    alt=""></a><div class="caption cntr"><hr class="soften" /><a href="staff-details.html?id=' + id + '" > <p>' + staffName + '</p></a><div style="width:100%; background-color:red"><p style="color:white"> ' + location + '&nbsp;&nbsp;</p></div><hr style="margin:-1px 0;height:0px;background-color:gray;color:gray;"><div style="width:100%; background-color:red"><p style="color:white"> ' + location_cn + '&nbsp;&nbsp;</p></div><p> ' + area + '</p> <p> ' + price + ' </p><p> ' + price2 + ' </p> <div class="actionList"><a class="pull-left" href="#"> </a><a class="pull-left" href="#">  </a> </div> </div> </div> </li>';


                });
            }

            $('#staffListOthers').append(staffHtml);
        }
    });
}
function getPopularStaff() {
    var noUrl = "https://qianjin-gallery.s3.ap-southeast-1.amazonaws.com/no-image.png";

    $.ajax({
        url: APIUrl + "getAllPopularStaff",
        async: false,
        dataType: "json",
        type: "post",
        success: function (data) {
            staffsData = data;
            var staffSideHtml = "";
            staffsData.forEach(staff => {
                let id = staff['id'];
                let profile_pic_url = staff['key'] == null ? noUrl : staff['key'];
                profile_pic_url = cloudFrontURL + profile_pic_url;
                let staffName = staff['name'];
                let area = staff['area'];
                let location = staff['location'];
                let location_cn = staff['location_cn'];
                let price = staff['price'];
                let price2 = staff['price2'];
                // let area= staff['area'];
                is_featured = staff['is_featured'] === "t" ? "visible" : "hidden";
                is_others = staff['is_others'] === "t" ? "visible" : " hidden";
                // let area= staff['area'];

                featuredLabelSetting = '<span  ' + is_featured + ' id="featuredLabel"></span>'
                othersLabelSetting = '<span ' + is_others + ' id="othersLabel"></span>'

                staffSideHtml += '<li id="liPopular"> <div class="thumbnail">' + featuredLabelSetting + othersLabelSetting + '<a href="staff-details.html?id=' + id + '" ><img src="' + profile_pic_url + '"    alt=""></a><div class="caption cntr"><hr class="soften" /><a href="staff-details.html?id=' + id + '" ><p>' + staffName + '</p></a><div style="width:100%; background-color:red"><p style="color:white"> ' + location + '&nbsp;</p></div><hr style="margin:-1px 0;height:0px;background-color:gray;color:gray;"><div style="width:100%; background-color:red"><p style="color:white"> ' + location_cn + '&nbsp;&nbsp;</p></div><p> ' + area + '</p> <p> ' + price + ' </p><p> ' + price2 + ' </p> <div class="actionList"><a class="pull-left" href="#"> </a><a class="pull-left" href="#">  </a> </div> </div> </div></li> '




            });
            $('#popularStaffList').append(staffSideHtml);

        }
    });


}
function $_GET(q, s) {
    s = s ? s : window.location.search;
    var re = new RegExp("&amp;" + q + "=([^&amp;]*)", "i");
    return (s = s.replace(/^\?/, "&amp;").match(re)) ? (s = s[1]) : (s = "");
}
/////* Declare variables */////

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
        function (m, key, value) {
            vars[key] = value;
        });
    return vars;
}
function callWhatsapp(phoneNo) {
    window.open("https://wa.me/" + phoneNo);
    console.log(phoneNo)
    event.preventDefault();
}

function openPhotoSwipe(url) {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    console.log(listOfImage)
    console.log(url)
    console.log()

    const index = listOfImage.findIndex((element, index) => {
        if (element.src === url) {
            return true
        }
    })
    console.log(index)
    // define options (if needed)
    var options = {
        // history & focus options are disabled on CodePen
        index: index,
        history: false,
        focus: false,
        showAnimationDuration: 1,
        hideAnimationDuration: 0

    };

    var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, listOfImage, options);
    gallery.init();
};

function getComment() {

	$.ajax({
		url: APIUrl + 'getComment',
		type: 'POST',
		dataType: 'JSON',

		data: {
			"staff_id": staffId,

		},

		//TODO:: CompanyPhoneNo, Attention_MarketingOfficer, Attention_Company
		// to do API.php user, createDateTime, completeUser, completeDateTime, attentionTo
		success: function (data) {
			// window.location = "staff-view.html";
			const format1 = "YYYY-MM-DD HH:mm:ss"

			var commentFormHtml = "";
			commentFormHtml += '<form class="form-block"><div class="row"><h4>Your comment</h4><div class="col-xs-12 col-sm-6"><div class=" form-group fl_icon"><input id="commentName" class="form-input" type="text" placeholder="Your name"> &nbsp; &nbsp; <input id="commentEmail" class="form-input" type="text" placeholder="Your email"> </div> </div> <div class="col-xs-12"> <div class="form-group"> <textarea id="commentMessage" style="width: 99%;" class="form-input" required="" placeholder="Your text"></textarea> </div> </div> <a onclick="submitComment()" class="btn btn-primary pull-right">Submit</a> </div> </form>'
			$('#listOfComment').append(commentFormHtml);
			data.forEach(comment => {
				var commentHtml = "";
				let dateTime1 = moment(comment["date_time"]).format(format1);
				commentHtml += '<div class="be-comment"> <div id="comment' + comment.id + '" class="be-comment-content"><span class="be-comment-name"> <h3 style="font-weight: bold;color:red">' + comment.name + '</h3>  </span><span class="be-comment-time"><i class="fa fa-clock-o"></i>' + dateTime1 + '</span> <p class="be-comment-text">' + comment.message + ' </p><h5 onclick="generateReply(' + comment.id + ')"> Reply</h5> </div> </div>'
				getReply(comment.id, commentHtml)

			});




		},
		error: function (data) {
			alert("Add staff fail");

		}

	});
}

function getStaffData() {
    var staffId = $_GET('id');
    if (staffId == "") {
        window.location.href = "index.html"
    }

    $.ajax({
        url: APIUrl + "getStaff",
        async: false,
        dataType: "json",
        type: "post",
        data: {
            "id": staffId
        },
        success: function (data) {
			const is_active = data['personal'][0].is_active;
			console.log("is_active",is_active);

			if(is_active=="f"){
				window.location ="index.html";}
			else{
				 var staffPersonal = data['personal'][0];
            var staffGallery = data['gallery'];
            var staffServices = data['services'];
            var staffPersonalHtml = "";
            var staffPersonalContactHtml = "";
            var staffServicesHtml = "";
            var staffPersonalImageHtml = "";
            var staffImageHtml = "";
            var staffVideoHtml = "";
            staffPersonalImageHtml += '<div class="item active"><a href="#"> <img src="' + staffPersonal.profile_pic_url + '" alt="" style="width:100%;height:100%"></a></div>';

            // let id = staff['id'];
            // 	let profile_pic_url = staff['profile_pic_url'];

            if (staffGallery.length > 0) {
                staffGallery.forEach(image => {
                    if (image.type === "image") {
                        let url = image.url;

                        staffPersonalImageHtml += '<div class="item"><a href="#"> <img  src="' + url + '" alt="" style="width:100%;height:100%;"></a></div>'

                        let photoSwipeData = {
                            src: url,
                            w: 964,
                            h: 1024
                        }
                        listOfImage.push(photoSwipeData);
                        url = '';
                    }



                    // staffHtml += ' <li class="span4"> <div class="thumbnail"><img src="' + profile_pic_url + '"  onclick="viewStaffDetails('+id+')" alt=""></a><div class="caption cntr"><p><p>' + staffName + '</p></p> <p> ' + area + '</p>  <p> ' + location + '</p> <p> ' + price + '</p><h4><a class="shopBtn" href="#" title="add to cart"> Add to cart </h4><div class="actionList"><a class="pull-left" href="#">Add to Wish List </a><a class="pull-left" href="#"> Add to Compare </a> </div> <br class="clr"> </div> </div> </li>';
                    // console.log(staff)
                })
            }
            $('#profile_pic').append(staffPersonalImageHtml);

            let accommodation = staffPersonal['accommodation'] === null ? "" : staffPersonal['accommodation'];
            let age = staffPersonal['age'] === null ? "" : staffPersonal['age'];
            let area = staffPersonal['area'] === null ? "" : staffPersonal['area'];
            let breast_size = staffPersonal['breast_size'] === null ? "" : staffPersonal['breast_size'];
            let height = staffPersonal['height'] === null ? "" : staffPersonal['height'];
            let language = staffPersonal['language'] === null ? "" : staffPersonal['language'];
            let location = staffPersonal['location'] === null ? "" : staffPersonal['location'];
            let location_cn = staffPersonal['location_cn'] === null ? "" : staffPersonal['location_cn'];
            location = location+" "+location_cn;
            let mobile_no = staffPersonal['mobile_no'] === null ? "" : staffPersonal['mobile_no'];
            mobile_no = mobile_no.replace(/\s+/g, '');
            let name = staffPersonal['name'] === null ? "" : staffPersonal['name'];
            let preference_race = staffPersonal['preference_race'] === null ? "" : staffPersonal['preference_race'];
            let price = staffPersonal['price'] === null ? "" : staffPersonal['price'];
            let price2 = staffPersonal['price2'] === null ? "" : staffPersonal['price2'];
            price = price + " " + price2;
            staffPersonalHtml += '<p id= "staffName">Name : ' + name + '</p><hr class="soft" /><div  class="control-group"><label class="control-label"><p>Age 年龄 : ' + age + ' years old</p></label></div><div class="control-group"><label class="control-label"><p>Height 身高 : ' + height + ' cm </p></label></div><div class="control-group"><label class="control-label"><p>Boobs 胸围  : ' + breast_size + '  </p></label></div><div class="control-group"><label class="control-label"><p>' + accommodation + '  </p></label></div><div class="control-group"><label class="control-label"><p>Area 地区： ' + area + '  </p></label></div><div class="control-group"><label class="control-label"><p>Location 地点： ' + location + '  </p></label></div><div class="control-group"><label class="control-label"><p>Price 价格：' + price + '  </p></label></div><div class="control-group"><label class="control-label"><p>Preferrences 价格：' + preference_race + '  </p></label></div><div class="control-group"><label class="control-label"><p>Language spoken: ' + language + '  </p></label></div><div class="control-group"><label class="control-label"><p>Mobile 电话： ' + mobile_no + '  </p></label></div>'

            staffPersonalContactHtml = '<br><a href="tel:' + mobile_no + '"><button type="submit"  class="shopBtn" style="background-color: green;">CALL NOW &nbsp;&nbsp;<span class="icon-phone-sign"></button></a>&emsp;&emsp;&emsp; <a href="sms:+65' + mobile_no + '?&amp;body=美女你好！我在千金网看到你的，请问什么时候有空，可以约吗?"><button type="submit"  class="shopBtn" style="background-color: blue;">Send SMS&nbsp;&nbsp;<span class="icon-comment"></button></a>'
            $('#profile_data').append(staffPersonalHtml);
            $('#profile_dataContact').append(staffPersonalContactHtml);
            let tableRowCount = 0

            if (staffServices.length > 0) {
                staffServices.forEach(service => {
                    if (tableRowCount == 0) {
                        staffServicesHtml += '<tr class="techSpecRow"><td class="techSpecTD1">' + service.service_name + '</td>'
                        tableRowCount++;
                    } else if (tableRowCount == 1) {
                        staffServicesHtml += '	<td class="techSpecTD2">' + service.service_name + '</td></tr >'
                        tableRowCount = 0;
                    }
                })
                if (tableRowCount == 1) {
                    staffServicesHtml += '	<td class="techSpecTD2"> </td></tr >'

                }
                $('#tbodyServices').append(staffServicesHtml);

            }

            let tableImageRowCount = 0
            let tableVidRowCount = 0

            if (staffGallery.length > 0) {
                staffGallery.forEach(object => {
                    if (object.type == "image") {

                        if (tableImageRowCount == 0) {
                            staffImageHtml += '<tr class="techSpecRow"><td id ="imageTD" class="techSpecTD1"><img onclick="openPhotoSwipe(this.src)" src="' + object.url + '" alt="" ></td>'
                            tableImageRowCount++;
                        } else if (tableImageRowCount == 1) {
                            staffImageHtml += '	<td id="imageTD" class="techSpecTD2"><img  onclick="openPhotoSwipe(this.src)" src="' + object.url + '" alt="" ></td>';
                            tableImageRowCount++;
                        } else if (tableImageRowCount == 2) {
                            staffImageHtml += '	<td id="imageTD" class="techSpecTD3"><img  onclick="openPhotoSwipe(this.src)" src="' + object.url + '" alt=""></td></tr >';
                            tableImageRowCount = 0;
                        }
                    } else if (object.type == "video") {

                        if (tableVidRowCount == 0) {
                            staffVideoHtml += '<tr class="techSpecRow" id ="techSpecRowVideo"> <td id= "videoTD" class="techSpecTD1"><video   controls="controls" src="' + object.url + '"></video></td>'
                            tableVidRowCount++;
                        } else if (tableVidRowCount == 1) {
                            staffVideoHtml += '	<td id = "videoTD" class="techSpecTD2"> <video  controls="controls"  src="' + object.url + '"></video></td>';
                            tableVidRowCount = 0;
                        }
                    }
                })
                if (tableImageRowCount == 1) {
                    staffImageHtml += '	<td class="techSpecTD2"></td><td class="techSpecTD3"></td></tr>';
                }
                if (tableImageRowCount == 2) {
                    staffImageHtml += '	<td class="techSpecTD3"></td></tr>';
                }
            }



            $('#tbodyGalleryImg').append(staffImageHtml);
            $('#tbodyGalleryVid').append(staffVideoHtml);
			if(staffPersonal['is_comment']=="t"||staffPersonal['is_comment']== true){
				document.getElementById("comments").style.display = "block";
				getComment();
			}
			else{
				// document.getElementById("comments").style.display = "none";
			}
			}

        }
    });




}
function website_visitor() {
    $.ajax({
        url: APIUrl + "websiteVisitor",
        async: false,
        dataType: "json",
        type: "post",

        success: function (data) {
        }
    });

}
$(document).ready(function () {
    $("body").fadeIn(400);

    $('#myCarousel').carousel()
    $('#newProductCar').carousel()

    /* Home page item price animation */
    $('.thumbnail').mouseenter(function () {
        $(this).children('.zoomTool').fadeIn();
    });

    $('.thumbnail').mouseleave(function () {
        $(this).children('.zoomTool').fadeOut();
    });

    // Show/Hide Sticky "Go to top" button
    $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
            $(".gotop").fadeIn(200);
        } else {
            $(".gotop").fadeOut(200);
        }
    });
    // Scroll Page to Top when clicked on "go to top" button
    $(".gotop").click(function (event) {
        event.preventDefault();

        $.scrollTo('#gototop', 1500, {
            easing: 'easeOutCubic'
        });
    });
    $("#topbar").load("topbar2.html", function () {
        console.log("Topbar loaded");
    });

});