<!-- Page d'accueil nouveau parcours -->
<div class="section">
  <h4 class="center-align">Historique des parcours</h4>
</div>
<div class="divider"></div>

<div class="section center-align">

  <div class="row">
  </div>

  <div class="row">
    <h6 class="red-text text-darken-4">Vous pouvez rechercher votre numéro de parcours à partir de l'historique suivant
    </h6>
  </div>

  <div class="container">
    <div id="error" class="error" style="display: none;"></div>
    <div id="divBtnFilter" class="divBtnFilter">
      <div id="divExtractFilter" class="divExtractFilter">
        <label>Extraction filtrée</label>
        <button class="btn" id="exportCSVFilter" type="button"><i class="fa-solid fa-file-csv"></i></button>
        <button class="btn" id="exportXlxsFilter" type="button"><i class="fa-solid fa-file-excel"></i></button>
      </div>

      <div id="divExtractAll" class="divExtractAll">
        <label>Extraction base complète</label>
        <button class="btn" id="exportCSV" type="button"><i class="fa-solid fa-file-csv"></i></button>
        <button class="btn" id="exportXlxs" type="button"><i class="fa-solid fa-file-excel"></i></button>
      </div>
      <div id="divToggleSearch">
        <button class="btn" id="toggleSearch" type="button">Activer la recherche par colonne</button>
      </div>

    </div>
    <div>
      <table id="historiqueParcours" style="overflow-x: auto; width: 100%;">
        <thead>
          <tr>
            <th>Numéro du Parcours</th>
            <th>Date de Création</th>
            <th>Matricule</th>
            <th>Dernier Utilisateur</th>
            <th>Region</th>
            <th>Numéro Saisine</th>
            <th>Numéro Contrat</th>
            <th>Produit</th>
            <th>Type</th>
            <th>Numéro de Portefeuille</th>
            <th>Nom Intermediaire</th>
            <th>Numéro de Client</th>
            <th>Nom Client</th>
            <th class="no-export">Reprendre</th>
            <th class="no-export">Générer</th>
          </tr>
          <tr>
            <th><input type="text" placeholder="Parcours"></th>
            <th><input type="text" placeholder="Date"></th>
            <th><input type="text" placeholder="Matricule"></th>
            <th><input type="text" placeholder="Utilisateur"></th>
            <th><input type="text" placeholder="Région"></th>
            <th><input type="text" placeholder="Saisine"></th>
            <th><input type="text" placeholder="Contrat"></th>
            <th><input type="text" placeholder="Produit"></th>
            <th><input type="text" placeholder="Type"></th>
            <th><input type="text" placeholder="Portefeuille"></th>
            <th><input type="text" placeholder="Intermédiaire"></th>
            <th><input type="text" placeholder="num Client"></th>
            <th><input type="text" placeholder="Nom Client"></th>
            <th></th> <!-- Empty cell for the actions column -->
            <th></th> <!-- Empty cell for the actions column -->
          </tr>
        </thead>
        <tbody id="parcoursTableBody">
          <!-- Les lignes de parcours seront insérées ici par parcours.js -->
        </tbody>
      </table>
    </div>
  </div>

  <link rel="stylesheet" href="/css/historiqueParcours.css">
  <script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script>

  <!-- jQuery (necessary for DataTables) -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <!-- DataTables CSS -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">

  <!-- Responsive DataTables CSS -->
  <link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="/css/global.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

  <!-- DataTables JS -->
  <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

  <!-- Responsive DataTables JS -->
  <script type="text/javascript"
    src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>

</div>

<script type="module" src="/js/historiqueParcours.js"></script>