{% extends 'admin.html.twig' %}

{% block title %}Nouveau | {{ parent() }}{% endblock %}

{% block body %}
    <div class="dashboard-content-wrap">
        <div class="dashboard-bread dashboard--bread dashboard-bread-2">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="breadcrumb-content">
                            <div class="section-heading">
                                <h2 class="sec__title font-size-30 text-white">Paiement</h2>
                            </div>
                        </div><!-- end breadcrumb-content -->
                    </div><!-- end col-lg-6 -->
                    <div class="col-lg-6">
                        <div class="breadcrumb-list text-right">
                            <ul class="list-items">
                                <li><a href="{{ path('app_admin') }}" class="text-white">Accueil</a></li>
                                <li><a href="{{ path('app_asso_member_subcription_payment_index') }}">Retour</a></li>
                                <li>Nouveau</li>
                            </ul>
                        </div><!-- end breadcrumb-list -->
                    </div><!-- end col-lg-6 -->
                </div><!-- end row -->
            </div>
        </div>
        <div class="dashboard-main-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-7">
                        <div class="form-box">
                            <div class="form-content">
                                {{ include('asso_member_subcription_payment/_form.html.twig') }}
                            </div>
                        </div><!-- end form-box -->
                    </div><!-- end col-lg-12 -->
                    <div class="col-lg-5">
                        <section class="card">
                            <header class="card-header">
                                <div class="card-actions">
                                    <a href="#" class="card-action card-action-toggle" data-card-toggle></a>
                                    <a href="#" class="card-action card-action-dismiss" data-card-dismiss></a>
                                </div>
                                <h2 class="card-title">Souscription</h2>
                            </header>
                            <div class="card-body">
                                <table class="table table-bordered table-striped mb-0">
                                    <tr>
                                        <th width="30%">Member</th>
                                        <td id="member"></td>
                                    </tr>
                                    <tr>
                                        <th>Montant</th>
                                        <td id="amount"></td>
                                    </tr>
                                    <tr>
                                        <th>Date début</th>
                                        <td id="startedAt"></td>
                                    </tr>
                                    <tr>
                                        <th>Date fin</th>
                                        <td id="endedAt"></td>
                                    </tr>
                                </table>
                            </div>
                        </section>
                    </div>
                </div><!-- end row -->
            </div><!-- end container-fluid -->
        </div><!-- end dashboard-main-content -->
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function (){
            $('.subscription').hide();
            $('#asso_member_subcription_payment_assoMemberSubcription').change(function (){
                getAssoMemberSubcription();
            }).trigger('change');
        })

        function getAssoMemberSubcription(){
            $('.subscription').hide();
            axios.get('{{ path('api_asso_member_subcription_get')}}', {
            params: {
                assoMemberSubcription: $('#asso_member_subcription_payment_assoMemberSubcription').val(),
            }
            }).then(function (response) {
                if(response.data.code == 200){
                    console.log(response.data);
                    $('#member').html(response.data.member);
                    $('#amount').html(response.data.amount.toLocaleString());
                    $('#startedAt').html(response.data.startedAt);
                    $('#endedAt').html(response.data.endedAt);
                    $('.subscription').show();
                }else{
                    console.log("le server a rencontre une erreure");
                    console.log(response.data);
                }
            }).catch(function (error) {
                // handle error
                console.log(error);
            })
            .finally(function () {
                // always executed
            });
        }
    </script>
{% endblock %}