{% extends "reminders/survey_base.html" %}
{% load url from future %}

{% block head %}{{ block.super }}

<style type="text/css">
    #sample {
        width: auto;
        margin-left: 0px;
        background-color: #FFF;
    }
    #sample_info {
        width: auto;
        margin-left: 0px;
    }
    .table tbody td {
        padding: 2px;
    }
</style>

{% endblock %}

{% block js-inline %}{{ block.super }}
<script type="text/javascript">
    function remove_contact_record(ref) {
        cell_ref = ref.parentNode;
        row_ref = cell_ref.parentNode;
        tbody_ref = row_ref.parentNode;
        tbody_ref.removeChild(row_ref);
    }
    
    function create_contact_record() {
        var tr = document.createElement("TR");
        var td1 = document.createElement("TD");
        var td2 = document.createElement("TD");
        var td3 = document.createElement("TD");
        var input1 = document.createElement("INPUT");
        input1.setAttribute("type", "hidden");
        input1.setAttribute("name", "sample_contact." + current_sample_contact_num + ".id");
        input1.setAttribute("value", "< auto-generate >");
        var input2 = document.createElement("INPUT");
        input2.setAttribute("type", "text");
        input2.setAttribute("name", "sample_contact." + current_sample_contact_num + ".phone_number");
        var button = document.createElement("SPAN");
        button.setAttribute("class", "btn btn-danger");
        button.innerHTML = '<i class="icon icon-white icon-remove"></i> Remove';
        button.onclick = function() { remove_contact_record(this); };
        //
        current_sample_contact_num++;
        //
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        td1.innerHTML = "&lt; auto-generate &gt;";
        td1.appendChild(input1);
        td2.appendChild(input2);
        td3.appendChild(button);
        //
        return tr;
    }
    
    function add_contact_record() {
        document.getElementById("sample_tbody").appendChild(create_contact_record());
    }
    
    {% if form.sample_contacts.value|length == 0 %}
    var current_sample_contact_num = 1;
    {% else %}
    var current_sample_contact_num = {{ form.sample_contacts.value|length }};
    {% endif %}
    
    function upload_option_changed() {
        if($("input[name=use_contact_upload_file]:checked").val() == "Y") {
            $("#enter_contacts_div").hide();
            $("#upload_file_div").show();
        } else {
            $("#enter_contacts_div").show();
            $("#upload_file_div").hide();
        }
    }
    
    $(function() {
        $("[name=use_contact_upload_file]").click(function() {
            upload_option_changed();
        });
        upload_option_changed();
    });
</script>

{% endblock %}

{% block survey_content %}
<br />
<form id="sample_form" action="" method="post" enctype="multipart/form-data">
    <table id="sample_info">
        <tbody>
            {% if form.name.errors %}
            <tr>
                <th></th>
                <td>{{ form.name.errors }}</td>
            </tr>
            {% endif %}
            <tr>
                <th><h4>Name: </h4></th>
                <td>{{ form.name }}</td>
            </tr>
            <tr>
                <th><h4>Time Zone: </h4></th>
                <td>{{ form.time_zone }}</td>
            </tr>
        </tbody>
    </table>
    <br />
    <h4>Contacts</h4>
    NOTE: Phone numbers must consist only of digits and must be in international format (country code and number).<br /><br />
    <input type="radio" name="use_contact_upload_file" value="Y" {% if form.use_contact_upload_file.value == "Y" %}checked="checked"{% endif %} /> Upload a list of phone numbers <br />
    <input type="radio" name="use_contact_upload_file" value="N" {% if form.use_contact_upload_file.value != "Y" %}checked="checked"{% endif %} /> Enter each phone number below <br /><br />
    <div class="form-block" id="enter_contacts_div">
        {{ form.sample_contacts.errors }}
        <table id="sample" class="table table-bordered">
            <thead>
                <tr>
                    <th>Identifier</th>
                    <th>Phone Number</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="sample_tbody">
                {% if form.sample_contacts.value|length == 0 %}
                <tr>
                    <td>&lt; auto-generate &gt;</td>
                    <td><input name="sample_contact.0.phone_number" type="text" /></td>
                    <td><span class="btn btn-danger" onClick="remove_contact_record(this);"><i class="icon icon-white icon-remove"></i> Remove</span></td>
                </tr>
                {% else %}
                    {% for contact in form.sample_contacts.value %}
                    <tr>
                        <td>{{ contact.id }}<input type="hidden" name="sample_contact.{{ forloop.counter0 }}.id" value="{{ contact.id }}" /></td>
                        <td>
                            {% if contact.case_id %}
                            <a href="{% url "edit_contact" domain sample_id contact.case_id %}">{{ contact.phone_number }}</a>
                            <input name="sample_contact.{{ forloop.counter0 }}.case_id" type="hidden" value="{{ contact.case_id }}" />
                            {% endif %}
                            <input name="sample_contact.{{ forloop.counter0 }}.phone_number" type="{% if contact.case_id %}hidden{% else %}text{% endif %}" value="{{ contact.phone_number }}" />
                        </td>
                        <td><span class="btn btn-danger" onClick="remove_contact_record(this);"><i class="icon icon-white icon-remove"></i> Remove</span></td>
                    </tr>
                    {% endfor %}
                {% endif %}
            </tbody>
        </table>
        <br />
        <span class="btn btn-success" onClick="add_contact_record();"><i class="icon icon-white icon-plus"></i> Add Contact</span>
        <br />
    </div>
    <div class="form-block" id="upload_file_div">
    {{ form.contact_upload_file.errors }}
    <p>Choose an Excel file (*.xlsx): {{ form.contact_upload_file }}</p>
    <p>NOTE: The excel file must contain a column labeled "PhoneNumber".</p>
    </div>
    <br />
    <input type="submit" class="btn btn-primary" value="Submit" />
</form>

{% endblock %}
