{% extends 'layout.html' %}

{% block head %}

    <link rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css"/>

    <link rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/basic.min.css"/>

    <script type="application/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js">
    </script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
    <script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

  <script>
  document.addEventListener("DOMContentLoaded", function () {
    const visibleFeature = document.getElementById("feature_option");
    const hiddenFeature = document.getElementById("hidden_feature_option");

    function syncInputs() {
      hiddenFeature.value = visibleFeature.value || 'shape';
    }

    visibleRadius.addEventListener("change", syncInputs);
    visibleFeature.addEventListener("change", syncInputs);
  });
</script>

{% endblock head %}


{% block content %}

      <div class="container-fluid" style="padding: 2px; margin-top: 5%;" align="center">
        <div class="row">
            <div class="col-sm-2" ></div>
            <div class="col-sm-8">
                <div class="jumbotron" id="mainForm" align="center" style="border: 1px solid black;">
                    <div class="container-fluid">
                        <h1 data-toggle="tooltip" data-placement="top" class="display-5">Compare a batch of molecules</h1>
                        <hr class="my-2">
                        <div class="row">
                        <div class="col-sm-3" ></div>
                        <div class="col-sm-6" >


                        <div class="form-group">
                          <label for="feature_option">Feature Option:</label>
                          <select id="feature_option" name="feature_option" class="form-control" required>
                            <option value="shape" selected>Use steric features (shape) for comparisons</option>
                            <option value="shape+feature"> Use steric features and charges for combined score comparisons</option>
                            <option value="both">Compute similarities using both of the above methods separately</option>
                          </select>
                        </div>


                        <label>Upload PDB data zip file: </label>
                        <form method="POST" action='upload-data' class="dropzone dz-clickable"
                            id="data" enctype="multipart/form-data">
                            <div class="dz-message" data-dz-message><span>Browse/drop files here to upload</span></div>
                        </form>

                    </div>
                    <div class="col-sm-3" ></div>

                    <div class="col-sm-12" style="text-align: center; margin-top: 2%;" >
                        <form method="post" class="form" id="submitForm">
                                <input type="hidden" name="filename" id="filename">
                                <input type="hidden" name="feature_option" id="hidden_feature_option">
                                <button type="submit" class="btn btn-primary" id="submit_project" disabled>Submit</button>
                        </form>

                        <script type="text/javascript">
                                    $('#submitForm').submit(function (e) {
                                      document.getElementById('hidden_feature_option').value = document.getElementById('feature_option').value;

                                      $.blockUI({
                                        message: "<h3> Please wait - expected processing time varies between 2–5 minutes </h3>",
                                        css: {
                                          border: 'none',
                                          padding: '15px',
                                          backgroundColor: '#000',
                                          '-webkit-border-radius': '10px',
                                          '-moz-border-radius': '10px',
                                          opacity: .5,
                                          color: '#fff'
                                        }
                                      });
                                    });

                            </script>
                    </div>
                </div>
            </div>
                <p> Batch uploads should contain at least one and no more than 10 molecules per folder.
                    Also, note that the token generated by SiteContext will be valid for up to 24 hours, after which the data will be purged from our servers and the token will be rendered invalid. </p>
            </div>

            <div class="col-sm-2" ></div>
        </div>

    </div>

    <script type="application/javascript">
        Dropzone.options.data = {
            paramName: 'file',
            chunking: true,
            forceChunking: true,
            url: 'upload-data',
            maxFilesize: 5000, // megabytes
            chunkSize: 100000000, // bytes
            maxFiles: 1,
            init: function () {
            this.on("complete", function (file) {
              if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                  document.getElementById('filename').value = file.xhr.responseText;
                  document.getElementById("submit_project").disabled = false;
              }
            });
          }
        };


    </script>

  <!-- Modal -->

{% if submission_successful %}
    <div class="modal fade in" id="projectModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
               <p>Project submitted successfully.</p>
              <p>Project id: {{ project_id }}</p>
              <p>Please keep a note of your Project ID as it will be required to download the result.</p>
              <p>Results will be available in Results tab</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>

        </div>
    </div>

    <script type="application/javascript">
        jQuery.noConflict();
        $('#projectModal').modal('show');
     </script>

{% endif %}

{% endblock content %}

