{% extends 'base.html' %}
{% block title %}Results{% endblock %}

{% block content %}
<script>
    $(document).ready(function() {
        let option = null

        if (window.location.href.indexOf("/ml") !== -1) {
            let op = window.location.href.indexOf("/custom") !== -1 ? "mlcustom"  : "mlstd"
            sessionStorage.setItem("option", op)
            console.log("setting session storage")
        }

        if ("{{ option }}" === "") {
            option = sessionStorage.getItem("option")
        }

        if (option === null) {
            sessionStorage.setItem("option", '{{ option }}')
            option = '{{ option }}'
        }

        toggleMl(option)

        if ('{{ alreadyQueued }}' === "ml") {
            {#document.getElementById("another_ligand").removeAttribute("disabled")#}
            getMlFromURL("{{ number }}")
        } else if (option === "saved_ml_pickle") {
            saved_ml_pickle("{{ affinity|safe }}", "{{ mlnumber }}", "{{ pickle_num }}")
        } else if ("{{ alreadyQueued }}" !== "True") {
            if (option.indexOf("ml") !== -1) {
                if (option === 'mlcustom') {
                    setupCustomML("{{ affinity|safe }}")
                } else {
                    document.getElementById("dockingButtons").remove()
                    machineLearn()
                }
            } else if (option.indexOf("dockingstd") !== -1) {
                func1('{{ ligand }}', '{{ protein }}', '{{ alias }}')
            } else if (option.indexOf("custom") !== -1) {
                custom_structures("{{ strname }}", "{{ custom_structures|safe }}", "{{ ligand }}", "{{ alias }}")
            }
        } else if ("{{ alreadyQueued }}" === "True") {
            setupAlreadyQueued("{{ (structures)|safe }}", "{{ vals|safe }}", "{{  ligand }}", "{{ alias }}", "{{ strname }}")
        }
    })

    $('body').on('change', 'input[type="file"]', function(e){
            //get the file name
            let fileName = $(this).val();

            //replace the "Choose a file" label
            fileName = fileName.replace('C:\\fakepath\\', " ");
            $(this).next('.custom-file-label').html(fileName);
        });

    function getPickle() {
        return "{{ pickle }}"
    }

    function getProtein() {
        return "{{ strname }}"
    }

    function validate1() {
        let disabled = true

        let file = document.getElementById("ligand")

        if (file.value.toString().indexOf(".") !== -1) {
            if (file.classList.contains("is-invalid")) {
                file.classList.replace("is-invalid", "is-valid")
            } else {
                file.classList.add("is-valid")
            }
        } else {
            if (file.classList.contains("is-valid")) {
                file.classList.replace("is-valid", "is-invalid")
            } else {
                file.classList.add("is-invalid")
            }
        }

        let zinc = document.getElementById("zincId");

        if (zinc.value === "") {
            if (zinc.classList.contains("is-valid")) {
                zinc.classList.replace("is-valid", "is-invalid")
            } else {
                zinc.classList.add("is-invalid")
            }
        } else {
            if (zinc.classList.contains("is-invalid")) {
                zinc.classList.replace("is-invalid", "is-valid")
            } else {
                zinc.classList.add("is-valid")
            }
        }

        if (((document.getElementById("ligand").classList.contains("is-valid")
                    && !document.getElementById("ligand").hasAttribute("disabled")) ||
                    (document.getElementById("zincId").classList.contains("is-valid")
                    && !document.getElementById("zincId").hasAttribute("disabled")))
                ) {
            disabled = false
        } else {
            disabled = true
        }

        document.getElementById("submit0").disabled = disabled
    }

</script>
<div style="margin: 2rem 2rem">
    <div id="url" style="display: none" class="alert alert-info"><strong>(Docking)</strong> This process will take a long time.
        You can check on the structures at this <a id="linky" target="_blank">link</a>: <span id="ending"></span>. You may visit this link at any point in the near future.</div>
    <div id="url-2" style="display: none" class="alert alert-info"><strong>(Machine Learning)</strong> This process may take some time.
        You can check on the model progress at this <a id="linky-2" target="_blank">link</a>: <span id="ending-2"></span>. You may visit this link at any point in the near future.
{#        <strong>You will not be able to see the structures or affinities in the external link while process is running!</strong></div>#}
    </div>
    <div id="showprogress" style="margin: 2rem 0rem; display: none" class="progress progress-striped active">
      <div class="progress-bar" id="progress" role="progressbar"
           style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">100%</div>
    </div>
    <div id="frame">
    <div id="non-ml">
    <div style="overflow-x: scroll;">
        <table id="strtable" style="max-width: 100%; margin-bottom: 0rem" class="table table-bordered">
          <thead>
            <tr>
                <th id="titulo" scope="col" colspan="100%">Structures and Affinities for Selected Protein</th>
            </tr>
            <tr id="structures" style="overflow: hidden">
              <th scope="col">Structures</th>
            </tr>
          </thead>
          <tbody>
            <tr id="affinities">
              <th scope="row">Affinity</th>
            </tr>
          </tbody>
        </table>
    </div>
    <div id="dockingButtons" class="row" style="margin-bottom: 2rem;">
        <div id="excel_upload" style="display: none;" name="excel">
            <div style="margin-top:2rem">
            <div class="data-bv-file-type custom-file" id="active_div" style="width: 20rem; margin-left: 1rem">
                <input onchange="updateDisabledMLRun()" disabled="disabled" name="active" accept=".xlsx" type="file" class="custom-file-input" id="excel_active"/>
                <label class="custom-file-label" id="active_label" for="excel_active">Choose Active Excel File...</label>
            </div>
            <div class="data-bv-file-type custom-file" id="decoy_div" style="width: 20rem; margin-left: 1rem">
                <input onchange="updateDisabledMLRun()" disabled="disabled" name="decoy" accept=".xlsx" type="file" class="custom-file-input" id="excel_decoy"/>
                <label class="custom-file-label" id="decoy_label" for="excel_decoy">Choose Decoy Excel File...</label>
            </div>
            </div>
        </div>
        <div id="excel_upload_buttons" style="margin-top: 2rem; margin-right: 1rem">
            <button style="margin-left: 1rem" id="submit_excel2" type="submit" onclick="submit_excel(false);
            document.getElementById('submit_excel2').setAttribute('disabled', 'disabled')"
                    disabled="disabled" class="btn btn-danger">Run ML Models</button>
            <button onclick="toggleForm()" type="button" style="margin-left: 1rem; display: inline" id="another_ligand" disabled="disabled" class="btn btn-primary">ML With New Scores</button>
        </div>
{#        <button style="margin-left: 1rem" onclick="updateValues()" class="btn btn-info">Update Values</button>#}
        <div class="btn-group" id="ml-button-group" role="group" style="margin-left: 1rem; margin-top:2rem; margin-right:1rem">
{#            <button type="submit" disabled="disabled" id="mlBtn1" class="btn btn-secondary"#}
{#                    onclick="sessionStorage.setItem('linear', true), machineLearn()">Run Linear Models</button>#}
            <button type="submit" disabled="disabled" id="mlBtn2" class="btn btn-danger"
                    onclick="machineLearn()">Run All Models</button>
        </div>
        <button id="addML" style="display: none; margin-left: 1rem; margin-right: 1rem" class="btn btn-light margin" onclick="toggleMl(sessionStorage.getItem('option'))">Show ML Options</button>
        <div style="margin-top: 2rem" class="row">
            <button id="showData" style="margin-left: 1rem" class="btn btn-dark" onclick="showDataDisplay()">Show Data</button>
            <button id="addLigand" style="margin-left: 1rem; display: none" class="btn btn-info" onclick="showLigand()">Dock Another Ligand</button>
        </div>
{#        <button id="mlBtn" style="margin-left: 1rem" disabled="disabled" style="margin-bottom: 2rem" onclick="machineLearn()" class="btn btn-danger">Run ML Models</button>#}
    </div>

    <div id="another_form" style="display: none; margin-bottom: 2rem">
        <form id="editable_form" method="post" action="/run/ml/multiple/?" target="_blank" enctype="multipart/form-data">
            <div id="excel_boxes" class="row" name="excel"></div>
            <button id="submit_excel" type="submit" disabled="disabled" class="btn btn-danger">Continue</button>
        </form>
    </div>

    <div id="ligandForm" style="display: none">
        <form onchange="validate1()" style="margin-bottom: 2rem" method="POST" id="f1" target="_blank" action="{{ url_for('run_saved_custom', structure=strname ) }}"
              style="margin-bottom: 1rem" onsubmit="showLigand()" name="mldocking" enctype="multipart/form-data">
            <div class="row" id="zinc-option" style="margin: 1rem">
                <div class="form-check form-check-inline">
                  <input checked="checked" onchange="showZincBox('file')" class="form-check-input" type="radio" name="inlineRadio" id="useFile" value="file_upload">
                  <label class="form-check-label" for="useFile">Choose File</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" onchange="showZincBox('zinc')" type="radio" name="inlineRadio" id="useZinc" value="zinc_id">
                  <label class="form-check-label" for="useZinc">Retrieve from Zinc</label>
                </div>
            </div>
            <div class="data-bv-file-type custom-file" id="filediv" style="margin-bottom: 1rem">
                <input accept=".mol2, .pdbqt" name="ligand" type="file" class="custom-file-input" id="ligand"/>
                <label class="custom-file-label" for="ligand">Choose file...</label>
    {#            <div id="file-valid1" style="visibility: hidden" class="text-danger">Must be of File Type .pdbqt or .mol2</div>#}
            </div>
            <div class="form-group">
                <input name="zincId" disabled="disabled" type="number" class="form-control" id="zincId" placeholder="Zinc Id (ex. 123)">
            </div>
                <button type="submit" disabled="disabled" id="submit0" class="btn btn-primary">Begin Docking</button>
            </form>
    </div>

    <div id="datas" style="display: none; margin: 0rem" class="card border-dark mb-3">
      <div class="card-header">Data Objects (Data will be added as docking scores are returned)</div>
      <div class="card-body text-dark">
        <p id="jsonobj" class="card-text"></p>
        <p id="arrayobj" class="card-text"></p>
      </div>
    </div>
    <p id="reassurance" style="margin-top: .5rem; display: none">Note: <span id="msg" style="color: red">Please wait until the ligand has been docked to each structure before running ML models.</span></p>
    </div>
<div id="mltable">
    <div id="alert" class="alert alert-danger" style="display: none; margin-top: 1rem"><strong id="more_ml_text"></strong><span class="loading" id="load"> Please wait </span></div>
    <table style="table-layout: fixed; width: 100%; margin-top: 1rem" class='table table-bordered'>
      <thead style="table-layout: fixed">
        <tr>
            <th colspan="4">Predictions Returned by ML Models. <a href="/about" target="_blank">How do I read this? (opens in new tab)</a></th>
        </tr>
        <tr>
          <th>Model Name</th>
          <th>Sensitivity = 0.9</th>
          <th>Specificity = 0.9</th>
{#          <th>Geometric Means (Optimized)</th>#}
          <th>AUC Value</th>
        </tr>
      </thead>
      <tbody id="mltablebody">
        <tr>

        </tr>
      </tbody>
    </table>
</div>

<li id="ml-dropdown" class="nav-item dropdown" style="list-style-type:none">
    <div class="dropdown">
    <button style="align-content: center" class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Select Model
    </button>
    <div class="dropdown-menu" id="modelDropdown" aria-labelledby="dropdownMenuButton">

    </div>
    </div>
</li>

<div id="mlgraphs">
    <div id="mlcanvas">
        <canvas style="margin: 2rem 0rem" id="auc"></canvas>
    </div>

    <table id="thresh-table" style="table-layout: fixed; width: 100%" class='table table-bordered'>
      <thead style="table-layout: fixed">
        <tr>
            <th colspan="5">Custom Thresholds for <span id="modelName">(Wait Until Machine Learning Models Run)</span>.
                <span class="selection-setup">Click a Point to See the Data</span></th>
        </tr>
        <tr>
          <th>1 - Specificity (FPR)</th>
          <th>Sensitivity (TPR)</th>
          <th>Threshold</th>
          <th>Model Probability</th>
          <th>Prediction</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td id="1-spec"></td>
            <td id="sens"></td>
            <td id="thresh"></td>
            <td id="model-prob"></td>
            <td id="pred"></td>
        </tr>
      </tbody>
    </table>
</div>

</div>
</div>

<div id="pdfsave" style="margin-left: 2rem; margin-bottom: 5rem;">
  <button style="margin-right: 0" type="button" class="btn btn-primary" onclick="pdf()">Save Data to Image</button>
  <button style="margin-left: 0.5rem" type="button" class="btn btn-danger" onclick="print()">Print Page</button>
</div>
{% endblock %}