{% extends 'base.html' %}


{% block content %}
<header>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">Studies</h1>
            <p class="lead">Showing all appointments in database.</p>
        </div>
    </div>
    <hr class="my-4">
    <div class="container-fluid">
        <form class="d-flex" role="search" method="POST">
            <div class="input-group mb-3">
                <label class="input-group-text" for="inputStudy">Study</label>
                <select class="form-select" id="inputStudy" name="inputStudy" onchange="this.form.submit()">
                    <option disabled selected>Select a study...</option>
                    {% for k, v in data_dict["appointment_study"].items() %}
                    <option {% if v==selected_study %} selected {% endif %} value="{{ k }}">{{ v }}</option>
                    {% endfor %}
                </select>
            </div>
        </form>
    </div>
</header>

<body>
    {% if selected_study %}
    <div class="card"
        style="width: 30rem; height: 20em; float:left; margin-right: 1em; margin-bottom: 2em; background-color: transparent;">
        <div class="card-header">Appointments</div>
        <canvas id="appointments" width="850" height="500">
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
            <script
                src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
            <script>
                const ctx = document.getElementById("appointments").getContext("2d")
                new Chart(ctx, {
                    type: "line",
                    data: {
                        labels: {{ data["date_labels"] | safe }},
                    datasets: [{
                        label: "# appointments",
                        data: {{ data["date_values"] | safe }},
                    backgroundColor: '#ea6212',
                    borderColor: '#ea6212',
                    tension: 0,
                    pointRadius: 0,
            }]
          },
                    options: {
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: '# appointments'
                            },
                            ticks: {
                                beginAtZero: true,
                                stepSize: 1,
                                suggestedMin: 'min-int-value',
                                suggestedMax: 'max-int-value'
                            }
                        },
                        x: {
                            type: 'time',
                            time: {
                                unit: "week"
                            },
                            title: {
                                display: true,
                                text: 'Date'
                            }
                        },
                    }
                }
    })
            </script>
        </canvas>
    </div>
    <div class="card" style="width: 100%;">
        <h5 class="card-header">Appointments: {{ selected_study }}</h5>
        <div class="card-body">
            <h6 class="card-subtitle mb-2 text-muted">Click IDs to see a participant's profile</h6>
            <div style="text-align: left" width="10%">
                {{ data["table"]|safe }}
            </div>
        </div>
    </div>
    {% endif %}
</body>
{% endblock %}