<?php $__env->startSection('title', 'Tableau de bord'); ?>

<?php $__env->startSection('page-title', 'Tableau de bord'); ?>

<?php $__env->startSection('content'); ?>

<div class="page-content container-fluid">
  
    <div class="card-header bg-info text-white text-center py-3 container-fluid">
        <h4 class="card-title">Tableau de bord</h4>
    </div>

    <div class="card">
        <div class="card-body">
            <h4 class="card-title text-center">Statistiques des préoccupations</h4>
            <canvas id="preoccupationsChart" style="max-height: 400px;"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <canvas id="resolvedChart" height="100"></canvas>
            </div>
        </div>
    </div>


</div>

<div class="card shadow-lg">
    <div class="card-header bg-primary text-white text-center">
        <h3 class="mb-0"><i class="fas fa-chart-line"></i> Évaluation des Gestionnaires</h3>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-bordered align-middle" id="zero_config">
                <thead class="table-dark text-center">
                    <tr>
                        <th>👤 Username</th>
                        <th>📊 Total Préoccupations</th>
                        <th>✅ Résolues</th>
                        <th>⏳ Temps Moyen</th>
                        <th>⭐ Satisfaction Moyenne</th>
                        <th>📈 Taux de Résolution</th>
                        <th>⏱ Respect Délais</th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    <?php $__currentLoopData = $evaluations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $evaluation): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td class="fw-bold"><?php echo e($evaluation['username']); ?></td>
                        <td><?php echo e($evaluation['totalPreoccupations']); ?></td>
                        <td><?php echo e($evaluation['resolved']); ?></td>
                        <td>
                            <?php if($evaluation['averageResolutionTime'] !== "Aucune préoccupation résolue"): ?>
                            <span class="badge bg-info"><i class="fas fa-clock"></i> <?php echo e($evaluation['averageResolutionTime']); ?></span>
                            <?php else: ?>
                            <span class="badge bg-secondary">Non disponible</span>
                            <?php endif; ?>
                        </td>

                        <td>
                            <span class="text-warning">
                                <?php
                                $starRating = $evaluation['starRating'] ?? 0;
                                ?>

                                <?php for($i = 1; $i <= 5; $i++): ?>
                                    <?php if($i <=$starRating): ?>
                                    <i class="fas fa-star text-warning"></i>
                                    <?php else: ?>
                                    <i class="far fa-star text-secondary"></i>
                                    <?php endif; ?>
                                    <?php endfor; ?>
                            </span>
                            <?php if($evaluation['averageSatisfaction'] !== null): ?>
                            (<?php echo e(round($evaluation['averageSatisfaction'], 1)); ?>)
                            <?php else: ?>
                            <span class="badge bg-secondary">Pas encore noté</span>
                            <?php endif; ?>
                        </td>


                        <td>
                            <span class="badge <?php echo e($evaluation['resolutionRate'] >= 80 ? 'bg-success' : ($evaluation['resolutionRate'] >= 50 ? 'bg-warning' : 'bg-danger')); ?>">
                                <?php echo e($evaluation['resolutionRate']); ?>%
                            </span>
                        </td>
                        <td>
                            <span class="badge <?php echo e($evaluation['onTimeResolutionRate'] >= 80 ? 'bg-success' : ($evaluation['onTimeResolutionRate'] >= 50 ? 'bg-warning' : 'bg-danger')); ?>">
                                <?php echo e($evaluation['onTimeResolutionRate']); ?>%
                            </span>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>
    </div>
</div>



<!-- Diagramme circulaire -->

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('preoccupationsChart')?.getContext('2d');

        if (!ctx) {
            console.error("L'élément canvas avec l'ID 'preoccupationsChart' est introuvable.");
            return;
        }

        const data = {
            labels: [
                'Total des préoccupations',
                'Préoccupations cette semaine',
                'Préoccupations ce mois',
                'Préoccupations résolues',
                'Préoccupations non résolues'
            ],
            datasets: [{
                label: 'Statistiques des préoccupations',
                data: [
                    <?php echo e($totalPreoccupations); ?>,
                    <?php echo e($totalPreoccupationsThisWeek); ?>,
                    <?php echo e($totalPreoccupationsThisMonth); ?>,
                    <?php echo e($totalResolvedPreoccupations); ?>,
                    <?php echo e($totalUnresolvedPreoccupations); ?>

                ],
                backgroundColor: [
                    '#4CAF50', // Vert pour total
                    '#2196F3', // Bleu pour cette semaine
                    '#FFC107', // Orange pour ce mois
                    '#FF5722', // Rouge pour résolu
                    '#9C27B0' // Violet pour non résolu
                ],
                hoverOffset: 4
            }]
        };

        const config = {
            type: 'doughnut', // Diagramme circulaire
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top', // Affiche la légende en haut
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                return `${label}: ${value}`;
                            }
                        }
                    }
                }
            }
        };

        new Chart(ctx, config);
    });
</script>


<!-- Diagramme barre -->

<script>
    const ctx = document.getElementById('resolvedChart').getContext('2d');

    // Données résolues et non résolues
    const resolvedMonthlyData = <?php echo json_encode($resolvedMonthly, 15, 512) ?>;
    const unresolvedMonthlyData = <?php echo json_encode($unresolvedMonthly, 15, 512) ?>;

    const resolvedChart = new Chart(ctx, {
        type: 'bar', // Diagramme en barres groupées
        data: {
            labels: [
                'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
                'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
            ],
            datasets: [{
                    label: 'Préoccupations Résolues',
                    data: resolvedMonthlyData,
                    backgroundColor: 'rgba(75, 192, 192, 0.8)', // Couleur pour résolues
                    borderWidth: 1,
                },
                {
                    label: 'Préoccupations Non Résolues',
                    data: unresolvedMonthlyData,
                    backgroundColor: 'rgba(255, 99, 132, 0.8)', // Couleur pour non résolues
                    borderWidth: 1,
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Préoccupations Résolues et Non Résolues par Mois',
                    font: {
                        size: 22,
                        weight: 'bold',
                        family: 'Arial, sans-serif'
                    },
                    padding: {
                        top: 10,
                        bottom: 20
                    }
                },
                tooltip: {
                    enabled: true,
                    callbacks: {
                        label: function(context) {
                            return `${context.dataset.label}: ${context.raw}`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Nombre de préoccupations',
                        font: {
                            size: 16,
                            weight: 'bold'
                        },
                        color: '#333'
                    },
                    ticks: {
                        font: {
                            size: 14
                        },
                        stepSize: 1 // Échelle plus lisible
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)', // Grille discrète
                        lineWidth: 1
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Mois',
                        font: {
                            size: 16,
                            weight: 'bold'
                        },
                        color: '#333'
                    },
                    ticks: {
                        font: {
                            size: 14
                        },
                    },
                    grid: {
                        display: false, // Pas de grille sur l'axe des X
                    }
                }
            }
        }
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.template', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/africawebstudent/public_html/aws/aws_concerns/resources/views/dashboard.blade.php ENDPATH**/ ?>