{% extends sitebase.html %}
{% block head %}
<script type = "text/javascript"
	src = "{% raw qiita_config.portal_dir %}/static/vendor/js/jquery.validate.min.js">
</script>
<style>
  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }
</style>

<script>
$(document).ready(function() {
    $("#new_person_div").hide();
     $( "#{{creation_form.principal_investigator.id}}" ).chosen({
        allow_single_deselect: true
     });
    $( "#{{creation_form.lab_person.id}}" ).chosen({
        allow_single_deselect: true
      });

    $("#study_title").on("keyup", function() {
      var title = $(this).val();
      // removing any duplicated whitespaces
      title = title.replace(/ +(?= )/g, '');
      //remove all utf-8 encoded characters that are not also printable ASCII characters.
      title = title.replace(/[^\x20-\x7E]+/g, "");
      // removing white spaces from the front of the text
      $(this).val(title.trimLeft());
    });

    $("#new_person_name").on("keyup", function() {
      var npn  = $(this).val();
      // removing any duplicated whitespaces
      npn = npn.replace(/ +(?= )/g, '');
      //remove all utf-8 encoded characters that are not also printable ASCII characters.
      npn = npn.replace(/[^\x20-\x7E]+/g, "");
      // removing white spaces from the front of the text
      $(this).val(npn.trimLeft());
    });

    $("#create_study").validate({
      ignore: "",
      submitHandler: function (form) {
        //from http://stackoverflow.com/a/18265708
        // let's disable the inputs for the duration of the ajax request
        $("#create_study_submit").prop('disabled', true);

        // fire off ajax the request
        request = $.ajax({
          type: "GET",
          url: '{% raw qiita_config.portal_dir %}/check_study/',
          data: {study_title: $("#study_title")[0].value.trim() {% if study %}, old_study_title: "{% raw study.title.replace('"', '\\"') %}"{% end %} }
        });

        // callback handler that will be called on success
        request.done(function (response, textStatus, jqXHR) {
            if (response == 'True') {
                form.submit();
            }
            else {
                var title = $("#study_title")[0].value.trim();
                $("#create_study_submit").prop('disabled', false);
                $("#messagespan").text("Study '" + title + "' already exists! Please choose a different name.");
                alert($("#messagespan").text());
                $("#study_title").val(title)
            }
        });

        // callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown) {
            // log the error to the console
            console.error(
                "The following error occured: " + textStatus, errorThrown);
            $("#create_study_submit").prop('disabled', false);
        });
    },
      rules:{
{% for idx, form_item in enumerate(creation_form, start=1) %}
  {% if form_item.flags.required %}
    {{form_item.name}}: {required:true},
  {% end %}
{% end %}
      },
      messages: {
{% for idx, form_item in enumerate(creation_form, start=1) %}
  {% if form_item.flags.required %}
    {{form_item.name}}: '{{form_item.label.text}} is required',
  {% end %}
{% end %}
      },
      errorLabelContainer: "#errorspan",
      wrapper: "li",
    });

    $('#{{creation_form.principal_investigator.id}}').on('change', function(e) {
      $("#create_study").validate().element("#{{creation_form.principal_investigator.id}}");
    });
});

counter = -1;

function add_new_person(name, affiliation, email, phone, address) {
    if (name.value == '') {
        $("#new_person_name").focus();
        return false;
    };
    if (affiliation.value == '') {
        $("#new_person_affiliation").focus();
        return false;
    };
    if (email.value == '') {
        $("#new_person_email").focus();
        return false;
    };

    var new_element = '<option value="'+counter+'" "selected">' + name.value + ', ' + affiliation.value + '</option>';

    $("#{{creation_form.principal_investigator.id}}").append(new_element);
    $("#{{creation_form.lab_person.id}}" ).append(new_element);
    $("#{{creation_form.principal_investigator.id}}").trigger("chosen:updated");
    $("#{{creation_form.lab_person.id}}" ).trigger("chosen:updated");
    $("#new_person_div").hide(400);

    $("#create_study").append('<input type="hidden" name="new_people_names" value="' + name.value + '">');
    $("#create_study").append('<input type="hidden" name="new_people_affiliations" value="' + affiliation.value + '">');
    $("#create_study").append('<input type="hidden" name="new_people_emails" value="' + email.value + '">');
    $("#create_study").append('<input type="hidden" name="new_people_phones" value="' + phone.value + '">');
    $("#create_study").append('<input type="hidden" name="new_people_addresses" value="' + address.value + '">');

    counter -= 1;
};

{% if study %}
function cancel_edition(){
  if (confirm("Are you sure you want to go to the study description page? None of the changes will be stored")){
    window.location.href = "{% raw qiita_config.portal_dir %}/study/description/{{study.id}}";
  }
}
{% end %}

</script>

{% end %}

{% block content %}
<h1>{% if study %}Edit study (ID: {{study.id}}) {% else %}Create a new Study{%end%}</h1>
<hr/>
<h3>If you are planning to load a study with data already present in NCBI SRA or EBI ENA, please complete <a target="_blank" href="https://docs.google.com/forms/d/1SIq_JNWai7cZ2wwjD8xZpTab7qBifLKu3TZm2B363CE/edit?ts=5fbe8c0b&gxids=7628">this form</a> as we may be able to assist.
<hr/>
<h3>
    <font color="red">*</font> = Required Field
</h3>
<span id="errorspan" name="errorspan" style="color: red"></span>
<span id="messagespan" name="messagespan" style="color: red"></span>
<br />
<form id="create_study" name="create_study" action={%if study%}'{% raw qiita_config.portal_dir %}/study/edit/{{study.id}}'{%else%}'{% raw qiita_config.portal_dir %}/study/create/'{%end%} method="POST">
<table>
{% for idx, form_item in enumerate(creation_form, start=1) %}
    {% set kwargs = {'tabindex': idx, 'class_': 'form-control'} %}
    {% set additional_info = form_item.description %}
    {# form-item-specific rendering #}
    {% if form_item.label.text == 'Environmental Packages' %}
        {% set kwargs['size'] = len(form_item.choices) %}
        {% set additional_info = 'You can select multiple entries by control-clicking (mac: command-clicking)' %}
    {% elif form_item.label.text == 'Principal Investigator'%}
        {% set kwargs['class_'] = kwargs['class_'] + ' chzn-select' %}
			  <tr>
			    <td></td>
			    <td><b>Can't find the person you're looking for? <a href="#bot" onclick='$("#new_person_div").show(400); return false;'>Add a person</a></b></td>
			  </tr>
			  <tr>
			    <td></td>
			    <td>
			      <div name="new_person_div" id="new_person_div">
			        <table>
			          <tr>
			              <td><b>Name:</b><br><font size=1>Names may only contain ASCII characters </font></td>
			            <td><input type="text" id="new_person_name" name="new_person_name" class="form-control"></td>
			            <td><h4>&nbsp;&nbsp;<font color="red">*</font></h4></td>
			          </tr>
			            <td><b>Affiliation:</b></td>
			            <td><input type="text" id="new_person_affiliation" name="new_person_affiliation" class="form-control"></td>
			            <td><h4>&nbsp;&nbsp;<font color="red">*</font></h4></td>
			          </tr>
			          <tr>
			            <td><b>E-mail Address:</b></td>
			            <td><input type="text" id="new_person_email" name="new_person_email" class="form-control"></td>
			            <td><h4>&nbsp;&nbsp;<font color="red">*</font></h4></td>
			          </tr>
			          <tr>
			            <td><b>Phone:</b></td>
			            <td><input type="text" id="new_person_phone" name="new_person_phone" class="form-control"></td>
			          </tr>
			          <tr>
			            <td><b>Address:</b></td>
			            <td><input type="text" id="new_person_address" name="new_person_address" class="form-control"></td>
			          </tr>
			          <tr>
			            <td>
			              <table>
			                <tr>
			                  <td><input value="Add Person" type="button" class="btn btn-link" onclick='add_new_person(create_study.new_person_name, create_study.new_person_affiliation, create_study.new_person_email, create_study.new_person_phone, create_study.new_person_address);'></td>
			                  <td><input value="Cancel" type="button" class="btn btn-link" onclick='$("#new_person_div").hide(400); return true;'></td>
			                </tr>
			              </table>
			            </td>
			          </tr>
			        </table>
			      </div>
			    </td>
    {% elif form_item.label.text == 'Study Title'%}
        {% set additional_info = 'Study titles may only contain ASCII characters' %}
    {% end %}
  <tr>
    <td width="20%">{% raw form_item.label %} <br /> <small>{{additional_info}}</small></td>
    <td width="30%">{% raw form_item(**kwargs) %}</td>
    <td width="50%">{% if form_item.flags.required %}<font color="red"><h4>&nbsp;&nbsp;*</h4></font>{% end %}</td>
  </tr>
{% end %}
  </tr>
  <tr>
    <td>
      <a name="bot"><input type='submit' id="create_study_submit" class='btn btn-success' value="{%if study%}Update{%else%}Create{%end%} Study">
      {%if study%} <input type='button' id="cancel_form" class='btn btn-default' value="Cancel" onclick="cancel_edition()">{%end%}
    </td>
  </tr>
</table>
</form>
{% end %}