{% extends "base.html" %}

{% block page_title %}{{ event }} {{ accounting_year }}{% 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-12 col-lg-12">
                        <h1>{{ event }} <small>({{ transaction_list.count }} transactions)</small></h1>
                    </div>
                    {% if event.informations %}
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h4>informations</h4>
                        {{ event.to_markdown | safe }}
                        <br />
                    </div>
                    {% endif %}
                    <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 sort sortable-onload-5-6r rowstyle-alt colstyle-alt" id="comptaTable">
                            <thead>
                                <th class="centered sortable">Date</th>
                                <th class="sortable">Description</th>
                                <th class="sortable">Contre-partie</th>
                                <th class="sortable">N° de compte</th>
                                <th class="centered" colspan="2">Montant</th>
                            </thead>
                            {% for transaction in transaction_list %}
                                <tr {% if transaction.is_done == False or transaction.is_simulated == True %}class="alert alert-warning simulated"{% endif %}>
                                    <td class="push-right">{{ transaction.registrationDate | date:"j b" }}</td>
                                    <td><a href="{% url 'transaction_details' transaction.id %}">{{ transaction }}</a></td>
                                    <td>{{ transaction.counterpart }}</td>
                                    <td>{{ transaction.account_number }}</td>
                                    {% if transaction.transaction_type.transaction_type == 0 %}
                                        <td></td>
                                        <td class="push-right alert alert-danger">-{{ transaction.totalAmount }}</td>
                                    {% else %}
                                        <td class="push-right alert alert-success">{{ transaction.totalAmount }}</td>
                                        <td></td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                            <tfoot>
                                <tr class="simulated">
                                    <td colspan="4" class="push-right"><b>Totaux simulés</b></td>
                                    <td class="push-right alert alert-success"><b>{{ sum_recette|floatformat:2 }}</b></td>
                                    <td class="push-right alert alert-danger"><b>-{{ sum_depense|floatformat:2 }}</b></td>
                                </tr>
                                <tr class="simulated">
                                    <td colspan="4" class="push-right"><b>Total simulé</b></td>
                                    <td class="centered alert alert-{% if total_simulated_Amount >= 0 %}success{% else %}danger{% endif %}" colspan="2"><b>{{ total_simulated_Amount|floatformat:2 }}</b></td>
                                </tr>
                                <tr>
                                    <td colspan="4" class="push-right"><b>Totaux non-simulés</b></td>
                                    <td class="push-right alert alert-success"><b>{{ nonsimulated_sum_recette|floatformat:2 }}</b></td>
                                    <td class="push-right alert alert-danger"><b>-{{ nonsimulated_sum_depense|floatformat:2 }}</b></td>
                                </tr>
                                <tr>
                                    <td colspan="4" class="push-right"><b>Total</b></td>
                                    <td class="centered alert alert-{% if total_Amount >= 0 %}success{% else %}danger{% endif %}" colspan="2"><b>{{ total_Amount|floatformat:2 }}</b></td>
                                </tr>
                            </tfoot>
                        </table>
                        <br>
                        <p align="center" class="noprint"><a href="{% url 'event_listing' %}">Listing</a></p>
                        <hr>
                        <div id="plot_graph" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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: {
                type: 'spline'
            },

            title: {
                text: '{{ event }} : évolution du solde'
            },

            xAxis: {
                type: 'datetime',
                title: {
                    text: 'Date'
                },
            },

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

            legend: {
                enabled: false
            },

            credits: {
                enabled: false
            },

            plotOptions: {
                spline: {
                    marker: {
                        enabled: true
                    }
                },
                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: [{
                {% if not date_sum_simulated %}
                type: 'area',
                {% endif %}
                name: 'Total',
                data: ([
                    {% for key, value in date_sum.items %}[Date.UTC({{ key.year }}, {{ key.month }}, {{ key.day }}), {{ value }}],{% endfor %}
                    ])
            {% if date_sum_simulated %}
            }, {
                // type: 'area',
                name: 'Total Simulé',
                data: ([
                    {% for key, value in date_sum_simulated.items %}
                        [Date.UTC({{ key.year }}, {{ key.month }}, {{ key.day }}), {{ value }}],
                    {% endfor %}
                    ])
            {% endif %}
            }]
        });
    });
</script>

{% endblock %}