<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>Rapports</h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
      <li class="active">Rapports</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="row">
      <div class="col-md-12 col-xs-12">
        <form class="form-inline" action="<?php echo base_url('reports/'); ?>" method="POST">
          <div class="form-group">
            <label for="select_year">Année</label>
            <select class="form-control" name="select_year" id="select_year">
              <?php foreach ($report_years as $value): ?>
                <option value="<?php  echo $value; ?>" <?php echo ($value == $selected_year) ? 'selected' : ''; ?>>
                  <?php echo $value; ?>
                </option>
              <?php endforeach; ?>
            </select>
          </div>
          <button type="submit" class="btn btn-default">Envoyer</button>
          <a href="detail/stock" class="btn btn-sm btn-success">Détails</a>
        </form>
      </div>

      <br><br>

      <div class="col-md-12 col-xs-12">
        <?php if (session()->getFlashdata('success')): ?>
          <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <?php echo session()->getFlashdata('success'); ?>
          </div>
        <?php elseif (session()->getFlashdata('error')): ?>
          <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <?php echo session()->getFlashdata('error'); ?>
          </div>
        <?php endif; ?>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="box">
              <div class="box-header">
                <h3 class="box-title">Ventes totales</h3>
              </div>
              <div class="box-body">
                <canvas id="barChart" style="height:250px"></canvas>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="box">
              <div class="box-header">
                <h3 class="box-title">Modes de Paiement </h3>
              </div>
              <div class="box-body">
                <canvas id="paymentChart" style="height:250px"></canvas>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="box">
              <div class="box-header">
                <h3 class="box-title">Produit vendus Aujourd'hui / Stock </h3>
              </div>
              <div class="box-body">
                <canvas id="productChart" style="height:250px"></canvas>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="box">
              <div class="box-header">
                <h3 class="box-title">Point de ventes </h3>
              </div>
              <div class="box-body">
                <canvas id="storeChart" style="height:250px"></canvas>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="container">

      </div>


      <div class="box">
        <div class="box-header">
          <h3 class="box-title">Total des commandes payées - Données du rapport</h3>
        </div>
        <div class="box-body">
          <table id="datatables" class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Année - Mois</th>
                <th>Montant</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach ($results as $k => $v): ?>
                <tr>
                  <td><?php echo $k; ?></td>
                  <td><?php echo $company_currency . ' ' . number_format($v, 0, '.', ' '); ?></td>
                </tr>
              <?php endforeach; ?>
            </tbody>
            <tfoot>
              <tr>
                <th>Montant total</th>
                <th><?php echo number_format(array_sum($results), 0, '', ' '); ?></th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </section>
</div>

<script>
  $(document).ready(function() {
    $("#reportNav").addClass('active');
  });

  var report_data = <?php echo json_encode(array_values($results)); ?>;
  console.log(report_data);
  $(function() {
    var ctxBar = document.getElementById('barChart').getContext('2d');
    new Chart(ctxBar, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
        datasets: [{
          label: 'Ventes',
          backgroundColor: '#00a65a',
          data: report_data
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
            suggestedMax: Math.max(...report_data) + 10
          }
        }
      }
    });
  });
</script>



<script>
  $(document).ready(function() {
    var ctx = document.getElementById('paymentChart').getContext('2d');

    var paymentChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: <?= $labels ?>,
        datasets: [{
          label: 'Pourcentage de Transactions',
          data: <?= $totals ?>, // Ne pas ajouter % ici
          backgroundColor: ['#3498db', '#2ecc71', '#B88A2F'],
          borderColor: ['#2980b9', '#27ae60', '#f39c12'],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          tooltip: {
            callbacks: {
              label: function(tooltipItem) {
                // Ajouter le % dans l'affichage du tooltip
                return tooltipItem.raw.toLocaleString('fr-FR') + ' Ar';
              }
            }
          },
          legend: {
            labels: {
              generateLabels: function(chart) {
                // Ajouter le % dans les labels de la légende
                return chart.data.labels.map(function(label, i) {
                  return {
                    text: label + ' (' + chart.data.datasets[0].data[i].toLocaleString('fr-FR') + ' AR)',
                    fillStyle: chart.data.datasets[0].backgroundColor[i]
                  };
                });

              }
            }
          }
        }
      }
    });
  });
</script>

<script>
  $(document).ready(function() {
    var ctx = document.getElementById('productChart').getContext('2d');

    var paymentChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: <?= $labels_product ?>,
        datasets: [{
          label: 'Pourcentage de Transactions',
          data: <?= $totals_product ?>, // Ne pas ajouter % ici
          backgroundColor: ['#3498db', '#2ecc71', '#B88A2F'],
          borderColor: ['#2980b9', '#27ae60', '#f39c12'],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          tooltip: {
            callbacks: {
              label: function(tooltipItem) {
                // Ajouter le % dans l'affichage du tooltip
                return tooltipItem.raw.toFixed(0) + ' Produit';
              }
            }
          },
          legend: {
            labels: {
              generateLabels: function(chart) {
                // Ajouter le % dans les labels de la légende
                return chart.data.labels.map(function(label, i) {
                  return {
                    text: label + ' (' + chart.data.datasets[0].data[i].toFixed(0) + ' Produit)',
                    fillStyle: chart.data.datasets[0].backgroundColor[i]
                  };
                });

              }
            }
          }
        }
      }
    });
  });

  var ctx = document.getElementById('storeChart').getContext('2d');

  var paymentChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: <?= $labelStore ?>,
      datasets: [{
        label: 'Pourcentage de Transactions',
        data: <?= $totalPerStore ?>,
        backgroundColor: ['#3498db', '#2ecc71', '#B88A2F'],
        borderColor: ['#2980b9', '#27ae60', '#f39c12'],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        tooltip: {
          callbacks: {
            label: function(tooltipItem) {
              return tooltipItem.raw.toFixed(2) + '%';
            }
          }
        },
        legend: {
          position: 'bottom',
          labels: {
            generateLabels: function(chart) {
              return chart.data.labels.map(function(label, i) {
                return {
                  text: `${label} (${chart.data.datasets[0].data[i].toFixed(2)}%)`,
                  fillStyle: chart.data.datasets[0].backgroundColor[i]
                };
              });
            }
          }
        }
      }
    }
});
</script> 
<style>
  /* --- Style global --- */
  body {
    background: #f4f6f9;
    font-family: 'Poppins', sans-serif;
  }

  h1, h3 {
    font-weight: 600;
    color: #2c3e50;
  }

  /* --- En-tête --- */
  .content-header {
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: white;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .content-header h1 {
    margin: 0;
    font-size: 26px;
  }

  .breadcrumb {
    background: transparent;
    margin-top: 10px;
  }

  .breadcrumb li a {
    color: #ecf0f1;
  }

  /* --- Formulaire --- */
  .form-inline {
    margin-bottom: 25px;
  }

  .form-inline .form-control, 
  .form-inline button, 
  .form-inline a {
    border-radius: 8px !important;
  }

  .btn-default {
    background-color: #2980b9;
    color: white;
    transition: all 0.3s ease;
  }

  .btn-default:hover {
    background-color: #1f618d;
    color: white;
  }

  .btn-success {
    transition: all 0.3s ease;
  }

  .btn-success:hover {
    background-color: #27ae60;
  }

  /* --- Boîtes de statistiques --- */
  .box {
    background: white;
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 25px;
  }

  .box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
  }

  .box-header {
    border-bottom: 2px solid #f1f1f1;
    padding: 15px 20px;
    background: #fafafa;
    border-radius: 15px 15px 0 0;
  }

  .box-title {
    font-size: 18px;
    color: #34495e;
  }

  .box-body {
    padding: 20px;
  }

  /* --- Table --- */
  table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
  }

  th {
    background: #3498db;
    color: white;
    text-align: center;
  }

  td {
    text-align: center;
    vertical-align: middle !important;
  }

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  /* --- Alertes --- */
  .alert {
    border-radius: 10px;
    animation: fadeIn 0.6s ease;
  }

  @keyframes fadeIn {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
  }

  /* --- Charts --- */
  canvas {
    width: 100% !important;
    height: 300px !important;
  }

  /* --- Responsive --- */
  @media (max-width: 768px) {
    .box {
      margin-bottom: 20px;
    }
  }
</style>
