{% extends '@SonataAdmin/CRUD/base_list.html.twig' %}

{% block list_table %}
    <div class="col-xs-12 col-md-12">
        {# Button to load stats - placed in action bar #}
        <div class="row" style="margin-bottom: 15px;">
            <div class="col-xs-12">
                <button type="button" class="btn btn-sm btn-primary" id="load-stats-btn">
                    <i class="fa fa-bar-chart"></i> Statistiques
                </button>
            </div>
        </div>

        {# Statistics panel - hidden by default, data-stats-url for JS #}
        <div class="box box-primary" id="email-stats-panel" data-stats-url="{{ admin.generateUrl('stats') }}" style="display: none; margin-bottom: 20px;">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-bar-chart"></i> Statistiques des emails</h3>
                <div class="box-tools pull-right">
                    <select id="stats-period" class="form-control input-sm" style="width: auto; display: inline-block;">
                        <option value="7">7 jours</option>
                        <option value="30" selected>30 jours</option>
                        <option value="60">60 jours</option>
                    </select>
                    <button type="button" class="btn btn-box-tool" id="close-stats" title="Fermer">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="box-body" style="padding: 15px;">
                <div id="stats-loading" class="text-center" style="padding: 30px;">
                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                    <p style="margin-top: 10px;">Chargement...</p>
                </div>
                <div id="stats-content" style="display: none;">
                    {# Totals row #}
                    <div class="row">
                        <div class="col-md-4 col-sm-4">
                            <div class="small-box bg-green">
                                <div class="inner">
                                    <h4 id="total-sent">0</h4>
                                    <p>Envoyés</p>
                                </div>
                                <div class="icon"><i class="fa fa-check"></i></div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4">
                            <div class="small-box bg-red">
                                <div class="inner">
                                    <h4 id="total-failed">0</h4>
                                    <p>Échoués</p>
                                </div>
                                <div class="icon"><i class="fa fa-times"></i></div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4">
                            <div class="small-box bg-aqua">
                                <div class="inner">
                                    <h4 id="total-emails">0</h4>
                                    <p>Total</p>
                                </div>
                                <div class="icon"><i class="fa fa-envelope"></i></div>
                            </div>
                        </div>
                    </div>
                    {# Charts row with fixed height containers #}
                    <div class="row">
                        <div class="col-md-8">
                            <h5><i class="fa fa-line-chart"></i> Évolution journalière</h5>
                            <div style="height: 200px; width: 100%; max-width: 100%;">
                                <canvas id="daily-chart" style="max-height: 200px;"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h5><i class="fa fa-pie-chart"></i> Par type</h5>
                            <div style="height: 200px; width: 100%; max-width: 100%;">
                                <canvas id="type-chart" style="max-height: 200px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('admin-email-stats') }}
{% endblock %}