{% extends "ci/base.html" %}
{% load static %}
{% load bootstrap %}
{% block pagetitle %}Report Generation{% endblock %}
{% block content %}
<div class="dashhead">
  <div class="dashhead-titles">
    <h6 class="dashhead-subtitle">Seed Control Interface</h6>
    <h2 class="dashhead-title">Report Generation</h2>
  </div>

  <div class="btn-toolbar dashhead-toolbar">
    <div class="btn-toolbar-item input-with-icon">
    </div>
  </div>
</div>

<hr class="m-t">

{% if messages %}
  {% for message in messages %}
    {% if message.tags == 'error' %}
      <div class="alert alert-danger" role="alert">
    {% else %}
      <div class="alert alert-success" role="alert">
    {% endif%}
        <p class="{{ message.tags }}">{{ message }}</p>
    </div>
  {% endfor %}
{% endif %}

<div class="row">
  <div class="form-horizontal form-group row col-md-5 col-md-offset-2">
    <label class="control-label col-md-4" for="id_report_type">Report type</label>
    <div class="col-md-8">
      <select class="form-control" name="report_type" id="report_type">
        <option value="">---</option>
        {% for name, form in forms.items %}
          <option value="{{ name }}">{{ name|cut:'_form'|title }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
    

  {% for name, form in forms.items %}
      <form hidden id="{{ name }}" class="form-horizontal report-form" enctype="multipart/form-data" method="post" action=".">
        <div class="row col-md-8 col-md-offset-2">
          <div class="panel panel-default ">
              <ul class="list-group">
                <li class="list-group-item">
                  Request generation of the reports for the given date range. The reports will be emailed to recipients if they are specified.
                </li>
                <li class="list-group-item">
                  <div class="top-buffer-10">
                    {% csrf_token %}
                    {{ form|bootstrap_horizontal:'col-md-3' }}
                  </div>
                </li>
              </ul>
              <div class="panel-footer">
                <button class="btn btn-primary generate"><i class="fa fa-cogs" aria-hidden="true"></i> Generate Reports</button>
              </div>
          </div>
        </div>
      </form>
  {% endfor %}

</div>

<hr class="m-t">

<div class="row col-md-12">
  <h3 class="reports__heading">Report Tasks</h3>
  <div class="table-full">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Created</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Email Subject</th>
            <th>Size</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for task in report_tasks.results %}
          <tr>
            <td>{{ task.created_at|get_date|date:"D d M Y H:i" }}</td>
            <td>{{ task.start_date }}</td>
            <td>{{ task.end_date }}</td>
            <td>{{ task.email_subject }}</td>
            <td>{% if task.file_size %}{{ task.file_size|filesizeformat }}{% endif %}</td>
            <td>
                {% if task.error %}
                  <a data-toggle="popover" title="{{ task.error }}">{{ task.status }}</a>
                {% else %}
                   {{ task.status }}
                {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="email-to hide">
  <div class="input-group control-group bottom-buffer-10 email-to-group">
    <input type="text" class="form-control email-fields" placeholder="Recipient email">
    <div class="input-group-btn">
      <button class="btn btn-danger remove" type="button"><i class="fa fa-times" aria-hidden="true"></i></button>
    </div>
  </div>
  <button class="btn btn-success add-more" type="button"><i class="fa fa-plus" aria-hidden="true"></i></button>
</div>

</div>

<hr class="m-t">
<script type="text/javascript">

    $(document).ready(function() {
      // Replace encoded quotes with double quotes to make valid json
      var forms = JSON.parse("{{ forms.keys }}".replace(/&#39;/g, '\"'))

      $.each(forms, function(k){
        // Get form and email_to field ids
        var form_id = "#".concat(forms[k]);
        var prefix = forms[k].replace("_form", "");
        var email_to_id = "#".concat(prefix, "_email_to");

        if ($(email_to_id).val() != '') {
          var emails = $(email_to_id).val().split(",");
          $(email_to_id).val('');
          $.each(emails,function(i){
            $(email_to_id).after($(".email-to .email-to-group").clone().addClass("field-clone"));
            $(form_id).find(".field-clone .email-fields").each(function(i){
              $(this).attr('value', emails[i]);
            });
          });
        }
        else {
          $(email_to_id).after($(".email-to .email-to-group").clone().addClass("field-clone"));
        };

        $(email_to_id).addClass("hide")
        $(form_id).find(".field-clone:first .remove")
            .replaceWith($(".email-to .add-more").clone().show());
      });

      $(".add-more").click(function(){
          $(this).parents(".control-group").after($(".email-to .email-to-group").clone());
      });

      $("body").on("click",".remove",function(){
          $(this).parents(".control-group").remove();
      });

      $("body").on("click",".generate",function(){
        var id_prefix = $(this).parents(".form-horizontal").attr("id").replace("_form", "");
        var email_fields = $(this).parents(".form-horizontal").find(".email-fields")
        email_fields.each(function(){
          if ($(this).val() == '')
            $(this).parents(".form-horizontal .control-group").remove();
            $("#".concat(id_prefix, "_email_to")).val(email_fields.map( function() {
                return this.value;
              }).get().join(","));
        });
      });

      $("#report_type").on("change", function(){
        var dropdown = $("#report_type");
        var form = $("#"+dropdown.val());
        $(".report-form:visible").hide();
        form.show();
        form.find("[name='report_type']").val(dropdown.val().replace("_form", ""));
      });

      $("#report_type").val("{{ report_type }}_form");
      $("#{{ report_type }}_form").show();

    });

</script>

{% endblock %}