{
  let dagen = [];
  let $dagnu;
  let selectedDay;
  let $movies;

  const parseJson = (jsonData) => {
    dagen = jsonData.schedule;
    const titel = jsonData.complex;
    $titel = document.querySelector(`h1`);
    $titel.textContent = `${titel}`;
    dagen.forEach(dag => {
      $alledagen = document.querySelector(`ul`);
      $dag = document.createElement(`li`);
      $alledagen.appendChild($dag);
      $dag.textContent = dag.date;
      $dag.addEventListener(`click`, handleClickListitem);
      //console.log(dag.date);
    })



  }

  const handleClickListitem = (e) => {
    $dagnu = e.currentTarget;
    const $alleActieveDagen = document.querySelectorAll(`.active`);
    $alleActieveDagen.forEach(actieveDag => {
      actieveDag.classList.remove(`active`);
    })
    e.currentTarget.classList.add(`active`);
    if (document.querySelector(`.movies`).innerHTML != ``) {
      document.querySelector(`.movies`).innerHTML = ``;
    }

    handleClickCheckbox();
  }

  const showMoviesTrue = () => {
    if (document.querySelector(`.movies`).innerHTML != ``) {
      document.querySelector(`.movies`).innerHTML = ``;
    }
    dagen.forEach(dag => {
      if ($dagnu.innerHTML === dag.date) {
        selectedDay = dag;
      }
    })
    const $movies = document.querySelector(`.movies`);
    const $h2 = document.createElement(`h2`);
    $movies.appendChild($h2);
    $h2.textContent = selectedDay.date;
    selectedDay.movies.forEach(movie => {
      if(movie.kids == true) {
        console.log(movie.title);
        const $article = document.createElement(`article`);
        $article.classList.add(`movie`)
        const $image = document.createElement(`img`);
        $article.innerHTML = `<h3>${movie.title}</h3><img src="assets/img/${movie.img}" width="216" /><p class="description">${movie.description}</p><div class="meta"><p>${movie.screenings}</p><p>${movie.room}</p></div>`;
        $movies.appendChild($article);
      }

    })
  }

  const showMovies = () => {
    if (document.querySelector(`.movies`).innerHTML != ``) {
      document.querySelector(`.movies`).innerHTML = ``;
    }
    dagen.forEach(dag => {
      if ($dagnu.innerHTML === dag.date) {
        selectedDay = dag;
      }
    })
    const $movies = document.querySelector(`.movies`);
    const $h2 = document.createElement(`h2`);
    $movies.appendChild($h2);
    $h2.textContent = selectedDay.date;
    selectedDay.movies.forEach(movie => {
        console.log(movie.title);
        const $article = document.createElement(`article`);
        $article.classList.add(`movie`)
        const $image = document.createElement(`img`);
        $article.innerHTML = `<h3>${movie.title}</h3><img src="assets/img/${movie.img}" width="216" /><p class="description">${movie.description}</p><div class="meta"><p>${movie.screenings}</p><p>${movie.room}</p></div>`;
        $movies.appendChild($article);

    })
  }

  const handleClickCheckbox = (e) => {

        if(document.getElementById('kids').checked) {
          showMoviesTrue();
        } else {
          showMovies();
        }
        console.log($checkbox.value);


  }

  loadJson = () => {
    const url = `./assets/data/buda.json`;
    fetch(url).then(r => r.json()).then(jsonData => parseJson(jsonData));
  }

  const init = () => {
    loadJson();
    const $checkbox = document.getElementById('kids');
    $checkbox.addEventListener(`change`, handleClickCheckbox);

  }

  init();
}