$(document).ready(function() {

    function createMap(seats_rows, seats_container) {
        let $cart = $('#selected-seats');
        let seat_selected = false;
        seats_container.seatCharts({
            map: seats_rows,
            naming: {
                rows: ['', '', '', ''],
                top: false,
                left: false,
            },
            legend: {
                node: $('#legend'),
                items: [
                    ['c', 'available', 'Dostępne miejsce'],
                    ['f', 'unavailable', 'Zajęte miejsce']
                ]
            },
            click: function () {
                if (this.status() === 'available' && !seat_selected) {
                    // let's create a new <li> which we'll add to the cart items
                    $('<span> ' + this.settings.label + '</span>')
                        .attr('id', 'cart-item-' + this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($cart);
                    seat_selected = true;
                    return 'selected';
                } else if (this.status() === 'selected') {
                    //remove the item from our cart
                    $('#cart-item-' + this.settings.id).remove();
                    $('#item-' + this.settings.id).remove();
                    seat_selected = false;
                    return 'available';
                } else if (this.status() === 'unavailable') {
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }
        });
    }

    function createTwoPartsMap(seat_rows_first, seat_rows_second, seat_container_first, seat_container_second) {
        let $cart = $('#selected-seats');
        let seat_selected = false;
        seat_container_first.seatCharts({
            map: seat_rows_first,
            naming: {
                rows: ['', '', '', ''],
                top: false,
                left: false,
            },
            legend: {
                node: $('#legend'),
                items: [
                    ['c', 'available', 'Dostępne miejsce'],
                    ['f', 'unavailable', 'Zajęte miejsce']
                ]
            },
            click: function () {
                if (this.status() === 'available' && !seat_selected) {
                    // //let's create a new <li> which we'll add to the cart items
                    $('<span> ' + this.settings.label + ' <a href="#" class="cancel-cart-item">[x]</a></span>')
                        .attr('id', 'cart-item-' + this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($cart);
                    seat_selected = true;
                    return 'selected';
                } else if (this.status() === 'selected') {
                    // //remove the item from our cart
                    $('#cart-item-' + this.settings.id).remove();
                    $('#item-' + this.settings.id).remove();
                    seat_selected = false;
                    return 'available';
                } else if (this.status() === 'unavailable') {
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }
        });

        seat_container_second.seatCharts({
            map: seat_rows_second,
            naming: {
                rows: ['', '', '', ''],
                top: false,
                left: false,
            },
            click: function () {
                if (this.status() === 'available' && !seat_selected) {
                    // //let's create a new <li> which we'll add to the cart items
                    $('<span> ' + this.settings.label + ' <a href="#" class="cancel-cart-item">[x]</a></span>')
                        .attr('id', 'cart-item-' + this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($cart);
                    seat_selected = true;
                    return 'selected';
                } else if (this.status() === 'selected') {
                    // //remove the item from our cart
                    $('#cart-item-' + this.settings.id).remove();
                    $('#item-' + this.settings.id).remove();
                    seat_selected = false;
                    return 'available';
                } else if (this.status() === 'unavailable') {
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }

        });

        $('#selected-seats').on('click', '.cancel-cart-item', function () {
            const id = $(this).parent().data('seatId');
            $('#twoparts-map').find(`#${id}`).click();
        });
    }

    const seat_map = $('#room_arrangement').val().split('++');
    if (seat_map.length > 4) {
        const first_part = seat_map.slice(0, 4);
        const second_part = seat_map.slice(5);
        const seats_container_first = $('#seat-map-first');
        const seats_container_second = $('#seat-map-second');
        createTwoPartsMap(first_part, second_part, seats_container_first, seats_container_second);
    } else {
        const seats_container = $('#seat-map');
        createMap(seat_map, seats_container);
    }
});