{% extends "base.html" %}
{% load static %}
{% load group_filter %}

{% block page_import %}
    <script src="{% static "report.js" %}"></script>

    <script src="{% static "vendor/bootstrap-wizard/jquery.bootstrap.wizard.js" %}"></script>
    <script src="{% static "monthlyReportFormHandler.js" %}"></script>
    <script src="{% static "monthlyReportEditFormHandler.js" %}"></script>
    <script src="{% static "vendor/bootstrap-multiselect/bootstrap-multiselect.js" %}"></script>


    <script src="{% static "problemReportFormHandler.js" %}"></script>
    <script src="{% static "reportTableHandler.js" %}"></script>
    <script src="{% static "supportTicketTableHandler.js" %}"></script>
    <script src="{% static "javascripts/tables/genericTableHandler.js" %}"></script>
    <script src="{% static "javascripts/tables/genericModalHandler.js" %}"></script>
    <script src="{% static "vendor/jquery-datatables/media/js/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "vendor/jquery-datatables-bs3/assets/js/datatables.js" %}"></script>

    <link rel="stylesheet" href="{% static "vendor/jquery-datatables-bs3/assets/css/datatables.css" %}"/>
{% endblock %}



{% block page_name %}
    Rapports
{% endblock %}

{% block page_content %}
    <div class="row">
        {% if user|has_group:"Gestionnaire de fontaine"%}
            <div class="col-md-6">
        {% else %}
            <div class="col-md-12">
        {% endif %}
            <!-- Report buttons -->
            <section class="panel" data-intro="Vous pouvez envoyer votre rapport mensuel, ou signaler un problème avec un élement du réseau de distribution.">
                <header class="panel-heading">
                    <div class="panel-actions">
                        <a href="#" class="fa fa-caret-down" data-toggle="tooltip" title="Minimiser""></a>
                    </div>

                    <h2 class="panel-title">Envoyer un rapport</h2>
                    <p class="panel-subtitle">Le rapport sera visible pour tous vos gestionnaires.</p>
                </header>
                <div class="panel-body">
                    <div class="btn-group-lg btn-group-justified">
                        <a id="show-ticket-modal" class="btn btn-default modal-with-form" role="button" href="#modalProblemReport" onclick="setupTicketModalAdd()">Signaler un problème</a>
                        <a id="show-monthly-report-modal" class="btn btn-default modal-with-form" role="button" href="#modalMonthlyReport" onclick="showModal('#show-monthly-report-modal')">Rapport mensuel</a>
                    </div>
                </div>
            </section>
        </div>
        {% if user|has_group:"Gestionnaire de fontaine"%}
            <div class="col-md-6">
                <section class="panel" data-intro="Vous pouvez éditer les rapports mensuels récents pour modifier des informations en cas d'erreur.">
                    <header class="panel-heading">
                        <div class="panel-actions">
                            <a href="#" class="fa fa-caret-down" data-toggle="tooltip" title="Minimiser""></a>
                        </div>

                        <h2 class="panel-title">Rapports mensuels récents</h2>
                        <p class="panel-subtitle">Vous pouvez voir et éditer vos 5 derniers rapports.</p>
                    </header>
                    <div class="panel-body">
                        {% include "report_table.html" %}
                    </div>
                </section>
            </div>
        {% endif %}
    </div>

    <!-- Support ticket table -->
    <section class="panel" data-intro="Consultez l'état des demandes de support.">
        <header class="panel-heading">
            <!-- Table block control actions -->
            <div class="panel-actions form-inline">
                <a id="ticket-options" class="fas fa-cog clickable" data-toggle="tooltip" title="Options"></a>
                <a href="#" class="fa fa-caret-down" data-toggle="tooltip" title="Minimiser""></a>
            </div>
            <h2 class="panel-title">Tickets de support</h2>
        </header>
        <div class="panel-body">
            {% include "support_ticket_table.html" %}
        </div>
    </section>

    <!-- Modal form to report the monthly values -->
    {% include "modal_monthly_report.html" %}

    <!-- Modal form to edit a monthly report after submission -->
    {% include "modal_monthly_report_edit.html" %}

    <!-- Modal form to report a problem on a water outlet -->
    {% include "modal_problem_report.html" %}

{% endblock %}