function assignPlaces() {
    const attendances = $('.attendance-id');
    attendances.each(function() {
        const seat_number = $(this).attr('id').split('++')[0];
        const name = $(this).attr('id').split('++')[1];
        const surname = $(this).attr('id').split('++')[2];
        const map_seat = $('#seat-map').find(`#${seat_number}`);
        map_seat.html(`<b>${seat_number}</b> <br><span class="preview-name">${name} ${surname}</span>`)
        map_seat.on('mouseover', () => {
            map_seat.css('backgroundColor', 'lightgrey');
            $(this).css('backgroundColor', 'lightgrey');
        }).on('mouseleave', () => {
            map_seat.css('backgroundColor', '#649a24');
            $(this).css('backgroundColor', 'unset');
        });
        $(this).on('mouseover', () => {
            map_seat.css('backgroundColor', 'lightgrey');
            $(this).css('backgroundColor', 'lightgrey');
        }).on('mouseleave', () => {
            map_seat.css('backgroundColor', '#649a24');
            $(this).css('backgroundColor', 'unset');
        })
    })
}


function checkForUnavailablePlaces() {
    const unavailablePlaces = Array();
    $('.unavailable_place').each(function(){
        unavailablePlaces.push($(this).val());
    });
    const allPlaces = $('.seatCharts-seat.seatCharts-cell.available');
    if(unavailablePlaces){
        allPlaces.each(function(){
            if(unavailablePlaces.includes($(this).text().split(" ")[0]) && !$(this).parent().hasClass('seatCharts-legendItem')) {
                $(this).addClass('taken');
                console.log($(this));
            }
        });
    }
}

$(document).ready(function(){
    assignPlaces();
    checkForUnavailablePlaces();
});