{% extends "base.html" %}
{% set active_page = "index" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-xl-12 offset-xl-0">
            <div class="row">
                <div class="col-xl-7">
                    <div class="card shadow mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="text-primary font-weight-bold m-0">Setup</h6>
                        </div>
                        <div class="card-body" style="min-height: 178px;">
                            <form id="session-form">
                                <div class="row">
                                    <div class="col">
                                        <!-- Animal Selector -->
                                        <label for="animal_id">Animal ID</label>
                                        <div class="input-group">
                                            <select id="animal_id" class="custom-select form-control mb-3" required></select>
                                            <div class="input-group-append mb-3">
                                            <a class="btn btn-outline-secondary" role="button" href="#" data-toggle="modal" data-target="#addAnimal">Add animal</a>
                                            </div>
                                        </div>
                                        <label for="experiment">Experiment Reference</label>
                                        <input id="experiment" class="form-control mb-3" type="text" placeholder="experiment id" required>
                                    </div>
                                    <div class="col">
                                        <!-- Experimenter Selector -->
                                        <label for="experimenter_name">Experimenter</label>
                                        <div class="input-group">
                                            <select id="experimenter_name" class="custom-select form-control mb-3"></select>
                                            <div class="input-group-append mb-3">
                                            <a class="btn btn-outline-secondary" role="button" href="#" data-toggle="modal" data-target="#addExperimenter">Add experimenter</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <!-- Protocol selector -->
                                            <label for="protocol">Protocol</label>
                                            <select id="protocol" class="custom-select form-control mb-3">
                                                <optgroup label="Tasks">
                                                    {% for task in tasks %}
                                                        <option value="{{ task.get_identifier() }}">{{ task.get_common_name() }}</option>
                                                    {% endfor %}
                                                </optgroup>
                                                <optgroup label="Presentations">
                                                    {% for presentation in presentations %}
                                                        <option value="{{ presentation.get_identifier() }}">{{ presentation.get_common_name() }}</option>
                                                    {% endfor %}
                                                </optgroup>
                                            </select>
                                    </div>
                                    <div class="col">
                                        <label for="duration">Duration (mins)</label>
                                        <input id="duration" class="form-control mb-3"
                                               type="number" value="30"
                                               min="0" step="5">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div><a class="btn btn-outline-primary btn-block" data-toggle="collapse"
                                                aria-expanded="false" aria-controls="collapse-1"
                                                href="#collapse-options" role="button">More Options</a>
                                            <div class="collapse" id="collapse-options" style="margin-top: 10px">
                                                <div id="protocol-options"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card shadow mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="text-primary font-weight-bold m-0">Status</h6>
                        </div>
                        <div class="card-body" style="min-height: 178px;">
                            <div class="row">
                                <div class="col text-center" style="font-size: 18px;padding-bottom: 17px;">
                                                <span id="status-text" class="flash animated mr-2"
                                                      style="font-size: 20px;">
                                                    <i id="status-icon" class="fas fa-circle text-warning"
                                                       style="font-size: 18px;"></i>&nbsp;Waiting...</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="progress" style="min-height: 20px;">
                                        <div id="session-progress" class="progress-bar bg-dark progress-bar-striped"
                                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                                             style="box-sizing: content-box">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <button class="btn btn-light btn-block btn-lg" id="session-control-btn">Waiting...
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-7">
                    <div class="card shadow mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="text-primary font-weight-bold m-0">Overview</h6>
                            <!-- <div class="dropdown no-arrow">
                                <button class="btn btn-link btn-sm dropdown-toggle" data-toggle="dropdown"
                                        aria-expanded="false" type="button"><i
                                        class="fas fa-ellipsis-v text-gray-400"></i></button>
                                <div class="dropdown-menu shadow dropdown-menu-right animated--fade-in"
                                     role="menu"><a class="dropdown-item" role="presentation">Rewards</a><a
                                        class="dropdown-item" role="presentation">Hits/Misses</a><a
                                        class="dropdown-item" role="presentation">Discrimination (d')</a>
                                </div>
                            </div> -->
                        </div>
                        <div class="card-body" style="min-height: auto; overflow-y: auto;">
                            <div class="chart-area" style="width: 50%; height: auto; margin: auto;">
                                <canvas id="trialsChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card shadow mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="text-primary font-weight-bold m-0">Log</h6>
                        </div>
                        <div class="card-body" style="min-height: 210px; overflow-y: auto; max-height: 600px" >
                            <ul id="log-list" class="list-unstyled">
                                <li><em>Welcome! Session events will appear here.</em></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="toast fade hide" role="alert">
                <div class="toast-header"><img class="mr-2"><strong class="mr-auto">Title</strong><small>10
                    min ago</small>
                    <button class="close ml-2 mb-1 close" data-dismiss="toast"><span
                            aria-hidden="true">×</span></button>
                </div>
            </div>
        </div>
    </div>

<!-- Modal dialogs -->
<div class="modal fade" id="addAnimal" tabindex="-1" role="dialog"
    aria-labelledby="addAnimalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAnimalLongTitle">Add animal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-animal-form">
                    <div class="form-group row">
                        <label for="new-animal-id" class="col-sm-3 col-form-label">Animal ID<sup>*</sup></label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="new-animal-id" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-animal-dob" class="col-sm-3 col-form-label">Date of Birth<sup>*</sup></label>
                        <div class="col-sm-5">
                            <input type="date" class="form-control" id="new-animal-dob" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-animal-sex" class="col-sm-3 col-form-label">Sex<sup>*</sup></label>
                        <div class="col-sm-5">
                            <select id="new-animal-sex" class="custom-select form-control" required>
                                <option value="U">Unknown</option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                                <option value="O">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-animal-species" class="col-sm-3 col-form-label">Species<sup>*</sup></label>
                        <div class="col-sm-5">
                            <select class="custom-select form-control" id="new-animal-species" required>
                                <option>Mus musculus</option>
                                <option>Rattus norvegicus</option>
                                <option>Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-animal-genotype" class="col-sm-3 col-form-label">Genotype</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="new-animal-genotype">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-animal-description" class="col-sm-3 col-form-label">Description</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="new-animal-description"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-animal-rfid" class="col-sm-3 col-form-label">RFID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="new-animal-rfid"></textarea>
                        </div>
                    </div>
                </form>

                <sup>*</sup> Indicates a required field.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="add-animal-btn">Save animal</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addExperimenter" tabindex="-1" role="dialog"
    aria-labelledby="addExperimenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addExperimenterLongTitle">Add experimenter</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-experimenter-form">
                    <div class="form-group row align-items-center">
                        <label for="new-experimenter-name" class="col-sm-5 col-form-label">Experimenter name<sup>*</sup><br>(first and last name)</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="new-experimenter-name" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-laboratory-name" class="col-sm-5 col-form-label">Laboratory name<sup>*</sup></label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="new-laboratory-name" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-institution-name" class="col-sm-5 col-form-label">Institution name<sup>*</sup></label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="new-institution-name" required>
                        </div>
                    </div>
                </form>

                <sup>*</sup> Indicates a required field.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="add-experimenter-btn">Save experimenter</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="static/js/session.js"></script>
{% endblock %}
