 <?php include_once PUBLIC_PATH. '/files_to_include/header_content.php'; ?>
<!-- =============================================== -->

  <!-- Left side column. contains the sidebar -->
  <aside class="main-sidebar" id="aside_menu" >
      <section class="sidebar">
          <ul class="sidebar-menu">
            <?php include_once PUBLIC_PATH. '/files_to_include/menu.php'; ?>
          </ul>
      </section>
  </aside>
   <!-- Content Wrapper. Contains page content -->
   <div class="content-wrapper " style="background-color: white; td{border: solid  2px #000; }">
   

    <!-- Main content -->
    <section class="content">
          
           <div class="row">
                <div class="col-lg-offset-1 col-lg-11">
                <div class="col-lg-12">
                   
                    <h3 class="page-header"><i class="fa fa-plus" style="color:blue;"></i> Création des utilisateurs</h3>
                    <a href='<?php echo $this->url(array('controller'=>'Utilisateur','action'=>'index'),null, true);?>'>Retour à la liste</a>
                    <div class="clearfix"></div>
                    <br>
                </div>
                <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li ><a href="#civilite" id="civil" data-toggle="tab">Civilité</a></li>
              <li ><a href="#parametre" data-toggle="tab">Paramètres</a></li>
            </ul>
            <div class="tab-content">
               <div class="tab-pane" id="civilite">
                <form class="form-horizontal" id="createuser">
                  <div class="form-group">
                      <div class="col-sm-4">
                    <label for="nom" class="control-label">Nom / Surname</label><label style="color:red;">&nbsp; *&nbsp;</label>
                      </div>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="nom" placeholder="Nom/Surname" required="">
                    </div>
                  </div>
                  <div class="form-group">
                      <div class="col-sm-4">
                    <label for="nom" class="control-label">Prenoms / Christian Names</label>
                      </div>
                   

                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="prenom" placeholder="Prenoms/Christian Names">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-4">
                    <label for="nom" class="control-label">Sexe / Sex</label><label style="color:red;">&nbsp; *&nbsp;</label>
                      </div>
                    <div class="col-sm-8">
                        
                     <select id="sexe" name="sexe" class="form-control selectpicker">
                        <option value="M">Homme</option>
                        <option value="F">Femme</option>  
                          
                    </select>
                    </div>
                  </div>
                    <div class="form-group" id="fille" style="display: none;">
                      <div class="col-sm-4">
                    <label for="nom" class="control-label">Nom jeune fille / Maiden</label><label style="color:red;"></label>
                      </div>
                    <div  class="col-sm-8">
                        <input class="form-control" placeholder="Nom jeune fille / Maiden Name"  id="nomJeune"/>
                    </div>
                  </div>
                  <div class="form-group">
                      
                      <div class="col-sm-4">
                    <label for="nom" class="control-label">Né(e) le / Born on</label><label style="color:red;">&nbsp; *&nbsp;</label>
                      </div>
                    <div  class="col-sm-8">
                        <input class="form-control picker" placeholder="Né(e) le / Born on" required="" id="date" required="true"/>
                    </div>
                  </div>
                     <div class="form-group">
                         <div class="col-sm-4">
                    <label for="lieu" class="control-label">Lieu Naissance/Place of birth</label>
                         </div>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="lieu" placeholder="Lieu Naissance/Place of birth">
                    </div>
                  </div>
                    <div class="form-group">
                     <div class="col-sm-4">
                    <label for="nom" class="control-label">Nationalité / Nationality</label><label style="color:red;">&nbsp; *&nbsp;</label>
                      </div>
                   
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="nationalite" placeholder="Nationalité/Nationality" required="true">
                    </div>
                  </div>
                    
                  <div class="form-group">
                       <div class="col-sm-4">
                    <label for="nom" class="control-label">Telephone / Phone</label><label style="color:red;">&nbsp; *&nbsp;</label>
                      </div>
                 

                    <div class="col-sm-8">
                        <input id="telephone" type="text" class="form-control" data-inputmask='"mask": "+237 999 99 99 99"' data-mask required="true">
                    </div>
                  </div>
                   
                  <div class="form-group">
                      <div class="col-sm-4">
                    <label for="nom" class="control-label">Passport ou carte d'identié N°</label><label style="color:red;">&nbsp; *&nbsp;</label>
                      </div>
                    

                    <div class="col-sm-8">
                        <input type="tel" class="form-control" id="cni" placeholder="Passport ou carte d'identié N°/ Passport or identify card N°" required="true">
                    </div>
                  </div>
                     <div class="form-group">
                         <div class="col-sm-4">
                      <label for="delivre" class="control-label">Délivré le / Delivered on the</label>
                      </div>
                    <div  class="col-sm-4">
                        <input class="form-control picker" placeholder="Délivré le / Delivered on the" required="" id="delivrer"/>
                        
                    </div>
                       <div  class="col-sm-4">
                        <input type="text" class="form-control"  placeholder=" à " required="" id="delivrerLieu"/>
                    </div>
                  </div>
                
                  <div class="form-group">
                    <div class="col-sm-offset-9 col-sm-3">
                        <button type="submit" class="btn btn-microsoft enreg">Enregistrer</button>
                      <button type="reset" class="btn btn-microsoft annuler">Annuler</button>
                    </div>
                  </div>
              
              </div>
              <!-- /.tab-pane -->
              
              <!-- /.tab-pane -->

              <div class="tab-pane" id="parametre">
                <div class="form-horizontal">
                  <div class="form-group">
                     <div class="col-sm-4">
                    <label for="login" class="control-label">Profil</label><label style="color:red;">&nbsp; *&nbsp;</label>
                      </div>

                    <div class="col-sm-8">
                      <select class='form-control selectpicker'  data-live-search="true" id="profil">
                              <?php
                                foreach ( $this->listeProfils as $profil ){
                                    ?>
                              <option value="<?= $profil->getIdprofil();?>"><?php echo $profil->getNom();?></option>
                             <?php   }
                              ?>
                    </select>
                    </div>
                  </div>
                  <div class="form-group">
                      <div class="col-sm-4">
                    <label for="login" class="control-label">Login</label><label style="color:red;">&nbsp; *&nbsp;</label>
                      </div>

                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="login" placeholder="Login" onkeyup="BuildPWD();" required="true">
                    </div>
                  </div>
                  <div class="form-group">
                      <div class="col-sm-4">
                          <label for="password" class="control-label">Password</label>
                      </div>

                    <div class="col-sm-8">
                        <input type="password" class="form-control" id="password" placeholder="Password" readonly="">
                    </div>
                  </div>
<!--                  <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">Confirmer password</label>

                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="confirmation" placeholder="Confirm Password">
                    </div>
                  </div>-->
                  <div class="form-group">
                    <div class="col-sm-offset-9 col-sm-3">
                        <button type="submit" class=" btn btn-microsoft enreg">Enregistrer</button>
                        <button type="reset" class=" btn btn-microsoft annuler">Annuler</button>
                    </div>
                  </div>
                </div>
                </form>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div>
            </div>
          
          <!-- /.nav-tabs-custom -->
        </div>
     

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 <?php include_once PUBLIC_PATH. '/files_to_include/footer_content.php'; ?>
  
   	 <script src="<?php echo $this->baseUrl('script/jquery.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/bootstrap.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/app.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/i18next-1.7.1.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/metisMenu.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/sb-admin-2.js');?>"></script>
    <script src="<?php echo $this->baseUrl("script/jquery.dataTables.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/dataTables.bootstrap.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/dataTables.buttons.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/pdfmake.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/vfs_fonts.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/buttons.html5.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/jquery.toast.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl('script/loadingoverlay.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl("script/jquery.datetimepicker.full.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/bootstrap.select.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/moment.js");?>"></script>
    <!-- FastClick -->
    <script src="<?php echo $this->baseUrl('script/jquery.inputmask.js');?>"></script>
<script src="<?php echo $this->baseUrl('script/fastclick.js');?>"></script>
<!-- AdminLTE App -->
<script src="<?php echo $this->baseUrl('script/adminlte.min.js');?>"></script>
<script src="<?php echo $this->baseUrl('script/demo.js');?>"></script>
    <script type="text/javascript">
       
      
        $(document).ajaxSend(function(event, jqxhr, settings){
            $.LoadingOverlay("show");
        });
        
        $(document).ajaxComplete(function(event, jqxhr, settings){
            $.LoadingOverlay("hide");
        });

    jQuery.datetimepicker.setLocale('fr');
            $(".picker").datetimepicker({
                 format: 'd-m-Y'
      });
      $('[data-mask]').inputmask();
    function BuildPWD()
    { 
        var nom = $("#nom").val();
        var login = $("#login").val();
        
        $("#password").val(login) ;
        //$("#passwordValidation").val(nom+login+annee) ;
    }
   $('#civil').click();
       $('#password').keyup(function(){
    if($(this).val().length < 8){ // si la chaÃ®ne de caractÃ¨res est infÃ©rieure Ã  5
        $(this).css({ // on rend le champ rouge
            borderColor : 'red',
	    color : 'red'
        });
     }
     else{
         $(this).css({ // si tout est bon, on le rend vert
	     borderColor : 'green',
	     color : 'green'
	 });
     }
});
$("#sexe").change(function(){
   if($("#sexe").val()=="F"){
    $("#fille").show();
}
if($("#sexe").val()=="M"){
    $("#fille").hide();
} 
});
 
   
             $("#createuser").on("submit",function(e){
          e.preventDefault();
               var data;
               data={nom:$("#nom").val(),prenom:$("#prenom").val(),telephone:$("#telephone").val(),nomJeune:$("#nomJeune").val(),date:$("#date").val(),
                   login:$("#login").val(),cni:$("#cni").val(),profil:$("#profil").val(),nationalite:$("#nationalite").val(),delivrerCni:$("#delivrer").val(),delivrerLieu:$("#delivrerLieu").val(),
                   password:$("#password").val(),lieu:$("#lieu").val(),sexe:$("#sexe").val()}
                $.ajax({
                    url: "<?php echo $this->url(array('controller' => 'Utilisateur', 'action' => 'enregistrer')); ?>",
                    data: {data:JSON.stringify(data)}, // {name: name, tableauIdL: tableauIdL, tableauIdE: tableauIdE},
                    cache: false,
                    type: "POST",
                    dataType: "json",
                     
                    error: function(request, error) { // Info Debuggage si erreur         
                        alert("Erreur : responseText: " + request.responseText);
                    },
                    success: function(data) {
                        // Informe l'utilisateur que l'opération est terminé et renvoie le résultat
                        var top = $(".enreg").offset().top;
                        var left = $(".enreg").offset().left;
                        if (data.msg == 1) {
                           $.toast({
                               heading : "statut",
                               text : data.msg1,
                               hideAfter : false,
                               stack: false,
                               icon : "error",
                               position : 'mid-center'
                           });
                            
                            //document.getElementById("login").value=''; 
			    // window.location.replace("// echo $this->url(array('controller' => 'Utilisateur', 'action' => 'index')); ?>");
                        } else {
                           $.toast({
                               heading : "statut",
                               text : data.msg1,
                               hideAfter : false,
                               stack : false,
                               icon : "success",
                               position : 'mid-center'
                           });
                           $(".annuler").trigger("click");
                           
                        }
                    },
                    complete: function() { 
                    }
                });
                //---
                return false;
            });
	</script>

</body>

</html>