{% extends 'edc_dashboard/base.html' %}
{% load static %}

{% block extrastyle %}{{ block.super }}
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
{% endblock extrastyle %}

{% block document_ready %}{{ block.super }}
<script>
    $(document).ready(function () {
        var table = $('#call_list_table').DataTable({
            order: [[0, 'asc']],
            pageLength: 25,
            columnDefs: [{orderable: false, targets: [4, 7]}]
        });

        function exactColumnFilter(selectId, columnIndex) {
            $(selectId).on('change', function () {
                var v = this.value;
                table
                    .column(columnIndex)
                    .search(v ? '^' + $.fn.dataTable.util.escapeRegex(v) + '$' : '', true, false)
                    .draw();
            });
        }

        exactColumnFilter('#site_filter', 1);
        exactColumnFilter('#agreed_filter', 5);

        // Reset filters on (re)load so the dropdowns match the unfiltered table,
        // even when the browser restores form state from bfcache.
        $('#site_filter, #agreed_filter').val('');

    });
</script>
{% endblock document_ready %}

{% block main %}

{{ block.super }}

<div class="col-sm-1">&nbsp;</div>
<div class="col-sm-10">
    <div class="panel panel-default">
        <div class="panel-heading">
            <i class="fas fa-phone fa-lg fa-fw"></i> Call list
            <span class="pull-right">
          <a href="{% url 'edc_retinopathy:home_url' %}">
            <i class="fas fa-reply fa-fw"></i> Back</a>
        </span>
        </div>
        <div class="panel-body">
            <form class="form-inline" style="margin-bottom:12px;">
                <div class="form-group">
                    <label>Site</label>
                    <select id="site_filter" class="form-control input-sm" autocomplete="off">
                        <option value="">All sites</option>
                        {% for site_id in site_choices %}
                        <option value="{{ site_id }}">{{ site_id }}</option>
                        {% endfor %}
                    </select>
                </div>
                &nbsp;&nbsp;
                <div class="form-group">
                    <label>Agreed</label>
                    <select id="agreed_filter" class="form-control input-sm" autocomplete="off">
                        <option value="">All</option>
                        {% for agreed in agreed_choices %}
                        <option value="{{ agreed }}">{{ agreed }}</option>
                        {% endfor %}
                    </select>
                </div>
            </form>
            <table id="call_list_table" class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Subject</th>
                    <th>Site</th>
                    <th>Last visit</th>
                    <th>Age</th>
                    <th></th>
                    <th>Agreed</th>
                    <th>Appt</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                {% for registered_subject in registered_subjects %}
                <tr>
                    <td>{{ registered_subject.subject_identifier }}</td>
                    <td>{{ registered_subject.site_id }}</td>
                    <td data-order="{{ registered_subject.last_visit|date:'U' }}">
                        {{ registered_subject.last_visit|date:"Y-m-d"|default:"" }}
                    </td>
                    <td>{{ registered_subject.age_in_years|default_if_none:"" }}{{ registered_subject.gender }}</td>
                    <td>
                        {% if registered_subject.contact_attempt_pk %}
                        <a href="{% url 'edc_retinopathy_admin:edc_retinopathy_contactattempt_change' registered_subject.contact_attempt_pk %}?next=edc_retinopathy:call-list"
                           class="btn btn-sm btn-success">
                            <i class="fas fa-phone fa-fw"></i> Log ({{ registered_subject.attempts }})</a>
                        {% else %}
                        <a href="{% url 'edc_retinopathy_admin:edc_retinopathy_contactattempt_add' %}?registered_subject={{ registered_subject.id }}&amp;next=edc_retinopathy:call-list"
                           class="btn btn-sm btn-warning">
                            <i class="fas fa-phone fa-fw"></i> Log</a>
                        {% endif %}
                    </td>
                    <td data-order="{{ registered_subject.attempts|default_if_none:'-1' }}"
                        data-search="{% if registered_subject.contact_attempt_pk %}{{ registered_subject.agreed|default_if_none:'' }}{% else %}{{ not_contacted }}{% endif %}">
                        {% if registered_subject.contact_attempt_pk %}{{ registered_subject.agreed }}{% endif %}
                    </td>
                    <td data-order="{{ registered_subject.attend_date|date:'U' }}">
                        {{ registered_subject.attend_date|date:"Y-m-d"|default:"" }}
                    </td>
                    <td>{% if registered_subject.attend_date %}
                        <a href="{% url 'edc_retinopathy_admin:edc_retinopathy_eyeexamregister_add' %}?registered_subject={{ registered_subject.id }}&amp;next=edc_retinopathy:call-list"
                           class="btn btn-sm btn-warning">
                            <i class="fas fa-eye fa-fw"></i> Register eye exam</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="col-sm-1">&nbsp;</div>

{% endblock main %}