{% extends 'base.html.twig' %}
{% trans_default_domain 'FOSUserBundle' %}
{% block body %}
    {% verbatim %}

        <div id="wrapper">
            <div class="previsionnel"
                 ng-app="caisse"
                 ng-controller="previsionnelCtrl as pCtrl"
            >
            <div class="row">
                <div class="col-xs-12 col-lg-6">
                 <h1>Prévisionnel</h1>
                </div>
                <div class="col-xs-12 col-lg-6">

                    <div ng-if="config.initialLoadingDone && config.loading">
                    <i class="fa fa-spin fa-refresh"></i>
                        Chargement
                    </div>
                    <div ng-if="config.initialLoadingDone && !config.loading">
                        Modifications sauvegardées
                    </div>
                </div>
            </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="config well">
                            <h2>
                                Configuration
                            </h2>
                            <div class="row">
                                    <div class="col-xs-12 col-sm-6">
                                        <p >

                                Euros disponibles au départ:
                                <input
                                type="number"
                                ng-model="config.disponibility"
                                ng-change="save()"
                                ng-model-options="{ debounce: config.debounceTime }">
                                <br>
                                 Gains moyen par mois:
                                <input type="number"
                                 ng-model="config.averageMonthlyEarnings"
                                 ng-change="save()"
                                 ng-model-options="{ debounce: config.debounceTime }">
                            </p>
                            <p>
                                Gérer délais de paiement
                                <input type="checkbox" ng-model="config.showDelays">
                                Gérer répétitions
                                <input type="checkbox" ng-model="config.showRepeats">
                            </p>
                            </div>
                            <div class="col-xs-12 col-sm-6">
                            <p>
                                <strong>
                                    Dépenses mensuelles: {{ sumMonthlyExpenses() }} €
                                </strong>
                            </p>
                            <p>
                                <strong>
                                    Bénef mensuel: {{ config.averageMonthlyEarnings - sumMonthlyExpenses() }} €
                                </strong>
                            </p>
                            <p>
                                Crédit mensuel réalisable (33% des gains moyens par mois): {{ config.averageMonthlyEarnings * 0.33 |number }} €
                            </p>
                            </div>
                        </div>
                        </div>
                        </div>
                        <div class="col-xs-12 col-lg-7 postes">
                            <h2>
                            {{expenses.length}} Postes de dépenses mensuelles
                            <button ng-click="addExpense()">+</button>
                            </h2>
                            <p class="desc">
                                Indiquez les catégories de dépenses mensuelles que vous faites pour faire évoluer la
                                simulation de budget restant dans plusieurs mois.
                            </p>
                            <table class="exepnse-table">
                                <thead>
                                <tr>
                                    <td class="padded" >
                                        Nom
                                    </td>
                                    <td class="padded" ng-if="config.showDelays">
                                        débute dans X mois
                                    </td>
                                    <td class="padded" ng-if="config.showRepeats">
                                        mois répétitions
                                    </td>
                                    <td class="padded" ng-if="config.showRepeats">
                                        prix répétitions
                                    </td>
                                    <td class="padded" >
                                        prix mensuel
                                    </td>
                                    <td class="padded" >
                                        prix annuel
                                    </td>
                                    <td class="padded" >
                                        activé
                                    </td>
                                </tr>
                                </thead>

                                <tbody>

                                </tbody>
                                <tr ng-repeat="e in expenses ">
                                    <td>
                                         <input type="text" ng-model="e.name" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
                                    </td>
                                    <td ng-if="config.showDelays">

                                        <input type="number" ng-model="e.delay" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
                                    </td>
                                    <td ng-if="config.showRepeats">
                                        <input type="number" ng-model="e.repeat" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
                                    </td>
                                    <td ng-if="config.showRepeats" class="text-right padded">
                                        {{ e.repeat * e.amount }}
                                    </td>
                                    <td>
                                        <input type="number" ng-model="e.amount" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
                                    </td>
                                    <td class="text-right padded">
                                        <strong>

                                            {{ e.amount * 12 }}
                                        </strong>
                                        €
                                    </td>
                                    <td class="padded">
                                    <input type="checkbox" ng-model="e.enabled" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
</td>
                                </tr>
                            </table>
                            <div class="well examples-depenses">
                                <strong>
                                    Exemples de postes de dépenses à ajouter:
                                </strong>
                                {% endverbatim %}
    {{ "
                                appartement
                                mutuelle
                                transport en commun
                                assurance voiture
                                assurance moto
                                trucs de loisirs divers
                                gaz
                                elec
                                internet
                                épargne
                                impots
                                cottisation URSSAF
                                resto au boulot
                                courses
                                serveur wouaibe
                                abonnement protonmail VPN
                                abonnement service audio, vidéo
                                carburant véhicule
                                donations
                                médecin
                                chat
                                chien
                                licorne"|nl2br }}

    {% verbatim %}

                            </div>
                        </div>

                    <div class="col-sm-12 col-lg-5">

                        <h2>Simulation sur {{config.lines}} mois</h2>
                        <div id="simulation-prevision"></div>
                        <!--block to insert the graph-->
                        <div class="well" ng-if="config.monthsBeforeNoMoney < config.lines">
                        Ce sera la dèche dans {{config.monthsBeforeNoMoney}} mois
</div>
                        <table>
                            <thead>
                            <tr >
                                <td class="padded" >
                                    Month in the future
                                </td>
                                <td class="padded" >
                                    date
                                </td>
                                <td class="padded" >
                                    Dépenses
                                </td>
                                <td class="padded" >
                                    Disponibilité
                                </td>
                            </trclass>
                            </thead>
                            <tbody>
                            <tr ng-repeat="line in previsionTable()" >
                                <td>
                                    <div ng-if="line.available > config.warningThershold"
                                     class=" bgsuccess padded ">
                                    {{ $index }}
                                    </div>
                                    <div ng-if="line.available > 0 && line.available < config.warningThershold"
                                     class="bgwarning padded ">
                                   {{ $index }} bientôt la dèche
                                    </div>
                                    <div ng-if="line.available < 0"
                                    class="bgdanger padded ">
                                   {{ $index }} DAMNED pu de pognon!
                                    </div>
                                </td>
                                <td>
                                    -
                                </td>
                                <td class="text-right ">

                                    {{ line.expense }}
                                </td>
                                <td class="text-right"
                                 ngClass="{'bgdanger' : line.available < 0 }">

                                    <strong>

                                            {{ line.available}}
                                        </strong>
                                        €
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    {% endverbatim %}
{% endblock %}