{% extends 'baseAdmin.html.twig' %}

{% block title %}{% endblock %}

{% block body %}

<div class="container-fluid">
  
  <section class="section">
    <div class="section-header">
      <h1>Dashboard</h1>
    </div>
    <div class="row">
      <div class="col">
        <div class="card bg-primary text-white mb-3 text-center">
          <div class="card-body">
            <div class="row">
              <div class="col-4">
                <i class="fa fa-users fa-3x"></i>
              </div>
              <div class="col-8">
                <h4 class="card-title">{{ stats.users }}
                  utilisateurs</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-white bg-dark mb-3 text-center">
          <div class="card-body">
            <div class="row">
              <div class="col-4">
                <i class="fa fa-hotel fa-3x"></i>
              </div>
              <div class="col-8">
                <h4 class="card-title">{{ stats.annonces }}
                  locations</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-white bg-warning mb-3 text-center">
          <div class="card-body">
            <div class="row">
              <div class="col-4">
                <i class="fa fa-folder fa-3x"></i>
              </div>
              <div class="col-8">
                <h4 class="card-title">{{ stats.reservations }}
                  résas</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-white bg-success mb-3 text-center">
          <div class="card-body">
            <div class="row">
              <div class="col-4">
                <i class="fa fa-comments fa-3x"></i>
              </div>
              <div class="col-8">
                <h4 class="card-title">{{ stats.avis }}
                  avis</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="row mb-3">
        <div class="col-md-4 style ="height:385px"">
            <h2>Loactions performance</h2>
            <canvas class="mt-4" id="chartReservations" width="200" height="150"></canvas>
        </div>
        <div class="col-md-4" style ="height:385px">
          <h2>Statistiques par type</h2>
            <canvas class="mt-4" id="categoryChart" width="200" ></canvas>
        </div>
        <div class="col-md-4" style ="height:385px">
          <div class="container">
              <h2>Statistiques par region</h2>

              <table class="table mt-4">
                  <thead>
                      <tr>
                          <th>Région</th>
                          <th>Wilaya</th>
                          <th>Nombre d'annonces</th>
                          <th>Pourcentage</th>
                      </tr>
                  </thead>
                  <tbody>
                      {% for stat in statistics %}
                          <tr>
                              <td>{{ stat.regionName }}</td>
                              <td>{{ stat.wilayaName }}</td>
                              <td>{{ stat.annonceCount }}</td>
                              <td>{{ (stat.annonceCount / totalAnnouncements * 100)|number_format(2, '.', ',') }}%</td>
                          </tr>
                      {% endfor %}
                  </tbody>
              </table>
          </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-md-4" style ="height:385px">
            <canvas id="monthlyVisitorsChart" width="200" height="150"></canvas>
        </div>
    </div>        
    <hr>
    <div class="row">
      <div class="col">
        <div class="alert alert-success">
          <h2 class="alert-heading my-3">
            <i class="fa fa-arrow-up"></i>
            Locations premier choix</h2>

          <table class="table table-table-striped">
            <thead>
              <tr>
                <th>Location</th>
                <th>Popriétaire</th>
                <th>Moyenne</th>
              </tr>
            </thead>
            <tbody>
              {% for annonce in bestAnnonces %}
                <tr>
                  <td>{{annonce.titre}}</td>
                  <td>
                  {% if annonce.image is not null %}
                    <img src="{{asset('uploads/imagesUser/'~annonce.image)}}" alt="avatar de : {{annonce.nom}} {{annonce.prenom}}" class="mini-avatar">
                  {% else %}
                    <img class="mini-avatar" width="50" src="{{asset('assets/images/userMessneger.jpg')}}" alt="avatar de : {{annonce.nom}} {{annonce.prenom}}" >
                  {% endif %}
                    {{annonce.nom}}
                    {{annonce.prenom}}
                  </td>
                  <td class="text-center">
                    <span class="badge bg-dark">
                      {{annonce.note | number_format(1, ",", " ")}}
                    </span>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="col">
        <div class="alert alert-danger">
          <h2 class="alert-heading my-3">
            <i class="fa fa-arrow-down"></i>
            Location second choix</h2>

          <table class="table table-stripe">
            <thead>
              <tr>
                <th>Location</th>
                <th>Popriétaire</th>
                <th>Moyenne</th>
              </tr>
            </thead>
            <tbody>
              {% for annonce in worstAnnonces %}
                <tr>
                  <td>{{annonce.titre}}</td>
                  <td>
                    {% if annonce.image is not null %}
                    <img src="{{asset('uploads/imagesUser/'~annonce.image)}}" alt="avatar de : {{annonce.nom}} {{annonce.prenom}}" class="mini-avatar">
                  {% else %}
                    <img width="50" src="{{asset('assets/images/userMessneger.jpg')}}" class="mini-avatar" alt="avatar de : {{annonce.nom}} {{annonce.prenom}}" class="mini-avatar">
                  {% endif %}
                    {{annonce.nom}}
                    {{annonce.prenom}}
                  </td>
                  <td class="text-center">
                    <span class="badge badge-dark">
                      {{annonce.note | number_format(1, ",", " ")}}
                    </span>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  </section>

{% endblock %}
{% block javascripts %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        var ctx = document.getElementById('chartReservations').getContext('2d');
        var chartData = {{ chartData|raw }};
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: chartData,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        document.addEventListener('DOMContentLoaded', function () {
            var monthlyVisitorsData = {{ monthlyVisitorsData | json_encode() | raw }};

            var labels = monthlyVisitorsData.map(function (data) {
                return data.month;
            });

            var data = monthlyVisitorsData.map(function (data) {
                return data.visitorCount;
            });

            var ctx = document.getElementById('monthlyVisitorsChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Monthly Visitors',
                        data: data,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1,
                        fill: false,
                    }],
                },
                options: {
                    scales: {
                        x: {
                            type: 'linear',
                            position: 'bottom',
                        },
                        y: {
                            beginAtZero: true,
                        },
                    },
                },
            });
        });
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
    // Récupérez les données passées depuis Symfony
    var categoriesData = {{ categoriesData | json_encode() | raw }};

    // Préparez les données pour Chart.js
    var labels = categoriesData.map(function (category) {
        return category.categoryName;
    });

    var data = categoriesData.map(function (category) {
        return category.announcementCount;
    });

    // Calculez le pourcentage pour chaque catégorie
    var total = data.reduce(function (acc, count) {
        return acc + count;
    }, 0);

    var percentages = data.map(function (count) {
        return ((count / total) * 100).toFixed(2);
    });

    // Créez le graphique en camembert avec pourcentage
    var ctx = document.getElementById('categoryChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: percentages,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 205, 86, 0.8)',
                    // Ajoutez plus de couleurs si nécessaire
                ],
            }],
        },
        options: {
            legend: {
                position: 'bottom',
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        var dataset = data.datasets[tooltipItem.datasetIndex];
                        var percentage = dataset.data[tooltipItem.index];
                        return percentage +"%";
                    },
                },
            },
        },
    });
});
</script>
{% endblock %}