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

{% block widget-control %}
{% with options=widget.get_options|list %}
{% with first_monday=options.0.options.details.JOURDATE|adjust_to_week_monday last_option=options|last %}
{% with last_day=last_option.options.details.JOURDATE|adjust_to_week_monday|add_days:6 %}
{% now 'Y-m-d' as now %}

{% spaceless %}
<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><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.details.JOURDATE == day_str %}

  <li {% if option.disabled %}class="disabled"{% endif %}
     data-activity-type="{{ option.options.details.activity_type }}"
     data-activity-id="{{ option.options.details.activity_id }}"
     data-date="{{ option.options.details.JOURDATE }}"
     data-status="{{ option.options.details.status_color }}"
     {% if option.options.prefill and not option.disabled %}data-was-checked{% endif %}
     {% if widget.readonly and not option.disabled %}
       {% if option.selected and not option.options.prefill %}data-has-change
       {% elif not option.selected and option.options.prefill %}data-has-change
       {% endif %}
     {% endif %}
   ><label><input
   {% if not widget.value and option.options.prefill %}checked="checked"{% endif %}
   {% if option.selected %}checked="checked"
   {% elif widget.readonly or option.disabled %}disabled{% endif %}
   {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}
   type="checkbox"
   {% if widget.readonly %}value="yes" disabled
   {% else %}name="{{ option.name }}" value="yes"
       {% endif %}><span>{{ option.options.details.activity_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>
{% endspaceless %}
{% endwith %}
{% endwith %}
{% endwith %}
<style>
.template-caluire-reservations-enfant .content {
        margin-top: 1em;
        display: flex;
}
.template-caluire-reservations-enfant .content > ul {
        width: 100%;
}

.template-caluire-reservations-enfant .content > ul > li {
        display: none;
}
.template-caluire-reservations-enfant .content > ul > li.shown {
        display: block;
}
.template-caluire-reservations-enfant button.previous-week,
.template-caluire-reservations-enfant button.next-week {
        height: 3em;
        z-index: 10;
}
.template-caluire-reservations-enfant button.next-week {
        margin-left: 1em;
        margin-right: 0;
}
.template-caluire-reservations-enfant .week-title {
        display: block;
        height: 3em;
        line-height: 3em;
}
.template-caluire-reservations-enfant li.day-title {
        margin: 1em 0 0.5em 0;
}
.template-caluire-reservations-enfant .content label {
        position: relative;
}
.template-caluire-reservations-enfant .content input[disabled] {
        position: absolute;
        opacity: 0;
}
.template-caluire-reservations-enfant .content input[disabled] + span {
        padding-left: 1.8rem;
}
.template-caluire-reservations-enfant .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;
        border: 1px solid #aaa;
}
.template-caluire-reservations-enfant .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-caluire-reservations-enfant .content input:checked + span::after {
        background: #3c3;
}
.template-caluire-reservations-enfant .content input[disabled]:checked + span::after {
        background: #aaa;
}
.template-caluire-reservations-enfant .content [data-status=green] input[disabled] + span::after {
        background: #3c3;
}
.template-caluire-reservations-enfant .content [data-status=grey] input[disabled] + span::after {
        background: #aaa;
}
.template-caluire-reservations-enfant .content [data-status=orange] input[disabled] + span::after {
        background: orange;
}
.template-caluire-reservations-enfant .content [data-status=red] input[disabled] + span::after {
        background: red;
}
.template-caluire-reservations-enfant .content [data-status=yellow] input[disabled] + span::after {
        background: yellow;
}
div.CheckboxesWidget.template-caluire-reservations-enfant div.content ul li.disabled {
        color: #888;
}

.template-caluire-reservations-enfant.widget-readonly .content [data-status] input[disabled]:checked + span::after {
    background: #3f3;
}

.template-caluire-reservations-enfant.widget-readonly .content [data-status=green] input[disabled] + span::after {
    background: #3f3;
}

.template-caluire-reservations-enfant.widget-readonly .content [data-status=green][data-was-checked] input[disabled]:not(:checked) + span::after {
        background: orange;
}

.template-caluire-reservations-enfant .content [data-has-change] label {
        font-weight: bold;
}

br.weekbreak { display: none; }

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

  br.weekbreak { display: block; }

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

}
</style>
<script>
$('.template-caluire-reservations-enfant .previous-week').on('click', function() {
  var $prev = $('li.shown').prev();
  if ($prev.length) { $('li.shown').removeClass('shown'); $prev.addClass('shown'); }
  return false;
});
$('.template-caluire-reservations-enfant .next-week').on('click', function() {
  var $next = $('li.shown').next();
  if ($next.length) { $('li.shown').removeClass('shown'); $next.addClass('shown'); }
  return false;
});
$('.template-caluire-reservations-enfant li.day-title').each(function(idx, elem) {
  /* hide empty days */
  var $next = $(elem).next();
  if ($next.length == 0 || $next.is('.day-title')) {
    $(elem).hide();
  }
});
/* init first week shown */
var $cell = $('.template-caluire-reservations-enfant');
$('li', $cell).removeClass('shown');
if ($('li.day-title.current', $cell).length) {
  $('li.day-title.current', $cell).parent().parent().addClass('shown');
} else {
  $('li', $cell).first().addClass('shown');
}
$('.template-caluire-reservations-enfant input').on('change', function() {
  if ($(this).is(':checked')) {
    var $current_li = $(this).parents('li').first();
    $(this).parents('ul').find('li[data-activity-type="' +
                    $current_li.data('activity-type') + '"][data-date="' +
                    $current_li.data('date') + '"]:not([data-activity-id="' +
                    $current_li.data('activity-id') + '"])').find('input').prop('checked', false);
  }
});
</script>
{% endblock %}
