{% extends "qommon/forms/widget.html" %}
{% block widget-content %}
<div class="pp_mealcalendar">
    <h3></h3>
    <div class="days"></div>
</div>
{{ data_source.portail_parent_repas_scolaires|json_script:"portail_parent_menu" }}
<script type="text/javascript">
(function() {

    function get_days_in_month(year, month){
        let first_month_day = new Date(year, month, 1).getDate();
        let next_month = get_further_month(year, month, 1);
        let last_month_day = new Date(next_month['year'], next_month['month'], 0).getDate();
        result = last_month_day - first_month_day + 1;
        return result
    }

    function get_further_month(year, month, delta){
        let result;
        if (delta > 0) {
            let next_month;
            let next_month_year;
            if (month == 11) {
                next_month = 0;
                next_month_year = year + 1;
            } else {
                next_month = month + 1;
                next_month_year = year;
            }
            result = get_further_month(next_month_year, next_month, delta - 1);
        } else {
            result = {"year": year, "month": month};
        }
        return result;
    }

    function add_day(date, class_list) {
        let day = document.createElement("div");
        for (j = 0; j < class_list.length; j++) {
            day.classList.add(class_list[j]);
        }
        let title = document.createElement("h4");
        title.innerText = date.toLocaleDateString("fr-BE", { weekday: 'long' }) + " " + date.getDate();
        day.appendChild(title);
        return day;
    }

    function create_choice(choice) {
        let el = document.createElement("p");
        el.classList.add("choice");
        el.innerText = choice;
        return el
    }

    function check_uncheck(index){
      element_name = checkboxes_id() + "$element" + index;
      linked_element = document.getElementsByName(element_name)[0];
      linked_element.checked = !linked_element.checked;
    }

    let current_date = new Date();
    let month_selector = "{{ form.option.mois.raw|escapejs }}";
    let selected_month = get_further_month(current_date.getFullYear(), current_date.getMonth(), month_selector);
    let first_day_in_month = new Date(selected_month['year'], selected_month['month'], 1);
    let days_in_selected_month = get_days_in_month(selected_month['year'], selected_month['month']);
    let calendar_title = document.querySelector("div.pp_mealcalendar h3");
    calendar_title.innerText = first_day_in_month.toLocaleString("fr-BE", { month: "long" }) + " " + first_day_in_month.getFullYear();

    let pp_mealcalendar = document.querySelector("div.pp_mealcalendar .days");
    let month_menu = JSON.parse(document.getElementById('portail_parent_menu').innerText);

    // Add previous month days
    for (let i = 2-first_day_in_month.getDay(); i < 1; i++) {
        let date = new Date(selected_month.year, selected_month.month, i);
        if ([1, 2, 3, 4, 5].includes(date.getDay())) {
            let day = add_day(date, ["day", "inactive"]);
            pp_mealcalendar.appendChild(day);
        }
    }

    // Add selected month days
    for (let i = 1; i <= days_in_selected_month; i++) {
        let date = new Date(selected_month.year, selected_month.month, i);
        if ([1, 2, 3, 4, 5].includes(date.getDay())) {
            let day = add_day(date, ["day"]);
            let day_menu = month_menu.filter(meal => new Date(meal.date).getDate() == date.getDate());
            if (day_menu.length > 0) {
              for (let index_day_menu = 0; index_day_menu < day_menu.length; index_day_menu++) {
                  let choice = create_choice(day_menu[index_day_menu].text)
                  choice.id = day_menu[index_day_menu].id
                  day.appendChild(choice);
              }
            }
            else {
              day.classList.add("inactive")
            }
            pp_mealcalendar.appendChild(day);
        }

        // Add next month days
        if (i == days_in_selected_month) {
            let j = 1;
            while (date.getDay() != 0) {
                date = new Date(selected_month.year, selected_month.month, i+j);
                if ([1, 2, 3, 4, 5].includes(date.getDay())){
                    let day = add_day(date, ["day", "inactive"])
                    pp_mealcalendar.appendChild(day);
                }
                j++;
            }
        }
    }

    let dom_choices = function (){
      return document.querySelectorAll(".pp_mealcalendar .choice")
    }
    let checkboxes_id = function () {
      return document.getElementById("var_repas").getAttribute("data-widget-name")
    }

    for (let choice_index = 0; choice_index < dom_choices().length; choice_index++ ){
      if (document.getElementsByName(checkboxes_id() + "$element" + dom_choices()[choice_index].id)[0].checked) {
        dom_choices()[choice_index].classList.add('selected');
      }
      dom_choices()[choice_index].addEventListener('click', function(e) {
        let selected = this.parentNode.querySelector('.selected')
        if (this.isSameNode(selected)) {
          this.classList.remove('selected');
        } else if (selected != null) {
          selected.classList.remove('selected');
          this.classList.add('selected');
          check_uncheck(selected.id)
        } else {
          this.classList.add('selected');
        }
        check_uncheck(this.id);
      })
    }


})();
</script>
  <style>
    .pp_mealcalendar {
        width: 60em;
    }
    .pp_mealcalendar h3 {
        text-transform: capitalize;
    }
    .pp_mealcalendar .days {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .pp_mealcalendar .day {
        margin: 0;
        width: 12em;
        box-sizing: border-box;
    }
    .pp_mealcalendar .day h4 {
        text-align: center;
        font-weight: bold;
        margin: 0;
        text-transform: capitalize;
        padding: 1ex 0;
    }
    .pp_mealcalendar .day .choice {
      text-align: center;
      max-width: 95%;
      margin: 2ex auto;
      border-radius: 0.5em;
      cursor: pointer;
      font-weight: bold;
      padding: 1ex 0;
    }
    .pp_mealcalendar .day .choice:first-letter {
        text-transform: capitalize;
    }
    .pp_mealcalendar .day .choice.selected:after {
        content: " \002714";
    }

    @media all and (max-device-width: 60em) {
        .pp_mealcalendar {
            width: 300px;
            margin: 0 auto;

        }
        .pp_mealcalendar .day {
            width: 300px;
            justify-content: space-around;
            margin: 2ex auto;
            border-radius: 6px;
        }
        .pp_mealcalendar .day.inactive {
            display: none;
        }
    }
</style>
{% endblock %}