$(document).ready(function() {


    var helpVervoer = [
        ['Welke vervoer middelen zijn er?', 'blalalal', 3, 2],

    ];

    var helpTickets = [
        ["Hoe krijg ik mijn Tickets Binnen?", "blalal", 3, 1],



    ];
    var helpBetaling = [


    ];
    var helpTotal = helpVervoer + helpTickets + helpBetaling;
    console.log(helpTotal);
    for (var h = 0; h < helpTotal.length; h++) {

    }



    var tips = [
    "Makkelijk te betalen",
    "Op tijd bezorg bij uw thuis",
    "Korting op uw volgende ticket",
    "Ook leuk voor de feest dagen"
    ];

    var tipsBorder = '';

    for(var t = 0; t < tips.length; t++){
    tipsBorder += '<li>'+tips[t]+'<span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"><\/span><\/li>';
    console.log(tipsBorder);
    }

    function scrollDownOrder() {
        $('html, body').animate({ scrollTop: $('#kaarten').offset().top }, 500);
    };


    $('.orderbtn').click(function() {

    });

    var searchlist = '';



    var games = [
        ["liverpool", "everton", 123, "22/03/2017", 205],
        ["Manchester City", "Chelsea", 44, "13/02/17", 150],
        ["Arsenal", "Manchester United", 233, "31/04/17", 95],
        ["Ajax", "PSV", 403, "23/12/2016", 45],
        ["Stoke", "Tottenham", 332, "23/4/17", 45],
        ["Vitesse", "Utrecht", 51, "01/01/2017", 45],
    ];

    var g = games.length;
    var list = '';

    var ordermenu = "";
    var target = '';
    var awaypic = '';
    var homepic = '';
    var form = '';
    var totalPrice = '';
    for (var i = 0; i < g;) {
        target = games[i][0] + games[i][1];
        target = target.replace(" ", "");
        target = target.toLowerCase();
        totalPrice = games[i][4];
        form = '<form id="' + target + '" class=\"inline\"><div class=\"form-group\"><label>Naam:<\/label><input type=\"text\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" required=\"required\" pattern=\"\" title=\"\"><\/div><div class=\"form-group\"><label>Achternaam:<\/label><input type=\"text\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" required=\"required\" pattern=\"\" title=\"\"><\/div><div class=\"form-group\"><label>Leeftijd<\/label><input type=\"number\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" min=\"{5\"}max=\"\" step=\"\" required=\"required\" title=\"\"><\/div><div class=\"form-group\"><label>Email:<\/label><input type=\"email\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" required=\"required\" title=\"\"><\/div><div class=\"form-group\"><span class=\"label\">Aantal kaarten:<\/span><select name=\"\" id=\"input\" class=\"custom form-control\" required=\"required\"><option value=\"1\">1<\/option><option value=\"2\">2<\/option><option value=\"3\">3<\/option><\/select><\/div><div class=\"form-group\"><label>Adress<\/label><input type=\"text\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" pattern=\"\" title=\"\"><\/div><div class=\"form-group\"><div class=\"checkbox\"><label><input type=\"checkbox\" id=\"vervoer'+target+'\" class=\"vervoer\" value=\"taxi\">Vervoer <\/label><a data-toggle=\"popover\" title=\"<b>Popover<b> Header\" data-content=\"Bij een markeren van deze optie, wordt u door een taxi opgehaalt bij een vliegveld of trein station. Voor meer informatie hier over bekijk onze veel gestelde vragen\'\"><span class=\"glyphicon glyphicon-info-sign\" aria-hidden=\"true\"><\/span><\/a><\/div><\/div><div class=\"form-group\"><label>Is het een kado? <\/label><label class=\"radio-inline\"> <input type=\"radio\" value="1" checked name=\"kado\"> Nee <\/label> <label class=\"radio-inline\"> <input type=\"radio\" value="2" name=\"kado\">Ja <\/label><\/div><div class=\"form-group total\"><h3 class=\"pull-right\">Totaal:  €<span id=\"' + target + 'price\">' + totalPrice + '<\/span><hr class=\"full greenline\"><\/h3><\/div><div class=\"form-group\"><button class=\"btn orderbtn btn-voetbal full\"><h4>Bestel kaarten<h4><\/h4><\/button><\/div><\/form>';
        ticketTarget = target;
        var targetForm = games[i][0] + games[i][1];
        targetForm = target.replace(" ", "");
        targetForm = target.toLowerCase();
        var totalPlus = $('#priceTotal').html()
        console.log(ticketTarget + '=' + targetForm);
        homepic = games[i][0].replace(" ", "").toLowerCase();
        awaypic = games[i][1].replace(" ", "").toLowerCase();
        if (!(i < g - 4)) {
            list += '<div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6 pull-left\"><div class=\"small-margin col-xs-12 col-sm-12 col-md-12 col-lg-12 col-lg-offset-1 kaarten\"> <div class=\"head\"> <div class=\"row text-center\" style=\"padding-top: 30px;\"> <div class=\"teams\"> <div style=\"padding-bottom: 20px;\" class=\"col-xs-8 col-lg-offset-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-sm-8 col-md-8 col-lg-8\"> <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <img src=\"assets\/img\/clubs\/' + homepic + '.png\" class=\"img-responsive club-img img-center\" alt=\"Image\"> <\/div><div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <h2 class=\"text-center\">VS<\/h2> <\/div><div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <img src=\"assets\/img\/clubs\/' + awaypic + '.png\" class=\"img-responsive club-img img-center\" alt=\"Image\"> <\/div><\/div><\/div><div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <h3 class=\"no-margin\">' + games[i][0] + ' VS ' + games[i][1] + '<\/h3> <\/div><div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <h4>' + games[i][3] + ' - €' + games[i][4] + ',- p.p<\/h4> <\/div><button type=\"button\" class=\"btn btn-voetbal buy btn-order\" id=\"' + ticketTarget + '\"' + /*onclick=\"bestelTickets();\" */ '>Koop kaarten<\/button> <\/div><\/div><\/div><\/div>';
        } else {
            list += '<div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6 pull-left\"><div class=\"small-margin col-xs-12 col-sm-12 col-md-12 col-lg-12 col-lg-offset-1 kaarten\"> <div class=\"head\"> <div class=\"row text-center\" style=\"padding-top: 30px;\"> <div class=\"teams\"> <div style=\"padding-bottom: 20px;\" class=\"col-xs-8 col-lg-offset-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-sm-8 col-md-8 col-lg-8\"> <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <img src=\"assets\/img\/clubs\/' + homepic + '.png\" class=\"img-responsive club-img img-center\" alt=\"Image\"> <\/div><div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <h2 class=\"text-center\">VS<\/h2> <\/div><div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <img src=\"assets\/img\/clubs\/' + awaypic + '.png\" class=\"img-responsive club-img img-center\" alt=\"Image\"> <\/div><\/div><\/div><div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <h3 class=\"no-margin\">' + games[i][0] + ' VS ' + games[i][1] + ' <span class="label label-danger">NEW</span><\/h3> <\/div><div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <h4>' + games[i][3] + ' - €' + games[i][4] + ',- p.p<\/h4>  <\/div><button type=\"button\" class=\"btn btn-voetbal buy btn-order\" id=\"' + ticketTarget + '\"' + /*onclick=\"bestelTickets();\" */ '>Koop kaarten<\/button> <\/div><\/div><\/div><\/div>';
        }
        ordermenu += '<div class=\"hidden' + target + '\" id=\"' + target + '\"> <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <div class=\"closeorder pull-right\"><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"><\/span><\/div><\/div><div class=\"bg-grey small-padding col-xs-12 col-sm-12 col-md-6 col-lg-6\"> <div class=\"col-lg-offset-2 col-md-offset-2 col-xs-offset-2 col-sm-offset-2 col-xs-8 col-sm-8 col-md-8 col-lg-8\"> <div class=\"col-xs-4 col-sm-4 col-md-4 col-md-4 col-lg-4\"> <img src=\"assets\/img\/clubs\/' + homepic + '.png\" class=\"img-responsive img-center\" alt=\"Image\"> <\/div><div class=\"text-center col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <h2>VS<\/h2> <\/div><div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <img src=\"assets\/img\/clubs\/' + awaypic + '.png\" class=\"img-responsive img-center\" alt=\"Image\"> <\/div><\/div><hr class=\"greenline\" style=\"padding: 15px 0px;\"><\/hr> <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <h5>Wedstijd:' + games[i][0] + ' vs ' + games[i][1] + '<\/h5> <h5>datum:' + games[i][3] + '<\/h5> <h5>kaarten over: <span style=\"color: red;\">' + games[i][2] + '<\/span><\/h5> <h5>inclusief deze reis:<\/h5> <ul class=\"style-list\">'+tipsBorder+'<\/ul> <\/div><\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">' + form + '<\/div><\/div><\/div><\/div>';
        $('#list-order').html(ordermenu);
        i++;
    }


    $('.searchnow').click(function() {
        var vinput = $('#searchvoetbal').val();
        vinput = vinput.toLowerCase();
        console.log(vinput);
        var succesorder = '';
        var notfound = 0;
        for (var i = 0; i < g; i++) {
            var home = games[i][0];
            var away = games[i][1];
            var date = games[i][3];
            var succesTotalPrice = games[i][4];

            $('#list-order').html(ordermenu);

            if (vinput.includes(home.toLowerCase()) || vinput.includes(away.toLowerCase())) {
                $('html, body').animate({ scrollTop: $('#search-list').offset().top }, 500);

                var succesh = home;

                var succesa = away;
                var succestarget = (succesa + succesh + 'succes').replace(" ", "").toLowerCase();
                var succeshpic = succesh.replace(" ", "").toLowerCase();
                var succesapic = succesa.replace(" ", "").toLowerCase();
                console.log(succestarget);
                succesForm = '<form id="' + succestarget+ '" class=\"inline\"><div class=\"form-group\"><label>Naam:<\/label><input type=\"text\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" required=\"required\" pattern=\"\" title=\"\"><\/div><div class=\"form-group\"><label>Achternaam:<\/label><input type=\"text\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" required=\"required\" pattern=\"\" title=\"\"><\/div><div class=\"form-group\"><label>Leeftijd<\/label><input type=\"number\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" min=\"{5\"}max=\"\" step=\"\" required=\"required\" title=\"\"><\/div><div class=\"form-group\"><label>Email:<\/label><input type=\"email\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" required=\"required\" title=\"\"><\/div><div class=\"form-group\"><span class=\"label\">Aantal kaarten:<\/span><select name=\"\" id=\"input\" class=\"custom form-control\" required=\"required\"><option value=\"1\">1<\/option><option value=\"2\">2<\/option><option value=\"3\">3<\/option><\/select><\/div><div class=\"form-group\"><label>Adress<\/label><input type=\"text\" name=\"\" id=\"input\" class=\"form-control\" value=\"\" pattern=\"\" title=\"\"><\/div><div class=\"form-group\"><div class=\"checkbox\"><label><input type=\"checkbox\" id=\"vervoer'+succestarget+'\" class=\"vervoer\" value=\"taxi\">Vervoer <\/label><a data-toggle=\"popover\" title=\"<b>Popover<b> Header\" data-content=\"Bij een markeren van deze optie, wordt u door een taxi opgehaalt bij een vliegveld of trein station. Voor meer informatie hier over bekijk onze veel gestelde vragen\'\"><span class=\"glyphicon glyphicon-info-sign\" aria-hidden=\"true\"><\/span><\/a><\/div><\/div><div class=\"form-group\"><label>Is het een kado? <\/label><label class=\"radio-inline\"> <input type=\"radio\" value="1" checked name=\"kado\"> Nee <\/label> <label class=\"radio-inline\"> <input type=\"radio\" value="2" name=\"kado\">Ja <\/label><\/div><div class=\"form-group total\"><h3 class=\"pull-right\">Totaal:  €<span id=\"' + succestarget + 'price\">' + succesTotalPrice + '<\/span><hr class=\"full greenline\"><\/h3><\/div><div class=\"form-group\"><button class=\"btn orderbtn btn-voetbal full\"><h4>Bestel kaarten<h4><\/h4><\/button><\/div><\/form>';
                succesorder += '<div class=\"' + succestarget + '\"> <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <div class=\"closeorder succesclose pull-right\"><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"><\/span><\/div><\/div><div class=\"bg-grey small-padding col-xs-6 col-sm-6 col-md-4 col-lg-6\"> <div class=\"col-lg-offset-2 col-xs-8 col-sm-8 col-md-8 col-lg-8\"> <div class=\"col-xs-3 col-sm-offset-2 col-sm-3 col-md-offset-2 col-xs-offset-2 col-md-3 col-lg-3\"> <img src=\"assets\/img\/clubs\/' + succeshpic + '.png\" class=\"img-responsive img-center\" alt=\"Image\"> <\/div><div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"> <h2>VS<\/h2> <\/div><div class=\"col-xs-3 col-sm-3 col-md-3 col-md-offset-1 col-xs-offset-1 col-sm-offset-1 col-lg-3\"> <img src=\"assets\/img\/clubs\/' + succesapic + '.png\" class=\"img-responsive img-center\" alt=\"Image\"> <\/div><\/div><hr class=\"greenline\" style=\"padding: 15px 0px;\"><\/hr> <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <h5>Wedstijd:' + games[i][0] + ' vs ' + games[i][1] + '<\/h5> <h5>datum:' + games[i][3] + '<\/h5> <h5>kaarten over: <span style=\"color: red;\">' + games[i][2] + '<\/span><\/h5> <h5>inclusief deze reis:<\/h5> <ul class=\"style-list\">'+tipsBorder+'<\/ul> <\/div><\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">' + form + '<\/div><\/div><\/div><\/div>';
                $('#searchorder').html(succesorder);
                searchlist = '<div class=\"small-margin col-xs-10 col-xs-offset-1 col-sm-6 col-md-6 col-lg-5 col-lg-offset-1 kaarten\"> <div class=\"head\"> <div class=\"row text-center\" style=\"padding-top: 30px;\"> <div class=\"teams\"> <div style=\"padding-bottom: 20px;\" class=\"col-xs-8 col-lg-offset-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-sm-8 col-md-8 col-lg-8\"> <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <img src=\"assets\/img\/clubs\/' + succeshpic + '.png\" class=\"img-responsive club-img img-center\" alt=\"Image\"> <\/div><div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <h2 class=\"text-center\">VS<\/h2> <\/div><div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\"> <img src=\"assets\/img\/clubs\/' + succesapic + '.png\" class=\"img-responsive club-img img-center\" alt=\"Image\"> <\/div><\/div><\/div><div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <h3 class=\"no-margin\">' + succesh + ' VS ' + succesa + '<\/h3> <\/div><div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"> <h4>' + games[i][3] + ' - €' + games[i][4] + ',- p.p<\/h4>  <\/div><button id=\"' + succestarget + '\" type=\"button\" class=\"btn btn-voetbal btn-order\">Koop kaarten<\/button> <\/div><\/div><\/div>';
                $('#ticket-list').fadeOut(400, function() {
                    $("#search-list").html(searchlist)

                    $('#' + succestarget).click(function() {
                        $('#tickets').fadeOut(400, function() {
                            $('#order').fadeIn(1);
                            $('#searchorder').fadeIn(400);
                        });
                    });

                    $('.succesclose').click(function() {
                        $('html, body').animate({ scrollTop: $('#kaarten').offset().top }, 500);
                        console.log('done scroll');
                        $('#searchorder').hide();
                        $('#search-list').fadeOut(1);
                        $('#order').fadeOut(400)
                        $('#ticket-list').fadeIn(400);
                        $('#tickets').delay(800).fadeIn(400, function() {});


                    });

                });




            } else {
                notfound = notfound + 1;
                console.log(notfound);
                if (notfound == g) {
                    alert('a');
                }
            }


        }
    });






    $('#ticket-list').html(list);

    var showTicket = '';
    $(".buy").click(function() {
        showTicket = ($(this).attr('id'));
        console.log(showTicket);

        $('#tickets').fadeOut(400);
        $('.hidden' + showTicket).css('display', 'block');
        $('#order').fadeIn(1);
        $('#' + showTicket).delay(500).fadeIn(400);
    });

    $('.closeorder').click(function() {
        $('#order').fadeOut(400, function() {
            $('.hidden' + showTicket).css('display', 'none');
        });


        $('#tickets').delay(800).fadeIn(400, function() {
            scrollDownTickets();
        });


        function scrollDownTickets() {
            $('html, body').animate({ scrollTop: $('#kaarten').offset().top + 0 }, 500);
            console.log('done scroll');
        };
    });


$('.vervoer').on('click',function () {
          showTicket = $(this).parents("form").attr("id");
        console.log(showTicket);
        var getPrice = $("#" + showTicket + "price").html();
        if ($('.vervoer').is(':checked')) {
            console.log('ga');
            if (!($('#hidden' + showTicket).is(":visible"))) {

                console.log(getPrice);
                getPrice = parseInt(getPrice);
                var newPrice = getPrice + 50;
                $("#" + showTicket + "price").html(newPrice);
            }
        } else {
            console.log('false');
            var oldPrice = getPrice;
            oldPrice = parseInt(oldPrice) - 50;
            $("#" + showTicket + "price").html(oldPrice);
        }
    });

    $(function() {
        $("#searchvoetbal").keypress(function(e) {
            if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
                $('.searchnow').click();
                return false;
            } else {
                return true;
            }
        });
    });

});