{% extends "layout.html" %}
{% load static %}
{% block title %}Alg-E{% endblock %}


{% block body %}

    <script>$(function () {
        $('.selectpicker').selectpicker();
    });

    var specs = {{ forms.specs | safe }};
    var models = {{ forms.models | safe }};
    var metrics = {{ forms.metrics | safe }};


    function change_file(file_id, label_id) {
        file_obj = document.getElementById(file_id);
        label_obj = document.getElementById(label_id);
        label_obj.innerHTML = "";

        var newLabels = specs[file_obj.value]['labels'];

        var newLabelsGrouped = newLabels.reduce(function (rv, x) {
            (rv[x[1]] = rv[x[1]] || []).push(x[0]);
            return rv
        }, {});

        $('#label').selectpicker('destroy');
        $('#label').selectpicker();
        var $cont = $('#label');
        $cont.innerHTML = "";
        for (group in newLabelsGrouped) {
            $('<optgroup/>').attr('label', group).appendTo($cont);
            for (itemPos in newLabelsGrouped[group]) {
                $cont.find('optgroup').last().append('<option>' + newLabelsGrouped[group][itemPos] + '</option>');
            }

        }
    }

    function change_label(label_id, features_id, models_id, metric_id) {
        label_obj = document.getElementById(label_id);
        features_obj = document.getElementById(features_id);
        models_obj = document.getElementById(models_id);
        metric_obj = document.getElementById(metric_id);

        var file = document.getElementById('file').value;
        var label = label_obj.value;

        var problem_type = specs[file]['labels'].filter(function(x){ return x[0] == label })[0][1];

        if (problem_type=='classification') {
            $('#oversampling').prop("disabled", false);
        }
        else {
            $('#oversampling').prop("disabled", true);
        }

        var features = specs[file]['features'];
        var newFeaturesGrouped = features.reduce(function(rv, x) {
            (rv[x[1]] = rv[x[1]] || []).push(x[0]);
            return rv
        }, {});

        $('#features').selectpicker('destroy');
        $('#features').selectpicker();
        var $cont = $('#features');
        $cont.innerHTML = "";
        for (group in newFeaturesGrouped) {
            $('<optgroup/>').attr('label', group).appendTo($cont);
            for (itemPos in newFeaturesGrouped[group]) {
                if(newFeaturesGrouped[group][itemPos] != label) {
                    $cont.find('optgroup').last().append('<option>' + newFeaturesGrouped[group][itemPos] + '</option>');
                }

            }

        }

        $('#metric').selectpicker('destroy');
        $('#metric').selectpicker();
        $('#metric').innerHTML = "";
        newMetrics = metrics[problem_type];
        for(var option in newMetrics){
            var value = newMetrics[option];
            var newOption = document.createElement('option');
            newOption.value = value;
            newOption.innerHTML = value;
            metric_obj.options.add(newOption);
        }

        $('#models').selectpicker('destroy');
        $('#models').selectpicker();
        $('#models').innerHTML = "";
        newModels = models[problem_type];
        for(var option in newModels){
            var value = newModels[option];
            var newOption = document.createElement('option');
            newOption.value = value;
            newOption.innerHTML = value;
            models_obj.options.add(newOption);
        }
    }</script>


    <div class="container py-5">
        <div class="row">

            <div class="container">

                <div id="#forms">

                    <form method="post" id="form_program" action="/running"> {% csrf_token %}

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="file">File</label><br>
                                <select class="selectpicker form-control"
                                        name="file"
                                        title="Choose a file..."
                                        onchange="change_file('file', 'label')"
                                        id="file">
                                    {% for file in forms.files %}
                                        <option value="{{ file|first }}">{{ file|first }} ({{ file|last }} records)
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="label">Label</label><br>
                                <select class="selectpicker form-control"
                                        name="label"
                                        title="What do you want to predict?"
                                        onchange="change_label('label', 'features', 'models', 'metric')"
                                        id="label"
                                        data-live-search="true">
                                </select>
                                <br>
                                <div class="form-check mb-2 mr-sm-2">
                                    <input class="form-check-input" type="checkbox" id="oversampling"
                                           name="oversampling" disabled>
                                    <label class="form-check-label" for="inlineFormCheck">
                                        Oversampling
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="models">Models</label><br>
                                <select class="selectpicker form-control"
                                        multiple
                                        data-actions-box="true"
                                        data-selected-text-format="count > 2"
                                        name="models"
                                        title="All (Default)"
                                        id="models">

                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="features">Features</label><br>
                                <select class="selectpicker form-control"
                                        multiple
                                        data-actions-box="true"
                                        data-selected-text-format="count > 2"
                                        name="features"
                                        title="All (Default)"
                                        id="features"
                                        data-live-search="true">
                                </select>
                                <br>
                                <div class="form-check-inline">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="featureselection"
                                               value="lasso">Lasso
                                    </label> &nbsp; &nbsp;
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="featureselection"
                                               value="boruta">Boruta
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="filter">Filter</label><br>
                                <select class="selectpicker form-control"
                                        name="external"
                                        title="No Filter (Default)"
                                        id="external">
                                    {% for external in forms.externals %}
                                        <option>{{ external }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="metric">Metric</label><br>
                                <select class="selectpicker form-control" name="metric" title="AUC or MSE (Default)"
                                        id="metric">
                                </select>
                            </div>
                        </div>


                        <div style='float: right;'>
                            <button id="submit" type="submit" class="btn btn-primary active"
                                    form="form_program" value="Submit" aria-pressed="true">Submit
                            </button>
                        </div>


                    </form>
                </div>
            </div>
        </div>

    </div>


{% endblock %}