{% extends "cacsremoteservice/views/layouts/master.html" %}

{% block scripts %}
<script type="text/javascript">
  var reportPlans = [];
  {% for report in item.reports %}reportPlans.push('{{report.plan}}');{% endfor %}
  codescene.views.projects.reportConfiguration.init(reportPlans);

  // Add browser timezone as an option to all timezone selects if not already present,
  // and default to it for rows that have no stored timezone (e.g. the empty new row).
  var browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
  document.querySelectorAll('select.report-timezone').forEach(function(select) {
    var hasOption = Array.from(select.options).some(function(opt) { return opt.value === browserTz; });
    if (!hasOption) {
      var opt = document.createElement('option');
      opt.value = browserTz;
      opt.textContent = browserTz;
      select.insertBefore(opt, select.firstChild);
    }
    if (!select.querySelector('option[selected]')) {
      select.value = browserTz;
    }
  });
</script>
{% endblock %}


{% block secondary-nav %}
{% include "cacsremoteservice/views/projects/project-header.html" with project=item tabs=tabs %}
{% endblock %}


{% block main %}
<div class="project-configuration-view project-reports-view" id="page-body">
  <div class="text-content">
    <h2>Project Reports</h2>
    <p class="lead text-muted">
      Configure reports that are automatically generated and sent by mail at regular intervals.
    </p>
    <p class="help-block max-inline-3">
      Remember to configure the <a href={mailServerConfigUrl}>Mail Server</a> connection. The timezone setting
      controls when each schedule fires and how timestamps appear in reports.
    </p>

  <form action="" method="post" id="configform">
    <div class="form-group">
      <div class="form-headers">
        <div class="column-label report-recipient">Recipient</div>
        <div class="column-label report-type">Report Type</div>
        <div class="column-label reportplancontent">Generate Report</div>
        <div class="column-label report-timezone">Timezone</div>
      </div>
      <div class="input-list" id="report-list">
        {% for report in item.reports %}
        <div class="report-config-row">
          <input type="hidden" name="id_{{forloop.counter0}}" value="{{report.id}}" />
          <input type="hidden" name="plan_{{forloop.counter0}}" value="{{report.plan}}" />
          <input class="form-control report-recipient"
                 type="text"
                 name="address_{{forloop.counter0}}"
                 placeholder="Enter another email address..."
                 value="{{report.address}}" />
          <select name="type_{{forloop.counter0}}" class="report-type">
            {% for type in item.available-report-types %}
            <option value="{{ type.type }}" {% ifequal type.type report.type %}selected{% endifequal %}>
              {{ type.name }}
            </option>
            {% endfor %}
            {% if report.is-deprecated %}
            <option value="{{ report.type }}" selected>
              {{  report.type }}
            </option>
            {% endif %}
          </select>
          <div class="report-time reportplancontent">
            <div id="plan_{{forloop.counter0}}">
            </div>
          </div>
          <select name="timezone_{{forloop.counter0}}" class="report-timezone">
            {% for tz in item.timezone-options %}
            <option value="{{ tz }}" {% ifequal tz report.timezone %}selected{% endifequal %}>
              {{ tz }}
            </option>
            {% endfor %}
          </select>
        </div>
        {% endfor %}

        <input type="hidden" name="plan_{{item.reports|count}}" value="" />
        <div class="report-config-row">
            <input class="form-control report-recipient"
                   type="text"
                   name="address_{{item.reports|count}}"
                   placeholder="Enter another email address..."
                   value="" />

            <select name="type_{{item.reports|count}}" class="report-type">
              {% for type in item.available-report-types %}
              <option value="{{ type.type }}">
                {{ type.name }}
              </option>
              {% endfor %}
            </select>

          <div class="reportplancontent">
            <div id="plan_{{item.reports|count}}"></div>
          </div>
          <select name="timezone_{{item.reports|count}}" class="report-timezone">
            {% for tz in item.timezone-options %}
            <option value="{{ tz }}">
              {{ tz }}
            </option>
            {% endfor %}
          </select>
        </div>
      </div>
      <span class="help-block">The email addresses to your report recipients. Set to blank to delete.</span>
      <div class="row">
        <div class="col-xs-12 text-right" id='save-config-button'>
          <button class="default-button" type="submit">
            <i class="save-progress-indicator fa fa-check"></i>
            <span class="text">Save Report Configuration</span>
          </button>
        </div>
      </div>
    </div>
  </form>
  </div>
</div>
{% endblock %}