{% extends "balafon/bs_base.html" %}
{% load i18n balafon_utils %}

{% block extra_head %}
{{block.super}}
<script type="text/javascript" charset="utf-8" src="{{ STATIC_URL }}chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}chosen/chosen.css" type="text/css" />
<script>
    $(function() {

        var changeFilter = function(values, orderValue) {
          var filterValues = '';
          if (values) {
            filterValues = values;
          }
          if (values && orderValue) {
            filterValues += ",";
          }
          if (orderValue) {
            filterValues += orderValue;
          }

          window.location = "{% block this_url %}{% endblock%}?filter=" + filterValues;
        };

        $("select.filter").change(function() {
            var values = $(this).val();
            var orderValue = $("select.action-order").val();
            changeFilter(values, orderValue);
            return false;
        });

        $("select.action-order").change(function() {
            var values = $("select.filter").val();
            var orderValue = $("select.action-order").val();
            changeFilter(values, orderValue);
            return false;
        });
        
        $(".action-archive-filter a.btn").each(function(idx, elt) {
            var href = $(elt).attr("href");
            if (("" ===  href) || (href.charAt(0)==="?")) {
                $(elt).hide();
            }
        });

        $(".datepicker-trigger").on('click', function () {
          $('.datepicker').focus();
          return false;
        });

        var goToDate = function(planning_type, planning_date) {
          $.post(
            '{% url "crm_go_to_planning_date" %}',
            {
              planning_type: planning_type,
              planning_date: planning_date,
              filters: '' + $("select.filter").val()
            }
          ).done(function(data) {
              if (data.url) {
                window.location = data.url;
              }
          });
        };

        $(".datepicker").on('change', function () {
          if ($(this).val()) {
            goToDate('{{ planning_type }}', $(this).val());
          }
          return false;
        });

        $(".planningTypeSelector").on('change', function () {
          if ($(this).val()) {
            var dateToGo = '';
            {% if day %}dateToGo = '{{ day|date:"Y-m-d"}}';{% endif %}
            {% if month %}dateToGo = '{{ month|date:"Y-m-d"}}';{% endif %}
            {% if week %}dateToGo = '{{ week|date:"Y-m-d"}}';{% endif %}
            goToDate($(this).val(), dateToGo);
          }
          return false;
        });
    })
</script>
<style>
  .datepicker { margin-left: -45px; z-index: 0; border: transparent; opacity: 0;}
  .datepicker-trigger { z-index: 100;}
</style>
{% include "balafon/_calendar.html" with dateFormat='yy-mm-dd' %}
{% endblock %}

{% block document_content %}
<div class="action-archive-filter">
  <div class="row" style="margin-bottom: 20px;">
    <div class="col-md-8">
      <a class="btn btn-md btn-default" href="{% block prev_url %}{% endblock%}{% if filter %}?filter={{filter}}{% endif %}">
          <span style="font-size: 0.9em" class="glyphicon glyphicon-chevron-left"></span>
      </a>
      &nbsp;
      <a class="btn btn-md btn-default" href="{% block next_url %}{% endblock%}{% if filter %}?filter={{filter}}{% endif %}">
          <span style="font-size: 0.9em" class="glyphicon glyphicon-chevron-right"></span>
      </a>
      &nbsp;
      <h2 class="inline-block">
          {% block this_title %}{% endblock %}
      </h2>
    </div>
    <div class="col-md-4">
      {% if planning_type %}
      <div class="pull-right" style="padding: 0; margin: 0">
        <div style="display: inline-block;" class="pull-left">
          <select class="planningTypeSelector form-control" style="vertical-align: top;">
            <option value="day" {% if planning_type == "day" %}selected{%endif %}>{% trans "Day" %}</option>
            <option value="week" {% if planning_type == "week" %}selected{%endif %}>{% trans "Week" %}</option>
            <option value="month"{% if planning_type == "month" %}selected{%endif %}>{% trans "Month" %}</option>
          </select>
        </div>
        <div class="pull-left" style="margin-left: 5px;">
          <a class="btn btn-default datepicker-trigger" href="#">
            <span class="glyphicon glyphicon-calendar"></span>
          </a>
          <input type="date" id="showOnButton" class="datepicker pull-right" style="width: 1px;" />
        </div>
      </div>
      {% endif %}
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <select class="form-control action-filter chosen-select filter inline-block" multiple="" data-placeholder="{% trans 'Filter by' %}">
          {% if action_types %}
          <optgroup label="&nbsp;&nbsp;&nbsp;{% trans 'Action types' %}">
              <option value="t0" {% if no_type_selected %}selected="selected"{% endif %}>{% trans "No type" %}</option>
          {% for at in action_types %}
              <option value="t{{at.id}}" {% if at.selected %}selected="selected"{% endif %}>{{at.name}}</option>
          {% endfor %}
          </optgroup>
          {% endif %}
          {% if action_status %}
          <optgroup label="&nbsp;&nbsp;&nbsp;{% trans 'Action status' %}">
          {% for status in action_status %}
              <option value="s{{status.id}}" {% if status.selected %}selected="selected"{% endif %}>{{status.name}}</option>
          {% endfor %}
          </optgroup>
          {% endif %}
          <optgroup label="&nbsp;&nbsp;&nbsp;{% trans 'In charge' %}">
          {% for team_member in in_charge %}
              <option value="u{{team_member.id}}" {% if team_member.selected %}selected="selected"{% endif %}>
                  {{team_member.name}}
              </option>
          {% endfor %}
          </optgroup>
      </select>
    </div>
    <div class="col-md-2">
      <select class="form-control action-order">
        <option value="o1" {% if ordering == 'asc' %}selected="selected"{% endif %}>{% trans "Ascending" %}</option>
        <option value="o0" {% if ordering == 'desc' %}selected="selected"{% endif %}>{% trans "Descending" %}</option>
      </select>
    </div>
    <div class="col-md-2">
      {% for the_custom_menu in planning_custom_menus %}
        <div class="dropdown btn-group pull-right inline-block" style="vertical-align: top;">
          <a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown">
            {% if the_custom_menu.icon %}<span class="glyphicon glyphicon-{{ the_custom_menu.icon }}"></span>{% endif %}
            {{ the_custom_menu.label }}
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
              {% for custom_menu_item in the_custom_menu.get_children %}
              <li><a href="{{ custom_menu_item.get_url }}" {{ custom_menu_item.attributes|safe }} >
                <span class="glyphicon glyphicon-{{custom_menu_item.icon}}"></span>
                {{ custom_menu_item.label }}
              </a></li>
              {% endfor %}
          </ul>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

{% block action_archive_content %}
{% include "Crm/_section_actions.html" with actions=object_list %}
{% endblock %}

{% endblock %}
