{% extends 'base.html.twig' %}
{% trans_default_domain 'FOSUserBundle' %}
{% block body %}
<div id="wrapper">
    <div class="previsionnel"
         ng-app="caisse"
         ng-controller="previsionnelCtrl as pCtrl"
    >
        <h1>Prévisionnel</h1>
        <div class="row">
            <div class="col-6 col-xs-12 col-sm-6">
                <div class="config">
                    <h2>
                        Configuration
                    </h2>
                    Euros disponibles au départ:
                    <input type="number" ng-model="disponibility">
                    Dépenses mensuelles: {{ sumMonthlyExpenses }}
                </div>
                <div class="postes">
                    <h2>Postes de dépenses</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>
                                Nom
                            </td>
                            <td>
                                débute dans X mois
                            </td>
                            <td>
                                mois répétitions
                            </td>
                            <td>
                                prix répétitions
                            </td>
                            <td>
                                prix mensuel
                            </td>
                            <td>
                                prix annuel
                            </td>
                        </tr>
                        </thead>

                        <tbody>

                        </tbody>
                        <tr ng-repeat="e in pCtrl.expenses">
                            <td>
                                {{ e.name }}
                            </td>
                            <td>
                                {{ e.delay }}débute dans X mois
                            </td>
                            <td>
                                {{ e.repeat }}
                            </td>
                            <td>
                                {{ e.repeat * e.amount }}
                            </td>
                            <td>
                                {{ e.amount }}
                            </td>
                            <td>
                                {{ e.amount * 12 }}
                            </td>
                        </tr>
                    </table>
                    <div class="well">
                        <strong>
                        Exemples:
                        </strong>
                        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
                    </div>
                </div>
            </div>
            <div class="col-6 col-xs-12 col-sm-6">

                <h2>Simulation sur 5 ans (60 mois)</h2>
                <table>
                    <thead>
                    <tr>
                        <td>
                            Month in the future
                        </td>
                        <td>
                            date
                        </td>
                        <td>
                            Dépenses
                        </td>
                        <td>
                            Disponibilité
                        </td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="line in previsionTable">
                        <td>
                            {{ $index }}
                        </td>
                        <td>
                            -
                        </td>
                        <td>

                            {{ line.expense }}
                        </td>
                        <td ng-class="{ 'bg-warning' : line.available < 0}">

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