{% extends edc_base_template %}
{% load static %}

{% block extrastyle %}{{ block.super }}
<style>
  /* compact, scrollable pivot with sticky header + first column */
  .review-scroll { overflow: auto; max-height: 80vh; }
  .review-table { font-size: 12px; margin-bottom: 0; }
  .review-table th, .review-table td { white-space: nowrap; padding: 4px 8px; }
  .review-table thead th {
    position: sticky; top: 0; z-index: 2; background-color: #fff;
    box-shadow: inset 0 -1px 0 #ddd;
  }
  .review-table tbody th, .review-table tfoot th:first-child {
    position: sticky; left: 0; z-index: 1; background-color: #fff;
  }
  .review-table thead th:first-child { left: 0; z-index: 3; }
  .review-table tfoot th {
    position: sticky; bottom: 0; z-index: 2; background-color: #f5f5f5;
    box-shadow: inset 0 1px 0 #ddd;
  }
  .review-cell-zero { color: #cfd8dc; }
  .review-cell-has { background-color: #fdebd0; }
  .review-chip { display: inline-block; margin-top: 4px; }
  /* django-admin style paginator */
  .review-paginator { margin: 12px 0; font-size: 13px; }
  .review-paginator a,
  .review-paginator .this-page,
  .review-paginator .ellipsis {
    display: inline-block; padding: 2px 8px; margin-right: 2px; line-height: 1.4;
  }
  .review-paginator a {
    background: #f8f8f8; border: 1px solid #ccc; border-radius: 3px;
    color: #205067; text-decoration: none;
  }
  .review-paginator a:hover { background: #eee; }
  .review-paginator .this-page {
    background: #79aec8; border: 1px solid #79aec8; border-radius: 3px;
    color: #fff; font-weight: bold;
  }
  .review-paginator .ellipsis { color: #999; }
  .review-paginator .paginator-count { color: #999; margin-left: 10px; }
</style>
{% endblock extrastyle %}

{% block main %}
{{ block.super }}

<div class="container-fluid">

  <h4><a id="home" href="{% url 'edc_metadata:home_url' %}" class="btn btn-sm btn-primary"><i class="fas fa-reply fa-1x fa-fw" aria-hidden="true"></i></a>&nbsp;Manage Missing CRFs and Requisitions</h4>

  {% if no_schedule %}
    <div class="alert alert-warning">No visit schedules are loaded.</div>
  {% else %}

  {# ---- filter bar ---- #}
  <div class="panel panel-default">
  <div class="panel-heading">Filters</div>
    <div class="panel-body">
    <p>Select the options you need and click `Apply filters` to filter the table of missing forms below. The default shows all for the site.</p>
      <form id="filter-form" method="get">
        <input type="hidden" name="lens" value="{{ lens }}">

        <div class="row">
          <div class="col-sm-3">
            <div class="form-group">
              <label class="control-label">Subject</label>
              <input type="text" name="subject_identifier" value="{{ subject_identifier }}" class="form-control input-sm"
                     placeholder="subject identifier or leave blank">
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label class="control-label">Schedule</label>
              <select name="schedule" class="form-control input-sm">
                {% for value, label in schedule_choices %}
                  <option value="{{ value }}" {% if value == selected_schedule %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label class="control-label">Site</label>
              <select name="site" class="form-control input-sm">
                <option value="" {% if selected_site_value == '' %}selected{% endif %}>All sites</option>
                {% for value, label in site_choices %}
                  <option value="{{ value }}" {% if value|stringformat:'s' == selected_site_value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label class="control-label">Visit</label>
              <select name="visit_code" class="form-control input-sm">
                <option value="">All visits</option>
                {% for code, title in columns %}
                  <option value="{{ code }}" {% if code == selected_visit_code %}selected{% endif %}>{{ code }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label class="control-label">CRFs</label>
              <select name="models" class="form-control input-sm" multiple size="3">
                {% for value, label in crf_model_choices %}
                  <option value="{{ value }}" {% if value in selected_models %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select>
              <p class="help-block" style="margin:4px 0 0;">
                Hold down "Control", or "Command" on a Mac, to select more than one or deselect.
              </p>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label class="control-label">Visit type</label>
              <select name="visit_type" class="form-control input-sm">
                <option value="" {% if selected_visit_type == '' %}selected{% endif %}>All visit types</option>
                <option value="scheduled" {% if selected_visit_type == 'scheduled' %}selected{% endif %}>Scheduled</option>
                <option value="unscheduled" {% if selected_visit_type == 'unscheduled' %}selected{% endif %}>Unscheduled</option>
              </select>
            </div>
          </div>
        </div>
      </form>

      {# ---- saved filters (above Apply) ---- #}
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group">
            <label class="control-label">Select a custom filter (optional)</label>
            <select id="saved_filter" class="form-control input-sm" onchange="loadSavedFilter(this)">
              <option value="">&mdash; load a custom filter &mdash;</option>
              {% for f in saved_filters %}
                <option value="{{ f.id }}" data-query="{{ f.query }}" {% if f.id == selected_filter_id %}selected{% endif %}>{{ f.name }}{% if f.shared %} (shared){% endif %}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="col-sm-6 pull-right">
          <div class="well well-sm">
            <div class="form-group" style="margin-bottom:0;">
              <label class="control-label">Save current filters (optional)</label>
              <form method="post" action="{% url 'edc_metadata:manage_missing_save_filter_url' %}" class="form-inline" onsubmit="return syncSaveQuery(this)">{% csrf_token %}
                <input type="hidden" name="query" value="{{ filter_querystring }}">
                <input type="text" name="name" class="form-control input-sm" placeholder="custom filter name" required>
                {% if can_share %}<label class="checkbox-inline"><input type="checkbox" name="shared" value="1"> Share saved filter with team</label>{% endif %}
                <button type="submit" class="btn btn-default btn-sm pull-right" style="margin-bottom:4px;">Save custom filter</button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-12">
          <button type="submit" form="filter-form" class="btn btn-primary" style="padding-left: 2rem; padding-right: 2rem;">Apply filters</button>
          <button type="button" class="btn btn-default" style="margin-left:6px;" onclick="clearFilters()">Clear filters</button>
          <form method="post" action="{% url 'edc_metadata:manage_missing_delete_filter_url' %}" class="pull-right" style="display:inline;">{% csrf_token %}
            <input type="hidden" name="filter_id" id="delete_filter_id">
            <button type="button" id="delete_filter_btn" class="btn btn-danger btn-sm"
                    style="{% if not selected_filter_id %}display:none;{% endif %}"
                    onclick="deleteSavedFilter(this.form)">Delete selected custom filter</button>
          </form>
        </div>
      </div>
      <script>
        function loadSavedFilter(sel) {
          var opt = sel.options[sel.selectedIndex];
          var q = opt ? opt.getAttribute('data-query') : '';
          window.location.href = '{% url "edc_metadata:manage_missing_url" %}' + (q ? '?' + q : '');
        }
        function clearFilters() {
          var ff = document.getElementById('filter-form');
          // text inputs -> empty
          Array.prototype.forEach.call(ff.querySelectorAll('input[type="text"]'), function (el) {
            el.value = '';
          });
          // single selects -> first option; multi-select -> deselect all
          Array.prototype.forEach.call(ff.querySelectorAll('select'), function (sel) {
            if (sel.multiple) {
              Array.prototype.forEach.call(sel.options, function (o) { o.selected = false; });
            } else {
              sel.selectedIndex = 0;
            }
          });
          // reset the saved-filter dropdown too (does not navigate)
          var saved = document.getElementById('saved_filter');
          if (saved) { saved.selectedIndex = 0; }
        }
        function deleteSavedFilter(form) {
          var sel = document.getElementById('saved_filter');
          if (!sel.value) { return; }
          document.getElementById('delete_filter_id').value = sel.value;
          form.submit();
        }
        function syncSaveQuery(saveForm) {
          // capture the LIVE filter selections (not the last-applied state)
          var ff = document.getElementById('filter-form');
          var p = new URLSearchParams();
          p.set('site', ff.elements['site'] ? ff.elements['site'].value : '');
          ['schedule', 'visit_code', 'visit_type', 'q'].forEach(function (n) {
            var el = ff.elements[n];
            if (el && el.value) { p.set(n, el.value); }
          });
          var models = ff.elements['models'];
          if (models) {
            Array.prototype.forEach.call(models.selectedOptions, function (o) {
              if (o.value) { p.append('models', o.value); }
            });
          }
          saveForm.elements['query'].value = p.toString();
          return true;
        }
      </script>
    </div>
  </div>

  {# ---- lens toggle ---- #}
  <div class="clearfix">
      <div class="btn-group pull-left" role="group" style="margin-bottom:12px;">
        <a href="?{{ filter_querystring }}&lens=overview"
        class="btn {% if lens == 'overview' %}btn-primary{% else %}btn-default{% endif %}">
        Overview</a>
        <a href="?{{ filter_querystring }}&lens=grid"
        class="btn {% if lens == 'grid' %}btn-primary{% else %}btn-default{% endif %}">
        View by subject</a>
     </div>
          {% if lens == 'overview' %}
              <a href="{% url 'edc_metadata:manage_missing_export_overview_url' %}?{{ filter_querystring }}" class="btn btn-default pull-right" style="margin-left:6px;" title="Export the overview to Excel">
                  <i class="fas fa-file-excel" aria-hidden="true"></i> Export
              </a>
          {% endif %}
          {% if unavailable_count %}
              <a href="{% url 'edc_metadata:manage_missing_flagged_url' %}" class="btn btn-default pull-right" title="Review all forms flagged as data unavailable">
                  Review flagged: {{ unavailable_count }}
              </a>
          {% endif %}
  </div>

  <p class="small text-muted">
  {% if lens == 'grid' %}
    {% if crf_only %}
      Cells show <strong># missing CRF</strong> counts for the selected CRFs only
    {% else %}
      Cells show the counts of "<strong># CRFs / # Requisitions</strong>" missing.
    {% endif %}
      Click a cell to review and/or update the status of a CRF or Requisition.
  {% else %}
      Cells show the number of missing documents per visit.
      Click a cell to expand the number of missing documents by subject.
  {% endif %}
    </p>
  {# ================= GRID ================= #}
  {% if lens == 'grid' %}
  <div class="review-scroll">
    <table class="table table-condensed table-hover review-table">
      <thead>
        <tr>
          <th>Subject ({{ subject_count }})</th>
          {% for code, title in columns %}<th class="text-center" title="{{ title }}">{{ code }}</th>{% endfor %}
          <th class="text-center">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for row in grid %}
          <tr>
            <th>{{ row.subject_identifier }}</th>
            {% for cell in row.cells %}
              <td class="text-center {% if cell.total == 0 %}review-cell-zero{% else %}review-cell-has{% endif %}">
                {% if cell.total == 0 %}&middot;{% else %}
                  {% if crf_only %}
                    {% if cell.url %}<a href="{{ cell.url }}">{{ cell.crf }}</a>{% else %}{{ cell.crf }}{% endif %}
                  {% else %}
                    {% if cell.url %}<a href="{{ cell.url }}">{{ cell.crf }} / {{ cell.req }}</a>{% else %}{{ cell.crf }} / {{ cell.req }}{% endif %}
                  {% endif %}
                {% endif %}
              </td>
            {% endfor %}
            <td class="text-center"><strong>{{ row.total }}</strong></td>
          </tr>
        {% empty %}
          <tr><td colspan="{{ columns|length|add:2 }}" class="text-center text-muted">
            No missing forms for this selection.</td></tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          {% for total in column_totals %}<th class="text-center">{{ total }}</th>{% endfor %}
          <th class="text-center">{{ grand_total }}</th>
        </tr>
      </tfoot>
    </table>
  </div>

  <p class="review-paginator">
    {% if page_obj.has_previous %}
      <a href="?{{ filter_querystring }}&lens={{ lens }}&page={{ page_obj.previous_page_number }}">&lsaquo; Prev</a>
    {% endif %}
    {% for num in page_range %}
      {% if num == page_obj.paginator.ELLIPSIS %}
        <span class="ellipsis">{{ num }}</span>
      {% elif num == page_obj.number %}
        <span class="this-page">{{ num }}</span>
      {% else %}
        <a href="?{{ filter_querystring }}&lens={{ lens }}&page={{ num }}">{{ num }}</a>
      {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
      <a href="?{{ filter_querystring }}&lens={{ lens }}&page={{ page_obj.next_page_number }}">Next &rsaquo;</a>
    {% endif %}
    <span class="paginator-count">{{ subject_count }} subject{{ subject_count|pluralize }}</span>
  </p>

  {# ================= LEADERBOARD ================= #}
  {% else %}
  <div class="review-scroll">
    <table class="table table-condensed table-hover review-table">
      <thead>
        <tr>
          <th>Missing CRFs</th>
          {% for code, title in columns %}<th class="text-center" title="{{ title }}">{{ code }}</th>{% endfor %}
          <th class="text-center">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for row in overview %}
          <tr>
            <th>{{ row.verbose_name }}</th>
            {% for cell in row.cells %}
              <td class="text-center {% if cell.count == 0 %}review-cell-zero{% endif %}">
                {% if cell.count == 0 %}&middot;{% else %}<a href="{{ cell.url }}">{{ cell.count }}</a>{% endif %}
              </td>
            {% endfor %}
            <td class="text-center"><strong>{{ row.total }}</strong></td>
          </tr>
        {% empty %}
          <tr><td colspan="{{ columns|length|add:2 }}" class="text-center text-muted">
            No missing CRFs for this selection.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <p class="small text-muted">
    Each cell is the number of distinct subjects with that CRF missing at the visit.
    Click a cell to open the matching subjects in the grid.
  </p>
  {% endif %}

  {% endif %}{# no_schedule #}
</div>
{% endblock main %}