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

        /* Style the tab */
        .tab {
          overflow: hidden;
          border: 1px solid #ccc;
          background-color: #f1f1f1;
            margin: 2px;
        }

        /* Style the buttons inside the tab */
        .tab button {
          background-color: inherit;
          float: left;
          outline: none;
          cursor: pointer;
{#          padding: 14px 16px;#}
            padding: 10px 10px;
          transition: 0.3s;
{#          font-size: 17px;#}
          border: 1px solid black;
          font-size: small;
            margin: 1px;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
          background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
          background-color: #ccc;
        }

        /* Style the tab content */
        .tabcontent {
          display: none;
          padding: 6px 12px;
          border: 1px solid #ccc;
          border-top: none;
        }


        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #9370DB;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }
        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #BA55D3;
            -webkit-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }
        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FF00FF;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }
        @-webkit-keyframes spin {
            0%   {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes spin {
            0%   {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }


    </style>
    <script src="../static/helper.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.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 visiblePreselection = document.getElementById("preselect_option");
    const visibleMol1 = document.getElementById("molecule1");
    const visibleMol2 = document.getElementById("molecule2");

    const hiddenFeature = document.getElementById("hidden_feature_option");
    const hiddenPreselection = document.getElementById("hidden_preselect_option");
    const hiddenMol1 = document.getElementById("hidden_molecule1");
    const hiddenMol2 = document.getElementById("hidden_molecule2");

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

      if (!visiblePreselection.value) {
        hiddenMol1.value = visibleMol1.value || '';
        hiddenMol2.value = visibleMol2.value || '';
      } else {
        hiddenMol1.value = '';
        hiddenMol2.value = '';
      }
    }

    visibleFeature.addEventListener("change", syncInputs);
    visiblePreselection.addEventListener("change", syncInputs);
    visibleMol1.addEventListener("change", syncInputs);
    visibleMol2.addEventListener("change", syncInputs);

    syncInputs(); // Run once on load
  });
</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;">
                <a href="visual-sample-binding"> Sample Binding Site</a> Structures in the Demo</br></br>
                    <div class="container-fluid">
                        <h1> Users are encouraged to refer to the Tutorial before using the web-server </h1>
<!--                         <h1 data-toggle="tooltip" data-placement="top" class="display-5">Interactive Demo</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"> -->

                                  <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>

                              <div class="form-group">
                                <label for="preselect_option">Option 1: pre-selected pair to compare:</label>
                                <select id="preselect_option" name="preselect_option" class="form-control" required>
<!--                                   <option value="shape"> -->
                                <option value="">-- None --</option>
                                  
                                  <option  value="1bk0A_1odmA">
                                    Compare 1bk0A and 1odmA (active)
                                  </option>
                                  <option  value="1bk0A_2y60A">
                                    Compare 1bk0A and 2y60A (active)
                                  </option>
                                  <option value="1gosA_2bxrA">
                                    Compare 1gosA and 2bxrA (active)
                                  </option>
                                  <option value="2bxsA_1o5wA">
                                    Compare 2bxsA and 1o5wA (active)
                                  </option>
                                  <option  value="1pwmA_1qiqA">
                                    Compare 1pwmA and 1qiqA (inactive)
                                  </option>
                                  <option value="2y60A_2zc9H">
                                    Compute 2y60A and 2zc9H (inactive)
                                  </option>
                                  <option  value="2bxrA_2z87B">
                                    Compare 2bxrA and 2z87B (inactive)
                                  </option>
                                  <option  value="2z3yA_2bxrA">
                                     Compare 2z3yA and 2bxrA (inactive)
                                  </option>

                                </select>
                              </div>



                              <div class="form-group">
                                <label>Option 2: select the molecules you want to compare:</label>
                              <div class="row">
                                <div class="col-sm-6">
                                  <div class="form-group">
                                    <label for="molecule1">Select the first molecule:</label>
                                    <select id="molecule1" name="molecule1" class="form-control" required>
                                      <option value="">-- None --</option>
                                      
                                      <option value="1bk0A">1bk0A</option>
                                      <option value="1bn4A">1bn4A</option>
                                      <option value="1odmA">1odmA</option>
                                      <option value="1pwmA">1pwmA</option>
                                      <option value="1qiqA">1qiqA</option>
                                      <option value="2bxrA">2bxrA</option>
                                      <option value="2y60A">2y60A</option>
                                      <option value="2zc9H">2zc9H</option>
                                      <option value="2zdaH">2zdaH</option>
                                      <option value="2zf0H">2zf0H</option>
                                    </select>
                                  </div>
                                </div>

                                <div class="col-sm-6">
                                  <div class="form-group">
                                    <label for="molecule2">Select the second molecule:</label>
                                    <select id="molecule2" name="molecule2" class="form-control" required>
                                      <option value="">-- None --</option>
                                      <option value="1bk0A">1bk0A</option>
                                      <option value="1bn4A">1bn4A</option>
                                      <option value="1odmA">1odmA</option>
                                      <option value="1pwmA">1pwmA</option>
                                      <option value="1qiqA">1qiqA</option>
                                      <option value="2bxrA">2bxrA</option>
                                      <option value="2y60A">2y60A</option>
                                      <option value="2zc9H">2zc9H</option>
                                      <option value="2zdaH">2zdaH</option>
                                      <option value="2zf0H">2zf0H</option>
                                    </select>
                                  </div>
                                </div>
                              </div>
                            </div>




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

                        </div>
 <!-- -->                     <div class="row">
                            <div class="col-sm-12" style="text-align: center;" >



                            <form method="post" class="form" id="submitForm">
                                    <input type="hidden" name="filename" id="filename">
                                    <input type="hidden" name="feature_option" id="hidden_feature_option">
                                    <input type="hidden" name="preselect_option" id="hidden_preselect_option">
                                    <input type="hidden" name="molecule1" id="hidden_molecule1">
                                    <input type="hidden" name="molecule2" id="hidden_molecule2">
                                    <button type="submit" class="btn btn-primary" id="submit_project" disabled>Submit</button>
                            </form>
                            <script type="text/javascript">
                                (function() {
                                    $('#submitForm').ajaxForm({
                                        beforeSend: function() {

                                        // Copy values from visible inputs to hidden fields
                                        document.getElementById('hidden_feature_option').value = document.getElementById('feature_option').value;
                                        document.getElementById('hidden_preselect_option').value = document.getElementById('preselect_option').value;


                                        // Copy molecule values if preselect is not used
                                        if (!document.getElementById('preselect_option').value) {
                                          document.getElementById('hidden_molecule1').value = document.getElementById('molecule1').value;
                                          document.getElementById('hidden_molecule2').value = document.getElementById('molecule2').value;
                                        } else {
                                          document.getElementById('hidden_molecule1').value = "";
                                          document.getElementById('hidden_molecule2').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'
                                    }});
                                    },

                                    complete: function(response) {
                                      $.unblockUI();

                                      try {
                                        const result = JSON.parse(response.responseText);

                                        if (result.error) {
                                          alert("Error: " + result.error);  // Or display in a styled div
                                          return;
                                        }

                                        if (result.project_id) {
                                          // Show modal or redirect as before
                                          $('#result').attr("href", "results/" + result.project_id);
                                          $('#result').css("display", "block");
                                          $('#remove-data').click();
                                          $('#submit_project').attr("disabled", "disabled");
                                        } else {
                                          alert("Unexpected response format.");
                                        }

                                      } catch (e) {
                                        alert("Failed to parse server response.");
                                      }
                                    }

                                    });
                            })();
                            </script>
                        </div>

                        </div>
                        <div class="row" style="align-content: center; float: left; margin-left: 35%">
                            <div  style="align-content: center; font-size: 20px;">
                                    <a id="result" style="display: none;
                                    border: 1px solid black;border-radius: 20px;padding: 5px;"
                                       href="results/">Click here to view the results</a>
                            </div>
                        </div>
                    </div>
                </div>

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



    <script type="application/javascript">
          document.addEventListener("DOMContentLoaded", function () {
            const preselect = document.getElementById("preselect_option");
            const mol1 = document.getElementById("molecule1");
            const mol2 = document.getElementById("molecule2");
            const submitBtn = document.getElementById("submit_project");

            function updateState() {
              const preVal = preselect.value;
              const mol1Val = mol1.value;
              const mol2Val = mol2.value;

              if (preVal) {
                mol1.disabled = true;
                mol2.disabled = true;
                submitBtn.disabled = false;
              } else if (mol1Val && mol2Val) {
                preselect.disabled = true;
                submitBtn.disabled = false;
              } else {
                mol1.disabled = false;
                mol2.disabled = false;
                preselect.disabled = false;
                submitBtn.disabled = true;
              }
            }
            preselect.addEventListener("change", updateState);
            mol1.addEventListener("change", updateState);
            mol2.addEventListener("change", updateState);
            updateState();
          });
  </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>
              <h4 class="modal-title">Project</h4>
            </div>
            <div class="modal-body">
              <p>Your project id: {{ project_id }}</p>
              <p>Your job id: {{ job_id }}</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">
        $('#projectModal').modal('show');
     </script>
 {% endif %}

{% endblock content %}
