{% set title = 'Simulateur de crédit'|os_trans("Credit simulator") %}
{% set hasReCaptcha = true %}
{% extends 'Default/base-form.html.twig' %}
{% import 'Admin/macros.html.twig' as adminMacros %}

{% block content %}
<div id="" class='bg-gray {{desktop("gpadding")}} {{mobile("")}}'>
    <div class="fill hoverflow gpadding {{desktop('flex col vt-60-in')}} {{mobile('vt-30-in')}}">

        {{include('Default/notice.html.twig')}}

        <div class="bg-white shadow hoverflow transition nsiaform las border border-4x border-warning w100">
            {% if item.getToken() and form.vars.valid %}
            <div class="hz-40-in vt-40-in flex row center">
                <span class="os-click success medium" data-target="#simulator">{{"Modifier le simulateur"|os_trans("Edit the simulator")}} <i class="fa fa-edit left-10"></i></span>
            </div>
            {% endif %}
            <div id="simulator" class="anim-display anim-from-bottom transition-1s {{item.getToken() and form.vars.valid ? '' : 'opened'}}">

                {{form_start(form,{attr:{id:form.vars.id}})}}
                <div class=" {{desktop('vt-40-in hz-60-in flex row space wrap')}}">
                    {% for o in form.children %}
                    <div class="half-30">
                        {{form_row(o)}}
                    </div>
                    {% endfor %}
                </div>

                <div class='flex center middle col {{desktop("vt-40-in hz-40-in")}} {{mobile("center")}}'>
                    <div class="g-recaptcha" data-sitekey="{{os_param('recaptcha')['key']}}"></div>
                    <button type='submit' data-target='#{{form.vars.id}}' class="anim-btn relative flex col center bg-success noborder radius-5 {{desktop('top-15')}}">
                        <span class="upper semibold h6 vt-10-in hz-30-in white">{{"Simuler le crédit"|os_trans("Simulate the credit")}}</span>
                    </button>
                </div>

                {{form_end(form)}}

            </div>

            {% if item.id and form.vars.valid %}
            <div class="w100 hz-40-in transition">

                {% set tdClass = "hz-20-in vt-20-in vt-5" %}
                {% set thClass = tdClass~" bold" %}

                <h3 class="upper h4 text-center bottom-20">{{"Tableau d'amortissement du crédit"|os_trans("Credit amortization table")}}</h3>

                <table class="record w100 text-right" border="0" style="border-spacing: 0">
                    <tr class="text-right white upper bold bg-warning">
                        <th class="{{thClass}}">Mois</th>
                        <th class="{{thClass}}">Capital Initial</th>
                        <th class="{{thClass}}">Amortissement</th>
                        <th class="{{thClass}}">Intérêts</th>
                        <th class="{{thClass}}">TAF</th>
                        <th class="{{thClass}}">Mensualité</th>
                    </tr>

                {% set capital =  item.amount %}
                {% set totalAmort = 0 %}
                {% set totalTaf = 0 %}
                {% set totalInteret = 0 %}

                {% for o in (1..item.months) %}
                    {% set interet = (capital * item.rate / 100 / 12) %}
                    {% set taf = (interet * item.TAF) %}
                    {% set amort = item.monthlyPayment - interet - taf %}

                    <tr class="shadow-alt-22 {{loop.index is odd ? 'bg-gray'}}">
                        <td class="{{tdClass}}">
                            {{loop.index}}
                        </td>
                        <td class="{{tdClass}} bold">
                            {{capital|abs|price}}
                        </td>
                        <td class="{{tdClass}}">
                            {{amort|abs|price}}
                        </td>
                        <td class="{{tdClass}}">
                            {{interet|abs|price}}
                        </td>
                        <td class="{{tdClass}}">
                            {{taf|abs|price}}
                        </td>
                        <td class="{{tdClass}} success semibold">
                            {{item.monthlyPayment|price}}
                        </td>
                    </tr>

                    {% set totalAmort = totalAmort + amort %}
                    {% set totalTaf = totalTaf + taf %}
                    {% set totalInteret = totalInteret + interet %}
                    {% set capital = (capital - amort)|round(0,"ceil") %}

                {% endfor %}

                    <tr class="text-right white upper bold bg-success">
                        <th class="{{thClass}}">Total</th>
                        <th class="{{thClass}}">
                            <span class="p-alt gray-alt regular">Capital initial</span>
                            <br>{{item.amount|price}}
                        </th>
                        <th class="{{thClass}}">
                            <span class="p-alt gray-alt regular">Amortissement</span>
                            <br>{{totalAmort|price}}
                        </th>
                        <th class="{{thClass}}">
                            <span class="p-alt gray-alt regular">Intérêts</span>
                            <br>{{totalInteret|price}}
                        </th>
                        <th class="{{thClass}}">
                            <span class="p-alt gray-alt regular">TAF</span>
                            <br>{{totalTaf|price}}
                        </th>
                        <th class="{{thClass}}">
                            <span class="p-alt gray-alt regular">Total</span>
                            <br>{{(totalAmort + totalTaf + totalInteret)|price}}
                        </th>
                    </tr>
                </table>

                <p class="top-20 vt-20-in border-left border-5x border-error border-solid {{desktop('hz-40-in hz-20')}}">
                    Cette simulation est à titre indicatif, sans aucun engagement quant à son caractère exhaustif, précis et actuel et n'entraine aucun engagement ou accord de la part de la NSIA Banque Bénin.
                </p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}