{% extends "qommon/forms/widget.html" %}

{% block widget-control %}
{% with options=widget.get_options|list %}

{% with first_monday=options.0.options.date|date|adjust_to_week_monday last_option=options|last %}
{% with last_day=last_option.options.date|date|adjust_to_week_monday|add_days:6 %}
{% now 'Y-m-d' as now %}

<button class="previous-week">←</button>
<ul>
{% for day in first_monday|iterate_days_until:last_day %}
{% if day.weekday == 0 %}
{% if not forloop.first %}</ul></li>{% endif %}
<li class="week{% if forloop.first %} shown{% endif %}"><span class="week-title">Semaine<br class="weekbreak"> du {{day|date:"d/m"}} au {{day|add_days:6|date:"d/m"}}</span><ul>
{% endif %}
<li class="day-title {% if form.var.current_day == day|date:"Y-m-d" or not form.var.current_day and now == day|date:"Y-m-d" %}current{% endif %}" data-weekday="{{day.weekday}}"><strong>{{day|date:"l d/m"}}</strong></li>
  {% with day_str=day|date:"Y-m-d" %}
    {% for option in options %}
      {% if option.options.date == day_str %}

  <li {% if option.disabled %}class="disabled"{% endif %}
     data-date="{{ option.options.date }}"
     {% if option.options.status %}data-status="{{ option.options.status }}"{% endif %}
     {% if widget.readonly and not option.disabled %}
       {% if option.selected and not option.options.booked_for_external_user %}data-has-change
       {% elif not option.selected and option.options.booked_for_external_user %}data-has-change
       {% endif %}
     {% endif %}
   ><label><input
   {% if not widget.value and option.options.booked_for_external_user %}checked="checked"
   {% elif widget.value and option.options.booked_for_external_user and option.disabled %}checked="checked"
   {% elif option.selected %}checked="checked"{% endif %}
   {% if widget.readonly or option.disabled %}disabled{% endif %}
   {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}
   type="checkbox"
   data-event-id="{{ option.options.id }}"
   data-overlaps="{{ option.options.overlaps|join:" " }}"
   {% if widget.readonly %}value="yes" disabled
   {% else %}name="{{ option.name }}" value="yes"
       {% endif %}><span>{{ option.options.label }}</span></label>
   {% if widget.readonly and option.selected %}<input type="hidden" name="{{ option.name }}" value="yes">{% endif %}
   </li>

      {% endif %}
    {% endfor %}
  {% endwith %}
  {% if forloop.last %}</ul></li>{% endif %}
{% endfor %}
</ul>
<button class="next-week">→</button>
{% endwith %}
{% endwith %}
{% endwith %}
<style>
.template-famille-reservations-par-semaine .content {
        margin-top: 1em;
        display: flex;
}

.template-famille-reservations-par-semaine .content ul li label {
        line-height: 150%;
}

.template-famille-reservations-par-semaine.widget-readonly .content {
        margin-right: 1em;
}

.template-famille-reservations-par-semaine .content > ul {
        width: 100%;
}

.template-famille-reservations-par-semaine .content > ul > li {
        display: none;
}
.template-famille-reservations-par-semaine .content > ul > li.shown {
        display: block;
}
.template-famille-reservations-par-semaine button.previous-week,
.template-famille-reservations-par-semaine button.next-week {
        height: 3em;
        z-index: 10;
}
.template-famille-reservations-par-semaine button.previous-week {
        margin-left: 0;
        margin-right: 1em;
}
.template-famille-reservations-par-semaine button.next-week {
        margin-left: 1em;
        margin-right: 0;
}
.template-famille-reservations-par-semaine .week-title {
        display: block;
        height: 3em;
        line-height: 3em;
}
.template-famille-reservations-par-semaine li.day-title {
        margin: 1em 0 0.5em 0;
}
.template-famille-reservations-par-semaine .content label {
        position: relative;
}
.template-famille-reservations-par-semaine .content input[disabled] {
        position: absolute;
        opacity: 0;
}
.template-famille-reservations-par-semaine .content input[disabled] + span {
        padding-left: 1.66rem;
}
.template-famille-reservations-par-semaine .content input[disabled] + span::before {
        display: block;
        content: '';
        position: absolute;
        margin: auto;
        height: calc(0.66rem + 2px);
        width: calc(0.66rem + 2px);
        background: transparent;
        top: 0.33rem;
        left: 0;
        border: 1px solid black;
        border-radius: 2px;
}
.template-famille-reservations-par-semaine .content input[disabled] + span::before {
        border: 1px solid #aaa;
}
.template-famille-reservations-par-semaine .content input[disabled] + span::after {
        display: block;
        content: '';
        position: absolute;
        margin: auto;
        height: calc(0.66rem);
        width: calc(0.66rem);
        background: transparent;
        transition: background 0.1s linear;
        top: calc(0.33rem + 1px);
        left: 1px;
}
.template-famille-reservations-par-semaine .content input:checked + span::after {
        background: #3c3;
}

.template-famille-reservations-par-semaine .content [data-status=booked] input[disabled] + span::after {
        background: #3c3;
}
.template-famille-reservations-par-semaine .content [data-status=absence] input[disabled] + span::after {
        background: red;
}
.template-famille-reservations-par-semaine .content [data-status=cancelled] input[disabled] + span::after {
        background: yellow;
}

div.CheckboxesWidget.template-famille-reservations-par-semaine div.content ul li.disabled {
        color: #888;
}

.template-famille-reservations-par-semaine.widget-readonly .content [data-has-change] input[disabled]:checked + span::after {
        background: #3f3;
}

.template-famille-reservations-par-semaine.widget-readonly .content [data-status=booked][data-has-change] input[disabled]:not(:checked) + span::after {
        background: yellow;
}

.template-famille-reservations-par-semaine .content [data-has-change] label {
        font-weight: bold;
}

br.weekbreak { display: none; }

@media screen and (max-width: 500px) {

  br.weekbreak { display: block; }

  div.template-famille-reservations-par-semaine div.content > ul {
    margin: 0 -4em;
  }
  div.template-famille-reservations-par-semaine div.content > ul .week-title {
    margin: 0 4em;
    line-height: 150%;
    text-align: center;
  }

}
</style>
<script>
$('.template-famille-reservations-par-semaine .previous-week').on('click', function() {
  var $prev = $('li.shown').prev();
  if ($prev.length) { $('li.shown').removeClass('shown'); $prev.addClass('shown'); }
  return false;
});
$('.template-famille-reservations-par-semaine .next-week').on('click', function() {
  var $next = $('li.shown').next();
  if ($next.length) { $('li.shown').removeClass('shown'); $next.addClass('shown'); }
  return false;
});
$('.template-famille-reservations-par-semaine li.day-title').each(function(idx, elem) {
  /* hide empty days */
  var $next = $(elem).next();
  if ($next.length == 0 || $next.is('.day-title')) {
    $(elem).hide();
  }
});
/* check overlaps */
$('.template-famille-reservations-par-semaine input').on('change', function() {
  if ($(this).is(':checked')) {
    $(this).parents('ul').find("input[data-overlaps~='"+$(this).data('event-id')+"']").prop('checked', false);
  }
});
$('.template-famille-reservations-par-semaine input:disabled').each(function(index) {
  if ($(this).attr('checked')) {
    $(this).parents('ul').find("input[data-overlaps~='"+$(this).data('event-id')+"']").prop('disabled', true);
  }
});
/* init first week shown */
var $cell = $('.template-famille-reservations-par-semaine');
$cell.find('li').removeClass('shown');
if ($('li.day-title.current', $cell).length) {
  $('li.day-title.current', $cell).parents('li.week').addClass('shown');
} else {
  $('li', $cell).first().addClass('shown');
}
</script>
{% endblock %}
