{% extends 'main.html' %}
{% block content %} 
{% load static %}

<div class="container-fluid">
    <div class="row">
        <div class="col-sm d-flex justify-content-center" style="scale:1.2">
            <div class="dataset" style="border: 2px solid black; padding: 3%; border-radius: 5%;">
                <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h3>
                        Welcome to Extremum, please choose your data
                    </h3>
                </label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="breast-cancer">
                    <label class="form-check-label" for="flexRadioDefault1">
                    Breast Cancer Dataset
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="stroke">
                    <label class="form-check-label" for="flexRadioDefault2">
                    Stroke prediction Dataset
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="heart">
                    <label class="form-check-label" for="flexRadioDefault2">
                    (TBD) ECG Dataset (time-series)
                </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="other">
                    <label class="form-check-label" for="flexRadioDefault2">
                    Other (import your dataset)
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid" id="import" style="display: none;">
    <div class="row" >
        <div class="col-sm d-flex justify-content-center">
            <form id="csv_form">
                <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h3>
                        <i class="fas fa-upload"></i> Import a file
                    </h3>
                </label>
                <input type="file"
                    id="doc"
                    title="Upload excel file"
                    name="excel_file"
                    style="border: 1px solid black; padding: 5px;"
                    required="required">
                <input type="submit"
                    onclick="import()"
                    value="Upload"
                    name="csv"
                    id="upload_btn"
                    style="border: 1px solid green; padding:5px; border-radius: 2px; cursor: pointer;">
            </form>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row" id="stats" style="display: none;">
        <div class="col-sm d-flex justify-content-center">
            <!-- <form action="{% url 'home' %}" name="plot" method="POST" id="stats">
                <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h3>
                        <i class="fa-solid fa-chart-simple"></i> Stats
                    </h3>
                </label>
                {% csrf_token %}
                <select id="feature1" name="feature1">
                    <option value={{feature1}} selected>{{feature1}}</option>
                    {% for label in labels %}
                        {% if label != feature1 %}
                            <option value={{label}}>{{label}}</option>
                        {% endif %}
                    {% endfor %}
                </select>
                <select id="feature2" name="feature2">
                    <option value={{feature2}} selected>{{feature2}}</option>
                    {% for label in labels %}
                        {% if label != feature2 %}
                            <option value={{label}}>{{label}}</option>
                        {% endif %}
                    {% endfor %}
                </select>
                <input type="submit" value="Plot" name="plot">
            </form> -->
            
            
        </div>
    </div>
    <br>
    <br>
    <!-- <div class="row">
        <div class="col-sm d-flex justify-content-center">
            <div class="scrollit">
                {{ data_to_display|safe }}
            </div>
        </div>
        <div class="col-sm d-flex justify-content-center">
            {{ fig|safe }}
        </div>
    </div> -->
    <div class="row" id="df" style="display: none;">
        <div class="col-sm d-flex justify-content-center">
            <div class="scrollit" id="df_div">
            </div>
        </div>
    </div>
</div>

<br>
<br>

<div class="container-fluid" style="display: none;" id="preprocessing">
    <div class="row">
        <section>
            <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h2>
                        <i class="fas fa-cog"></i> Preprocessing
                    </h2>
                </label>
        </section>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-sm d-flex justify-content-center">
            <form action="{% url 'home' %}" method="POST" id="preprocess-form">
                {% csrf_token %}
                <div style="scale: 1.2;">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" value="std" name="boxes" checked>
                        <input class="form-check-input" type="checkbox" value="std" name="boxes">
                        <label class="form-check-label" for="inlineCheckbox1">Standardization</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" value="onehot" name="boxes">
                        <label class="form-check-label" for="inlineCheckbox2">One Hot Encoding</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" value="imp" name="boxes">
                        <label class="form-check-label" for="inlineCheckbox3">Imputations</label>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm d-flex justify-content-center">
            <button type="submit" class="button-6" role="button" name="preprocess" form="preprocess-form">Go!</button>
        </div>
    </div>
    
    <br>
    <br>

    <div class="row">
        {% if pca %}
            <div class="col d-flex justify-content-center" id="pca">
                {{ pca|safe }}
            </div>
        {% endif %}
    </div>
</div>


<div class="container-fluid" style="display: none;" id="model">
    <form action="{% url 'home' %}" method="POST" id="traintest-form">
        {% csrf_token %}
        <div class="row">
            <div class="col-sm d-flex justify-content-center">
                <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h2>
                        <i class="fas fa-magic"></i>Pick a model
                    </h2>
                    <select id="model" name="model" style="scale: 1.2;">
                        <option type="submit" value="svm">Support Vector Machine</option>
                        <option type="submit" value="logit" selected>Logistic Regression</option>
                        <option type="submit" value="xgb">XGBoost</option>
                        <option type="submit" value="dt">Decision Tree</option>
                        <option type="submit" value="rf">Random Forest</option>
                    </select>
                </label>
            </div>
        </div>

        <br>
        <br>

        <div class="row">
            <div class="col-sm d-flex justify-content-center">
                <div style="scale: 1.5;">
                    <input type="radio" name="colorRadio" value="train" class="trainTestButton" id="train"/>
                    <label for="radio1">Train </label>

                    <input type="radio" name="colorRadio" value="test" class="trainTestButton" id="test"/>
                    <label for="radio2">Test </label>
                </div>
            </div>
        </div>
        
        <br>

        <div id="train-me" style="display: none;">
            <br>
            <div class="row">
                <div class="col-md d-flex justify-content-center">
                    <label style="display:flex;
                        flex-direction:column;
                        align-items: center;">
                        <h3>
                            Test set ratio
                        </h3>
                        <input name="split_input" id="split_input" type="range" min="0" max="1" step="0.1" style="width: 200px;"/>
                        <output id="value"></output>
                    </label>
                </div>
            </div>
        </div>
        <br>
    </form>
    <div class="row">
        <div class="col-sm d-flex justify-content-center">
            <button type="submit" class="button-6" role="button" name="traintest" form="traintest-form">Go!</button>
        </div>
    </div>
    <br>    
    <div class="row">
        {% if fig2 %}
            <div class="col-sm d-flex justify-content-center">
                {{ fig2|safe }}
            </div>
        {% endif %}

        {% if clas_report %}
            <div class="col-sm d-flex justify-content-center">
                <div class="scrollit">    
                    {{ clas_report|safe }}
                </div>
            </div>
        {% endif %}
    </div>
</div>

<br>
<br>

<div class="container-fluid" style="display: none;" id="counterfactuals">
    <div class="row">
        <section>
            <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h2>
                        <i class="fas fa-cog"></i> Counterfactuals
                    </h2>
                    <h5>
                        Pick a point on the graph
                    </h5>
                    
                </label>
        </section>
        <div class="col-sm d-flex justify-content-center">
        </div>
    </div>

    {% if tsne %}
    <div class="row">
        <div class="col-md justify-content-center" id="tsne"> 
            {{ tsne|safe }}
        </div>
    </div>
    {% endif %}

    <div class="row">
        <form action="{% url 'home' %}" method="POST" id="cf-form">
            {% csrf_token %}
            <div class="col-md d-flex justify-content-center">
                <div class="scrollit" class="cftable" name="cfrow" id="cftable" style="border: 1px solid #bbb; padding: 5px; display: none; max-width: 65%;" >
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm d-flex justify-content-center">
            <button id="cfbtn" type="submit" class="button-6" role="button" name="cf" form="cf-form" style="display:none;">Run Counterfactuals!</button>
        </div>
    </div>

{% if cfrow_og and cfrow_cf %}
        <div class="row" id="og_cf_headers">
            <div class="col d-flex justify-content-center">
                <h2>
                    Original data
                </h2>
            </div>
            <span style="display: none; width: 48px; height: 48px;" id="reset_div">
            </span>

            <div class="col d-flex justify-content-center" style="select:invalid { color: gray; }">
                <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <select id="cfrow_id" name="cfrow_id" style="scale:1.2;">
                        <option value="" disabled selected hidden>Pick counterfactual...</option>
                        {% for row in cfdf_rows %}
                            <option value={{row}}>Counterfactual {{row}}</option>
                        {% endfor %}
                    </select>
                </label>
            </div>
        </div>

        <div class="row" id="og_cf_row">
            <div class="col-md d-flex justify-content-center" >
                <div class="scrollit" id="original_data">
                    {{ cfrow_og|safe}}
                </div>
            </div>
            <div class="col-md d-flex justify-content-center" >
                <div class="scrollit" id="counterfactual">
                    <div id="counterfactual_selected">
                        {{ cfrow_cf|safe }}
                    </div>
                </div>
            </div>
        </div>
{% endif %}
<br>
<br>
</div>
<div class="container-fluid">
</div>
<br>
<br>
{% endblock content%}