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

{% block page_import %}
    <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>

    <script src="{% static "zoneTableGenerator.js" %}"></script>

    <script src="{% static "consumerTableHandler.js" %}"></script>
    <script src="{% static "consumerFormHandler.js"%}"></script>

    <script src="{% static "paymentTableHandler.js"%}"></script>
    <script src="{% static "paymentModalHandler.js"%}"></script>

    <script src="{% static "javascripts/tables/genericTableHandler.js" %}"></script>
    <script src="{% static "javascripts/tables/genericModalHandler.js" %}"></script>

    <script src="{% static "financial.js" %}"></script>

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

{% block page_name %}
    Finances de {{zone_name}}
{% endblock %}

{% block page_content %}
    <div class="row">
        {% if user.is_authenticated and user|has_group:"Gestionnaire de zone"%}
            <div class="col-md-4">
                <section class="panel" data-intro="Voici votre zone et ses éventuelles sous-zones. Cliquez sur une zone pour n'afficher que ses consommateurs.">
                    <header class="panel-heading">
                        <!-- Table block control actions -->
                        <div class="panel-actions form-inline">
                            <a href="#modalZone" onclick="setupModalZoneAdd()" class="modal-with-form fa fa-plus" data-toggle="tooltip" title="Ajouter" id="plus-zone"></a>
                            <a id="zone-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">Zones</h2>
                        <h2 class="panel-subtitle">Cliquez sur une zone pour filtrer les consommateurs</h2>
                    </header>
                    <div class="panel-body">
                        {% include 'zones_table.html' %}
                    </div>
                </section>
            </div>
            <div class="col-md-8">
        {% else %}
            <div>
        {% endif %}
            <section class="panel" data-intro="Vos consommateurs s'affichent ici, cliquez sur un consommateur pour afficher ses détails et paiements.">
                <header class="panel-heading">
                    <!-- Table block control actions -->
                    <div class="panel-actions form-inline">
                        <a id="call-consumer-modal" href="#modal-consumer" onclick="setupModalConsumerAdd()" class="modal-with-form fa fa-plus" data-toggle="tooltip" title="Ajouter"></a>
                        <a id="print-manager" class="fa fa-print clickable" data-toggle="tooltip" title="Imprimer la table"></a>
                        <a id="manager-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">Consommateurs</h2>
                    <h2 class="panel-subtitle">Cliquez sur un consommateur pour afficher ses paiements</h2>
                </header>
                <div class="panel-body">
                    {% include 'consumer_table.html' %}
                </div>
            </section>
        </div>
    </div>

    <div id="consumer-payment-details" class="row hidden">
        <div class="col-md-4">
            <section class="panel">
                <header class="panel-heading">
                    <!-- Table block control actions -->
                    <div class="panel-actions form-inline">
                        <a href="#" class="fa fa-caret-down" data-toggle="tooltip" title="Minimiser""></a>
                    </div>
                    <h2 class="panel-title">Détails de <b class="consumer-name-details">N/A</b></h2>
                </header>
                <div class="panel-body">
                    <div id="error-detail-table" class="alert alert-warning hidden"></div>
                       <table id="detail-table" class="table table-condensed mb-none">
							<tbody>
                                <tr>
									<td class="text-left">
                                        Somme dûe
                                        <i class="fas fa-question" data-toggle="tooltip"
                                        title="Une somme dûe négative signifie que le consommateur
                                        a payé plus que nécessaire auparavant et pourra utiliser
                                        la différence pour rembourser ses prochaines factures"></i>
                                    </td>
									<td class="text-left" id="consumer-details-amount-due"></td>
								</tr>
                                <tr>
									<td class="text-left">Prochaine facturation</td>
									<td class="text-left" id="consumer-details-next-bill"></td>
								</tr>
                                <tr>
									<td class="text-left">Identifiant</td>
									<td class="text-left" id="consumer-details-id"></td>
								</tr>
                                <tr>
									<td class="text-left">Nom</td>
									<td class="text-left" id="consumer-details-lastname"></td>
								</tr>
                                <tr>
									<td class="text-left">Prénom</td>
									<td class="text-left" id="consumer-details-firstname"></td>
								</tr>
                                <tr>
									<td class="text-left">Genre</td>
									<td class="text-left" id="consumer-details-gender"></td>
								</tr>
                                <tr>
									<td class="text-left">Adresse</td>
									<td class="text-left" id="consumer-details-address"></td>
								</tr>
                                <tr>
									<td class="text-left">Téléphone</td>
									<td class="text-left" id="consumer-details-phone"></td>
								</tr>
                                <tr>
									<td class="text-left">Consommateurs à charge</td>
									<td class="text-left" id="consumer-details-subconsumers"></td>
								</tr>
                                <tr>
									<td class="text-left">Adduction principale</td>
									<td class="text-left" id="consumer-details-outlet"></td>
								</tr>
							</tbody>
						</table>
                </div>
            </section>
        </div>
        <div class="col-md-8">
            <section class="panel">
                <header class="panel-heading">
                    <!-- Table block control actions -->
                    <div class="panel-actions form-inline">
                        <a id="call-payment-modal" href="#modal-payment" onclick="setupModalPaymentAdd()"
                           class="modal-with-form fa fa-plus" data-toggle="tooltip" title="Ajouter"></a>
                        <a id="print-payment" class="fa fa-print clickable" data-toggle="tooltip" title="Imprimer la table"></a>
                        <a id="payment-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">Paiements de <b class="consumer-name-details">N/A</b></h2>
                </header>
                <div class="panel-body">
                    {% include "payment_table.html" %}
                </div>
            </section>
        </div>
    </div>

    {% include "zone_modal.html" %}

    {% include "consumer_modal.html" %}

    {% include "payment_modal.html" %}
{% endblock %}