<!DOCTYPE html>
<html lang="en">
<head>
  <title>Export Aidimpact</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="description" content="" />
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <link rel="icon" href="img/favicon.png">
  <link href="vendor/fontawesome-free-6.1.2-web/css/all.css" rel="stylesheet">
</head>
<body>
  <div id="fadein"></div>
  <style>
    /* For best practice, move CSS below to an external CSS file. */
    @keyframes fadeinall {
    0% {
      opacity: 1; }
    97% {
      opacity: 0; }
    98% {
      opacity: 0;
      -webkit-transform: translateY(0);
      transform: translateY(0); }
    99% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%); }
    100% {
      opacity: 0;
      z-index: -1; } }
    #fadein {
      opacity: 1;
      position: fixed;
      width: 100%;
      height: 100%;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      background-color: #fff;
      z-index: 999;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation: fadeinall 1s normal both;
      animation: fadeinall 1s normal both;
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s; }
  </style>
  
  <script src="vendor/jquery/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  <script src="vendor/bootstrap/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <script src="vendor/datatable/datatables.min.js" crossorigin="anonymous"></script>
  <script type="text/javascript">
  window.onload = function(){
    setTimeout(function(){
      document.getElementById("fadein").remove();
    },1000);
  };
  </script>
  <div class="container">
  <nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
  <div style="vertical-align: middle;">
    <img src="src/img/logo-full.png" width="100" height="100" class="d-inline-block align-top" alt="">
    Exports AidImpact
</div>
  </a>
</nav>
<?php
//Chargement de la liste des imports
include_once 'load_data.php';

?>
<table id="table" class="table">
<thead>
  <tr>
  <td>Date import</td>
  <td>Nom du fichier</td>
  <td>Nb lignes importées</td>
  <!-- <td>Fichier comptable</td> -->
  <td>Fichier AidImpact</td>
  <td>Suppression</td>
</tr>
</thead>
<tbody>
<?php echo $tr; ?>
</tbody>
</table>
<form id="form" action="action.php?action=load" method="post" enctype="multipart/form-data">
      <div class="input-group">
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="customFileInput" aria-describedby="customFileInput" name="file">
          <label class="custom-file-label" for="customFileInput">Sélectionner le fichier comptable</label>
        </div>
        <div class="input-group-append">
           <input id="btn_upload" onclick="function(){document.body.style.cursor='wait'};upload();" type="submit" name="submit" value="Charger le fichier" class="btn btn-primary">
        </div>
      </div>
  </form>

<!-- <button type="button" class="btn btn-warning" aria-label="Left Align">
 <span>Importer un fichier comptable</span>

 </button> -->
</div>
  
</body>
<script type="text/javascript">
  
  function upload()
  {
    //alert(id);
    $('selector').css('cursor', 'wait');
    $('#form').attr('action', 'action.php?action=load');
    $('#form').submit();
  }

  function remove(id)
  {
    //alert(id);
    window.location.replace('action.php?action=remove&id='+id);
    $('#form').attr('action', 'action.php?action=remove&id='+id);
    $('#form').submit();
  }
  function download(id)
  {
    //alert(id);
    
    window.location.replace('action.php?action=download&id='+id);
    $('#form').attr('action', 'action.php?action=downoad&id='+id);
    $('#form').submit();
  }

$(document).ready(function () {

 
  // $( "#table" ).append(
  //   "<tr><td>28/08/2022 13:02:30</td><td>GLA112-Z03 Z09 Z14A Z06 Z06A - originecompta.csv</td><td>100</td><td><button type='button' class='btn btn-primary' aria-label='Left Align'>  <i class='fa-solid fa-download'></i></td><td><button type='button' class='btn btn-success' aria-label='Left Align'>  <i class='fa-solid fa-download'></i></td><td><button type='button' class='btn btn-danger' aria-label='Left Align'>  <i class='fa-solid fa-trash'></i></td></tr>");
  
  
  // for (let pas = 0; pas < 30; pas++) {
  // $( "#table" ).append(
  //   "<tr><td>28/08/2022 13:02:30</td><td>GLA112-Z03 Z09 Z14A Z06 Z06A - originecompta.csv</td><td>100</td><td><button type='button' class='btn btn-primary' aria-label='Left Align'>  <i class='fa-solid fa-download'></i></td><td><button type='button' class='btn btn-success' aria-label='Left Align'>  <i class='fa-solid fa-download'></i></td><td></td></tr>");
  // }
    $('#table').DataTable(
      {
        language: {
              url: 'datatables.french.json'
          },
          bSort: false
      }

    );
});

</script>
</html>