{% extends '@InstallBois/index.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('install-bois/css/renewment.css') ~ "?rnd=" ~ random() }}">
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Espace Client | Mon abonnement
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    {% if is_granted('ROLE_REFERENT_TECHNICIEN') or is_granted('ROLE_DEMO')%}
        <div class="container-fluid" style="padding-bottom: 0">
            <div class="row rubrique">
                <div class="rubrique_titre">
                    <span>Agir sur mon abonnement</span>
                </div>
                {% if is_granted('ROLE_DEMO') %}
                    <p style="margin-left: 2rem">Ici, vous pourrez agir sur votre abonnement.</p>
                {% endif %}
                <div class="containerBtnFlex">
                    <button id="btnRenewment" type="button" class="boutonAction {{ paymentFrequency === "m" or alreadyRenewed ? 'btnDisabled' }}"
                        {% if paymentFrequency === "m" %}
                            onclick='createToast("danger", "Votre abonnement sera automatiquement renouvelé à la fin de votre licence");'
                        {% endif %}
                        {% if alreadyRenewed %}
                            onclick='createToast("danger", "Contrat déjà renouvelé pour la prochaine année");'
                        {% endif %}
                    >
                        Renouveler ma licence
                    </button>
                    {# uncomment when I20A-1163 is finished #}
{#                    <a href="#">#}
{#                        <button type="button" class="boutonAction">#}
{#                            Modifier ma licence en cours#}
{#                        </button>#}
{#                    </a>#}
                    {% if not is_granted('ROLE_DEMO') %}
                    <a href="{{ path('subscription_cancellation') }}">
                        <button type="button" class="boutonAction">
                            Résilier ma licence à l'échéance
                        </button>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
    <div class="container-fluid">

    <div class="doubleContainer-fluid">
        <div class="container-fluid" style="width:40%">
            <div class="row rubrique" style="margin-top:0 ">
                <div class="rubrique_titre">
                    <span>Ma licence en cours</span>
                </div>
                <div class="containerInfosContract">
                    <div class="line">
                        <span>Ma formule</span>
                        <span>{{ params['licence'] }}</span>
                    </div>
                    <div class="double">
                        <div class="line">
                            <span>Fréquence de paiement</span>
                            <span>{{ params['frequency'] }}</span>
                        </div>

                        <div class="line">
                            <span>Nombre de dossiers inclus</span>
                            <span>{{ params['nbrProjects'] }}</span>
                        </div>
                    </div>
                    <div class="double">
                        <div class="line">
                            <span>Date de début</span>
                            <span>{{ params['dateStart'] }}</span>
                        </div>

                        <div class="line">
                            <span>Nombre de dossiers réalisés durant la licence actuelle</span>
                            <span>{{ params['nbrProjectsDone'] }}</span>
                        </div>
                    </div>
                    <div class="double">
                        <div class="line">
                            {% if params['frequency']!=="Mensuel" %}
                                <span>Date de fin</span>
                                <span>{{ params['dateEnd'] }}</span>
                            {% endif %}
                        </div>
                        <div class="line">
                            <span>Nombre d'utilisateur(s)</span>
                            <span>{{ params['nbrUser'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="width:55%">
            <div class="row rubrique">
                <div class="rubrique_titre">
                    <span>Services associés</span>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-12 containerServiceAssocies">
                    <table>
                        <thead>
                        <tr>
                            <th>Les services</th>
                            <th>Etat</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for key,service in services %}
                            {% set valid = (key in availableServices) %}
                            <tr>
                                <td>{{ service }}</td>
                                <td class="background-color: {{ valid? "tab_celluleTrue":"tab_celluleFalse" }}">
                                    {{ valid ? 'Inclus' : 'Non inclus' }}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {# uncomment when I20A-1163 is finished #}
{#                    <span>Cliquer sur « Modifier ma licence en cours » pour bénéficier des services non inclus</span>#}
                </div>

            </div>
        </div>
    </div>
    <script type="application/javascript">
        $(document).ready(function () {
            if (isDemo) {
                $('#btnRenewment').text('Commander ma licence')
            }
            if (!$('#btnRenewment').attr('class').includes('btnDisabled')) {
                $('#btnRenewment').click(function () {
                    if (isDemo) {
                        window.open('https://install-bois.pro/#commander', '_blank');
                    } else {
                        window.location.href = '{{ path("subscription_renewment") }}';
                    }
                });
            }
        });
    </script>
{% endblock %}