melhore layout: <!DOCTYPE html>
<html lang="fr">
<head>
  <base href="https://websim.creationengine.com/stock_control/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Système Avancé de Gestion des Stocks</title>
  
  <!-- Polices et Styles -->
  <link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;500;600&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" onerror="console.error('Erreur de chargement de Font Awesome.')">
  <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <style>
    :root {
      --bg-color: #e0f7fa;
      --text-color: #004d40;
      --card-bg: #ffffff;
      --card-text: #004d40;
      --btn-primary-bg: #0d6efd;
      --btn-primary-hover-bg: #0b5ed7;
      --btn-success-bg: #198754;
      --btn-success-hover-bg: #157347;
      --btn-info-bg: #0dcaf0;
      --btn-info-hover-bg: #31d2f2;
      --btn-warning-bg: #ffc107;
      --btn-warning-hover-bg: #ffca2c;
      --btn-danger-bg: #dc3545;
      --btn-danger-hover-bg: #bb2d3b;
      --spinner-color: #0d6efd;
      --dark-bg-color: #121212;
      --dark-text-color: #e0f7fa;
      --dark-card-bg: #1e1e1e;
      --dark-card-text: #e0f7fa;
      --dark-btn-bg: #333;
      --dark-btn-hover-bg: #444;
      --dark-navbar-bg: #1e1e1e;
      --dark-form-bg: #333;
      --dark-form-border: #555;
      --dark-list-bg: #333;
      --dark-list-border: #555;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: 'Segoe UI', sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }
    .btn {
      padding: 1rem 2rem;
      font-size: 1.1rem;
      border-radius: 30px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s, background-color 0.3s;
      margin: 5px;
    }
    .btn:hover {
      transform: scale(1.05);
    }
    .functional-card {
      background-color: var(--card-bg);
      color: var(--card-text);
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s, background-color 0.3s;
    }
    .functional-card:hover {
      transform: translateY(-5px);
    }
    @media (max-width: 768px) {
      .functional-card {
        margin-bottom: 1rem;
      }
      .btn {
        flex: 1;
      }
    }
    .spinner-border {
      display: none;
      color: var(--spinner-color);
    }
    .spinner-border.show {
      display: inline-block;
    }
    /* Styles pour le mode sombre */
    .dark-mode {
      background-color: var(--dark-bg-color);
      color: var(--dark-text-color);
    }
    .dark-mode .functional-card {
      background-color: var(--dark-card-bg);
      color: var(--dark-card-text);
      box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
    }
    .dark-mode .btn {
      background-color: var(--dark-btn-bg);
      color: var(--dark-text-color);
      box-shadow: 0 5px 10px rgba(255, 255, 255, 0.2);
    }
    .dark-mode .btn:hover {
      background-color: var(--dark-btn-hover-bg);
    }
    .dark-mode .navbar {
      background-color: var(--dark-navbar-bg);
    }
    .dark-mode .tab-content {
      background-color: var(--dark-card-bg);
    }
    .dark-mode .form-control,
    .dark-mode .form-select {
      background-color: var(--dark-form-bg);
      color: var(--dark-text-color);
      border-color: var(--dark-form-border);
    }
    .dark-mode .list-group-item {
      background-color: var(--dark-list-bg);
      color: var(--dark-text-color);
      border-color: var(--dark-list-border);
    }
    .dark-mode .card {
      background-color: var(--dark-card-bg);
      color: var(--dark-card-text);
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg" aria-label="Barre de navigation">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><i class="fas fa-warehouse"></i> Gestion des Stocks</a>
    </div>
  </nav>

  <main class="container mt-4">
    <!-- Navigation par Onglets -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="inventory-tab" data-bs-toggle="tab" data-bs-target="#inventory" type="button" role="tab" aria-controls="inventory" aria-selected="true">
          <i class="fas fa-boxes"></i> Inventaire
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="favorites-tab" data-bs-toggle="tab" data-bs-target="#favorites" type="button" role="tab" aria-controls="favorites" aria-selected="false">
          <i class="fas fa-star"></i> Favoris
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="analytics-tab" data-bs-toggle="tab" data-bs-target="#analytics" type="button" role="tab" aria-controls="analytics" aria-selected="false">
          <i class="fas fa-chart-line"></i> Analyses
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="charts-tab" data-bs-toggle="tab" data-bs-target="#charts" type="button" role="tab" aria-controls="charts" aria-selected="false">
          <i class="fas fa-chart-pie"></i> Graphiques
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="backup-tab" data-bs-toggle="tab" data-bs-target="#backup" type="button" role="tab" aria-controls="backup" aria-selected="false">
          <i class="fas fa-database"></i> Sauvegarde
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab" aria-controls="notes" aria-selected="false">
          <i class="fas fa-sticky-note"></i> Notes
        </button>
      </li>
    </ul>

    <div class="tab-content mt-3" id="myTabContent">
      <!-- Tab Inventaire -->
      <section class="tab-pane fade show active" id="inventory" role="tabpanel" aria-labelledby="inventory-tab">
        <div class="card functional-card">
          <div class="card-header">
            <h3><i class="fas fa-boxes"></i> Inventaire</h3>
          </div>
          <div class="card-body">
            <p class="text-muted mb-2">
              Veuillez télécharger vos fichiers <strong>.xlsx</strong>, <strong>.csv</strong> ou <strong>.json</strong> pour l'importation et cliquez sur les boutons correspondants pour exporter vos données.
            </p>
            <div class="row mb-3">
              <div class="col-md-12 d-flex flex-wrap justify-content-center mb-3">
                <div class="btn-group" role="group" aria-label="Groupes de boutons">
                  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addItemModal">
                    <i class="fas fa-plus-circle"></i> Ajouter un Article
                  </button>
                  <button class="btn btn-success" id="exportExcel" aria-label="Exporter en Excel">
                    <i class="fas fa-file-excel"></i> Exporter en Excel
                  </button>
                  <button class="btn btn-info" id="exportPDF" aria-label="Exporter en PDF">
                    <i class="fas fa-file-pdf"></i> Exporter en PDF
                  </button>
                  <input type="file" id="importFile" accept=".xlsx,.csv,.json" style="display: none;">
                  <button class="btn btn-warning" onclick="document.getElementById('importFile').click();" aria-label="Importer des Données">
                    <i class="fas fa-file-import"></i> Importer des Données
                  </button>
                  <button class="btn btn-danger" id="deleteAllBtn" data-bs-toggle="modal" data-bs-target="#deleteAllConfirmModal" aria-label="Supprimer Tous les Articles">
                    <i class="fas fa-trash-alt"></i> Supprimer tout
                  </button>
                </div>
              </div>
              <div class="col-md-4">
                <div class="input-group" role="search">
                  <span class="input-group-text" id="search-icon"><i class="fas fa-search"></i></span>
                  <input type="text" id="searchInput" class="form-control" placeholder="Rechercher..." aria-label="Rechercher" aria-describedby="search-icon">
                </div>
              </div>
              <div class="col-md-12 text-center" id="loadingContainer">
                <div class="spinner-border" role="status" aria-hidden="true"></div>
                <span class="visually-hidden">Chargement...</span>
              </div>
            </div>
            <div id="inventory-table"></div>
          </div>
        </div>
      </section>

      <!-- Tab Favoris -->
      <section class="tab-pane fade" id="favorites" role="tabpanel" aria-labelledby="favorites-tab">
        <div class="card functional-card">
          <div class="card-header">
            <h3><i class="fas fa-star"></i> Favoris</h3>
          </div>
          <div class="card-body">
            <div id="favorites-table"></div>
          </div>
        </div>
      </section>

      <!-- Tab Analyses -->
      <section class="tab-pane fade" id="analytics" role="tabpanel" aria-labelledby="analytics-tab">
        <div class="card functional-card">
          <div class="card-header">
            <h3><i class="fas fa-chart-line"></i> Analyses</h3>
          </div>
          <div class="card-body">
            <div class="row">
              <!-- Statistiques de l'Inventaire -->
              <div class="col-12 col-md-6 mb-3">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title"><i class="fas fa-chart-bar"></i> Statistiques de l'Inventaire</h5>
                    <p>Total des Articles : <span id="totalItems">0</span></p>
                    <p>Articles en Utilisation : <span id="itemsInUse">0</span></p>
                    <p>Articles en Stock : <span id="itemsInStock">0</span></p>
                    <p>Articles en Maintenance : <span id="itemsInMaintenance">0</span></p>
                    <p>Articles Retirés : <span id="retiredItems">0</span></p>
                  </div>
                </div>
              </div>
              <!-- Historique des Modifications -->
              <div class="col-12 col-md-6 mb-3">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title"><i class="fas fa-history"></i> Historique des Modifications</h5>
                    <ul id="modificationHistory" class="list-group list-group-flush" aria-label="Historique des modifications">
                      <!-- Éléments de l'historique ajoutés dynamiquement -->
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Tab Graphiques -->
      <section class="tab-pane fade" id="charts" role="tabpanel" aria-labelledby="charts-tab">
        <div class="card functional-card">
          <div class="card-header">
            <h3><i class="fas fa-chart-pie"></i> Graphiques</h3>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-12 col-md-6 mb-3">
                <div class="card">
                  <div class="card-body">
                    <canvas id="deviceTypeChart" aria-label="Graphique des types d'appareils" role="img"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 mb-3">
                <div class="card">
                  <div class="card-body">
                    <canvas id="itemStatusChart" aria-label="Graphique des statuts des articles" role="img"></canvas>
                  </div>
                </div>
              </div>
              <!-- Autres graphiques peuvent être ajoutés ici -->
            </div>
          </div>
        </div>
      </section>

      <!-- Tab Sauvegarde -->
      <section class="tab-pane fade" id="backup" role="tabpanel" aria-labelledby="backup-tab">
        <div class="card functional-card">
          <div class="card-header">
            <h3><i class="fas fa-database"></i> Sauvegarde</h3>
          </div>
          <div class="card-body">
            <div class="row">
              <!-- Sauvegarde des Données -->
              <div class="col-12 col-md-6 mb-3">
                <div class="card">
                  <div class="card-body text-center">
                    <h5 class="card-title"><i class="fas fa-save"></i> Sauvegarde des Données</h5>
                    <button class="btn btn-primary" id="backupBtn" aria-label="Sauvegarder l'inventaire">
                      <i class="fas fa-database"></i> Sauvegarder l'Inventaire
                    </button>
                  </div>
                </div>
              </div>
              <!-- Restauration des Données -->
              <div class="col-12 col-md-6 mb-3">
                <div class="card">
                  <div class="card-body text-center">
                    <h5 class="card-title"><i class="fas fa-upload"></i> Restaurer les Données</h5>
                    <input type="file" id="restoreFile" accept=".json" style="display: none;" aria-hidden="true">
                    <button class="btn btn-warning" onclick="document.getElementById('restoreFile').click();" aria-label="Restaurer depuis la sauvegarde">
                      <i class="fas fa-file-upload"></i> Restaurer depuis la Sauvegarde
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Tab Notes -->
      <section class="tab-pane fade" id="notes" role="tabpanel" aria-labelledby="notes-tab">
        <div class="card functional-card">
          <div class="card-header">
            <h3><i class="fas fa-sticky-note"></i> Notes et Rappels</h3>
          </div>
          <div class="card-body">
            <div class="row">
              <!-- Zone de Notes -->
              <div class="col-md-6 mb-3">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title"><i class="fas fa-pencil-alt"></i> Notes et Observations</h5>
                    <label for="notes-area" class="visually-hidden">Écrire des notes</label>
                    <textarea id="notes-area" class="form-control" rows="5" placeholder="Écrivez vos notes ici..." aria-label="Écrire des notes"></textarea>
                    <div class="mt-2 d-flex justify-content-between">
                      <button id="save-notes" class="btn btn-primary" aria-label="Sauvegarder les notes">Sauvegarder</button>
                      <button id="clearNotes" class="btn btn-danger" aria-label="Effacer toutes les notes">Effacer toutes les notes</button>
                    </div>
                    <div id="savedNotes" class="mt-3" aria-live="polite">
                      <!-- Notes sauvegardées affichées ici -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- Calendrier -->
              <div class="col-md-6 mb-3">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title"><i class="fas fa-calendar-alt"></i> Calendrier</h5>
                    <div id="calendar" aria-label="Calendrier des événements"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <!-- Horloge -->
              <div class="col-md-6 mb-3">
                <div class="card">
                  <div class="card-body text-center">
                    <h5 class="card-title"><i class="fas fa-clock"></i> Horloge</h5>
                    <div id="clock" class="display-4"></div>
                  </div>
                </div>
              </div>
              <!-- Rappels -->
              <div class="col-md-6 mb-3">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title"><i class="fas fa-bell"></i> Rappels</h5>
                    <ul id="reminders-list" class="list-group mb-3" aria-label="Liste des rappels">
                      <!-- Rappels ajoutés dynamiquement -->
                    </ul>
                    <div class="input-group">
                      <input type="text" id="reminder-text" class="form-control" placeholder="Nouveau rappel" aria-label="Nouveau rappel">
                      <button id="add-reminder" class="btn btn-primary" type="button" aria-label="Ajouter un rappel">
                        Ajouter un rappel
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- Commutateur Mode Sombre -->
    <div class="form-check form-switch mt-3">
      <input class="form-check-input" type="checkbox" id="darkModeSwitch" aria-label="Basculer le mode sombre">
      <label class="form-check-label" for="darkModeSwitch"><i class="fas fa-moon"></i> Mode Sombre</label>
    </div>
  </main>

  <!-- Modaux -->

  <!-- Modal Ajouter un Item -->
  <div class="modal fade" id="addItemModal" tabindex="-1" aria-labelledby="addItemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addItemModalLabel"><i class="fas fa-plus-circle"></i> Ajouter un Nouvel Article</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <form id="addItemForm" novalidate>
            <div class="mb-3">
              <label for="itemType" class="form-label">Type</label>
              <select class="form-select" id="itemType" required aria-required="true">
                <option value="" disabled selected>Sélectionnez le type</option>
                <option value="Ordinateur">Ordinateur</option>
                <option value="Tablette">Tablette</option>
                <option value="Téléphone">Téléphone</option>
                <option value="Imprimante">Imprimante</option>
                <option value="Scanner">Scanner</option>
              </select>
              <div class="invalid-feedback">Veuillez sélectionner le type.</div>
            </div>
            <div class="mb-3">
              <label for="assetTag" class="form-label">Tag de l'Actif</label>
              <input type="text" class="form-control" id="assetTag" required aria-required="true" aria-describedby="assetTagHelp" placeholder="Exemple : TAG123">
              <div class="invalid-feedback">Veuillez entrer le tag de l'actif.</div>
            </div>
            <div class="mb-3">
              <label for="serialNumber" class="form-label">Numéro de Série</label>
              <input type="text" class="form-control" id="serialNumber" required aria-required="true" placeholder="Exemple : SN123456789">
              <div class="invalid-feedback">Veuillez entrer le numéro de série.</div>
            </div>
            <div class="mb-3">
              <label for="location" class="form-label">Emplacement</label>
              <input type="text" class="form-control" id="location" required aria-required="true" placeholder="Exemple : Bureau A">
              <div class="invalid-feedback">Veuillez entrer l'emplacement.</div>
            </div>
            <div class="mb-3">
              <label for="status" class="form-label">Statut</label>
              <select class="form-select" id="status" required aria-required="true">
                <option value="" disabled selected>Sélectionnez le statut</option>
                <option value="En Utilisation">En Utilisation</option>
                <option value="En Stock">En Stock</option>
                <option value="En Maintenance">En Maintenance</option>
                <option value="Retiré">Retiré</option>
              </select>
              <div class="invalid-feedback">Veuillez sélectionner le statut.</div>
            </div>
            <!-- Champs Conditionnels pour Maintenance -->
            <div class="mb-3 maintenance-field" style="display: none;">
              <label for="numeroIncidente" class="form-label">Numéro d'Incident</label>
              <input type="text" class="form-control" id="numeroIncidente" placeholder="Exemple : INC12345">
              <div class="invalid-feedback">Veuillez entrer le numéro d'incident.</div>
            </div>
            <div class="mb-3 maintenance-field" style="display: none;">
              <label for="descricaoPane" class="form-label">Description de la Panne</label>
              <textarea class="form-control" id="descricaoPane" rows="3" placeholder="Décrivez la panne..."></textarea>
              <div class="invalid-feedback">Veuillez décrire la panne.</div>
            </div>
            <div class="mb-3 form-check">
              <input class="form-check-input" type="checkbox" id="favorite">
              <label class="form-check-label" for="favorite">
                Marquer comme Favori
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Fermer">Fermer</button>
          <button type="button" class="btn btn-primary" id="saveItemBtn" aria-label="Enregistrer l'article"><i class="fas fa-save"></i> Enregistrer</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Éditer un Item -->
  <div class="modal fade" id="editItemModal" tabindex="-1" aria-labelledby="editItemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editItemModalLabel"><i class="fas fa-edit"></i> Éditer l'Article</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <form id="editItemForm" novalidate>
            <div class="mb-3">
              <label for="editItemType" class="form-label">Type</label>
              <select class="form-select" id="editItemType" required aria-required="true">
                <option value="" disabled>Sélectionnez le type</option>
                <option value="Ordinateur">Ordinateur</option>
                <option value="Tablette">Tablette</option>
                <option value="Téléphone">Téléphone</option>
                <option value="Imprimante">Imprimante</option>
                <option value="Scanner">Scanner</option>
              </select>
              <div class="invalid-feedback">Veuillez sélectionner le type.</div>
            </div>
            <div class="mb-3">
              <label for="editAssetTag" class="form-label">Tag de l'Actif</label>
              <input type="text" class="form-control" id="editAssetTag" required aria-required="true" placeholder="Exemple : TAG123">
              <div class="invalid-feedback">Veuillez entrer le tag de l'actif.</div>
            </div>
            <div class="mb-3">
              <label for="editSerialNumber" class="form-label">Numéro de Série</label>
              <input type="text" class="form-control" id="editSerialNumber" required aria-required="true" placeholder="Exemple : SN123456789">
              <div class="invalid-feedback">Veuillez entrer le numéro de série.</div>
            </div>
            <div class="mb-3">
              <label for="editLocation" class="form-label">Emplacement</label>
              <input type="text" class="form-control" id="editLocation" required aria-required="true" placeholder="Exemple : Bureau A">
              <div class="invalid-feedback">Veuillez entrer l'emplacement.</div>
            </div>
            <div class="mb-3">
              <label for="editStatus" class="form-label">Statut</label>
              <select class="form-select" id="editStatus" required aria-required="true">
                <option value="" disabled>Sélectionnez le statut</option>
                <option value="En Utilisation">En Utilisation</option>
                <option value="En Stock">En Stock</option>
                <option value="En Maintenance">En Maintenance</option>
                <option value="Retiré">Retiré</option>
              </select>
              <div class="invalid-feedback">Veuillez sélectionner le statut.</div>
            </div>
            <!-- Champs Conditionnels pour Maintenance -->
            <div class="mb-3 edit-maintenance-field" style="display: none;">
              <label for="editNumeroIncidente" class="form-label">Numéro d'Incident</label>
              <input type="text" class="form-control" id="editNumeroIncidente" placeholder="Exemple : INC12345">
              <div class="invalid-feedback">Veuillez entrer le numéro d'incident.</div>
            </div>
            <div class="mb-3 edit-maintenance-field" style="display: none;">
              <label for="editDescricaoPane" class="form-label">Description de la Panne</label>
              <textarea class="form-control" id="editDescricaoPane" rows="3" placeholder="Décrivez la panne..."></textarea>
              <div class="invalid-feedback">Veuillez décrire la panne.</div>
            </div>
            <div class="mb-3 form-check">
              <input class="form-check-input" type="checkbox" id="editFavorite">
              <label class="form-check-label" for="editFavorite">
                Marquer comme Favori
              </label>
            </div>
            <input type="hidden" id="originalAssetTag">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Fermer">Fermer</button>
          <button type="button" class="btn btn-primary" id="updateItemBtn" aria-label="Mettre à jour l'article"><i class="fas fa-save"></i> Mettre à Jour</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Confirmer Suppression -->
  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteConfirmModalLabel"><i class="fas fa-trash-alt"></i> Confirmer la Suppression</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          Êtes-vous sûr de vouloir supprimer cet article ?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Annuler">Annuler</button>
          <button type="button" class="btn btn-danger" id="confirmDeleteBtn" aria-label="Supprimer l'article"><i class="fas fa-trash-alt"></i> Supprimer</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Confirmer Suppression de Tous -->
  <div class="modal fade" id="deleteAllConfirmModal" tabindex="-1" aria-labelledby="deleteAllConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteAllConfirmModalLabel"><i class="fas fa-trash-alt"></i> Confirmer la Suppression de Tous</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          Êtes-vous sûr de vouloir supprimer tous les articles ? Cette action est irréversible.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Annuler">Annuler</button>
          <button type="button" class="btn btn-danger" id="confirmDeleteAllBtn" aria-label="Supprimer tous les articles"><i class="fas fa-trash-alt"></i> Supprimer Tout</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <script defer src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script defer src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script defer src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.js"></script>

  <script defer>
    "use strict";

    // Variables Globales
    let inventoryTable, favoritesTable;
    let inventoryData = [];
    let deviceTypeChart = null, itemStatusChart = null;
    let currentEditIndex = null;

    // Fonction pour Récupérer les Données du LocalStorage
    const getLocalStorageData = (key) => {
      try {
        const data = localStorage.getItem(key);
        return data ? JSON.parse(data) : [];
      } catch (error) {
        console.error(`Erreur lors de la récupération des données du stockage local (${key}):`, error);
        return [];
      }
    };

    // Fonction pour Sauvegarder les Données dans le LocalStorage
    const saveData = () => {
      localStorage.setItem('inventoryData', JSON.stringify(inventoryData));
    };

    // Fonction pour Ajouter une Entrée dans l'Historique des Modifications
    const addModificationHistory = (action) => {
      const historyList = document.getElementById('modificationHistory');
      const listItem = document.createElement('li');
      listItem.className = 'list-group-item';
      const user = 'Utilisateur'; // Remplacer par le nom réel de l'utilisateur si disponible
      const timestamp = new Date().toLocaleString();
      listItem.textContent = `${timestamp} - ${user} : ${action}`;
      historyList.insertBefore(listItem, historyList.firstChild);
      if (historyList.children.length > 10) {
        historyList.removeChild(historyList.lastChild);
      }
    };

    // Fonction pour Afficher un Indicateur de Chargement
    const showLoadingIndicator = () => {
      document.querySelector('.spinner-border').classList.add('show');
    };

    // Fonction pour Masquer l'Indicateur de Chargement
    const hideLoadingIndicator = () => {
      document.querySelector('.spinner-border').classList.remove('show');
    };

    // Fonction pour Afficher une Alerte
    const showAlert = (type, message) => {
      const alertDiv = document.createElement('div');
      alertDiv.className = `alert alert-${type} alert-dismissible fade show mt-3`;
      alertDiv.role = 'alert';
      alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
      `;
      document.querySelector('.container').prepend(alertDiv);
      setTimeout(() => alertDiv.remove(), 5000);
    };

    // Fonction pour Mettre à Jour le Tableau des Favoris
    const updateFavoritesTable = () => {
      const favoriteItems = inventoryData.filter(item => item.favorite);
      favoritesTable.setData(favoriteItems);
    };

    // Initialisation au Chargement de la Page
    window.addEventListener('load', () => {
      // Charger les Données depuis le LocalStorage
      inventoryData = getLocalStorageData('inventoryData');

      // Initialiser le Tableau d'Inventaire
      inventoryTable = new Tabulator("#inventory-table", {
        data: inventoryData,
        layout: "fitColumns",
        pagination: "local",
        paginationSize: 10,
        reactiveData: true,
        columns: [
          { title: "Type", field: "type", sorter: "string", headerFilter: "input" },
          { title: "Tag de l'Actif", field: "assetTag", sorter: "string", headerFilter: "input" },
          { title: "Numéro de Série", field: "serialNumber", sorter: "string", headerFilter: "input" },
          { title: "Emplacement", field: "location", sorter: "string", headerFilter: "input" },
          {
            title: "Statut",
            field: "status",
            sorter: "string",
            headerFilter: "select",
            headerFilterParams: { values: { "": "Tout", "En Utilisation": "En Utilisation", "En Stock": "En Stock", "En Maintenance": "En Maintenance", "Retiré": "Retiré" } },
            formatter: (cell) => {
              const status = cell.getValue();
              const colors = {
                "En Stock": "green",
                "En Utilisation": "blue",
                "En Maintenance": "orange",
                "Retiré": "red"
              };
              return `<span style="color: ${colors[status] || 'black'};">${status}</span>`;
            }
          },
          {
            title: "Favori",
            field: "favorite",
            formatter: "tickCross",
            sorter: "boolean",
            hozAlign: "center",
            width: 80
          },
          {
            title: "Actions",
            formatter: () => `
              <button class="btn btn-sm btn-primary edit-btn" aria-label="Éditer l'article"><i class="fas fa-edit"></i></button>
              <button class="btn btn-sm btn-danger delete-btn" aria-label="Supprimer l'article"><i class="fas fa-trash-alt"></i></button>
            `,
            align: "center",
            cellClick: (e, cell) => {
              const data = cell.getRow().getData();
              if (e.target.closest('.edit-btn')) {
                editItem(data);
              } else if (e.target.closest('.delete-btn')) {
                showDeleteConfirmModal(data);
              }
            }
          }
        ]
      });

      // Initialiser le Tableau des Favoris
      favoritesTable = new Tabulator("#favorites-table", {
        data: inventoryData.filter(item => item.favorite),
        layout: "fitColumns",
        pagination: "local",
        paginationSize: 10,
        reactiveData: true,
        columns: [
          { title: "Type", field: "type", sorter: "string", headerFilter: "input" },
          { title: "Tag de l'Actif", field: "assetTag", sorter: "string", headerFilter: "input" },
          { title: "Numéro de Série", field: "serialNumber", sorter: "string", headerFilter: "input" },
          { title: "Emplacement", field: "location", sorter: "string", headerFilter: "input" },
          {
            title: "Statut",
            field: "status",
            sorter: "string",
            headerFilter: "select",
            headerFilterParams: { values: { "": "Tout", "En Utilisation": "En Utilisation", "En Stock": "En Stock", "En Maintenance": "En Maintenance", "Retiré": "Retiré" } },
            formatter: (cell) => {
              const status = cell.getValue();
              const colors = {
                "En Stock": "green",
                "En Utilisation": "blue",
                "En Maintenance": "orange",
                "Retiré": "red"
              };
              return `<span style="color: ${colors[status] || 'black'};">${status}</span>`;
            }
          },
          {
            title: "Actions",
            formatter: () => `
              <button class="btn btn-sm btn-primary edit-btn" aria-label="Éditer l'article"><i class="fas fa-edit"></i></button>
              <button class="btn btn-sm btn-danger delete-btn" aria-label="Supprimer l'article"><i class="fas fa-trash-alt"></i></button>
            `,
            align: "center",
            cellClick: (e, cell) => {
              const data = cell.getRow().getData();
              if (e.target.closest('.edit-btn')) {
                editItem(data);
              } else if (e.target.closest('.delete-btn')) {
                showDeleteConfirmModal(data);
              }
            }
          }
        ]
      });

      // Charger les Notes Sauvegardées
      const savedNotes = localStorage.getItem('inventoryNotes');
      if (savedNotes) {
        document.getElementById('notes-area').value = savedNotes;
        displaySavedNotes();
      }

      // Fonction pour Afficher les Notes Sauvegardées
      const displaySavedNotes = () => {
        const notes = localStorage.getItem('inventoryNotes');
        const notesDisplay = document.getElementById('savedNotes');
        if (notes) {
          notesDisplay.innerHTML = `<h6>Notes Sauvegardées :</h6><p>${notes}</p>`;
        } else {
          notesDisplay.innerHTML = '';
        }
      };

      // Sauvegarder les Notes
      document.getElementById('save-notes').addEventListener('click', () => {
        const notes = document.getElementById('notes-area').value.trim();
        if (notes) {
          localStorage.setItem('inventoryNotes', notes);
          displaySavedNotes();
          showAlert('success', 'Notes sauvegardées avec succès !');
        } else {
          showAlert('warning', 'Les notes sont vides.');
        }
      });

      // Effacer Toutes les Notes
      document.getElementById('clearNotes').addEventListener('click', () => {
        if (confirm('Êtes-vous sûr de vouloir effacer toutes les notes ?')) {
          localStorage.removeItem('inventoryNotes');
          document.getElementById('notes-area').value = '';
          displaySavedNotes();
          showAlert('success', 'Toutes les notes ont été effacées avec succès !');
        }
      });

      // Initialiser le Calendrier
      try {
        const calendarEl = document.getElementById('calendar');
        const calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
          }
        });
        calendar.render();
      } catch (error) {
        console.error('Erreur lors du rendu du calendrier:', error);
        showAlert('danger', 'Erreur lors du chargement du calendrier. Veuillez rafraîchir la page.');
      }

      // Mettre à Jour l'Horloge en Temps Réel
      const updateClock = () => {
        const now = new Date();
        document.getElementById('clock').textContent = now.toLocaleTimeString();
      };
      updateClock(); // Initialiser immédiatement
      setInterval(updateClock, 1000);

      // Sauvegarder un Nouvel Item
      document.getElementById('saveItemBtn').addEventListener('click', () => {
        const form = document.getElementById('addItemForm');
        if (form.checkValidity()) {
          const newItem = {
            type: document.getElementById('itemType').value,
            assetTag: document.getElementById('assetTag').value.trim(),
            serialNumber: document.getElementById('serialNumber').value.trim(),
            location: document.getElementById('location').value.trim(),
            status: document.getElementById('status').value,
            numeroIncidente: document.getElementById('numeroIncidente').value.trim() || null,
            descricaoPane: document.getElementById('descricaoPane').value.trim() || null,
            favorite: document.getElementById('favorite').checked
          };

          // Vérifier les Doublons
          const duplicate = inventoryData.some(item => item.assetTag === newItem.assetTag || item.serialNumber === newItem.serialNumber);
          if (duplicate) {
            showAlert('danger', 'Un article avec ce Tag ou Numéro de Série existe déjà.');
            return;
          }

          // Ajouter l'Item
          inventoryData.push(newItem);
          saveData();
          updateAnalytics();
          updateCharts();
          updateFavoritesTable();
          form.reset();
          bootstrap.Modal.getInstance(document.getElementById('addItemModal')).hide();
          addModificationHistory(`Ajouté nouvel article : ${newItem.assetTag}`);
          showAlert('success', 'Article ajouté avec succès !');
        } else {
          form.classList.add('was-validated');
        }
      });

      // Fonction pour Éditer un Item
      const editItem = (item) => {
        currentEditIndex = inventoryData.findIndex(i => i.assetTag === item.assetTag);
        if (currentEditIndex > -1) {
          const editForm = document.getElementById('editItemForm');
          editForm.reset();
          editForm.classList.remove('was-validated');

          document.getElementById('editItemType').value = item.type;
          document.getElementById('editAssetTag').value = item.assetTag;
          document.getElementById('editSerialNumber').value = item.serialNumber;
          document.getElementById('editLocation').value = item.location;
          document.getElementById('editStatus').value = item.status;
          document.getElementById('editNumeroIncidente').value = item.numeroIncidente || '';
          document.getElementById('editDescricaoPane').value = item.descricaoPane || '';
          document.getElementById('editFavorite').checked = item.favorite || false;
          document.getElementById('originalAssetTag').value = item.assetTag;

          // Afficher/Masquer les Champs de Maintenance
          toggleMaintenanceFields(item.status, '#editItemModal');

          bootstrap.Modal.getOrCreateInstance(document.getElementById('editItemModal')).show();
        }
      };

      // Mettre à Jour l'Item Édité
      document.getElementById('updateItemBtn').addEventListener('click', () => {
        const form = document.getElementById('editItemForm');
        if (form.checkValidity()) {
          const updatedItem = {
            type: document.getElementById('editItemType').value,
            assetTag: document.getElementById('editAssetTag').value.trim(),
            serialNumber: document.getElementById('editSerialNumber').value.trim(),
            location: document.getElementById('editLocation').value.trim(),
            status: document.getElementById('editStatus').value,
            numeroIncidente: document.getElementById('editNumeroIncidente').value.trim() || null,
            descricaoPane: document.getElementById('editDescricaoPane').value.trim() || null,
            favorite: document.getElementById('editFavorite').checked
          };

          // Vérifier les Doublons si Tag a Changé
          const originalTag = document.getElementById('originalAssetTag').value;
          const duplicate = inventoryData.some((item, index) => 
            (item.assetTag === updatedItem.assetTag || item.serialNumber === updatedItem.serialNumber) && index !== currentEditIndex
          );
          if (duplicate) {
            showAlert('danger', 'Un autre article avec ce Tag ou Numéro de Série existe déjà.');
            return;
          }

          // Mettre à Jour l'Item
          inventoryData[currentEditIndex] = updatedItem;
          saveData();
          updateAnalytics();
          updateCharts();
          updateFavoritesTable();
          form.reset();
          bootstrap.Modal.getInstance(document.getElementById('editItemModal')).hide();
          addModificationHistory(`Article mis à jour : ${updatedItem.assetTag}`);
          showAlert('success', 'Article mis à jour avec succès !');
        } else {
          form.classList.add('was-validated');
        }
      });

      // Fonction de Recherche avec Débouncing
      let debounceTimeout;
      document.getElementById('searchInput').addEventListener('input', function() {
        clearTimeout(debounceTimeout);
        const query = this.value.toLowerCase();
        debounceTimeout = setTimeout(() => {
          inventoryTable.setFilter(item => Object.values(item).some(value => String(value).toLowerCase().includes(query)));
        }, 300);
      });

      // Autocomplete pour la Recherche
      $("#searchInput").autocomplete({
        source: inventoryData.map(item => item.assetTag),
        minLength: 2
      });

      // Exporter en Excel
      document.getElementById('exportExcel').addEventListener('click', () => {
        const ws = XLSX.utils.json_to_sheet(inventoryData);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Inventaire");
        XLSX.writeFile(wb, "inventaire_export.xlsx");
        showAlert('success', 'Rapport Excel exporté avec succès !');
      });

      // Exporter en PDF
      const exportPDFFunction = () => {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();

        // Titre
        doc.setFontSize(16);
        doc.text("Rapport d'Inventaire", 14, 16);
        doc.setFontSize(12);
        doc.text(`Date : ${new Date().toLocaleDateString()}`, 14, 24);

        // Tableau
        const headers = [["Type", "Tag de l'Actif", "Numéro de Série", "Emplacement", "Statut"]];
        const data = inventoryData.map(item => [
          item.type,
          item.assetTag,
          item.serialNumber,
          item.location,
          item.status
        ]);

        doc.autoTable({
          head: headers,
          body: data,
          startY: 30,
          styles: { fontSize: 10 },
          columnStyles: {
            0: { cellWidth: 30 },
            1: { cellWidth: 40 },
            2: { cellWidth: 40 },
            3: { cellWidth: 40 },
            4: { cellWidth: 30 }
          },
          didDrawPage: (dataArg) => {
            // Numéro de page
            const pageCount = doc.internal.getNumberOfPages();
            doc.setFontSize(10);
            doc.text(`Page ${dataArg.pageNumber} sur ${pageCount}`, 190, 285, null, null, "right");
          }
        });

        // Sauvegarder le PDF
        doc.save(`inventaire_export_${new Date().toISOString().split("T")[0]}.pdf`);
        showAlert('success', 'Rapport PDF exporté avec succès !');
      };
      document.getElementById('exportPDF').addEventListener('click', exportPDFFunction);

      // Importer un Fichier
      document.getElementById('importFile').addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const validExtensions = ['.xlsx', '.csv', '.json'];
        const isValidExtension = validExtensions.some(ext => file.name.toLowerCase().endsWith(ext));

        if (!isValidExtension) {
          showAlert('danger', 'Format de fichier non pris en charge. Veuillez choisir un fichier .xlsx, .csv ou .json.');
          e.target.value = '';
          return;
        }

        const reader = new FileReader();
        reader.onload = (event) => {
          try {
            let newData;
            if (file.name.endsWith('.xlsx') || file.name.endsWith('.csv')) {
              const workbook = XLSX.read(event.target.result, { type: 'binary' });
              const sheetName = workbook.SheetNames[0];
              newData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
            } else if (file.name.endsWith('.json')) {
              newData = JSON.parse(event.target.result);
            }

            // Validation des Données Importées
            if (!Array.isArray(newData) || newData.length === 0 || !newData[0].hasOwnProperty('assetTag')) {
              throw new Error('Structure de données invalide');
            }

            // Vérifier les Doublons
            const existingAssetTags = new Set(inventoryData.map(item => item.assetTag));
            const existingSerialNumbers = new Set(inventoryData.map(item => item.serialNumber));
            const duplicates = newData.filter(item => 
              existingAssetTags.has(item.assetTag) || existingSerialNumbers.has(item.serialNumber)
            );

            if (duplicates.length > 0) {
              throw new Error(`Articles en double trouvés : ${duplicates.map(item => item.assetTag).join(', ')}`);
            }

            // Ajouter les Nouvelles Données
            inventoryData = [...inventoryData, ...newData];
            saveData();
            updateAnalytics();
            updateCharts();
            updateFavoritesTable();
            showAlert('success', 'Données importées avec succès !');
          } catch (error) {
            showAlert('danger', `Erreur lors de l'importation des données : ${error.message}`);
          }
          e.target.value = '';
        };

        if (file.name.endsWith('.json')) {
          reader.readAsText(file);
        } else {
          reader.readAsBinaryString(file);
        }
      });

      // Faire une Sauvegarde des Données
      document.getElementById('backupBtn').addEventListener('click', () => {
        const dataStr = JSON.stringify(inventoryData, null, 2);
        const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`;
        const exportFileDefaultName = 'sauvegarde_inventaire.json';

        const linkElement = document.createElement('a');
        linkElement.setAttribute('href', dataUri);
        linkElement.setAttribute('download', exportFileDefaultName);
        linkElement.click();

        showAlert('success', 'Données sauvegardées avec succès !');
      });

      // Restaurer les Données depuis une Sauvegarde
      document.getElementById('restoreFile').addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (event) => {
          try {
            const restoredData = JSON.parse(event.target.result);
            if (!Array.isArray(restoredData)) throw new Error('Format de données invalide.');

            inventoryData = restoredData;
            saveData();
            updateAnalytics();
            updateCharts();
            updateFavoritesTable();
            showAlert('success', 'Données restaurées avec succès !');
          } catch (error) {
            showAlert('danger', 'Erreur lors de la restauration des données. Veuillez sélectionner un fichier de sauvegarde valide.');
          }
          e.target.value = '';
        };
        reader.readAsText(file);
      });

      // Basculer le Mode Sombre
      document.getElementById('darkModeSwitch').addEventListener('change', function() {
        document.body.classList.toggle('dark-mode');
      });

      // Supprimer Tous les Articles
      document.getElementById('deleteAllBtn').addEventListener('click', () => {
        const modal = new bootstrap.Modal(document.getElementById('deleteAllConfirmModal'));
        modal.show();

        document.getElementById('confirmDeleteAllBtn').onclick = () => {
          inventoryData = [];
          saveData();
          updateAnalytics();
          updateCharts();
          updateFavoritesTable();
          inventoryTable.clearData();
          favoritesTable.clearData();
          showAlert('success', 'Tous les articles ont été supprimés avec succès !');
          modal.hide();
        };
      });

      // Ajouter un Rappel
      document.getElementById('add-reminder').addEventListener('click', () => {
        const reminderText = document.getElementById('reminder-text').value.trim();
        if (reminderText) {
          const remindersList = document.getElementById('reminders-list');
          const li = document.createElement('li');
          li.className = 'list-group-item d-flex justify-content-between align-items-center';
          li.textContent = reminderText;
          const deleteBtn = document.createElement('button');
          deleteBtn.className = 'btn btn-sm btn-danger delete-reminder';
          deleteBtn.setAttribute('aria-label', `Supprimer le rappel: ${reminderText}`);
          deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>';
          li.appendChild(deleteBtn);
          remindersList.appendChild(li);
          document.getElementById('reminder-text').value = '';
          saveReminders();
        } else {
          showAlert('warning', 'Le rappel ne peut pas être vide.');
        }
      });

      // Supprimer un Rappel
      document.getElementById('reminders-list').addEventListener('click', (e) => {
        if (e.target.closest('.delete-reminder')) {
          const li = e.target.closest('li');
          li.remove();
          saveReminders();
        }
      });

      // Fonction pour Sauvegarder les Rappels
      const saveReminders = () => {
        const reminders = Array.from(document.querySelectorAll('#reminders-list li'))
                              .map(li => li.firstChild.textContent.trim());
        localStorage.setItem('inventoryReminders', JSON.stringify(reminders));
      };

      // Charger les Rappels Sauvegardés
      const savedReminders = JSON.parse(localStorage.getItem('inventoryReminders') || '[]');
      savedReminders.forEach(reminder => {
        const remindersList = document.getElementById('reminders-list');
        const li = document.createElement('li');
        li.className = 'list-group-item d-flex justify-content-between align-items-center';
        li.textContent = reminder;
        const deleteBtn = document.createElement('button');
        deleteBtn.className = 'btn btn-sm btn-danger delete-reminder';
        deleteBtn.setAttribute('aria-label', `Supprimer le rappel: ${reminder}`);
        deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>';
        li.appendChild(deleteBtn);
        remindersList.appendChild(li);
      });

      // Mettre à Jour les Statistiques des Analyses
      const updateAnalytics = () => {
        document.getElementById('totalItems').textContent = inventoryData.length;
        document.getElementById('itemsInUse').textContent = inventoryData.filter(item => item.status === 'En Utilisation').length;
        document.getElementById('itemsInStock').textContent = inventoryData.filter(item => item.status === 'En Stock').length;
        document.getElementById('itemsInMaintenance').textContent = inventoryData.filter(item => item.status === 'En Maintenance').length;
        document.getElementById('retiredItems').textContent = inventoryData.filter(item => item.status === 'Retiré').length;
      };

      // Mettre à Jour les Graphiques
      const updateCharts = () => {
        const deviceTypes = inventoryData.reduce((acc, item) => {
          acc[item.type] = (acc[item.type] || 0) + 1;
          return acc;
        }, {});

        const itemStatuses = inventoryData.reduce((acc, item) => {
          acc[item.status] = (acc[item.status] || 0) + 1;
          return acc;
        }, {});

        // Graphique des Types d'Appareils
        if (deviceTypeChart) {
          deviceTypeChart.data.labels = Object.keys(deviceTypes);
          deviceTypeChart.data.datasets[0].data = Object.values(deviceTypes);
          deviceTypeChart.update();
        } else {
          deviceTypeChart = new Chart(document.getElementById('deviceTypeChart'), {
            type: 'pie',
            data: {
              labels: Object.keys(deviceTypes),
              datasets: [{
                label: 'Type d\'Appareil',
                data: Object.values(deviceTypes),
                backgroundColor: ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#66bb6a'],
              }]
            },
            options: {
              responsive: true,
              plugins: {
                legend: {
                  position: 'top',
                },
                title: {
                  display: true,
                  text: 'Répartition des Types d\'Appareils'
                }
              }
            }
          });
        }

        // Graphique des Statuts des Articles
        if (itemStatusChart) {
          itemStatusChart.data.labels = Object.keys(itemStatuses);
          itemStatusChart.data.datasets[0].data = Object.values(itemStatuses);
          itemStatusChart.update();
        } else {
          itemStatusChart = new Chart(document.getElementById('itemStatusChart'), {
            type: 'bar',
            data: {
              labels: Object.keys(itemStatuses),
              datasets: [{
                label: 'Statut des Articles',
                data: Object.values(itemStatuses),
                backgroundColor: '#42a5f5'
              }]
            },
            options: {
              responsive: true,
              scales: {
                y: {
                  beginAtZero: true
                }
              },
              plugins: {
                legend: {
                  display: false
                },
                title: {
                  display: true,
                  text: 'Statut des Articles'
                }
              }
            }
          });
        }
      };

      // Afficher/Masquer les Champs de Maintenance
      const toggleMaintenanceFields = (status, modalSelector) => {
        const selector = modalSelector || '#addItemModal';
        const fields = document.querySelectorAll(`${selector} .maintenance-field`);
        fields.forEach(field => {
          field.style.display = (status === 'En Maintenance') ? 'block' : 'none';
        });
      };

      // Écouter les Changements de Statut dans le Formulaire d'Ajout
      document.getElementById('status').addEventListener('change', function() {
        toggleMaintenanceFields(this.value);
      });

      // Écouter les Changements de Statut dans le Formulaire d'Édition
      document.getElementById('editStatus').addEventListener('change', function() {
        toggleMaintenanceFields(this.value, '#editItemModal');
      });

      // Afficher la Modal de Confirmation de Suppression
      const showDeleteConfirmModal = (item) => {
        const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
        modal.show();

        document.getElementById('confirmDeleteBtn').onclick = () => {
          deleteItem(item);
          modal.hide();
        };
      };

      // Supprimer un Item
      const deleteItem = (item) => {
        const index = inventoryData.findIndex(i => i.assetTag === item.assetTag);
        if (index > -1) {
          inventoryData.splice(index, 1);
          saveData();
          updateAnalytics();
          updateCharts();
          updateFavoritesTable();
          inventoryTable.deleteRow(index);
          favoritesTable.deleteRow(index);
          addModificationHistory(`Supprimé l'article : ${item.assetTag}`);
          showAlert('success', 'Article supprimé avec succès !');
        }
      };

      // Mettre à Jour les Statistiques et Graphiques au Chargement
      updateAnalytics();
      updateCharts();
    });
  </script>
</body>