{% extends "layout.html" %}
{% block content %}

<div class="container">
    
<div class="jumbotron p-1 m-1">
    <p class="h2"style="font-family: 'Exo', sans-serif;">File name is {{ file.filename }}</p>
</div>

<!-------Section Overview--------->
<section class="pt-2 mt-2 pb-2 mb-2">
    <div class="container">
        <div class="row">
            <div class="col-md-6 ">
                <div id="overview_s1">
                    <div class="card bg-light mb-3 shadow-2-strong " style="min-width: 20rem; ">
                        <div class="card-header font-weight-bold text-danger">Over View</div>
                        <div class="card-body">
                            <table class="table">
                                <tr>
                                    <th class="font-weight-bold">Numerical Columns</th><td class="text-capitalize font-weight-bold">{{ process.IV.TotalNumeric }}</td>
                                </tr>
                                <tr>
                                    <th class="font-weight-bold">Categorical Columns</th><td class="text-capitalize font-weight-bold">{{ process.IV.TotalCategorical }}</td>
                                </tr>
                                <tr>
                                    <th class="font-weight-bold">Rows & Columns</th> <td class="text-capitalize font-weight-bold">{{process.IV.Shape[0]}} X {{process.IV.Shape[1]}}</td>
                                </tr>
                                <tr>
                                    <th class="font-weight-bold">Drop Missing Values</th>
                                    <td class="align-items-center">
                                        <button class="btn btn-rounded btn-primary" onclick="dropna()" id='dropingall'>click</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="col-md-6 d-flex justify-content-center">
                <div id='overview'></div>
            </div>
            <script>plot_piechart({{ process.IV.Missing }}, {{ process.IV.Shape[0]}});</script>

        </div>
    </div>
</section>
<!-------End---------->
<hr style="border: 1px solid rgb(0, 0, 0); border-radius: 5px; color: black;">
<!-------Section Badge-------->
<section id='Sbadge' class="pe-3 me-3 ms-3 ps-3">
    <div class="container">
    <div class="row">
        <p class="h2"style="font-family: 'Exo', sans-serif;">Badge</p>
        <div class="col-md-12">
            <div id='Badge'>
                <a href="#sample" class="btn btn-round bg-success text-light m-2 p-2">Sample 5</a>
            </div>
        </div>
    </div>
</div>

</section>

<!-------End------------------>

<!--Action Center-->
<section class="pe-3 me-3 ms-3 ps-3 pt-1 pb-3 mt-1 mb-3 pt-md-5 mt-md-5 pb-md-5 mb-md-5">
    <div class="container">
        <div class="pb-5">
            <p class="h2"style="font-family: 'Exo', sans-serif;">Action Center</p>    
        </div>

        <div class="row">
            <div class="col-md-6">
                <div style="display: block;" class="d-flex justify-content-center pt-md-5">
                    <button onclick="objcopy()" class="btn btn-primary">Analyse</button>
                    <button class="btn btn-light" onclick="$('#adv').css('display', 'block')"><i class="ellipsis horizontal icon"></i></button>
                </div>    
            </div>
            
            <div class="col-md-6">
                <div>
                    <div class="ui teal label">
                        <p>Columns</p>
                    </div>

                    <select multiple="" class="ui search dropdown" id="actionSec2">
                        <option value="none" selected class="font-weight-bold"> None </option>
                        <option value="ALL###" class="font-weight-bold">*#ALL#*</option>
                    </select>

                    <br>
                    
                    <div class="pt-md-3">
                        
                        <div class="ui teal label">
                            <p>Actions</p>
                        </div>
                        
                        <select multiple="" class="ui search dropdown " id="actionSec1">
                            <option value="none" selected class="font-weight-bold"> None </option>
                            <option value="drop" class="font-weight-bold">Drop</option>
                            <option value="set_numeric" class="font-weight-bold">SetColumn(Numeric)</option>
                            <option value="set_categorical" class="font-weight-bold">SetColumn(Categorical)</option>
                            <option value="date_makeit" class="font-weight-bold">SetColumn(Date)</option>

                            <option value="dtype_integer" class="font-weight-bold">Dtype(int)</option>
                            <option value="dtype_float" class="font-weight-bold">Dtype(float)</option>

                            <option value="fillmissing_mode" class="font-weight-bold">FillMissing(Mode)</option>
                            <option value="fillmissing_median" class="font-weight-bold">FillMissing(Median)</option>
                            <option value="fillmissing_mean" class="font-weight-bold">FillMissing(Mean)</option>
                            <option value="fillmissing_0" class="font-weight-bold">FillMissing(0)</option>
            
                            <option value="get_dummy" class="font-weight-bold">Get dummy</option>
                            <option value="label_encode" class="font-weight-bold">Label Encode</option>
                            <option value="date_addit" class="font-weight-bold">Add Datepart</option>
                            

                            <option value="scalar_standard" class="font-weight-bold">StandardScaler</option>
                            <option value="scalar_minmax" class="font-weight-bold">MinMaxScaler</option>

                        </select>
                    
                    </div>
                    <br>
                    <div class="pt-md-2" id='action_btn' style="display: block;">
                        <button onclick='action_main("actionSec1", "actionSec2")' class="btn btn-danger">Okay</button>
                        <a href="/view"><button class="btn btn-primary"> View Dataset</button></a>
                    </div>
                    
                </div>
            </div>
        </div>

        
        <div id='adv' style="display: none;">
            
            <div class="pb-5 pt-5 mt-5 text-center">
                <p class="h2"style="font-family: 'Exo', sans-serif;">Advance Action Center (beta)</p>    
            </div>
            <div class="row">
                
                <div class="col-md-6 col-sm-12 mt-md-5 mt-sm-0">
                    <p class="h3 d-flex justify-content-center" style="font-family: 'Exo', sans-serif;">Choose Variable: </p>
                    <div class="d-flex justify-content-center">
                        <select class="ui search dropdown w-25" id='select_var' onchange="var_change()">
                            <option value="None">None</option> 
                            {% for n in sample.columns %}
                            <option value="{{n}}" id="{{n}}" class="">{{n}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <table class="table">
                        <tr>
                            <th class="font-weight-bold">Dtype</th><td id='dtype'>None</td>
                        </tr>
                        <tr>
                            <th class="font-weight-bold">Non-Null Count</th><td id='count'>None</td>
                        </tr>
                        <tr>
                            <th class="font-weight-bold">Total Unique</th><td id='unique'>None</td>
                        </tr>                
                    </table>
                </div>

            <!--End of row-->
            </div>


            <section id = 'IndAdv' class="p-3 m-3" style="background-color: #00897B; min-height: 60vh; display: none;">
                <div class="container">
                    <p class="h3 text-light text-center pt-3 pb-md-5 pb-sm-2 mb-sm-2 mb-md-5" style="font-family: 'Exo', sans-serif;" id='var_name'></p>
                <div class="row">
            
                    <div class="col-md-6">
                        <p class="h3 d-flex justify-content-center mt-md-5 mt-sm-0 text-light" style="font-family: 'Exo', sans-serif;">Replacer</p>
                        <div class="d-flex justify-content-center">
                            <div class="ui form">
                                <div class="field">
                                    <input required type="text" placeholder="to_replace" id = 'replacer' style="max-width: 100%;">
                                </div>
                            </div>
                        </div>
                
                    </div>

                    <div class="col-md-6">
                        <form class="ui form" id='form_replace'>
                        <div class="field">
                            <label>Replace</label>
                            <input required type="text" name="first-name" id='replace_to' placeholder="to value" style="max-width: 50%;">
                        </div>
                        <div class="field">
                            <div class="ui checkbox">
                                <input type="checkbox" tabindex="0" name = 'regrex', value = 'regrex' class="hidden" id='reg_check'>
                                <label>Regrex</label>
                            </div>
                        </div>
                        <button class="ui button" type="submit" id='replace_button'>Okay</button>
                        </form>
                    </div>



        </div>
    </div>
</section>


        </div>

    </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>$('select.dropdown').dropdown(); $('.ui.checkbox').checkbox();</script>
<hr style="border: 4px solid rgb(71, 71, 71); border-radius: 5px;">
<!--End-->

<!-- Section Sample Data display-->
<section id="sample" class="p-3 m-3">
    
    <div class="container">
        <div class="jumbotron pb-2 mb-2">
            <h2 class="display-6" style="font-family: 'Exo', sans-serif;">Sample {{sample.samplesize}}</h2>
        </div>

    
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <tr class="bg-primary text-light">
                    {% for n in sample.columns %}
                        <th class="font-weight-bold text-capitalize h6">{{n}}</th>
                        <script>
                            $('<option value="{{ n }}" class="font-weight-bold" id = "{{n}}" >{{ n }}</option>').appendTo("#actionSec2");
                        </script>
                    {% endfor %}
                </tr>
                {% for n in sample.sampledata %}
                <tr>
                   {% for i in n %}
                        <td class="font-weight-bold">{{i}}</td>
                    {% endfor %} 
                </tr>
                    {% endfor %}
                <tr>
                    <td colspan="{{sample.number_of_columns}}" class="text-center font-weight-bold bg-success"> 
                        Total {{sample.length}} X {{sample.number_of_columns}}
                    </td>
                </tr>
            </table>
        </div>
    </div>

</section>
<!---------End------------>

<hr style="border: 4px solid rgb(71, 71, 71); border-radius: 5px;">
<!--------Section Quick Report--------->
{% if quick %}
<section class="p-3 m-3" id='quickreport'>
    <div class="container">
        <div class="jumbotron pb-2 mb-2">
            <h2 class="display-6" style="font-family: 'Exo', sans-serif;">Quick Statistics</h2>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-hover">

                <tr>
                    <th class="bg-success"> </th>
                    {% for n in quick.numerical_col %}
                        <th class="font-weight-bold text-capitalize bg-success">{{n}}</th>
                    {% endfor %}
                </tr>
                {% for variable, data in quick.zipped%}
                <tr>
                    <th class="font-weight-bold bg-dark text-light text-capitalize">{{ variable }}</th>
                    {% for values in data %}
                    <td>{{values}}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </table>
        </div>

    </div>
    <script>
        $('<a href="#quickreport" class="btn btn-round bg-success text-light m-2 p-2">Quick Statistics</a>').appendTo("#Badge");
    </script>
</section>

<hr style="border: 4px solid rgb(71, 71, 71); border-radius: 5px;">
{% endif %}

<!---------End ----------->


<!-------Section Correlation-------->
{% if corr.empty %}
<section class="p-3 m-3" id="corr">
    <div class="container">
        <div class="jumbotron pb-2 mb-2">
            <h2 class="display-6" style="font-family: 'Exo', sans-serif;">Correlation Between Variables</h2>
        </div>

        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <div id="chart" ></div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>
    <script> 
        $('<a href="#corr" class="btn btn-round bg-success text-light m-2 p-2">Correlation</a>').appendTo("#Badge");
        corr({{ corr.json()|tojson }}); 
    </script>
</section>
<hr style="border: 4px solid rgb(71, 71, 71); border-radius: 5px;">
{% endif %}
<!---------End---------->



<!------------Individual Numeric Variable Analysis-------------->
{% if process.IV.TotalNumeric %}
<section class="pt-3 mt-3 mb-3 pb-3 pt-md-3 pb-md-3 mt-md-4" id="INVA">
    <script>
        $('<a href="#INVA" class="btn btn-round bg-success text-light m-2 p-2">Numerical Variables</a>').appendTo("#Badge");
    </script>

    <div class="container">
        <div class="jumbotron pb-2 mb-2">
            <h2 class="display-6" style="font-family: 'Exo', sans-serif;">Individual Numerical Variable Analysis</h2>
        </div>

        {% for values in process.IV.Variables%}
        {% if values.vtype == 'numeric'%}
        
        <a onclick="statnumerical('{{values.vname}}')" class='btn btn-round bg-secondary text-light m-2 p-2'>{{values.vname}}<span class='badge bg-danger ms-2'>{{ values.vmissing[0] }}</span></a>
        <script>$("<a href='#INVA' class='btn btn-round bg-secondary text-light m-2 p-2'>{{values.vname}}<span class='badge bg-danger ms-2'>{{ values.vmissing[0] }}</span></a>").appendTo("#Badge");</script>
        {% endif %}
        {% endfor %}

        <section id='numstatdisplay' style="display: none;">
            
            <div class="p-5 text-center">
                <p class="h2" id='name_numerical' style="font-family: 'Exo', sans-serif;">0</p>    
            </div>
            
            <div class="row">
                
                <div class="col-md-6">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <tr>
                                <th class="font-weight-bold">Number of observations</th> <td id='sn1'>0</td>
                                <th class="font-weight-bold">Median</th><td id='sn6'>0</td>
                            </tr>
                            <tr>
                                <th class="font-weight-bold">Mean</th><td id='sn2'>0</td>
                                <th class="font-weight-bold">Quartile 2</th><td id='sn7'>0</td>
                            </tr>
                            <tr>
                                <th class="font-weight-bold">Standard Deviation</th><td id='sn3'>0</td>
                                <th class="font-weight-bold">Maximum</th><td id='sn8'>0</td>
                            </tr>
                            <tr>
                                <th class="font-weight-bold">Minimum</th><td id='sn4'>0</td>
                                <th class="font-weight-bold">Skewness</th><td id='sn9'>0</td>
                            </tr>
                            <tr>
                                <th class="font-weight-bold">Quartile 1</th><td id='sn5'>0</td>
                                <th class="font-weight-bold">Kurtosis</th><td id='sn10'>0</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="col-md-6 d-flex justify-content-center">
                <div class="card bg-danger" style="min-height: 10rem;">
                    <div class="card-header text-white">Facts</div>
                    <div class="card-body table-responsive">
                        <table class="table text-white">
                            <tr>
                                <th>Variable Type: </th> <td class="text-capitalize" id='n1'>0</td>
                            </tr>
                            <tr>
                                <th>Total Missing: </th> <td class="text-capitalize" id='n2'>0</td>
                            </tr>
                            <tr>
                                <th>Missing Percentage</th> <td id='n3'>0</td>   
                            </tr>
                            <tr>
                                <th>Outlier Count</th> <td id='n4'>0</td>
                            </tr>
                        </table>
                    </div>
                </div>
                </div>
            </div>

            <div class="row">
                
                <!------------Distribution Visualising finish------------->
                <div class="col-md-6">
                    <div id="numerical_dis"></div>
                </div>
                <!------------Distribution plot Visualising finish------------->
        
            </div>
        </section>
    </div>
</section>
{% endif %}


<!-----------End------------->

<!------------Individual Categorical Variable Analysis-------------->
{% if process.IV.TotalCategorical %}
<section class="pt-3 mt-4 mb-3 pb-3 pb-md-3 mt-md-4" id="ICVA">
    <script>
        $('<a href="#ICVA" class="btn btn-round bg-success text-light m-2 p-2">Categorical Variables</a>').appendTo("#Badge");
    </script>
    <div class="container">
        <div class="jumbotron pb-2 mb-2">
            <h2 class="display-6 " style="font-family: 'Exo', sans-serif;">Individual Categorical Variable Analysis</h2>
        </div>

        {% for values in process.IV.Variables%}
        {% if values.vtype == 'categorical'%}
        
        <a class="btn btn-round bg-warning text-light m-2 p-2" onclick="stat('{{values.vname}}')">{{values.vname}}<span class="badge bg-danger ms-2">{{ values.vmissing[0] }}</span></a>
        <script>$('<a href="#ICVA" class="btn btn-round bg-warning text-light m-2 p-2">{{values.vname}}<span class="badge bg-danger ms-2">{{ values.vmissing[0] }}</span></a>').appendTo("#Badge");</script>
    
        {% endif %}
        {% endfor %}

        <section id='statdisplay' style="display: none;">
            <div class="p-5 text-center">
                <p class="h2" id='name' style="font-family: 'Exo', sans-serif;">0</p>    
            </div>
            <div class="row ">
            <div class="col-md-6 table-responsive">
                <table class="table table-hover">
                    <tr>
                        <th class="font-weight-bold">Number of observations</th> <td id='s1'>0</td>
                    </tr>
                    <tr>
                        <th class="font-weight-bold">Number of unique values</th><td id='s2'>0</td>
                    </tr>
                    <tr>
                        <th class="font-weight-bold">Highest occuring values</th><td id='s3'>0</td>
                    </tr>
                    <tr class="bg-danger text-light">
                        <th class="font-weight-bold" id='total_miss'></th><td id='total_miss_count'></td>
                    </tr>
                </table>
            </div>

            <div class="col-md-6 d-flex justify-content-center">
                <div class="card bg-success" style="max-width: 20rem; min-height: 8rem;">
                    <div class="card-header text-white font-weight-bold">Most Common observations</div>
                    <div class="card-body">
                        <table class="table text-white">
                            <tr>
                                <th id='cat1'>0</th> <td class="text-capitalize" id='m1'>0</td>
                            </tr>
                            <tr>
                                <th id='cat2'>0</th> <td class="text-capitalize" id='m2'>0</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!------------BarPlot Visualising here------------->
        <div class="col-md-6 pt-4">
            <div id="boxplot_chart"></div>     
        </div>
        <!------------BarPlot Visualising finish------------->

        </section>
    
    </div>
</section>
{% endif %}
<!-----------End------------->
</div>

{% endblock %}