{% 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 %}