
<div class="corps">
  <div class="card">
    <div class="head-main">
      <h2>Ajouter un employé</h2>
    
      <a href="/">
        <button class="button-planning">
          <!--<img src="/images/planning.png" class="svg-icon" alt="">-->
          <ion-icon name="home-outline"></ion-icon>
          <span class="label">Accueil</span>
        </button>
      </a>
    </div>
    <div class="card-body">
      <!-- <h4 class="card-title">Formulaire d'inscription</h4> -->
      <form method="POST" action="/employee/save" enctype="multipart/form-data" class="form-sample g-3 needs-validation">
        <!-- PROFIL -->
        <div class="row profil-container">  
          <div class="col-md-9">
            <h3>Profil</h3>
          </div>
          <div class="col-md-3">
            <label for="inputProfil">Insérer un photo</label>
            <input type="file" name="photo" id="inputProfil" accept=".jpeg, .jpg, .png, .img" >
            <!-- <div class="profil">
              <img src="" alt="Photo de profil">
            </div>             -->
          </div>          
        </div>
        <div class="row">
          <div class="col-md-2">
            <div class="form-group">
              <label for="matricule">Matricule</label>
              <input type="text" class="form-control form-control-sm" id="matricule" name="matricule" maxlength="13" required/>
            </div>
          </div>
          <div class="col-md-5">
            <div class="form-group">
              <label for="nameEmployee">Nom</label>
              <input type="text" class="form-control form-control-sm" id="nameEmployee" name="nameEmployee" required/>
            </div>
          </div>
          <div class="col-md-5">
            <div class="form-group">
              <label for="lastNameEmployee">Prénom(s)</label>
              <input type="text" class="form-control form-control-sm" id="lastNameEmployee" name="lastNameEmployee"/>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <br>
              <label for="cv">Insér. CV</label>
              <input type="file" class="form-control form-control-sm" id="cv" name="cv"/>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label for="sexEmployee">Genre</label>
              <select class="form-control form-control-sm" id="sexEmployee" name="sexEmployee" required>
                <option>Masculin</option>
                <option>Féminin</option>
              </select>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label for="ddnEmployee">Date de naissance</label>
              <input type="date" class="form-control form-control-sm" id="ddnEmployee" name="ddnEmployee" />
            </div>
          </div>
          <div class="col-md-5">
            <div class="form-group">
              <label for="placeDdnEmployee">Lieu de naissance</label>
              <input type="text" class="form-control form-control-sm" id="placeDdnEmployee" name="placeDdnEmployee"/>
            </div>
          </div>
        </div>

        <!-- ADRESSE -->
        <h2>Adresse</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label for="addrEmployee">Adresse</label>
              <input type="text" class="form-control form-control-sm" id="addrEmployee" name="addrEmployee" />
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label for="villeEmployee">Ville:</label>
              <input type="text" class="form-control form-control-sm" id="villeEmployee" name="villeEmployee"/>
            </div>
          </div>
        </div>

        <!-- CIN -->
        <h2>CIN</h2>
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <label for="CINEmployee">CIN:</label>              
              <input type="text" class="form-control form-control-sm" name="CINEmployee" minlength="12" maxlength="15"/>                              
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label >Date </label>              
              <input type="date" class="form-control form-control-sm" name="dateCINEmployee"/>              
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label>Lieu </label>              
              <input type="text" class="form-control form-control-sm" name="placeCINEmployee"/>              
            </div>
          </div>
        </div>

        <h2>Situation matrimoniale</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group ms-4">
              <div class="form-check">
                <input type="radio" class="form-check-input" name="martialStatus" id="optionsRadios1" value="single" checked >
                <label class="form-check-label" for="optionsRadios1">Célibataire</label>
              </div>
              <div class="form-check">
                <input type="radio" class="form-check-input" name="martialStatus" id="optionsRadios2" value="married" >
                <label class="form-check-label" for="optionsRadios2">Marié(e)</label>
              </div>
              <div class="form-check">
                <input type="radio" class="form-check-input" name="martialStatus" id="optionsRadios3" value="divorced">
                <label class="form-check-label" for="optionsRadios3">Divorcé(e)</label>
              </div>
            </div>
          </div>
          
          <div class="col-md-6">
            <div class="form-group">
              <label for="nombreEnfants">Nombre d'enfant(s):</label>              
              <select name="nbrChild" class="form-select" id="nombreEnfants" aria-label="size 3 select example" onchange="changeNbrChild(event)">
                <option selected value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
              </select>
            </div>
          </div>
        </div>                  
        <div id="formEnfants" class="row">
            <!-- Les formulaires pour les enfants seront générés ici -->        
        </div>

        <!-- Contact -->
        <h2>Contact</h2>
        <div class="row">
          <div class="col-md-3">
            <div class="form-group">
              <label for="contactAirtel">Airtel</label>              
              <input type="tel" class="form-control form-control-sm" name="contactAirtel" minlength="10" maxlength="13" placeholder="033"/>        
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label for="contactTelma">Telma</label>              
              <input type="tel" class="form-control form-control-sm" name="contactTelma" minlength="10" maxlength="13" placeholder="034"/>              
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label for="contactOrange">Orange</label>              
              <input type="tel" class="form-control form-control-sm" name="contactOrange" minlength="10" maxlength="13" placeholder="032"/>              
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label for="contactFlotte">Flotte</label>              
              <input type="tel" class="form-control form-control-sm" name="contactFlotte"/>              
            </div>
          </div>
        </div>

        <h2>Autres</h2>
        <div class="row">
          <div class="col-md-2">
            <div class="form-group">
              <label for="hiringDate">Date d'embauche</label>
              <input type="date" id="hiringDate" class="form-control form-control-sm" name="hiringDate"/>            
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label for="fonction">Sélectionnez une fonction </label>
              <select class="form-control form-control-sm" id="function" name="function">
                <option value="0">Sélectionnez une fonction</option>
                <% fonctions.forEach(function(fonction) { %>
                  <option value="<%= fonction.id %>"><%= fonction.nameFunction %></option>
                <% }); %>
              </select>
            </div>
          </div>   
          <div class="col-md-2">
            <div class="form-group">
              <label for="dateFunct">Date de début</label>
              <input type="date" class="form-control form-control-sm" name="dateFunct" id="dateFunct">
            </div>
          </div> 
          <div class="col-md-3">
            <!-- <div class="form-group">
              <label for="fonction">Chef</label>
              <select class="form-control form-control-sm" id="function" name="boss">
                <option value="0">Sélectionnez un chef</option>
                <%// admins.forEach(function(admin) { %>
                  <option value="<%= //admin.id %>"><%= //admin.firstName %> <%= //admin.lastName %></option>
                <%// }); %>
              </select>
            </div> -->
            <div class="form-group">              
              <label for="category">Catégorie</label>
              <input type="text" name="category" class="form-control form-control-sm" id="category">
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label for="numeroCNAPS">Numéro CNAPS</label>              
              <input type="number" id="numeroCNAPS" class="form-control form-control-sm" min="0" name="numCNAPS"/>              
            </div>
          </div>      
        </div>        
        
        <div class="row">
          <div class="col-md-3">
            <div class="form-group">
              <label for="permisDeConduire">Permis de conduire</label>              
              <select name="permisDeConduire" class="form-select" aria-label="size 3 select example">
                <option selected>Aucun</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="A,B">A,B</option>
                <option value="B,C">B,C</option>
                <option value="A,B,C">A,B,C</option>
                <option value="B,D">B,D</option>
                <option value="A,B,D">A,B,D</option>
                <option value="A,B,C,D">A,C,B,D</option>
                <option value="B,E">B,E</option>
                <option value="A,B,E">A,B,E</option>
                <option value="A,B,C,E">A,B,C,E</option>
                <option value="B,C,D,E,F">A,B,C,D,E</option>
                <option value="A,B,C,D,E">A,B,C,D,E</option>
                <option value="complet">Complet</option>
              </select>              
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>Maladie héréditaire</label>              
              <input type="text" class="form-control form-control-sm" name="heredIllness"/>              
            </div>
          </div>                         
          <div class="col-md-3">
            <div class="form-group">
              <label>Personne d'urgence</label>              
              <input type="text" class="form-control form-control-sm" name="personContactEmergency" />                              
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>Contact</label>
              <input type="tel" class="form-control form-control-sm" name="contactPersonEmergency" minlength="10" maxlength="13" placeholder=""/>                              
            </div>
          </div>                             
        </div>
        <div class="row justify-content-end">
          <div class="col-md-6 text-end">
            <button type="submit" class="btn btn-primary">Valider</button>
            <button class="btn btn-light">Annuler</button>
          </div>
        </div>
        
      </form>
    </div>
  </div>
</div>               

<script>
  const fileInput = document.getElementById('inputProfil');
    const label = document.querySelector('label[for="inputProfil"]');

    fileInput.addEventListener('change', function() {
    if (fileInput.files.length > 0) {
        //  Changer 'Sélectionnez un fichier Excel ' en nom du fichier
        label.textContent = fileInput.files[0].name;
    } else {
        label.textContent = 'Insérer un photo';
    }
    });

    const cvInput = document.getElementById('cv');
    const labelCv = document.querySelector('label[for="cv"]');
    cvInput.addEventListener('change', () => {
      if(cvInput.files.length > 0) {
        labelCv.textContent = cvInput.files[0].name;
      }
      else {
        labelCv.textContent = 'Insér. CV'
      }
    });
    
</script>


<script>
    document.addEventListener('DOMContentLoaded', function() {
    var nombreEnfantsInput = document.getElementById('nombreEnfants');
    var formEnfants = document.getElementById('formEnfants');

    nombreEnfantsInput.addEventListener('change', function() {
      var nombreEnfants = parseInt(nombreEnfantsInput.value);

      // Vide le contenu précédent du formulaire
      formEnfants.innerHTML = '';

      for (var i = 1; i <= nombreEnfants; i++) {
        var cardDiv = document.createElement('div');
        cardDiv.className = 'col-md-4 ';

        var cardHeader = document.createElement('div');
        cardHeader.className = 'card-header';
        cardHeader.textContent = 'Enfant ' + i;

        var cardBody = document.createElement('div');
        cardBody.className = 'card-body';

        var dateNaissanceLabel = document.createElement('label');
        dateNaissanceLabel.setAttribute('for', 'dateNaissanceEnfant' + i);
        dateNaissanceLabel.textContent = 'Date de naissance :';

        var dateNaissanceInput = document.createElement('input');
        dateNaissanceInput.setAttribute('type', 'date');
        dateNaissanceInput.className = 'form-control';
        dateNaissanceInput.setAttribute('id', 'dateNaissanceEnfant' + i);
        dateNaissanceInput.setAttribute('name', 'ddnChild');
        dateNaissanceInput.required = true;

        var sexeLabel = document.createElement('label');
        sexeLabel.setAttribute('for', 'sexeEnfant' + i);
        sexeLabel.textContent = 'Sexe :';

        var sexeSelect = document.createElement('select');
        sexeSelect.className = 'form-control';
        sexeSelect.setAttribute('id', 'sexeEnfant' + i);
        sexeSelect.setAttribute('name', 'sexeChild');
        sexeSelect.required = true;

        var optionMasculin = document.createElement('option');
        optionMasculin.value = 'M';
        optionMasculin.textContent = 'Masculin';

        var optionFeminin = document.createElement('option');
        optionFeminin.value = 'F';
        optionFeminin.textContent = 'Féminin';

        sexeSelect.appendChild(optionMasculin);
        sexeSelect.appendChild(optionFeminin);

        cardBody.appendChild(dateNaissanceLabel);
        cardBody.appendChild(dateNaissanceInput);
        cardBody.appendChild(sexeLabel);
        cardBody.appendChild(sexeSelect);

        cardDiv.appendChild(cardHeader);
        cardDiv.appendChild(cardBody);

        formEnfants.appendChild(cardDiv);
      }
    });
  });

</script>