function change_strategy(eventData) {
    $('#strategy_select option[value=-1]').attr('disabled', 'disabled')
}

function get_matchup(eventData) {
    console.log($('.player-checkbox:checked'))
    player_ids = $('.player-checkbox:checked').map(function(){return $(this).val()}).get().join()
    strategy_id = $('#strategy_select').val()
    console.log(`Player_ids is ${player_ids}`)
    console.log(`Strategy_id is ${strategy_id}`)
    
    $.ajax({
        type: 'GET',
        url: '/api/suggest/matchup?player_id',
        data: {
            player_ids: player_ids,
            strategy_id: strategy_id
        },
        contentType: 'application/json',
        dataType: 'json',
        success: function(data) {
            console.log(data);
            $('#matchup_display_div').html('<h1>Suggested matchups</h1>')
            for (var i = 0; i<data.length; i++) {
                matchup = data[i]
                $('#matchup_display_div').append($(`<h2>Matchup ${i+1}</h2>`))
                console.log(`${matchup['description']}`)
                $('#matchup_display_div').append($(`<strong>Description:</strong> <span>${matchup['description']}</span>`))
                $('#matchup_display_div').append($(`<h3>Participants</h3>`))
                ol = $('#matchup_display_div').append($('<ol>'))
                for (var j = 0; j<matchup.participants.length; j++) {
                    ol.append($(`<li><strong>${matchup.participants[j][0]}</strong> playing <strong>${matchup.participants[j][1]}</strong></li>`))
                }
            }
        }
    })
}

$(document).ready(function() {
    $('#strategy_select').on('change', change_strategy);

    $('#get_matchup').click(get_matchup)
})