{% macro badge_icon(value, icon, title) %}
    {% set badge_class = (value == 't' ? 'valid' : (value == 'f' ? 'pending' : 'error')) %}
    <span class="badge badge-{{ badge_class }}" title="{{ title }}">
        <i class="ri-{{ icon }}"></i>
    </span>
{% endmacro %}

{% macro tranche_label_html(label) %}
    <div class="tranche-label">
        <p>{{ label.tranche|date("H:i") }}</p>
        {{ _self.badge_icon(label.saisie, 'list-check-3', 'Saisie') }}
        {{ _self.badge_icon(label.envoi_aff, 'pie-chart-box-line', 'Affichage') }}
        {{ _self.badge_icon(label.envoi_web, 'global-line', 'Web') }}
    </div>
{% endmacro %}

{% set participation_dataset = [] %}
{% set participation_labels_html = [] %}
{% set participation_tooltips = [] %}

{% for data in participation_par_tranches %}
    {% set participation_dataset = participation_dataset|merge([data.votant]) %}
    {% set participation_labels_html = participation_labels_html|merge([_self.tranche_label_html(data.label)]) %}
    {% set participation_tooltips = participation_tooltips|merge([{
        votant: data.votant,
        saisie: data.label.saisie,
        envoi_aff: data.label.envoi_aff,
        envoi_web: data.label.envoi_web
    }]) %}
{% endfor %}

{# HTML template for displaying participation chart #}

<div class="section container">
    <section>
        <article id="participation">
            <div class="article-titre">
                <h3>Participation</h3>
            </div>
            <div style="min-height : 200px; position:relative;">
                <canvas id="participation-chart"></canvas>
            </div>
        </article>
    </section>
</div>

{# Script include for Chart.js #}


<script>
var participationLabelsHTML = {{ participation_labels_html|json_encode|raw }};
var participationDataset = {{ participation_dataset|json_encode|raw }};
var participationTooltips = {{ participation_tooltips|json_encode|raw }};

var customHtmlTicks = {
    id: 'customHtmlTicks',
    afterDraw: function(chart) {
        var bottom = chart.chartArea.bottom;
        var x = chart.scales.x;
        var container = chart.canvas.parentNode;
        
        // Remove existing labels (convert NodeList to Array for forEach)
        var existingLabels = container.querySelectorAll('.chart-label-html');
        for (var i = 0; i < existingLabels.length; i++) {
            existingLabels[i].remove();
        }

        // Add new labels
        for (var index = 0; index < x.ticks.length; index++) {
            var html = participationLabelsHTML[index];
            if (!html) continue;
            
            var xPos = x.getPixelForTick(index);
            var div = document.createElement('div');
            div.className = 'chart-label-html';
            div.innerHTML = html;
            div.style.position = 'absolute';
            div.style.transform = 'translate(-50%, 0)';
            div.style.left = xPos + 'px';
            div.style.top = (bottom + 5) + 'px';
            div.style.fontSize = '12px';
            container.appendChild(div);
        }
    }
};

new Chart(document.getElementById("participation-chart"), {
    type: 'bar',
    data: {
        labels: participationLabelsHTML.map(function() { return ''; }), 
        datasets: [{
            label: 'Votants',
            data: participationDataset,
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        var index = context.dataIndex;
                        var info = participationTooltips[index];
                        var icons = {
                            t: '✅',
                            f: '⏳',
                            other: '❌'
                        };
                        var lines = [
                            'Votants: ' + info.votant,
                            ' ',
                            'Saisie: ' + (icons[info.saisie] || icons.other),
                            'Affichage: ' + (icons[info.envoi_aff] || icons.other),
                            'Web: ' + (icons[info.envoi_web] || icons.other)
                        ];
                        return lines;
                    }
                }
            }
        },
        scales: {
            x: {
                grid: {display: false},
                ticks: {display: false}
            },
            y: {
                beginAtZero: true,
                grid: {
                    display: true,
                    color: "rgba(27,93,196,0.2)"
                }
            }
        }
    },
    plugins: [customHtmlTicks]
});
</script>