{% from qiita_core.qiita_settings import qiita_config %}
<script type="text/javascript">
  /*
   * Function to update the prep information contents
   *
   * This function executes an AJAX query to modify the contents of the
   * prep information and updates the interface accordingly
   *
   */
  function update_prep_information() {
    var fp = $("#file-selector").val();
    $.ajax({
      url: '{% raw qiita_config.portal_dir %}/prep_template/',
      type: 'PATCH',
      data: {'op': 'replace', 'path': '/{{prep_id}}/data', 'value': fp},
      success: function(data) {
        if(data.status == 'error') {
          bootstrapAlert(data.message, "danger");
        }
        else {
          populate_main_div('{% raw qiita_config.portal_dir %}/study/description/prep_template/', { prep_id: {{prep_id}}, study_id: {{study_id}} });
        }
      }
    });
  }

  /*
   *
   * Function to create a new ENA investigation type term and update the template
   *
   * This function executes an AJAX query to add a new user-defined term to the
   * ENA ontology, then updates the current prep information to have the newly
   * added term and it updates the interface accordingly
   *
   */
  function add_new_investigation_type_term_and_update() {
    var new_val = $("#new-ontology").val();
    if (!new_val.match(/^[0-9a-zA-Z ]+$/)) {
      bootstrapAlert("Only alphanumeric characters and space are allowed.", "danger");
    }
    else {
      $.ajax({
        url: '{% raw qiita_config.portal_dir %}/ontology/',
        type: 'PATCH',
        data: {'op': 'add', 'path': '/ENA/', 'value': new_val},
        success: function(data) {
          if(data.status == 'error') {
            bootstrapAlert(data.message,  "danger");
          }
          else {
            // Add the new term to the user defined list, mark it as selected,
            // clean the text box and hide it
            var v = $("#new-ontology").val();
            $('#user-ontology option').last().before($('<option>').attr({'value': v}).text(v));
            $('#user-ontology').val(v);
            $('#new-ontology').val('');
            $("#new-ena-info").hide();
            update_investigation_type(v);
          }
        }
      });
    }
  }

  /*
   *
   * Updates the investigation type of the prep information
   *
   * @param value string with the new investigation type value
   *
   * This function executes an AJAX call to update the investigation type
   * of the current prep information
   *
   */
  function update_investigation_type(value) {
    // Once we update the investigation_type we can't put it back to undefined
    // so remove the empty values
    $("#ena-ontology option[value='']").remove();
    $("#user-ena-info option[value='']").remove();

    $.ajax({
      url: '{% raw qiita_config.portal_dir %}/prep_template/',
      type: 'PATCH',
      data: {'op': 'replace', 'path': '/{{prep_id}}/investigation_type', 'value': value},
      success: function(data) {
        if(data.status == 'error') {
          bootstrapAlert(data.message, "danger");
        }
      }
    });
  }

  /*
   *
   * Deletes a sample from the prep template
   *
   * @param prep_id the prep template id
   *
   * This function executes an AJAX call to remove the given sample from the
   * prep information
   *
   */
  function delete_prep_sample(prep_id) {
    var sample_names = Array();
    var message = '';
    $('.prep-sample-delete:checkbox:checked').each(function(){
      sample_names.push($(this).val());
    });
    if (sample_names.length == 0) {
      alert('No samples selected');
      return false;
    }
    if (sample_names.length > 10) {
      message = sample_names.length + ' samples';
    } else {
      message = "'" + sample_names.join(', ') + "'";
    }
    if(confirm("Are you sure you want to delete " + message + "?")) {
      sample_names = sample_names.join(',')
      $.ajax({
        url: '{% raw qiita_config.portal_dir %}/prep_template/',
        type: 'PATCH',
        data: {'op': 'remove', 'path': '/' + prep_id + '/1/samples/' + sample_names},
        success: function(data) {
          if(data.status == 'error') {
            bootstrapAlert(data.message, "danger");
          }
          else {
            populate_main_div('{% raw qiita_config.portal_dir %}/study/description/prep_template/', { prep_id: prep_id, study_id: {{study_id}} });
          }
        }
      });
    }
  }


  /*
   *
   * Updates deprecated flag in the prep information <fieldset>
   *
   * @param prep_id the prep template id
   * @param new_value the new deprecate value
   *
   * This function executes an AJAX call to update the deprecated flag
   *
   */
  function deprecate_preparation(prep_id, new_value) {
    var status = 'deprecate';
    if (!new_value){
      status = 'DE-deprecate'
    }
    if(confirm("Are you sure you want to " + status + " this preparation?")) {
      $.ajax({
        url: '{% raw qiita_config.portal_dir %}/prep_template/',
        type: 'PATCH',
        data: {'op': 'update-deprecated', 'path': '/' + prep_id + '/' + new_value},
        success: function(data) {
          if(data.status == 'error') {
            bootstrapAlert(data.message, "danger");
          }
          else {
            populate_main_div('{% raw qiita_config.portal_dir %}/study/description/prep_template/', { prep_id: prep_id, study_id: {{study_id}} });
          }
        }
      });
    }
  }

  /*
   *
   * Deletes a column from the prep template
   *
   * @param prep_id the prep template id
   * @param column_name string with the column to be removed
   *
   * This function executes an AJAX call to remove the given column from the
   * prep information
   *
   */
  function delete_prep_column(prep_id, column_name, row_id) {
    if(confirm("Are you sure you want to delete '" + column_name + "' information?")) {
      $.ajax({
        url: '{% raw qiita_config.portal_dir %}/prep_template/',
        type: 'PATCH',
        data: {'op': 'remove', 'path': '/' + prep_id + '/' + row_id + '/columns/' + column_name},
        success: function(data) {
          if(data.status == 'error') {
            bootstrapAlert(data.message, "danger");
          }
          else {
            populate_main_div('{% raw qiita_config.portal_dir %}/study/description/prep_template/', { prep_id: prep_id, study_id: {{study_id}}, row_id: row_id });
          }
        }
      });
    }
  }

  /*
   * Toggle the graph view
   *
   * Show/hide the graph div and update GUI accordingly
   *
   */
  function toggle_graphs() {
    if($("#graph-network-div").css('display') == 'none' ) {
      $("#graph-network-div").show();
      $("#show-hide-btn").text("-");
    } else {
      $("#graph-network-div").hide();
       $("#show-hide-btn").text("+");
    }
  }

  /**
   *
   * Load the interface to add an artifact to the prep information
   *
   * This function executes an AJAX call to populate the given target div
   * with the interface needed to add a new artifact to the prep information
   *
   * @param target string The name of the target div
   *
   **/
  function load_new_artifact(target, errors) {
    show_loading(target);
    if (errors !== undefined && errors !== "") {
      bootstrapAlert(errors.split('\n').join('<br/>'), "danger");
    }
    // If it can be edited, show the page to upload a new artifact
    $.get("{% raw qiita_config.portal_dir %}/study/new_artifact/", {"study_id": {{study_id}}, "prep_template_id": {{prep_id}} })
      .done(function(data) {
        $("#" + target).html(data);
      });
  }

  /*
   *
   * Load the prep information summary table
   *
   * This function executes an AJAX call to populate the prep-artifact-summary-div
   * with a table containing a summary of the prep information
   */
  function load_information_summary() {
    show_loading("prep-artifact-summary-div");
    $.get('{% raw qiita_config.portal_dir %}/study/description/prep_summary/', {'prep_id': {{prep_id}} })
      .done(function ( data ) {
        $("#prep-artifact-summary-div").html(data);
      });
  }

  /*
   * Delete a prep template from the system
   *
   * @param prep_id The prep template id
   *
   * This function executes an AJAX call to delete the provided prep template
   * and updates the interface accordingly
   *
   */
  function delete_prep_info(prep_id) {
    if(confirm("Are you sure you want to delete prep template " + prep_id + "?")) {
      // Perform the AJAX call to delete
      $.ajax({
        url: '{% raw qiita_config.portal_dir %}/prep_template/?prep-template-id=' + prep_id,
        type: 'DELETE',
        success: function(data) {
          if(data.status == 'error') {
            bootstrapAlert(data.message, "danger");
          }
          else {
            // If success, populate the main div with the study info
            // and regenerate the data type menu div (there is one prep less)
            populate_main_div("{% raw qiita_config.portal_dir %}/study/description/baseinfo/", { study_id: {{study_id}} });
            populate_data_type_menu_div();
          }
        }
      });
    }
  }

  /*
   * Autoscroll prep info list
   *
   * This is a helper function so we can scroll once the prep table is ready
   */
  function autoscroll_prep_list() {
    // taken from: http://stackoverflow.com/a/2906009
    if ({{row_id}} > 1) {
      var container = $("html, body"), scrollTo = $("#row_{{row_id}}");

      container.animate({
          scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
      });
    }
  }

  /**
   **/
  function validate_new_prep_name() {
    $("#update-prep-name-btn").prop('disabled', $("#new-prep-name").val().replace(/ /g,'') === "");
  };

  /**
   *
   * Function to update the name of a prep information
   */
  function change_prep_name() {
    $.ajax({
      url: '{% raw qiita_config.portal_dir %}/prep_template/',
      type: 'PATCH',
      data: {'op': 'replace', 'path': '/{{prep_id}}/name', 'value': $('#new-prep-name').val()},
      success: function(data) {
        if(data.status == 'error') {
          bootstrapAlert(data.message, "danger");
        } else {
          // Hide the modal to change the prep name
          $("#update-prep-name").modal('hide');
          // Update the name of the artifact in the GUI
          $("#prep-name-span").text($('#new-prep-name').val());
          // Reset the value in the modal to an empty string
          $('#new-prep-name').val("");
          // Update the data type menu so it shows the new name
          populate_data_type_menu_div();
        }
      }
    });
  }

  $(document).ready(function () {
    if("{{investigation_type}}" !== "None") {
      // The prep information already has an investigation type
      // Delete the entries from the select that correspond to no values
      $("#ena-ontology option[value='']").remove();
      $("#user-ena-info option[value='']").remove();
      // Update the selects to point to the correct value
      var v = $("#ena-ontology option[value='{{investigation_type}}']");
      if (v.length == 1) {
        // Set the value
        $("#ena-ontology").val('{{investigation_type}}');
      }
      else {
        // It is a user defined value
        $("#user-ena-info").show();
        $("#ena-ontology").val('Other');
        $("#user-ontology").val('{{investigation_type}}');
      }
    }

    load_information_summary();

    // Initialize the graph object. If the template already have an artifact
    // attached, it will load the artifact graph, otherwise it will load the
    // page to add a new artifact
    newProcessingNetworkVue("#processing-graph-vue");

    // If the file-selector select changes, check if we need to show the update button
    $("#file-selector").change(function ( event ) {
      if ( $("#file-selector").val() === "" ) {
        $("#update-button-div").hide();
      }
      else {
        $("#update-button-div").show();
      }
    });

    // If the ena-ontology select changes, check if we need to show the user list
    $("#ena-ontology").change(function ( event ) {
      var value = $("#ena-ontology").val();
      if( value == "Other" ) {
        $("#user-ena-info").show();
        $("#user-ena-info").trigger('change');
      }
      else {
        $("#user-ena-info").hide();
        $("#new-ena-info").hide();
        update_investigation_type(value);
      }
    });
    // If the user-ena-info select changes, check if we need to show the input box
    $("#user-ena-info").change(function ( event ) {
        var value = $("#user-ontology").val();
        if( value == "New Type" ) {
          $("#new-ena-info").show();
        }
        else {
          $("#new-ena-info").hide();
          if( value !== "" ) {
            update_investigation_type(value);
          }
        }
    });

    $('#processing-tab-btn').on('shown.bs.tab', function (e) {
      processingNetwork.$refs.procGraph.resetZoom();
    });

    {% if alert_type != 'success' and alert_message != '' %}
      bootstrapAlert(decodeURIComponent("{% raw alert_message %}").replace(/\+/g,' '), "{{alert_type}}");
    {% else %}
      $('#alert-message').alert('close');
    {% end %}

    // Set the focus on the text input when the modal to change the artifact
    // name is shown
    $('#update-prep-name').on('shown.bs.modal', function() {
      $('#new-prep-name').val($("#prep-name-span").text());
      $('#new-prep-name').focus();
      $('#new-prep-name').select();
    });

    qiita_websocket.init(window.location.host + '{% raw qiita_config.portal_dir %}/study/list/socket/', error, error);
    qiita_websocket.add_callback('sel', show_alert);
  });

  function toggleCheckboxes(element){
    $('.prep-sample-delete').each(function(){
      $(this).prop('checked', element.checked);
    });
  }

</script>

<!-- Prep template title and buttons -->
<div class="row">
  <div class="col-md-12">
    {% if other_filepaths is not None and other_filepaths %}
      <h6>Last update: {{ other_filepaths[0].split('_')[-1] }}</h6>
    {% end %}
    <h4>
      {% if deprecated %}
        <span class="label label-danger">This Preparation Information has been DEPRECATED</span>
        <br/><br/>
      {% end %}

      <span id="prep-name-span">{{name}}</span> - ID {{prep_id}} ({{data_type}})
      {% if user_level in ('admin', 'wet-lab admin') and creation_job is not None %}
          <a class="btn btn-default" download="{{creation_job_filename}}" href="data:text/plain;charset=utf-8,{{creation_job_filename_body}}"><span class="glyphicon glyphicon-download-alt"></span> SampleSheet</a>
          {% if creation_job_artifact_summary is not None %}
            <a class="btn btn-default" target="_blank" href="{% raw qiita_config.portal_dir %}/artifact/html_summary/{{creation_job_artifact_summary}}"><span class="glyphicon glyphicon-download-alt"></span> Creation Job Output</a>
          {% end %}
      {% end %}
      <a class="btn btn-default" data-toggle="modal" data-target="#update-prep-name"><span class="glyphicon glyphicon-pencil"></span> Edit name</a>
      <a class="btn btn-default" href="{% raw qiita_config.portal_dir %}/download/{{download_prep_id}}"><span class="glyphicon glyphicon-download-alt"></span> Prep info</a>
      <a class="btn btn-default" href="{% raw qiita_config.portal_dir %}/download_sample_info_per_prep/{{prep_id}}"><span class="glyphicon glyphicon-download-alt"></span> Sample info (only this prep)</a>
      {% if is_submitted_to_ebi %}
        <a class="btn btn-default" href="{% raw qiita_config.portal_dir %}/download_ebi_accessions/experiments/{{prep_id}}"><span class="glyphicon glyphicon-download-alt"></span> EBI experiment accessions</a>
      {% end %}
      {% if editable %}
        <br/>
        {% if user_level in ('admin', 'wet-lab admin') and data_type in {'Metagenomic', 'Metatranscriptomic'} %}
            <button class="btn btn-info" onclick="this.disabled=true; window.location='{% raw qiita_config.portal_dir %}/download_data_release_from_prep/{{prep_id}}';">
                <span class="glyphicon glyphicon-download-alt"></span> Download Data Release
            </button>
        {% end %}
        {% if deprecated %}
          <a class="btn btn-warning" onclick="deprecate_preparation({{prep_id}}, false);"><span class="glyphicon glyphicon-pushpin"></span> Remove Deprecation</a>
        {% else%}
          <a class="btn btn-warning" onclick="deprecate_preparation({{prep_id}}, true);"><span class="glyphicon glyphicon-pushpin"></span> Deprecate</a>
        {% end %}
        <a class="btn btn-danger" onclick="delete_prep_info({{prep_id}});"><span class="glyphicon glyphicon-trash"></span> Delete</a>
      {% end %}
      {% if prep_restrictions %}
        <h5>
          <div class="alert alert-warning" role="alert">
            {{prep_restrictions}}
          </div>
        </h5>
      {% end %}
    </h4>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    {% if human_reads_filter_method is not None %}
      <h7> The raw data of this preparation was pre-processed via: <b>{{ human_reads_filter_method }}</b></h7>
    {% end %}

    <ul class="nav nav-pills">
      <li style="border: 1px solid #428bca; border-radius: 5px"><a data-toggle="tab" href="#sample-listing-tab-div">Sample Listing</a></li>
      <li style="border: 1px solid #428bca; border-radius: 5px"><a data-toggle="tab" href="#summary-tab-div">Summary</a></li>
      <li style="border: 1px solid #428bca; border-radius: 5px" class="active"><a data-toggle="tab" href="#processing-graph-vue" id="processing-tab-btn" number-samples={{num_samples}}>Processing</a></li>
      <li style="border: 1px solid #428bca; border-radius: 5px"><a data-toggle="tab" href="#archived-artifacts-tab-div">Archived Artifacts</a></li>

    </ul>

    <div class="tab-content">
      <div id="sample-listing-tab-div" class="tab-pane fade">
        <div class="panel panel-default">
          {% if not artifact_attached %}
            <button class="btn btn-danger st-interactive" onclick="delete_prep_sample({{prep_id}});">
                <span class="glyphicon glyphicon-trash"></span> Delete Selected
            </button>
          {% end %}
          <div>
            <table class="table">
              <thead>
                <tr>
                  {% if not artifact_attached %}
                    <th><input type="checkbox" onchange="toggleCheckboxes(this)"></th>
                  {% end %}
                  <th>Samples</th>
                </tr>
              </thead>
              {% for sid in samples %}
                <tr>
                  {% if not artifact_attached %}
                    <td>
                      <input type="checkbox" class="prep-sample-delete" value="{{sid}}">
                    </td>
                  {% end %}
                  <td>{{sid}}</td>
                </tr>
              {% end %}
            </table>
          </div>
        </div>
      </div>
      <div id="summary-tab-div" class="tab-pane fade">
        <b>Number of samples: </b>{{num_samples}}<br/>
        <b>Number of columns: </b>{{num_columns}}<br/>
        {% if editable %}
          <!-- Update prep template -->
          <div class="row">
            <div class="col-md-12">
              <b>Update prep information:</b>
              <select id="file-selector">
                <option value="">Choose file...</option>
                {% for fp in files %}
                  <option value="{{fp}}">{{fp}}</option>
                {% end %}
              </select>
              <div id="update-button-div" hidden>
                <button class="btn btn-info btn-sm" onclick="update_prep_information();" hidden>Update</button>
              </div>
            </div>
          </div>

          <!-- Investigation type info -->
          <div class="row">
            <!-- Ena ontology selector -->
            <div class="col-md-6">
              <b>Select Investigation Type:</b> <small>Unsure? <a href="https://www.ebi.ac.uk/submission/#" target="_blank">Check</a></small>
              <select id="ena-ontology" name="ena-ontology" value="ena-ontology">
                <option value=""></option>
                {% for o in ontology['ENA'] %}
                  <option value="{{o}}">{{o}}</option>
                {% end %}
              </select>
            </div>
            <div class="col-md-3">

            </div>
            <!-- user-defined selector -->
            <div class="col-md-4" id="user-ena-info" hidden> User defined investigation type:
              <select id="user-ontology" name="user-ontology" value="user-ontology">
                <option value=""></option>
                {% for o in ontology['User'] %}
                  <option value="{{o}}">{{o}}</option>
                {% end %}
                <option value="New Type">New Type</option>
              </select>
            </div>
            <!-- new user-defined input -->
            <div class="col-md-4" id="new-ena-info" hidden> New user defined term:
              <input type="textbox" id="new-ontology" name="new-ontology">
              <button class="btn btn-info btn-sm" onclick="add_new_investigation_type_term_and_update();">Add</button>
            </div>
          </div>
        {% end %}
        {% if other_filepaths %}
          <button class="btn btn-secondary" data-toggle="collapse" data-target="#other-filepaths"><b>Show older files</b></button>
        {% end %}
        <div id="other-filepaths" class="collapse">
          <small>
            {% raw '<br/>'.join(other_filepaths[1:]) %}
          </small>
        </div>
        <div id="prep-artifact-summary-div" class="tab-pane fade in active">
        </div>
      </div>
      <div id="archived-artifacts-tab-div" class="tab-pane fade">
        <div>
          <table class="table">
            <thead>
              <tr>
                <th>Add to Analysis</th>
                <th>Artifact</th>
                <th>Creation time</th>
                <th>Merging scheme</th>
              </tr>
            </thead>
            {% for artifact in archived_artifacts %}
              <tr>
                <td>
                  <input type="button" id="send-button-{{artifact.id}}" class="btn btn-sm" value="Add" onclick="send_samples_to_analysis(this, [{{artifact.id}}])">
                </td>
                <td>
                  {{artifact.name}} ({{artifact.id}})
                </td>
                <td>{{artifact.timestamp}}</td>
                <td>
                  {{artifact.merging_scheme[0]}}
                </td>
              </tr>
            {% end %}
          </table>
        </div>
      </div>
      <div id="processing-graph-vue" class="tab-pane fade in active">
        <processing-graph ref="procGraph" v-bind:is-analysis-pipeline='false' v-bind:no-init-jobs-callback="load_new_artifact" portal="{% raw qiita_config.portal_dir %}" graph-endpoint="/prep_template/{{prep_id}}/graph/" jobs-endpoint="/prep_template/{{prep_id}}/jobs/" element-id="{{prep_id}}"></processing-graph>
      </div>
    </div>
  </div>
</div>


<!-- Modal to update the prep name -->
<div class="modal fade update-artifact-name" tabindex="-1" role="dialog" id="update-prep-name">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Updating prep information {{prep_id}} name</h3>
      </div>
      <div class="modal-body">
        Introduce the new name:<br/>
        <input type="text" name="new-prep-name" id="new-prep-name" onkeyup="validate_new_prep_name();">
        <button id="update-prep-name-btn" class="btn btn-default" onclick="change_prep_name();" disabled>Update</button>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>