<!DOCTYPE html>
<html lang="en">

<head>
    <title>wCLAMs</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap.css">
    <script src="/static/jquery-3.3.1.min.js"></script>
    <script src="/static/bootstrap.js"></script>
    <script src="/static/jquery.blockUI.js"></script>
    <script src="/static/jquery.form.min.js"></script>

    <script>
        $(function () {
            $("#form_main").submit(function () {

            // use sample dataset
            var use_sample = $('#use_sample').val();
            if (use_sample) {
                $.blockUI({ message: '<h4>' + 'Processing' + '</h4>', fadeIn: 0 });
                return true;
            }

            var filepath = $("input[name='dataFile']").val();
            var extStart = filepath.lastIndexOf(".");
            var ext = filepath.substring(extStart, filepath.length).toUpperCase();
            if (ext != ".CSV") {
                alert('Only support CSV file!');
                return false;
            }

            $.blockUI({ message: '<h4>' + 'Analyzing' + '</h4>', fadeIn: 0 });
            });

            var options = {
            type: 'POST',
            success: function (obj) {
                // console.log(obj);
                if (obj && obj["html"]) {
                    $('#cla_result').html(obj["html"]);
                }
                else if (obj && obj["message"]) {
                    $('#cla_result').html(obj["message"]);
                }
                else {
                    $('#cla_result').html(obj);
                }
                $.unblockUI();
            }
            };

            $('#form_main').ajaxForm(options);

            $('#dataFile').change(function () {
            $('#dataFileCover').val($(this).val());
            });
        });

    </script>

    <style>
        td {
            text-align: center;
            vertical-align: middle;
        }

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 15px;
            border-radius: 5px;
            background: #d3d3d3;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
        }

        .slider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
        }

        footer {
            display: none;
        }
    </style>

</head>

<body>
    <div>
        <br />
        <div class="row p-2 m-2">
            <div class="col-3">
                <form id="form_main" class="form-horizontal" action="/submit" method="post" enctype="multipart/form-data">

                    <div class="card">
                        <h6 class="card-header">
                            Analyze a Sample Dataset
                        </h6>

                        <div class="card-body">

                            <h6>
                                Between-class Distance <span class="font-italic font-weight-bold">
                                    d
                                </span>
                                <span id="d_label" class="badge badge-pill badge-secondary">
                                    2
                                </span>
                            </h6>
                            <div class="row">
                                <input type="range" min="0" max="8" value="2" class="slider"
                                    oninput="$('#d_label').html(this.value);" id="d" name="d">
                            </div>

                            <br />

                            <h6>
                                Sample Count <span class="font-italic font-weight-bold">nobs</span>
                                <span id="nobs_label" class="badge badge-pill badge-secondary">
                                    20
                                </span>
                            </h6>
                            <div class="row">
                                <input type="range" min="20" max="100" value="20" class="slider"
                                    oninput="$('#nobs_label').html(this.value);" id="nobs" name="nobs">
                            </div>

                            <br />
                            <input type="hidden" id="use_sample" name="use_sample" value="false" />
                            <input type="submit" class="btn btn-default btn-outline-dark"
                                onclick="$('#use_sample').val(true);" value="Submit" />
                        </div>
                    </div>

                    <br />

                    <div class="card">
                        <h6 class="card-header">
                            Analyze Your Own Dataset
                        </h6>

                        <div class="card-body">

                            <h6 onclick="$('#dataFile').click();">Upload Data File</h6>
                            <p>
                                The file should use the csv
                                <a href="#modelDatasets" data-toggle="modal">format</a>.
                                Check this <a href="/static/sample.csv">example</a>.
                            </p>

                            <input type="file" name="dataFile" id="dataFile" style="display:none" />
                            <input type="text" id="dataFileCover" onclick="$('#dataFile').click();" class="input-large"
                                style="height:30px; width: 100%; color: lightgray" value="click here to upload ...">
                            <br /><br />

                            <div class="btn-group">
                                <input class="btn btn-default btn-outline-dark" type="submit"
                                    onclick="$('#use_sample').val(false);" value="Submit" />
                                <!--input class="btn btn-default btn-outline-dark" type="submit" value="Test with sample file" /-->
                            </div>

                        </div>
                    </div>

                </form>

                <hr />
                <p>
                    © wCLAMs - A web wrapper for pyCLAMs (oo@zju.edu.cn)
                </p>
            </div>
            <div class="col-6">
                <div class="card">
                    <h6 class="card-header">Result</h6>
                    <div class="card-body">
                        <div id="cla_result">
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="card">
                    <h6 class="card-header">QuickStart</h6>
                    <div class="card-body" id="div_instruction">

                        <table class="table table-light">
                            <tbody>
                                <tr>
                                    <th>Mode 1 - Generate and analyze a sample dataset</th>
                                </tr>

                                <tr>

                                    <td>
                                        1.
                                        Drag the sliders to set parameters d (between-class distance) and nobs (number
                                        of observations, or sample count).
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        2.
                                        Click "Submit". The server will generate a sample dataset with specified
                                        parameters. The analysis report will be sent back to the web page via AJAX.
                                    </td>
                                </tr>
                                <tr>
                                    <th>Mode 2 - Upload and analyze your own dataset</th>                                    
                                </tr>
                                <tr>

                                    <td>
                                        1.
                                        Prepare a dataset in the required <a href="#modelDatasets"
                                            data-toggle="modal">format</a>.
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        2.
                                        Click "Submit". The server will analyze the dataset and send back the result.
                                    </td>
                                </tr>

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

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


    <!-- Modal -->
    <div class="modal fade" id="modelDatasets" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Data File Format Specification</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>The file should be in csv format. Example:</p>

                    <div>
                        <pre># X1,X2,y
-2.100552557727890957e+00,-6.128650159277657106e-02,0
-1.159019414554130156e+00,5.913233466995695409e-01,0
2.390116885110828981e-01,-2.151085116975746558e+00,0
-1.685507377135475160e+00,2.318535329405873868e-01,0
1.665344297477713287e-01,-4.572513228039341571e-01,1
-1.167678798682300290e+00,5.999644077804777709e-01,1
5.400378568542962832e-01,1.761797786765964546e-01,1
-1.721382016840375950e+00,8.207273112628025169e-01,1
</pre>
                    </div>
                    Note: <i>1. Use comma delimiter. 2. Each column is a feature Xi. The last column is y. </i>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>