{% extends "base.html" %}

{% block page_title %}Comptabilité {{ accounting_year }} - {{t_type}}{% endblock %}

{% block content %}

<div id="page" class=" sidebar_right">
    <div class="container">
        <div id="frame2">
            <div id="content">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                        <h1>Année {{ accounting_year }} <small>({% if t_type != 'Tous' %}{{t_type}} uniquement - {% endif %}{{ nb_transaction }} transactions)</small></h1>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <p align="right" class="noprint">
                            <a href="{% url 'export' accounting_year 'sxs' %}">1 tableau</a> | <a href="{% url 'export' accounting_year 'ooo' %}">2 tableaux</a> | <a href="{% url 'export_simple' accounting_year %}">Export SPF</a>
                        </p>
                    </div>
                </div>
                {% if transaction_list %}
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <input type="checkbox" name="show_simulated" id="show_simulated" checked="checked" class="noprint"> Montrer les opérations simulées ?
                        <table class="table table-bordered table-condensed">
                            <thead>
                                <tr>
                                    <th rowspan="2" class="centered">ID</th>
                                    <th rowspan="2" class="centered">Date</th>
                                    <th rowspan="2">Description</th>
                                    <th rowspan="2" class="centered">Tiers</th>
                                    <th colspan="2" class="centered">Montant</th>
                                    <th rowspan="2" class="centered">Cumul</th>
                                </tr>
                                <tr>
                                    <th class="centered">Recettes</th>
                                    <th class="centered">Dépenses</th>
                                </tr>
                            </thead>
                            {% for transaction in transaction_list %}
                                <tr {% if transaction.0.is_done == False %}class="alert alert-danger"{% elif transaction.0.is_simulated == True %}class="alert alert-warning simulated"{% endif %}>
                                    <td class="centered">{{ transaction.0.id }}</td>
                                    <td class="push-right">{{ transaction.0.registrationDate | date:"j-n" }}</td>
                                    <td><a href="{% url 'transaction_details' transaction.0.id %}">{{ transaction.0.description }}</a></td>
                                    <td class="push-right">{{ transaction.0.counterpart }}</td>
                                    {% if transaction.0.transaction_type.transaction_type == 0 %}
                                        <td>&nbsp;</td>
                                        <td class="push-right alert alert-danger">-{{ transaction.0.totalAmount }}</td>
                                    {% else %}
                                        <td class="push-right alert alert-success">{{ transaction.0.totalAmount }}</td>
                                        <td>&nbsp;</td>
                                    {% endif %}
                                    <td class="push-right">{{ transaction.1 }}</td>
                                </tr>
                            {% endfor %}
                            <tfoot>
                                <tr>
                                    <td colspan="3" class="push-right"><b>Totaux</b></td>
                                    <td class="push-right alert alert-success"><b>{{ totalrecette }}</b></td>
                                    <td class="push-right alert alert-danger"><b>-{{ totaldepense }}</b></td>
                                    <td colspan="2" class="centered alert alert-{% if total >= 0 %}success{% else %}danger{% endif %}">
                                        <b>{{ total }}</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="push-right"><b>Totaux simulés</b></td>
                                    <td class="push-right alert alert-success"><b>{{ totalrecette_simulated }}</b></td>
                                    <td class="push-right alert alert-danger"><b>-{{ totaldepense_simulated }}</b></td>
                                    <td colspan="2" class="centered alert alert-{% if total >= 0 %}success{% else %}danger{% endif %}">
                                        <b>{{ total_simulated }}</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3"></td>
                                    <td colspan="2" class="centered alert alert-{% if total >= 0 %}success{% else %}danger{% endif %}">
                                        <b>{{ total }}</b>
                                    </td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                        <hr>
                        <div id="plot_graph" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                        <br>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% if transaction_list %}
<script type="text/javascript">
    $(document).ready(function() {
        $('#comptaTable').tablesorter({
            dateFormat: "uk",
            headers: {
                0: { dateFormat: "ddmmyyyy" },
                4: { sorter: false },
            },

            sortList: [[0,0]]
        });

        $('#show_simulated').change(function(event) {
            var checkbox = event.target;
            if (checkbox.checked) {
                //Checkbox has been checked
                $('.simulated').show();
            } else {
                //Checkbox has been unchecked
                $('.simulated').hide();
            }
        });

        $('#plot_graph').highcharts({
            chart: {
                zoomType: 'x'
            },

            title: {
                text: 'Année {{ accounting_year }} : évolution financière'
            },

            // subtitle: {
            //     text: document.ontouchstart === undefined ?
            //             'Sélectionner une partie du graphique pour zoomer' : 'Sélectionner une partie du graphique pour zoomer'
            // },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {
                title: {
                    text: 'Total'
                },
                plotLines: [{
                    color: '#FF0000',
                    width: 3,
                    value: 0
                }]
            },

            legend: {
                enabled: false
            },

            credits: {
                enabled: false
            },

            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: 0
                }
            },

            series: [{
                type: 'area',
                name: 'Total',
                data: ([
                    {% for key, value in date_sum.items %}
                        [Date.UTC({{ key.year }}, {{ key.month }}, {{ key.day }}), {{ value }}],
                    {% endfor %}
                    ])
            }]
        });
    });
</script>
{% endif %}

{% endblock %}