<div class="corps">
    <div class="card">
      <div class="head-main">
        <h2>Saisie de congé</h2>
        <a href="/vacation/historic/<%= employee.id %>">
                <button class="button-planning">
                    <!--<img src="/images/planning.png" class="svg-icon" alt="">-->
                    <ion-icon name="home-outline"></ion-icon>
                    <span class="label">Historique</span>
                </button>
            </a>
      </div>
      <div class="card-body">
        <% if (errors && errors.length) { %>
          <div class="alert alert-danger">
            <ul>
              <% errors.forEach(function(error) { %>
                <p><%= error.msg %></p>
              <% }) %>
            </ul>
          </div>
        <% } %>              
        <form method="post" action="/vacation/saisi" class="mt-3">          
          <div class="row">
            <div class="col-md-4 form-group">
              <label for="name">Recherche</label>
              <input type="search" class="form-control form-control-sm" id="nom_matricule" placeholder="RAKOTO 001">
            </div>            
            <div class="col-md-2 form-group">
              <label for="start_date">Date de début</label>
              <input type="date" class="form-control form-control-sm" id="start_date" name="start">
            </div>
            <div class="col-md-2 form-group">
              <label for="start_hour">Heure de début</label>
              <select name="start_hour" class="form-select form-select-sm" id="start_hour">
                <option value="MT" selected>Matin</option>
                <option value="MD">Midi</option>
              </select>
            </div>
            <div class="col-md-2 form-group">
              <label for="end_date">Date de fin</label>
              <input type="date" class="form-control form-control-sm" id="end_date" name="end" required>
            </div>          
            <div class="col-md-2 form-group">
              <label for="end_hour">Heure de fin</label>
              <select name="end_hour" class="form-select form-select-sm" id="end_hour">
                <option value="MD">Midi</option>
                <option value="SR" selected>Soir</option>
              </select>
            </div>
          </div>
          <div class="row info-custom">
            <input type="hidden" name="id" id="id" required>
            <div class="col-md-3 form-group">
              <label for="matricule">Matricule</label>
              <input type="text" class="form-control form-control-sm" id="matricule" name="matricule" readonly required>
            </div>
            <div class="col-md-6 form-group">
              <label for="name">Nom et prénom(s)</label>
              <input type="text" class="form-control form-control-sm" id="name" name="name" readonly required>
            </div>
            <div class="col-md-3 form-group">
              <label for="solde">Solde</label>
              <input type="text" class="form-control form-control-sm" id="solde" name="solde" required>
            </div>
          </div>                          
          
          <input type="submit" value="Ok" class="btn btn-primary">
        </form>              
      </div>
    </div>
  </div>             
  
  
  <script>
    var employees = [];
    var employeeName = "";
  </script>
  
  <% if(employees) { %>
    <% employees.forEach(employee => { %>
      <script>
        employee = {};
        employee.id = "<%= employee.id %>";
        employee.matricule = "<%= employee.matricule %>";
        employee.name = "<%= employee.name_employee + ' ' + employee.last_name_employee %>";                      
        employees.push(employee);      
      </script>
    <% })  %>
  <% } %>

  <% if(employee) { %>
    <script>
      employeeName = "<%= employee.name_employee %> <%= employee.last_name_employee %>";
    </script>
  <% }%>
  
  <script>
    console.log(employees)
    let info_custom = document.querySelector('.info-custom');
    // info_custom.style.display = 'none';
    let nom_matricule_search = document.getElementById("nom_matricule");  
    let id = document.getElementById('id');  
    let matricule = document.getElementById('matricule');
    let name = document.getElementById('name');  
  
    //  Valeur pour le demande avec id et valeur initial pour le demande sans id
    info_custom.style.display = 'flex';
    id.value = employee.id;    
    nom_matricule_search.value = employeeName;  
    nom_matricule_search.dispatchEvent(new Event('input'));    
  
    //  La valeur dans nom_matricule change
    nom_matricule_search.addEventListener('input', () => {   
      console.log('dfksj');   
      let value = nom_matricule_search.value.toLowerCase();
      let empl_found = false;
      for(const employee of employees) {
        const nom = employee.name.toLowerCase();
        const n_matricule = employee.matricule;      
        
        if (nom.includes(value) || n_matricule.includes(value)) {
          console.log(employee)
          info_custom.style.display = 'flex';
          id.value = employee.id;
          matricule.value = employee.matricule;
          name.value = employee.name;                    
          empl_found = true;
        }        
        
        // Non trouver ou il n'y a rien dans le formulaire nom_matricule
        if(!empl_found || value == '') {        
          //  Vider les formulaires et ne pas afficher
          info_custom.style.display = 'none';
          id.value = '';
          matricule.value = '';
          name.value = '';          
          found = false;
        }
      }
    });

    nom_matricule_search.dispatchEvent(new Event('input'));
  
    
  </script>