{% extends 'index.html' %}
{% block content %}
<div class="card">
    <div id="main-div" class="card-body">
        <form action="{{ url_for('matDecStim') }}" method="POST">
            <div class="form-group">
                <select class="form-control" name="participant" id="participant">
                    <option>--</option>
                    {% for p in part_keys %}
                    <option>{{ p }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="open-mat-folder-container">Behavioral test data:</label>
                <br>
                <input type="text" id="behav_res" name='behav_res' value="./Matrix_test_results.pkl" style="width:85%"></input>
                <button type="button" id="behav_res_button"  class="btn btn-primary">Browse...</button>
            </div>
            <div class="form-group container-fluid">
                <div class="row">
                    <div class="col text-center mb-3">
                        <button type="button" id="start_story_train" class="btn btn-primary mx-3">Start story training data collection</button>
                    </div>
                    <div class="col text-center mb-3">
                        <button type="button" id="load_train_story_saved" class="btn btn-primary mx-3">Load saved session</button>
                    </div>
                    <div class="col text-center mb-3">
                        <button type="button" id="load_train_story_backup" class="btn btn-primary mx-3">Load previous automatic backup</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col text-center mb-3">
                        <button type="button" id="start_eeg_test" class="btn btn-primary mx-3">Start test data collection</button>
                    </div>
                    <div class="col text-center mb-3">
                        <button type="button" id="load_test_saved" class="btn btn-primary mx-3">Load saved session</button>
                    </div>
                    <div class="col text-center mb-3">
                        <button type="button" id="load_test_backup" class="btn btn-primary mx-3">Load previous automatic backup</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function(){
        // Initialise socketio with a namespace called "main"
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/main');

        $('#load_test_backup').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('load_backup_test', {part_key: $("#participant").val(), test_name: "eeg_test"});
            return false;
        })
        $('#load_test_saved').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('load_session', {part_key: $("#participant").val(), test_name: "eeg_test"});
            return false;
        })

        $('#load_mat_train_backup').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('load_backup_test', {part_key: $("#participant").val(), test_name: "eeg_mat_train"});
            return false;
        })
        $('#load_mat_train_saved').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('load_session', {part_key: $("#participant").val(), test_name: "eeg_mat_train"});
            return false;
        })

        $('#start_mat_train').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('start_test', {part_key: $("#participant").val(), test_name: "eeg_mat_train"});
            return false;
        })


        $('#load_train_story_backup').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('load_backup_test', {part_key: $("#participant").val(), test_name: "eeg_story_train"});
            return false;
        })
        $('#load_train_story_saved').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('load_session', {part_key: $("#participant").val(), test_name: "eeg_story_train"});
            return false;
        })

        $('#start_story_train').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('start_test', {part_key: $("#participant").val(), test_name: "eeg_story_train"});
            return false;
        })

        $('#start_eeg_test').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('start_test', {part_key: $("#participant").val(), test_name: "eeg_test"});
            return false;
        })

        socket.on('participant_start_eeg_test', function(msg) {
            window.location.href = '/eeg/test/clinician/control';
        });

        socket.on('participant_start_eeg_mat_train', function(msg) {
            window.location.href = '/eeg/train/mat/clinician/control';
        });

        socket.on('participant_start_eeg_story_train', function(msg) {
            window.location.href = '/eeg/train/story/clinician/control';
        });

        socket.on('save-dialog-resp', function(msg) {
            // Set form test to filepath returned by dialog
            document.getElementById("save-dir").value = msg.data
        });

        $('#mat-dir-button').click(function(event) {
            // Send message to call stimulus generation function in Python
            socket.emit('open_eeg_dialog');
            return false;
        })

        socket.on('eeg-dialog-resp', function(msg) {
            // Set form test to filepath returned by dialog
            document.getElementById("eeg-dir").value = msg.data
        });
    });
</script>
{% endblock %}