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

{% block content %}
    <script>
        var structure = 1

        // creates new html. Very verbose and probably can be done easier
        function addStructure() {
            for (let i = 1; i < 3; i++) {
                let container = document.createElement("div")
                container.id = "container" + structure

                let file1 = document.createElement("div")
                file1.classList.add("data-by-file-type")
                file1.classList.add("custom-file")
                file1.id = "filediv" + structure
                file1.style.marginBottom = "1rem"

                let input1 = document.createElement("input")
                input1.type = "file"
                input1.classList.add("custom-file-input")
                input1.id = "file" + structure + "-" + i
                input1.name = input1.id
                input1.addEventListener("change", function() {validateFile(input1.id)})

                file1.appendChild(input1)

                let label1 = document.createElement("label")
                label1.classList.add("custom-file-label")
                label1.for = "file" + i

                if (i == 1) {
                    label1.innerHTML = "Choose Configuration File... (.conf or .txt)"
                    input1.setAttribute("accept", ".conf, .txt")
                } else {
                    label1.innerHTML = "Choose Protein Structure File... (.pdbqt or .mol2)"
                    input1.setAttribute("accept", ".pdbqt, .mol2")
                }

                // appending all the children
                file1.appendChild(label1)
                container.appendChild(file1)
                document.getElementById("structures").appendChild(container)
            }

            structure++
            validate1()
        }


        // function to set green if its valid and red if not
        function validateFile(id) {
            let file = document.getElementById(id)
            if (document.getElementById(id).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")
                }
            }
        }

        function validateProtein(id) {
            protein = document.getElementById(id)
            if (protein.value == "Select Protein...") {
                protein.classList.add("is-invalid")
            } else {
                if (protein.classList.contains("is-invalid")) {
                    protein.classList.replace("is-invalid", "is-valid")
                } else {
                    protein.classList.add("is-valid")
                }
            }
        }

        function validateLigand(id) {
            let ligand = document.getElementById(id)
            if (ligand.value.toString().indexOf(".pdbqt") === -1 && ligand.value.toString().indexOf(".mol2") === -1) {
                if (ligand.classList.contains("is-valid")) {
                    ligand.classList.remove("is-valid")
                }
                ligand.classList.add("is-invalid")
                {#document.getElementById("file-valid1").style.visibility = "visible"#}
                document.getElementById("filediv").style.marginBottom = "2rem"
            } else {
                document.getElementById("filediv").style.marginBottom = "1rem"
                if (ligand.classList.contains("is-invalid")) {
                    ligand.classList.remove("is-invalid")
                }

                ligand.classList.add("is-valid")

                {#document.getElementById("file-valid1").style.visibility = "hidden"#}

            }

        }
        function validate1() {
            let disabled = true

            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")))
                    ) {
                if ('{{ option}}'.indexOf('dockingcustom') === -1) {
                    if (document.getElementById("protein").classList.contains("is-valid")) {
                        disabled = false
                    } else {
                        disabled = true
                    }
                } else {
                    disabled = false
                }
            } else {
                disabled = true
            }

            if ('{{ option}}'.indexOf('dockingcustom') !== -1) {
                if (disabled) {
                    document.getElementById("submit0").disabled = disabled
                } else {
                    if (document.getElementById("useMultiple").checked) {
                        if (document.getElementById('multiple-file').classList.contains("is-valid") &&
                            document.getElementById('multiple-file').files.length % 2 === 0) {
                            disabled = false
                        } else {
                            disabled = true
                        }
                    } else {
                        structures = document.getElementById("structures").getElementsByTagName("input")

                        for (let el of structures) {
                            if (!el.classList.contains("is-valid")) {
                                disabled = true
                            }
                        }
                    }
                }
            }

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

        function validate2() {
            if (document.getElementById("protein2").classList.contains("is-valid")) {
                document.getElementById("submit2").removeAttribute("disabled")
                document.getElementById("submit5").removeAttribute("disabled")
                document.getElementById("submit6").removeAttribute("disabled")
                document.getElementById("num").removeAttribute("disabled")
            }
        }

        function validateNumber() {
            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")
                }
            }
        }

        function disableBox() {
            useTextBox = document.getElementById("useTextBox")
            useSmallBox = document.getElementById("useSmallBox")

            textBox = document.getElementById("textarea")
            smallBox = document.getElementsByClassName("small-box")
            if (useTextBox.checked) {
                if (textBox.hasAttribute("disabled")) {
                    textBox.removeAttribute("disabled")
                }
                for (i of smallBox) {
                    i.setAttribute("disabled", "disabled")
                }

                /** if (textBox.value === "") {
                    document.getElementById("submit4").setAttribute("disabled", "disabled")
                    document.getElementById("submit3").setAttribute("disabled", "disabled")
                    return;
                } */

            } else {
                if (smallBox[0].hasAttribute("disabled")) {
                    for (i of smallBox) {
                        i.removeAttribute("disabled")
                    }
                }
                textBox.setAttribute("disabled", "disabled")

                for (i of smallBox) {
                    if (i.value === "") {
                        {#document.getElementById("submit4").setAttribute("disabled", "disabled")#}
                        document.getElementById("submit3").setAttribute("disabled", "disabled")
                        return;
                    }
                }
            }

            {#document.getElementById("submit4").removeAttribute("disabled")#}
            document.getElementById("submit3").removeAttribute("disabled")
        }

        function chooseMultiple(multiple) {
            if (multiple) {
                document.getElementById("addstructure").style.display = "none"
                document.getElementById("structures").style.display = "none"
                document.getElementById("multiple").style.display = "block"
            } else {
                document.getElementById("addstructure").style.display = "block"
                document.getElementById("structures").style.display = "block"
                document.getElementById("multiple").style.display = "none"
            }
        }


        $('body').on('change', "#ligand", function(){
                //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);
        });

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

            if (file[0].multiple) {
                fileName = fileName.replace('C:\\fakepath\\', " ");
                $(this).next('.custom-file-label').html(file[0].files.length + " Files Selected");
            } else {
                //replace the "Choose a file" label
                fileName = fileName.replace('C:\\fakepath\\', " ");
                $(this).next('.custom-file-label').html(fileName);
            }
        });

        $(document).ready(function() {
            sessionStorage.setItem("option", "{{ option }}")
            if ("{{ option }}".indexOf("mlstored") !== -1) {
                for (let i = 1; i < 51; i++) {
                    let op = document.createElement('option')
                    op.value = i
                    op.innerHTML = i
                    document.getElementById('num').appendChild(op)
                }
            }
        });

    </script>
    <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link {{ 'active' if option.__contains__('docking') and not option.__contains__('q') }}" style="margin-left: 2rem; margin-top: 2rem;" href="{{ url_for('switcher', option='dockingstd') }}">Docking</a>
        </li>
        <li class="nav-item">
          <a class="nav-link {{ 'active' if option.__contains__('ml') }}" style="margin-top: 2rem;" href="{{ url_for('switcher', option='mlstored') }}">Machine Learning</a>
        </li>
        <li class="nav-item">
          <a class="nav-link {{ 'active' if option.__contains__('q') }}" style="margin-top: 2rem;" href="{{ url_for('switcher', option='dockingstdq') }}">Docking and ML</a>
        </li>
{#        <li class="nav-item">#}
{#          <a class="nav-link {{ 'active' if option == 'custom-structures' }}" style="margin-top: 2rem;" href="{{ url_for('switcher', option='custom-structures') }}">Custom Structures</a>#}
{#        </li>#}
    </ul>
    <hr>
    {% if error %}
        <div style="margin: 0rem 2rem 1rem;" class="alert alert-danger">There was an error in the last iteration! {{ error }}</div>
    {%  endif %}
    <div id="warning-banner" style="display: none; margin: 0rem 2rem 1rem;" class="alert alert-warning">Your docking process is being set up. Please wait<span class="loading"></span></div>
    {% if "ml" not in option %}
    <form method="POST" onchange="validate1()" onsubmit="document.getElementById('submit0').style.display = 'none'; document.getElementById('warning-banner').style.display = 'block'" name="mldocking" style="padding: 2rem; padding-top: 0rem" action="{{ url_for('run', option=option) }}" enctype="multipart/form-data">
        {% if "q" not in option %}
        <ul class="nav nav-pills" style="margin: 0rem">
            <li class="nav-item">
              <a class="nav-link red {{ 'active' if option.__contains__('dockingstd') }}" href="{{ url_for('switcher', option='dockingstd') }}" >Use Stored Proteins</a>
            </li>
            <li class="nav-item">
              <a class="nav-link red {{ 'active' if option.__contains__('dockingcustom') }}" href="{{ url_for('switcher', option='dockingcustom') }}">Upload Custom Structures</a>
            </li>
        </ul>
        {% endif %}
        {% if "q" in option %}
        <ul class="nav nav-pills" style="margin: 0rem">
            <li class="nav-item">
              <a class="nav-link red {{ 'active' if option.__contains__('dockingstdq') }}" href="{{ url_for('switcher', option='dockingstdq') }}" >Use Stored Proteins</a>
            </li>
            <li class="nav-item">
              <a class="nav-link red {{ 'active' if option.__contains__('dockingcustomq') }}" href="{{ url_for('switcher', option='dockingcustomq') }}">Upload Custom Structures</a>
            </li>
        </ul>
        {% endif %}

        <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" onchange="validateLigand('ligand')" 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" onkeyup="validateNumber()" class="form-control" id="zincId" placeholder="Zinc Id (ex. 123)">
        </div>

        <hr>
        {% if option.__contains__('dockingstd') %}
        <div class="form-group" id="protein-selector">
            <select onchange="validateProtein('protein')" name="protein" id="protein" class="custom-select">
              <option selected="true" disabled="disabled">Select Protein...</option>
                {% for item in proteins %}
                  <option value="{{ item }}">{{ item.upper() }}</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}

        {% if option.__contains__('dockingcustom') %}
            <div class="row" id="multiple-radios" style="margin: 1rem">
                <div class="form-check form-check-inline">
                  <input checked="checked" onchange="chooseMultiple(false)" class="form-check-input" type="radio" name="radioMultiple" id="useSingle" value="useSingle">
                  <label class="form-check-label" for="useSingle">Upload One at a Time</label>
                </div>
                <div class="form-check form-check-inline">
                  <input onchange="chooseMultiple(true)" class="form-check-input" type="radio" name="radioMultiple" id="useMultiple" value="useMultiple">
                  <label class="form-check-label" for="useMultiple">Select Multiple</label>
                </div>
            </div>

            <div class="data-bv-file-type custom-file" id="multiple" style="margin-bottom: 1rem; display:none">
                <input type='file' accept=".conf, .txt, .pdbqt" onchange="validateFile('multiple-file')" name='file[]' id="multiple-file" class="custom-file-input" multiple>
                <label class="custom-file-label" for="multiple-file">Choose Files...</label>
            </div>

        <div id="structures">
            <div id="container1">
                <div class="data-bv-file-type custom-file" id="filediv1" style="margin-bottom: 1rem">
                    <input onchange="validateFile('file0-1')" accept=".conf, .txt" name="file0-1" type="file" class="custom-file-input" id="file0-1"/>
                    <label class="custom-file-label" for="file1">Choose Configuration File...</label>
{#                    <div id="file-valid1" style="visibility: hidden" class="text-danger">Must be of File Type .pdbqt</div>#}
                </div>
                <div class="data-bv-file-type custom-file" id="confdiv1" style="margin-bottom: 1rem">
                    <input onchange="validateFile('file0-2')" accept=".pdbqt, .mol2" name="file0-2" type="file" class="custom-file-input" id="file0-2"/>
                    <label class="custom-file-label" for="conf1">Choose PDBQT File...</label>
{#                    <div id="file-valid1" style="visibility: hidden" class="text-danger">Must be of File Type .pdbqt</div>#}
                </div>
            </div>
        </div>
        {% endif %}

        <div class="btn-group" role="group" aria-label="Basic example">
            {% if option.__contains__('dockingcustom') %}
                <button type="button" onclick="addStructure()" id="addstructure" class="btn btn-danger">Add Another Structure</button>
            {% endif %}
            <button type="submit" disabled="disabled" id="submit0" class="btn btn-primary"
                    onclick="sessionStorage.setItem('option', '{{ option }}'); sessionStorage.setItem('started', false);">Begin Docking</button>
        </div>
    </form>
    {% endif %}
    {% if 'ml' in option %}
        <ul class="nav nav-pills" style="margin-left: 2rem">
            <li class="nav-item">
              <a id="stored_proteins" class="nav-link red {{ 'active' if option == 'mlstored' }}" href="{{ url_for('switcher', option='mlstored') }}">Use Stored Proteins</a>
            </li>
            <li class="nav-item">
              <a id="upload_custom" class="nav-link red {{ 'active' if option == 'mlcustom' }}" href="{{ url_for('switcher', option='mlcustom') }}">Upload Custom Structures</a>
            </li>
        </ul>

        {% if option.__contains__('mlstored') %}
        <form style="padding: 2rem" onchange="validate2()">
            <div class="form-group">
            <select onchange="validateProtein('protein2')" required name="protein2" id="protein2" class="custom-select" >
              <option selected="true" disabled="disabled">Select Protein...</option>
                {% for item in proteins %}
                  <option value="{{item}}">{{ item.upper() }}</option>
                {% endfor %}
            </select>
            </div>
            <button type="button" disabled="disabled"
                    onclick="getStructures(document.getElementById('protein2').value, false);"
                    id="submit2" class="btn btn-primary">Find Structures</button>
            <div style="float:right" class="btn-group" role="group" aria-label="Basic example">
                <button type="button" disabled="disabled" id="submit5" class="btn btn-success" onclick="getSampleScores('active', document.getElementById('protein2').value)">Use Sample Active Scores</button>
                <button type="button" disabled="disabled" id="submit6" class="btn btn-info" onclick="getSampleScores('decoy', document.getElementById('protein2').value)">Use Sample Decoy Scores</button>
            </div>
            <select style="width: 10rem; float:right; margin-right: 1rem" name="num" id="num" disabled="disabled" class="custom-select">
                <option value="1">Choose Test #</option>
            </select>
        </form>
        <div style="margin: 0rem 2rem; display: none" id="sample-load" class="alert alert-warning">Loading <span class="loading"></span></div>
        <form enctype="multipart/form-data" onchange="disableBox()" method="POST" style="padding: 2rem" disabled="true">
            <div class="row" id="radios" style="margin: 1rem; display: none">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="inlineRadio" id="useTextBox" value="useTextBox">
                  <label class="form-check-label" for="useTextBox">Use JSON Text Box</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="inlineRadio" id="useSmallBox" value="useSmallBox">
                  <label class="form-check-label" for="useSmallBox">Use Smaller Text Boxes</label>
                </div>
            </div>
            <div class="form-group">
                <label for="textarea">Structure Object - Create a JSON Object in the Correct Order</label>
                <textarea disabled="disabled" class="form-control" id="textarea" rows="3"></textarea>
            </div>
            <br>
            <p>Or enter affinity scores individually for each structure (must submit protein to see structures)</p>
            <div id="smalltextbox" class="row">
              
            </div>
            <div style="margin-top: 1rem" class="btn-group" role="group" aria-label="Basic example">
{#                <button type="button" disabled="disabled" id="submit4" class="btn btn-secondary" onclick="preSubmit(true)">Run Linear Models *</button>#}
                <button type="button" disabled="disabled" id="submit3" class="btn btn-danger" onclick="preSubmit()">Run All Models</button>
            </div>
            <br>
            <br>
{#            <p>* Running linear models will run quickly. The two models are Logistic Regression and K Nearest Neighbor.</p>#}
{#            <p>** Running all models will take more time. Linear models work sufficiently for large datasets.#}
{#                Running all models will place you into a Queue.</p>#}
        </form>
        {% endif %}
        {% if option == 'mlcustom' %}
            <div style="margin: 3rem; margin-top: 1rem">
                <div id="make_boxes">
                    <p>Upload an active/decoy excel file to create a form to specify affinity data.</p>
                    <div class="data-bv-file-type custom-file" id="excel_test_div" style="width: 20rem; margin-right: 1rem">
                        <input onchange="validate_excel()" name="excel_test" accept=".xlsx" type="file" class="custom-file-input" id="excel_test"/>
                        <label class="custom-file-label" for="excel_test">Upload an Excel File</label>
                    </div>
                    <button id="submit_excel2" type="submit" onclick="excel_return_structures();
                    document.getElementById('submit_excel2').setAttribute('disabled', 'disabled');
                    document.getElementById('excel_test').setAttribute('disabled', 'disabled')"
                            disabled="disabled" class="btn btn-danger">Create Form</button>
                </div>
                <div id="boxes">
                    <form method="post" action="{{ url_for('custom_affinity') }}" enctype="multipart/form-data">
                        <div id="excel_boxes" class="row" name="excel">

                        </div>
                        <div id="excel_upload" style="display: none">
                            <button id="submit_excel" type="submit"
                                disabled="disabled" class="btn btn-danger">Continue</button>
    {#                        <div class="data-bv-file-type custom-file" id="active_div" style="width: 20rem; margin-left: 1rem">#}
    {#                            <input onchange="updateDisabledMLRun()" name="active" accept=".xlsx" type="file" class="custom-file-input" id="excel_active"/>#}
    {#                            <label class="custom-file-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()" name="decoy" accept=".xlsx" type="file" class="custom-file-input" id="excel_decoy"/>#}
    {#                            <label class="custom-file-label" for="excel_decoy">Choose Decoy Excel File...</label>#}
    {#                        </div>#}
    {#                        <button style="margin-left: 1rem" id="submit_excel" type="submit" onclick="submit_excel(true);#}
    {#                            document.getElementById('submit_excel').setAttribute('disabled', 'disabled')"#}
    {#                            disabled="disabled" class="btn btn-danger">Run ML Models</button>#}
                        </div>
                    </form>
                </div>
            </div>
        {% endif %}
    {% endif %}
{% endblock %}