{% 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 id="bar-chart-container">
        <h4 id="bar-chart-header" style="text-align:center" class="mt-4">Total Review in Last One Year</h4>
        <canvas id="barChart" width="400" height="100" class="mt-2"></canvas>
    </div>
<br>
<br>
    <div id="line-chart-container">
        <h4 style="text-align:center" class="mt-4">Total Star ratings in Last One Year</h4>
        <canvas id="lineChart" width="400" height="100" 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 %}