{% extends 'Backoffice/base.html.twig' %}

{% block activeLiSta %}class="active"{% endblock %}
{% block activeSta %}class="active"{% endblock %}
{% block body %}
<link rel="stylesheet" href="{{ asset("assets/Backoffice/js/datatables/datatables.css") }}" type="text/css"/>
<section class="vbox">
    <section class="scrollable padder">
        <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
            <li><a href=""><i class="fa fa-home"></i> Tableau de board</a></li>
            <li><a href="#">Statistiques</a></li>
            <li class="active">Liste des statistiques</li>
        </ul>
        <div class="m-b-md">
            <h3 class="m-b-none">Statistiques</h3>
        </div>
        <section class="panel panel-default">
            <header class="panel-heading">
                Liste statistiques
                <i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i>
            </header>
            <div class="table-responsive">
                <table class="table table-striped m-b-none" data-ride="datatables" id="listStatistiques">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Type</th>
                            <th>Titre(FR)</th>
                            <th>Titre(AR)</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for s in statistiques %}
                        <tr>
                            <td>{{ s.date ? s.date|date("d-m-Y") : '' }}</td>
                            <td>
                                {% if s.type == 1 %}Bar{% elseif s.type == 3 %}Line{% elseif s.type == 2 %}Pie{% else %}--{% endif %}
                            </td>
                            <td>{{ s.nomFr }}</td>
                            <td>{{ s.nomAr }}</td>
                            <td>
                                <button type="button" class="btn btn-xs btn-primary" onclick="showDetails({{ s.id }})">Détails</button>
                                <a href="/updateStatistique/{{ s.id }}" class="btn btn-xs btn-info">Modifier</a>
                                <button type="button" class="btn btn-xs btn-danger" onclick="deleteStatistique({{ s.id }})">Supprimer</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </section>
</section>

<!-- Modal for details -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel">
    <div class="modal-dialog" style="width: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Détails de la statistique</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="detailsModalBody">
                <!-- Details will be loaded here -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{{ asset("assets/Backoffice/js/datatables/jquery.dataTables.min.js") }}"></script>
<script>
$("#listStatistiques").DataTable({
    "oLanguage": {
        "sUrl": "/assets/Backoffice/js/datatables/french-datatable.json"
    },
    "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
    "sPaginationType": "full_numbers"
});

const detailsMap = {{ detailsMap|json_encode|raw }};

function showDetails(id) {
    let details = detailsMap[id];
    let html = '';
    if (details && details.length > 0) {
        html += '<table class="table table-bordered"><thead><tr><th>Nom (FR)</th><th>Nom (AR)</th><th>Valeur</th></tr></thead><tbody>';
        details.forEach(function(d) {
            html += `<tr>
                <td>${d.nomFr ? d.nomFr : ''}</td>
                <td>${d.nomAr ? d.nomAr : ''}</td>
                <td>${d.valeur}</td>
            </tr>`;
        });
        html += '</tbody></table>';
    } else {
        html = '<div class="alert alert-info">Aucun détail disponible.</div>';
    }
    $('#detailsModalBody').html(html);
    $('#detailsModal').modal('show');
}

function deleteStatistique(id){
    noty({
        text: "Etes vous sûr de vouloir supprimer la statistique ?",
        type: 'confirm',
        theme: 'relax',
        layout: 'center',
        animation: {
            open: 'animated bounceInDown',
            close: 'animated bounceOutUp',
            easing: 'swing',
            speed: 200
        },
        buttons: [
            {addClass: 'btn btn-primary', text: 'Oui', onClick: function ($noty) {
                var url = '/deleteStatistique?id=' + id;
                $(".fadeMe").css("visibility","visible").animate({opacity: 0.7}, 200);
                $.ajax({
                    type: 'get',
                    url: url,
                    success: function(data){
                        if(data=="OK"){
                            window.location.reload();
                        }
                        else{
                            errorMsg(data);
                            $('.fadeMe').animate({opacity: 0.0}, 900,setInvisible);
                        }
                    }
                });
                $noty.close();
            }},
            {addClass: 'btn btn-danger', text: 'Non', onClick: function ($noty) {
                $noty.close();
            }}
        ]
    });
}

function errorMsg(message) {
    noty({
        text: message,
        type: 'error',
        theme: 'relax',
        layout: 'topCenter',
        animation: {
            open: 'animated bounceInDown',
            close: 'animated bounceOutUp',
            easing: 'swing',
            speed: 200
        }
    });
}
</script>
{% endblock %}