{% extends "report_builder/base.html" %}
{% load static from staticfiles %}

{% block report_form %}
<div id="report_container">
  <form action="" method="post">{% csrf_token %}
    <header class="report_top">
      <div id="report_id" data-id="{{ object.id }}">
        <span class="pull_right">
            Last updated: {{ object.modified }}
            Model: {{ object.root_model }}
        </span>
        <span class="pull_left">
            {{ form.name }}   
        </span>
        <span class="fill_area">
            {{ form.description }}
        </span>
      </div>
    </header>
    
    <section class="sidebar">
      <section class="top_half">
        Related Fields:
        <input type="text" class="search_box" onkeyup="filter(this, 'related_fields_ol')" placeholder="Search Fields"/>
        <ol class="tree" id="related_fields_ol" style="padding-left: 0px; margin: 0px;">
          <li class="tree_expanded">
            <span class="button highlight" onclick="show_fields(event, '{{ object.root_model_id }}', '', '');">
              {{ object.root_model }}
            </span>
          </li>
          <li>{% include "report_builder/report_form_related_li.html" %}</li>
        </ol>
      </section>
      <div style="text-align: center;"><img style="width: 2.5em;" src="{% static 'report_builder/img/arrow_down.png' %}"/></div>
      <section class="bottom_half">
        Fields-drag to add
        <input type="text" class="search_box" onkeyup="filter(this, 'field_selection_div')" placeholder="Search Fields"/>
        <div id="field_selection_div">
          {% include "report_builder/report_form_fields_li.html" %}
        </div>
      </section>
 
    </section>
    <section class="main_area">
      <div id="tabs">
        <ul>
          <li><a href="#tabs-1">Report Display Fields</a></li>
          <li><a href="#tabs-2">Report Filters</a></li>
          <li><a href="#tabs-3">Preview Report</a></li>
        </ul>
        <div id="tabs-1">
          <div id="field_list_droppable" class="droppable">
            {{ field_list_formset.management_form }}
            {% for form in field_list_formset %}
              {{ form.errors }}
            {% endfor %}
            <table id="field_list_table" class="simple_table">
              <thead>
                <tr>
                  <th>Order</th>
                  <th>Delete</th>
                  <th>Field</th>
                  <th>Name</th>
                  <th>Sort<span style="padding-left: 1.2em;">Desc?</span></th>
                  <th>Width</th>
                  <th>Aggregate</th>
                  <th>Format</th>
                  <th>Total</th>
                  <th>Group</th>
                </tr>
              </thead>
              <tbody>
                {% for form in field_list_formset %}
                  <tr>
                    <td><span style="cursor: move;" class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
                    <td>{{ form.DELETE }}<span class="hide_me">{{ form.position }}</span></td>
                    <td>
                      {{ form.id }}
                      {{ form.path_verbose.as_hidden }}
                      {{ form.field }}
                      {{ form.field_verbose.as_hidden }}
                      {{ form.path }}
                      
                      {% if form.path_verbose.value %}
                        ({{ form.path_verbose.value }})
                      {% endif %}
                      {{ form.field_verbose.value }}
                    </td>
                    <td>{{ form.name }}</td>
                    <td>{{ form.sort }}{{ form.sort_reverse }}</td>
                    <td>{{ form.width }}</td>
                    <td onclick="aggregate_tip()">{{ form.aggregate }}</td>
                    <td>{{ form.display_format }}</td>
                    <td>{{ form.total }}</td>
                    <td>{{ form.group }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
            Drag fields here
            <div id="tip_area"></div>
          </div>
        </div>
        <div id="tabs-2">
          {{ form.distinct }}{{ form.distinct.label}} (Removes duplicates)
          <div id="field_filter_droppable" class="droppable">
            {{ field_filter_formset.management_form }}
            {% for form in field_filter_formset %}
              {{ form.errors }}
            {% endfor %}
            <table id="field_filter_table" class="simple_table">
              <thead>
                <tr>
                  <th></th>
                  <th>Delete?</th>
                  <th>Field</th>
                  <th>Filter Type</th>
                  <th>Value</th>
                  <th>Exclude?</th>
                </tr>
              </thead>
              <tbody>
                {% for form in field_filter_formset %}
                  <tr>
                    <td><span style="cursor: move;" class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
                    <td>{{ form.DELETE }}<span class="hide_me">{{ form.position }}</span></td>
                    <td>
                      {{ form.id }}
                      {{ form.path_verbose.as_hidden }}
                      {% if form.path_verbose.value %}
                        ({{ form.path_verbose.value }})
                      {% endif %}
                      {{ form.field }}
                      {{ form.field_verbose.as_hidden }}{{ form.field_verbose.value }}{{ form.path }}
                    </td>
                    <td>{{ form.filter_type }}</td>
                    {% if "DateField" in form.field_verbose.value %}
                        <td class="datepicker">{{ form.filter_value }} {{ form.filter_value2 }}</td>
                        <script>
                            $( ".datepicker input" ).datepicker();
                        </script>
                    {% else %}
                        <td>{{ form.filter_value }} {{ form.filter_value2 }}</td>
                    {% endif %}
                    <td>{{ form.exclude }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
            Drag fields here
            <div id="tip_area"></div>
          </div>
        </div>
        <div id="tabs-3">
          {% if async_report %}
            <a href="#" onclick="get_async_report({{ object.id }})">Download full xlsx</a>
          {% else %}
            <a href="{% url "report_download_xlsx" object.id %}">Download full xlsx</a>
          {% endif %}
          <div id="preview_area"></div>
        </div>
      </div>
        <input type="submit" value="Save" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
    </section>
  </form>
</div>
{% endblock %}
