{% 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">
        <!-- ============================================================== -->

        <!-- ============================================================== -->

        <!-- recent orders  -->
        <!-- ============================================================== -->
        <div class="col-xl-12 col-lg-12 col-md-6 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Cagnottes en cours</h5>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <div id="banlal">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-9 col-lg-12 col-md-6 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Liste Banlal en cours Top <?= count($banlals); ?></h5>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table">
                            <thead class="bg-light">
                            <tr class="border-0">
                                <th class="border-0">#</th>
                                <th class="border-0">Image</th>
                                <th class="border-0">Nom</th>
                                <th class="border-0">Type</th>
                                <th class="border-0">Sommes</th>
                                <th class="border-0">Date Fin </th>
                                <th class="border-0">Details </th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for banlal in banlals %}
                            <tr>

                                <td>{{ banlal.id }}</td>
                                <td>
                                <div class="m-r-10">

                                    {%  if  vich_uploader_asset(banlal, 'logoFile')   %}
                                             <img src="{{ vich_uploader_asset(banlal, 'logoFile') | imagine_filter('thumb') }}" alt="{{ banlal.name }}" class="rounded" width="45" >
                                        {%  else %}
                                            <img src="{{ vich_uploader_asset(banlal.category, 'iconFile') | imagine_filter('thumb') }}" alt="{{ banlal.name }}" class="rounded" width="45">
                                     {%  endif %}

                                    </div>
                                 </td>
                                <td>{{ banlal.name}}</td>
                                <td>{{ banlal.type.name}}</td>

                                  {% for currency, amount  in banlal.allAmountDonateForAllCurrencies %}

                                <td>{{ amount | format_currency(currency, locale=app.request.locale) }}</td>
                                {%  endfor %}


                                <td>{{ banlal.endAt | ago  }}</td>

                                 <td colspan="9"><a href="{{ path('admin.banlal.show', {'id': banlal.id }) }}" class="btn btn-outline-primary">details </a></td>

                            </tr>
                            {% endfor %}
                            <tr>
                                <td colspan="9"><a href="" class="btn btn-outline-danger float-right">Voir Plus </a></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- end recent orders  -->


        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- liste des categories -->
        <!-- ============================================================== -->
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Listes des Catégories</h5>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table no-wrap p-table">
                            <thead class="bg-light">
                            <tr class="border-0">
                                <th class="border-0">Catégorie</th>
                                <th class="border-0">Nbre Banlal</th>
                            </tr>
                            </thead>
                            <tbody>
                           {% if categories is defined %}
                       {% for category in categories %}
                            <tr>
                                <td>{{category.name}}</td>
                                <td>{{category.banlals | length }}</td>
                            </tr>
                        {%  endfor %}
                            {%  endif %}
                            <tr>
                                <td colspan="3">
                                    <a href="#" class="btn btn-outline-light float-right">Details</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- end customer acquistion  -->
        <!-- ============================================================== -->
    </div>
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Les derniers Banlals créés</h5>
                </div>
                <div class="card-body">
                    <div class="ct-chart-product ct-golden-section" id="banlals-graph"></div>
                </div>
            </div>
        </div>


    </div>





{% endblock %}


{% block javascripts %}



<script>

    Morris.Bar({
    element: 'banlal',
    data: [

   {% for banlal in banlals %}


    {% if banlal.nbreParticipant %}

    { Banlal_id:"{{ banlal.name }}", GNF:"{{ banlal.allAmountDonateForAllCurrencies.GNF is defined ? banlal.allAmountDonateForAllCurrencies.GNF : '0' }}",EUR:"{{ banlal.allAmountDonateForAllCurrencies.EUR is defined ? banlal.allAmountDonateForAllCurrencies.EUR : '0' }}"},

    {% else %}

    { Banlal_id:"{{ banlal.name }}", GNF: 0,EUR:0},

    {%  endif %}
    {% endfor %}

    ],
    xkey: 'Banlal_id',
    ykeys: ['EUR','GNF'],
    xLabelAngle:30,
    resize:false,
    parseTime:false,
    labels:['Total EUR', 'Total GNF'],
    fillOpacity: 0.6,
     //     hideHover:true,
     //    hoverCallback: function(index, options, content) {
     //    return (content + " "+options.data[index].labels);
     // },
     //
     //       fillOpacity: 0.6,


    });

    Morris.Line({
    element: 'banlals-graph',
    data: [

        {% for banlal in banlals %}


    {% if banlal.donations | length >0 %}

    { nombre:"{{ banlal.nbreParticipant }}", name:"{{banlal.name}}", GNF:"{{ banlal.allAmountDonateForAllCurrencies.GNF is defined ? banlal.allAmountDonateForAllCurrencies.GNF : '0' }}", EUR:"{{ banlal.allAmountDonateForAllCurrencies.EUR is defined ? banlal.allAmountDonateForAllCurrencies.EUR : '0' }}"},

    {% else %}

    { nombre:0,name:"{{ banlal.name }}", GNF: 0,EUR:0},


    {%  endif %}
    {% endfor %}
    ],
    xkey: ['name'],
    ykeys: ['nombre','EUR','GNF'],
    xLabelAngle:30,
    resize:true,
    parseTime:false,
    labels:['nombre','Total EUR', 'Total GNF'],
    fillOpacity: 0.6,
    });


  </script>

  <script>

    $(document).ready(function () {
        $.ajax({
            type:'GET',
            dataType: "json",
            url: "{{ url('admin.api.donation.day') }}",

            beforeSend: function(xhr)
            {
                $("#days_id_loader").show();

            },

            success: function(data)
            {

                    $("#days_id_loader").hide();
                $('#days_id').append(data.content);
            },

            error: function(e)
            {

                alert("impossible de récuperer les infos")
            }
        });
        $.ajax({
            type:'GET',
            dataType: "json",
            url: "{{ url('admin.api.donation.week') }}",

            beforeSend: function(xhr)
            {
                $("#weeks_id_loader").show();

            },

            success: function(data)
            {


                $("#weeks_id_loader").hide();
               $('#weeks_id').append(data.content);

            },

            error: function(e)
            {

                alert("impossible de récuperer les infos")
            }
        });
        $.ajax({
            type:'GET',
            dataType: "json",
            url: "{{ url('admin.api.donation.month') }}",

            beforeSend: function(xhr)
            {
                $("#months_id_loader").show();

            },

            success: function(data)
            {

                 $("#months_id_loader").hide();
                $('#months_id').append(data.content);

            },

            error: function(e)
            {

                alert("impossible de récuperer les infos")
            }
        });

    });
</script>

{% endblock %}