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

{% block title %}Hello Admin UserController!{% endblock %}

{% block body %}
    <div class="container mb-5">
        {{ include("layouts/Flash/_flash.html.twig") }}
    </div>


<div class="container-fluid dashboard-content">

    <div class="row">

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Ce Mois</h5>
                <div class="card-body">
                    <div class="metric-value d-inline-block" id="months_id">
                    </div>
                    <div class="metric-label d-inline-block float-right text-success font-weight-bold">
                        <span class="icon-circle-small icon-box-xs text-success bg-success-light"><i class="fa fa-fw fa-arrow-up"></i></span><span class="ml-1">25%</span>
                    </div>


                      <div id="months_id_loader">
                        <div class="nb-spinner"></div>
                    </div>
                </div>
                <div class="card-body bg-light p-t-40 p-b-40">
                    <div id="sparkline-revenue"></div>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="#" class="card-link">View Details</a>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Cette Semaine</h5>
                <div class="card-body">
                    <div class="metric-value d-inline-block" id="weeks_id">
                    </div>
                    <div class="metric-label d-inline-block float-right text-success font-weight-bold">
                        <span class="icon-circle-small icon-box-xs text-success bg-success-light"><i class="fa fa-fw fa-arrow-up"></i></span><span class="ml-1">25%</span>
                    </div>

                      <div id="weeks_id_loader">
                        <div class="nb-spinner"></div>
                    </div>
                </div>
                <div class="card-body bg-light p-t-40 p-b-40">
                    <div id="sparkline-revenue"></div>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="#" class="card-link">View Details</a>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Aujourd'hui</h5>
                <div class="card-body">
                    <div class="metric-value d-inline-block" id="days_id">
                    </div>
                    <div class="metric-label d-inline-block float-right text-success font-weight-bold">
                        <span class="icon-circle-small icon-box-xs text-success bg-success-light"><i class="fa fa-fw fa-arrow-up"></i></span><span class="ml-1">25%</span>
                    </div>

                       <div id="days_id_loader">
                        <div class="nb-spinner"></div>
                    </div>
                </div>
                <div class="card-body bg-light p-t-40 p-b-40">
                    <div id="sparkline-revenue"></div>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="#" class="card-link">View Details</a>
                </div>
            </div>
        </div>


    </div>
    <div class="row">
        <table class="table table-striped" id='data'>
            <caption>la liste de mes banlals</caption>
            <thead>
            <tr>
                <th>Prenom donateur</th>
                <th>Pays donateur</th>
                <th>Total Collecté</th>
                <th>somme * </th>
                <th>Pourboire * </th>
                <th>statut paiement</th>
                <th>date du don  </th>
                <th>Voir  </th>

            </tr>
            </thead>
            <tbody>
            {%  for donation in donations %}
            <tr class="table-center" id="details">


                <td>{{ donation.fullName }}</td>

                <td>{{ donation.countryCode }}</td>
                <td>{{ donation.amountTotal | format_currency(donation.currency.currencyCode, locale=app.request.locale)}}</td>
                <td>{{ donation.amount | format_currency(donation.currency.currencyCode, locale=app.request.locale)}}</td>
                <td>{{ (donation.amountTotal - donation.amount) | format_currency(donation.currency.currencyCode, locale=app.request.locale)}}</td>
                <td>{{ donation.paymentStatus}}</td>
                <td>{{ donation.createdAt | ago}}</td>
                <td>details</td>

            </tr>

            {%  endfor %}
            </tbody>
        </table>
    </div>





</div>

{% endblock %}