var coaches = [];
var coach = [];
var postcode = "";
var land = "";
var searchstring = "";

$( document ).ready(function() {
    
    postcode = $("#postcode").val();
    land = $("#land").val();
    searchstring = $("#searchstring").val();
    concept = $("#type").val();
    //console.log(postcode, land, searchstring);
    ajaxCall();
    
    $(".coachSelector").on("click", function(){
        $(".coachesOverviewField").toggleClass("open");
    });
    
    $("#postcode").on("change keyup", function(){
        postcode = $("#postcode").val();
        land = $("#land").val();
        searchstring = encodeURIComponent($("#searchstring").val());
        ajaxCall();
    });
    
    $("#land").on("select2:select", function(){
        postcode = $("#postcode").val();
        land = $("#land").val();
        searchstring = encodeURIComponent($("#searchstring").val());
        ajaxCall();
    });
    $("#searchstring").on("change keyup", function(){
        postcode = $("#postcode").val();
        land = $("#land").val();
        searchstring = encodeURIComponent($("#searchstring").val());
	    //console.log(postcode, land, searchstring);
        ajaxCall();
    });
    
    $(document).on("change", ".coachesOverviewField input", function(){
        setCoachNameInField();
    });
    
    $(document).on("click", ".coachesOverviewField .coach .buttons .openLink", function(){
        openCoachOverlay($(this).data("id"));
    });
    
});


function ajaxCall(){
    coaches = [];
    locations = [];
    var success = false;
    $.ajax({
        url: 'https://www.myfittergy.nl/JSON/getCoachv2myFittergy.html?postcode=' + postcode + '&land=' + land + '&concept=' + concept + '&search_naam=' + searchstring,
        contentType: "application/json",
        dataType: 'json',
        success: function (data) {
            if(data.results.length >= 1){
                $(".coachesOverviewField .noResults").hide();
                coaches.push(data.results);
                setCoachesHTML();
                if($(".coachesOverviewField").data("coach")){
                    if($(".coachesOverviewField input[value='" + $(".coachesOverviewField").data("coach") + "']")){
                        $(".coachesOverviewField input[value='" + $(".coachesOverviewField").data("coach") + "']").prop("checked", true);
                        setCoachNameInField();
                    }
                }
            } else {
                $(".coachSelector input").val("");
                $(".coachesOverviewField .coachesOverviewFieldInner").html("");
                $(".coachesOverviewField .noResults").show();
            }
        },
        error: function () {
            $(".coachSelector input").val("");
            $(".coachesOverviewField .coachesOverviewFieldInner").html("");
            $(".coachesOverviewField .noResults").show();
        }
    });
	//console.log('https://www.myfittergy.nl/JSON/getCoachv2myFittergy.html?postcode=' + postcode + '&land=' + land + '&concept=' + concept + '&search_naam=' + searchstring);
}

function setCoachesHTML(){
    var html = "";
    $(".coachesOverviewField .coachesOverviewFieldInner").html("");
    $(coaches[0]).each(function(i, el){
        html += "<label class='coach'>";
        html += "<input type='radio' name='coach' value='" + el.ID + "'>";
        html += "<div class='radio'></div>";
        html += "<div class='innerCoach'>";
        html += "<div class='image'>";
        html += "<div class='innerImage lazy' style='background-image:url(" + el.image + ");'></div>";
        html += "</div>";
        html += "<div class='coachContent'>";
        html += "<div class='coachName'>" + el.name + "</div>";
        html += "<div class='location'><span class='label'>Locatie </span>" + el.locations + "</div>";
        html += "<div class='buttons'>";
        html += "<div href='" + el.url + "' title='Meer details' class='link openLink' data-id='" + el.ID + "'>meer info</div>";
        html += "</div>";
        html += "</div>";
        html += "</div>";
        html += "</label>";
    });
    $(".coachesOverviewField .coachesOverviewFieldInner").html(html);
    setCoachNameInField();
}

function setCoachNameInField(){
    $(".coachSelector #coach, .coachSelector #coach_id").val("");
    var activeCoach = $(".coachesOverviewField input:checked").closest(".coach");
    var id = $(activeCoach).find("input").val();
    var name = $(activeCoach).find(".coachName").text();
    $(".coachSelector #coach").val(name);
    $(".coachSelector #coach_id").val(id);
}

function openCoachOverlay(id){
    var html = "";
    coach = [];
    $.ajax({
        url: 'https://www.myfittergy.nl/JSON/getCoachInfo.html?coachID=' + id + '&language=nl',
        contentType: "application/json",
        dataType: 'json',
        success: function (data) {
			//console.log('nl');

            $("html, body").addClass("overflow");
            coach.push(data);
            $(".coachOverlay .overlayInnerContent").html("");
            $(".coachOverlay").addClass("active");
            html += "<div class='coachContent'>";
            html += "<div class='coachIntro'>";
            html += "<div class='image'>";
            if(coach[0].image){
                html += "<div class='innerImage lazy' style='background-image:url(" + coach[0].image + ");'></div>";
            }
            html += "</div>";
            html += "<div class='col'>";
            html += "<div class='coachName'>" + coach[0].name + "</div>";
            html += "<p><span class='label'>" + coach[0].hoofdlocatie_term + "</span></p>";
            html += "<p>" + coach[0].hoofdlocatie + "</p>";
            var locations = coach[0].locaties.split(",");
            //console.log(locations);
            if(locations.length > 1){
                html += "<p><span class='label'>" + coach[0].andere_locaties_term + "</span></p>";
                $(locations).each(function(i, el){
                    if(i > 0){
                        html += "<p>" + el + "</p>";
                    }
                });
            }
            html += "<p><span class='label'>" + coach[0].contactgegevens_term + "</span></p>";
            if(coach[0].telefoon_presenteer_jezelf){
                html += "<p>" + coach[0].telefoon_presenteer_jezelf + "</p>";
            }
            if(coach[0].email_presenteer_jezelf){
                html += "<p>" + coach[0].email_presenteer_jezelf + "</p>";
            }
            if(coach[0].website_to_show_url){
                html += "<p>" + coach[0].website_to_show_url + "</p>";
            }
            if(coach[0].facebook || coach[0].linkedin|| coach[0].instagram){
                html += "<div class='socials'>";
                if(coach[0].facebook){
                    html += "<a href='" + coach[0].facebook + "' title='Facebook' target='_blank'><i class='fab fa-facebook-f'></i></a>";
                }
                if(coach[0].linkedin){
                    html += "<a href='" + coach[0].linkedin + "' title='Linkedin' target='_blank'><i class='fab fa-linkedin-in'></i></a>";
                }
                if(coach[0].instagram){
                    html += "<a href='" + coach[0].instagram + "' title='Instagram' target='_blank'><i class='fab fa-instagram'></i></a>";
                }
                html += "</div>";
            }
            html += "</div>";
            html += "<div class='divider'></div>";
            if(coach[0].introductie){
                html += "<div class='text'>";
                html += "<p><span class='label'>" + coach[0].introductie_term + "</span></p>";
                html += "<p>" + coach[0].introductie + "</p>";
                html += "</div>";
            }
            if(coach[0].eigen_ervaring_kuur){
                html += "<div class='text'>";
                html += "<p><span class='label'>" + coach[0].eigen_ervaring_kuur_term + "</span></p>";
                html += "<p>" + coach[0].eigen_ervaring_kuur + "</p>";
                html += "</div>";
            }
            if(coach[0].opleidingen){
                html += "<div class='text'>";
                html += "<p><span class='label'>" + coach[0].opleidingen_term + "</span></p>";
                html += "<p>" + coach[0].opleidingen + "</p>";
                html += "</div>";
            }
            if(coach[0].ervaring){
                html += "<div class='text'>";
                html += "<p><span class='label'>" + coach[0].ervaring_term + "</span></p>";
                html += "<p>" + coach[0].ervaring + "</p>";
                html += "</div>";
            }
            if(coach[0].doelgroepen){
                html += "<div class='text'>";
                html += "<p><span class='label'>" + coach[0].doelgroepen_term + "</span></p>";
                html += "<p>" + coach[0].doelgroepen + "</p>";
                html += "</div>";
            }
            if(coach[0].overigen){
                html += "<div class='text'>";
                html += "<p><span class='label'>" + coach[0].overigen_term + "</span></p>";
                html += "<p>" + coach[0].overigen + "</p>";
                html += "</div>";
            }
            html += "</div>";
            html += "</div>";
            html += "<div class='divider'></div>";
            html += "<div class='buttons'><span class='button secondary close'>" + coach[0].starten_term + "</span></div>";
            html += "</div>";
            $(".coachOverlay .overlayInnerContent").html(html);
        }
    });
}