Central Cinema

function solve() {
    // let movies = [];
    let nameElement = document.querySelector('#container input[placeholder="Name"]');
    let hallElement = document.querySelector('#container input[placeholder="Hall"]');
    let ticketPriceElement = document.querySelector('#container input[placeholder="Ticket Price"]');
    let moviesOnScreenSection = document.querySelector('#movies ul');
    let archiveSection = document.querySelector('#archive ul');

    //on screen button
    let onScreenButton = document.querySelector('#container button');
    onScreenButton.addEventListener('click', addMovie);

    // add movie to the list
    function addMovie(e) {
        e.preventDefault();

        let name = nameElement.value;
        let hall = hallElement.value;
        let ticketPrice = Number(ticketPriceElement.value);

        if(name && hall && ticketPrice && (typeof(ticketPrice) == 'number')) {
            // // make movie object
            // const movie = {
            //     name,
            //     hall,
            //     ticketPrice
            // };

            // //add movie to array movies
            // movies.push(movie);

            // clear inputs
            nameElement.value = '';
            hallElement.value = '';
            ticketPriceElement.value = '';

            // add to movies on screen list
            moviesOnScreenSection.innerHTML += `<li>
                <span>${name}</span>
                <strong>Hall: ${hall}</strong><div>
                    <strong>${ticketPrice.toFixed(2)}</strong>
                    <input placeholder="Tickets Sold">
                    <button>Archive</button>
                </div>
            </li>`;

            // archive buttons
            let archiveButtons = document.querySelectorAll('#movies button');
            Array.from(archiveButtons).forEach(button => button.addEventListener('click', addToArchive));
        }
    }

    //add to archive
    function addToArchive(e) {
        let ticketSoldElement = e.target.parentNode.parentNode.querySelector('input');
        let ticketSold = Number(ticketSoldElement.value);
        let movieName = e.target.parentNode.parentNode.querySelector('span').textContent;
        let ticketPrice = e.target.parentNode.parentNode.querySelector('div strong').textContent;
        let totalPrice = ticketPrice * ticketSold;

        if(ticketSold && (typeof(ticketSold) == 'number')) {

            // add to archive
            archiveSection.innerHTML += `<li>
                <span>${movieName}</span>
                <strong>Total amount: ${totalPrice.toFixed(2)}</strong>
                <button>Delete</button>
            </li>`;

            // delete from movies on screen list
            e.target.parentNode.parentNode.remove();

            // delete buttons and clear button
            let deleteButtons = document.querySelectorAll('#archive button');
            Array.from(deleteButtons).forEach(button => button.addEventListener('click', deleteFromArchive));
        }
    }

    //delete from archive
    function deleteFromArchive(e) {
        let button = e.target;
        let liElements = document.querySelectorAll('#archive li');

        if(button.textContent == 'Delete') {
            button.parentNode.remove();
        } else if(button.textContent == 'Clear' && liElements) {
            Array.from(liElements).forEach(li => li.remove());
        }
    }
}