{% extends "base.html" %}
{% block report %}
    <div class="mt-2">
        <select id="location" class="select-style">
            {% for loc in location_list %}
                <option value="{{loc.location_id}}">{{ loc.care_name }}</option>
            {% endfor %}
        </select>
        <select id="timeInterval" class="select-style">
            <option value="month">Monthly</option>
            <option value="week">Weekly</option>
        </select>
        <button id="applyBtn" style="display: none;">Apply</button>
    </div>
<br>
    <div style="display: flex">
        <div id="bar-chart-container" style="position: relative; width: 60%;">
        </div>
        <div id="pie-chart-container" style="position: relative; width: 40%;">
        </div>
    </div>
<br>
<br>
    <div id="line-chart-container">
<!--        <canvas id="lineChart" width="400" height="150" class="mt-4"></canvas>-->
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
    <script>
    $(document).ready(function(){
        $('#applyBtn').click(function () {
            {% block jquery %} {% endblock %}
         });
         $('#applyBtn').click();

         $("#location").on("change", function(){
             $('#applyBtn').click();
         });
         $("#timeInterval").on("change", function(){
             $('#applyBtn').click();

         });
     });
    </script>
{% endblock report %}