<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard POS</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-size: 0.95rem;
    }
    .sidebar {
      height: 100vh;
    }
    @media (max-width: 767px) {
      .sidebar {
        position: fixed;
        z-index: 1040;
      }
    }
    .card-title {
      font-size: 1rem;
    }
  </style>
</head>
<body>

<!-- Navbar top -->
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <button class="btn btn-outline-light d-md-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
      ☰
    </button>
    <span class="navbar-brand ms-2">Magasin POS</span>
  </div>
</nav>

<!-- Sidebar -->
<div class="offcanvas-md offcanvas-start bg-dark text-white sidebar" tabindex="-1" id="sidebarMenu">
  <div class="offcanvas-header d-md-none">
    <h5 class="offcanvas-title">Menu</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body pt-3">
    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link text-white" href="#">🏠 Dashboard</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="#">🛒 Ventes</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="#">💵 Caisse</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="#">📦 Stock</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="#">👤 Apport Gérant</a></li>
    </ul>
  </div>
</div>

<!-- Main content -->
<main class="container-fluid" style="padding-top: 60px;">
  <div class="row">
    <div class="col-md-10 offset-md-2 col-lg-10 ms-md-auto px-4">

      <div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h2>Tableau de bord</h2>
      </div>

      <!-- Cards -->
      <div class="row g-3 mb-4">
        <div class="col-sm-6 col-lg-3">
          <div class="card text-bg-success">
            <div class="card-body">
              <h5 class="card-title">Total Ventes</h5>
              <p class="card-text">350,000 Ar</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card text-bg-info">
            <div class="card-body">
              <h5 class="card-title">Solde Caisse</h5>
              <p class="card-text">125,000 Ar</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card text-bg-warning">
            <div class="card-body">
              <h5 class="card-title">Articles Rupture</h5>
              <p class="card-text">4 produits</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card text-bg-secondary">
            <div class="card-body">
              <h5 class="card-title">Apport Gérant</h5>
              <p class="card-text">50,000 Ar</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Table & Chart -->
      <div class="row g-4">
        <div class="col-lg-6">
          <h5>Dernières Ventes</h5>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead><tr><th>Date</th><th>Montant</th><th>Client</th></tr></thead>
              <tbody>
                <tr><td>16/06/2025</td><td>45,000 Ar</td><td>Jean</td></tr>
                <tr><td>16/06/2025</td><td>60,000 Ar</td><td>Marie</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="col-lg-6">
          <h5>Graphique des ventes</h5>
          <canvas id="chartVente"></canvas>
        </div>
      </div>
    </div>
  </div>
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('chartVente').getContext('2d');
  const chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['10 juin', '11 juin', '12 juin', '13 juin', '14 juin', '15 juin'],
      datasets: [{
        label: 'Ventes (Ar)',
        data: [20000, 45000, 30000, 50000, 40000, 60000],
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: 'rgba(75, 192, 192, 0.1)',
        tension: 0.3,
        fill: true
      }]
    },
    options: { responsive: true }
  });
</script>

</body>
</html>
