{% extends "base_frontoffice.html" %}

{% block content %}

  <link href="../static/css/bootstrap-icons.css" rel="stylesheet" />
  <style>
    body {
      background-color: #f7f9fa;
    }
    .ha-card {
      border-radius: 10px;
      background: white;
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: box-shadow 0.2s;
    }
    .ha-card:hover {
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .ha-icon {
      font-size: 2rem;
      margin-right: 1rem;
      color: #5c636a;
    }
    .ha-value {
      font-size: 1.5rem;
      font-weight: 500;
    }
    .ha-title {
      font-size: 0.9rem;
      color: #6c757d;
    }
  </style>


<div class="container my-4">
  <h2 class="mb-4">Dashboard</h2>

  <!-- Row des indicateurs style Home Assistant -->
  <div class="row g-3">
    <div class="col-md-3">
      <div class="ha-card">
        <div class="d-flex align-items-center">
          <i class="bi bi-wallet2 ha-icon"></i>
          <div>
            <div class="ha-value money">{{caisse}}</div>
            <div class="ha-title">Solde Caisse</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="ha-card">
        <div class="d-flex align-items-center">
          <i class="bi bi-bag-fill ha-icon"></i>
          <div>
            <div class="ha-value money">{{stock}}</div>
            <div class="ha-title">Valeur Stock</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="ha-card">
        <div class="d-flex align-items-center">
          <i class="bi bi-credit-card-2-front ha-icon"></i>
          <div>
            <div class="ha-value money">{{gerant}}</div>
            <div class="ha-title">Solde Gérant</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="ha-card">
        <div class="d-flex align-items-center">
          <i class="bi bi-credit-card-2-front ha-icon"></i>
          <div>
            <div class="ha-value money">{{fournisseur.solde}}</div>
            <div class="ha-title">Solde Fournisseur</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3 mt-1">
    <div class="col-md-3">
      <div class="ha-card">
        <div class="d-flex align-items-center">
          <i class="bi bi-cart-plus ha-icon"></i>
          <div>
            <div class="ha-value money">{{current_day[0]}}</div>
            <div class="ha-title">Ventes Aujourd'hui</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="ha-card">
        <div class="d-flex align-items-center">
          <i class="bi bi-cart-plus ha-icon"></i>
          <div>
            <div class="ha-value money">{{current_day[1]}}</div>
            <div class="ha-title">Marges Aujourd'hui</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="ha-card">
        <div class="d-flex align-items-center">
          <i class="bi bi-bar-chart-line ha-icon"></i>
          <div>
            <div class="ha-value money">{{current_month[0]}}</div>
            <div class="ha-title">Ventes ce Mois</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="ha-card">
        <div class="d-flex align-items-center">
          <i class="bi bi-cart-plus ha-icon"></i>
          <div>
            <div class="ha-value money">{{current_month[1]}}</div>
            <div class="ha-title">Marges ce Mois</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Graph style HA -->
  <div class="row g-3 mt-1">
    <div class="col-12">
      <div class="ha-card">
        <div style="width:100%;">
          <h6 class="mb-3"><i class="bi bi-graph-up"></i> Ventes des 30 derniers jours</h6>
          <canvas id="chartVentes" height="100"></canvas>
        </div>
      </div>
    </div>
  </div>

  <!-- Notifications style HA -->
  <div class="row g-3 mt-1">
    <div class="col-12">
      <div class="ha-card">
        <div>
          <h6><i class="bi bi-bell"></i> Notifications</h6>
          <ul class="list-group list-group-flush">
            <li class="list-group-item px-0 border-0">Stock faible : Sac croquettes chien 20kg (3 en stock)</li>
            <li class="list-group-item px-0 border-0">Commande fournisseur #AF-1023 en cours</li>
            <li class="list-group-item px-0 border-0">Client M. Rakoto doit régler 480 €</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>

<script src="../static/js/chart.js"></script>
<script>
  const ctxV = document.getElementById('chartVentes').getContext('2d');
  new Chart(ctxV, {
    type: 'line',
    data: {
      labels: Array.from({length:30}, (_,i)=> `J${i+1}`),
      datasets: [{
        label: 'Ventes aliments',
        data: Array.from({length:30}, () => Math.floor(300 + Math.random()*200)),
        fill: true,
        backgroundColor: 'rgba(25,135,84,0.2)',
        borderColor: '#198754'
      }]
    },
    options: {
      responsive: true,
      plugins: { legend: { position: 'top' } },
      scales: { y: { beginAtZero: true } }
    }
  });


    window.onload=function(){
    var all_number =$(".money");
    for (let number of all_number){

      number.textContent=parseFloat(number.textContent).toLocaleString("fr-FR", {minimumFractionDigits:0});
    };



};
</script>


{% endblock %}