<style>

.erreur_nom_projet { display: none;
                       color: red; }
</style>					   

<!--
CREATE TABLE appli_projects (
   id int(10) NOT NULL AUTO_INCREMENT,
   categorie varchar(100) NOT NULL,
   project varchar(100) NOT NULL,
   location varchar(100) NOT NULL,
   description TEXT NOT NULL,
   client varchar(100) NOT NULL,
   project_manager varchar(100) NOT NULL,
   design leader varchar(100) NOT NULL,
   start_date date NOT NULL,
   end_date date NOT NULL,
   date_added date NOT NULL,
   PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
-->

	<!-- Include Bootstrap 5 Datepicker CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
 
	<div id="new_project" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		<div class="modal-dialog"> 
				<div class="modal-content modal-md">  
					<div class="modal-header"> 
						<h4 class="modal-title mx-auto" id='head'>
						<i class=""></i> Nouveau project
						</h4> 
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div> 
				  
				  
					<form method="POST" id='proj_form'> 
 
						<div class="modal-body">
   
							<div class="form-horizontal">
        
								<div class="form-group" id="form_element">
									<div class="col-sm-12">
									 <div id="retCode2">
									   <div class="alert alert-success" id="suc_msg2">
									   <h4><i class="fa fa-check"></i> Data successfully added.</h4>
									 </div>
									 <div class="alert alert-danger" id="err_msg2">
									   <h4><i class="fa fa-times"></i> Data failed to add.</h4>
									 </div>
									 </div>
									 </div>
								</div>

								<!--
								<div class="form-group" id="form-login">
									<div class="col-sm-12">
										<select class="form-select" aria-label="Default select example">
										<option selected>Open this select menu</option>
										<option value="1">One</option>
										<option value="2">Two</option>
										<option value="3">Three</option>
										</select>
									</div>
								</div>	
								-->
							
								<!--
								https://www.codexworld.com/bootstrap-modal-popup-form-submit-jquery-ajax-php/
								
								https://www.codehim.com/bootstrap/bootstrap-5-success-error-modal-popup/#google_vignette
								
								-->
							
								<div class="form-group" id="form_element">
									<label class="col-sm-5 control-label">Catégorie du project:</label>
									<div class="col-sm-12">
									
									<!--  -->
									
										<select type="text" class="form-control form-select input-sm" style="text-transform:capitalize" autocomplete="off" name="categorie" id="categorie" required/>
											<option id="p_typ"></option>
											<!--
											<option selected>Open this select menu</option>
											-->
											<option value="1">Médical</option>
											<option value="2">Automobile</option>
											<option value="3">Power management</option>
											<option value="4">Sécurité</option>
										</select>
									</div>
								</div>
      
								<div class="form-group" id="form_element">
									<label class="col-sm-4 control-label">Project Name:</label>
									<div class="col-sm-8">
										<input class="form-control" style="text-transform:capitalize" id="pname" name="pname" type="text" 
										oninput="checkProjectName()" required >
										<!--
										value="<?php echo isset($_POST['pname']) ? $_POST['pname'] : '' ?>"	required >
										-->
										<!--
										<div class="alert alert-success" id="suc_msg2">
										Check field
										</div>
										-->
										
										<span id="projet-availability-status"></span>
										<p class="erreur_nom_projet"></p>
										
										<!--
										<input type="text" name="myField1" value="<?php echo isset($_POST['pname']) ? $_POST['pname'] : '' ?>" />
										-->
									</div>
								</div>
							
								<div class="form-group" id="form_element">
									<label class="col-sm-4 control-label">Site Location:</label>
									<div class="col-sm-6">
										<!--
										<input class="form-control" id="location" name="location" type="text" placeholder="">-->
										<select id = "location" name = "location" class="form-select" aria-label="Default select example">
										<option selected>Selection</option>
										<option value="1">Meylan</option>
										<option value="2">Toulouse</option>
										<option value="3">Autre</option>
										</select>
										<!--
										style="text-transform:capitalize"
										-->
									</div>
								</div>
   
								<div class="form-group" id="form_element">
									<label class="col-sm-4 control-label">Description:</label>
									<div class="col-sm-8">
										<textarea class="form-control"  id="description" name="description" type="text"  required></textarea>
									</div>
								</div> 
							
								<!--
								<div class="form-group">
								<label for="datepicker">Select a Date:</label>
								<input type="text" id="datepicker" class="form-control">
								</div>
								-->
				
								<div class="row form-group">
								<label for="date" class="col-sm-1 col-form-label">Date</label>
									<div class="col-sm-4">
										<div class="input-group date" id="datepicker">
											<input type="text" class="form-control">
											<span class="input-group-append">
												<span class="input-group-text bg-white d-block">
													<i class="fa fa-calendar"></i>
												</span>
											</span>
										</div>
									</div>
								</div>
					
								<div class="form-group" id="form_element">
									<label class="col-sm-4 control-label">Client:</label>
									<div class="col-sm-6">
										<input class="form-control" id="client" name="client" type="text" placeholder="">
									</div>
								</div>

								<div class="form-group" id="form_element">
									<label class="col-sm-4 control-label">Project manager:</label>
									<div class="col-sm-6">
										<!--
										<input class="form-control" id="project_manager" name="project_manager" type="text" placeholder="">
										-->
					
										<select id="project_manager" name="project_manager"  class="form-select" aria-label="Default select example">
										<option selected>Selection</option>
										<option value="1">Le patron</option>
										<option value="2">Lulu</option>
										<option value="3">Alphonse</option>
										</select>
									</div>
								</div>
							
								<div class="form-group" id="form_element">
									<label class="col-sm-4 control-label">Design leader:</label>
									<div class="col-sm-6">
										<!--
										<input class="form-control" id="design_leader" name="design_leader" type="text" placeholder="">
										-->
										<select id="design_leader" name="design_leader" class="form-select" aria-label="Default select example">
										<option selected>Selection</option>
										<option value="1">Pierre</option>
										<option value="2">Paul</option>
										<option value="3">Jacques</option>
										</select>
									</div>
								</div>
							
							
								<div class="form-group" id="form_element">
									<label class="col-sm-4 control-label">Starting Date:</label>
									<div class="col-sm-8">
										<input class="form-control"  id="start_date" name="start_date" type="date"  required>
									</div>
								</div>

								<div class="form-group" id="form_element">
									<label class="col-sm-4 control-label">Deadline:</label>
									<div class="col-sm-8">
										<input class="form-control"  id="end_date" name="end_date" type="date"  required>
									</div>
								</div>
						
								<div id="mem-field"></div>
								<div id="div-field"></div>
    
							</div>
							
						</div>
          
						<div class="modal-footer">
							<button type="submit" class="btn btn-info btn-sm" id="btn_sub"><i class="fa fa-save"></i> Save</button>
							<button data-dismiss="modal" class="btn btn-info btn-sm" id="btn_insert_close" ><i class="fa fa-close"></i> Close</button>
						</div>

					</form>
					
                </div> 
        </div>
    </div>



<div id="retCode1"></div>

	<!-- Include Bootstrap 5 Datepicker JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
	<script src=" https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.fr.min.js"></script>
		  
<script>
 /*
 <form>
 <input type="BUTTON" value="Back to top of page" onclick="window.location.href='#top'">
</form>
 */
 //bootstrap-datepicker.fr.min.js
 
  
   /*
      @ https://github.com/uxsolutions/bootstrap-datepicker/blob/master/dist/locales/bootstrap-datepicker.fr.min.js
      !function(a){a.fn.datepicker.dates.fr={days:["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"],daysShort:["dim.","lun.","mar.","mer.","jeu.","ven.","sam."],daysMin:["d","l","ma","me","j","v","s"],months:["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"],monthsShort:["janv.","févr.","mars","avril","mai","juin","juil.","août","sept.","oct.","nov.","déc."],today:"Aujourd'hui",monthsTitle:"Mois",clear:"Effacer",weekStart:1,format:"dd/mm/yyyy"}}(jQuery);
   */
   
   //  https://www.nglesson.com/solutions-techniques/posts/js-comment-mettre-bootstrap-datepicker-en-fr.php




jQuery(document).ready(function(){
						jQuery("#proj_form").submit(function(e){
								e.preventDefault();
								var formData = jQuery(this).serialize();
								alert("fdfdsfsqf");
								$.ajax({
									type: "POST",
									url: "add_forms.php?action=project",
									data: formData,
									success: function(html){
										
										console.log("lulu et moi dans modal" + html);
										
										//echo '<script>$("#suc_msg2").show("slidedown");
										
										
										
										/*if( html === "error")
											 $('#err_msg2').show();
										else
										{*/
											 $('#suc_msg2').show();
											  setTimeout(function() { $('#new_project').modal('toggle'); }, 3000);
										
									 
									}
								});
									return false;
						});
						});

   $(function () {    
    $('#datepicker').datepicker({
      isRTL: true,
      autoclose: true, 
      todayHighlight: true,
      language: 'fr',
      format: 'dd-mm-yyyy'
    });
});
           
   
 
 
 
  jQuery(document).ready(function(){
      $('#suc_msg2').hide();
      $('#err_msg2').hide();
	  
	   $("#btn_insert_close").click(function() {
        $("#new_project").modal("hide");
    });
});


function isAlphanumeric(str) 
{
  //return /^[a-zA-Z0-9]+$/.test(str);
  return str.match(/^[a-zA-Z0-9]+$/) !== null;
}

function checkProjectName() 
{

	let nom_projet_valide = "yes";
	let nom_projet_disponible = "yes";
	
	let nom_projet_longueur;
	let nom_projet_compatible;

	let text = document.getElementById("pname").value;
	//let text = document.getElementsByName("pname").value;
	console.log(" >>> " + text);
	
	let nom_projet = $('#pname').val();
	console.log("Nom du projet " + nom_projet);
	
	let longeur_nom_projet = nom_projet.length;
	
	console.log(" ----  " + longeur_nom_projet);
	
	$('.erreur_nom_projet').hide();
	
	if( longeur_nom_projet < 1 )
	{
		nom_projet_longueur = "vide";
		$('.erreur_nom_projet').hide();
		$('.erreur_nom_projet').text("Champ vide !");
		$('.erreur_nom_projet').show();
		nom_projet_valide = "yes";
	}
		
	if( longeur_nom_projet != 0)
	{
			var res = isAlphanumeric(nom_projet);
			if( res === false ) 
			{
				nom_projet_compatible = "erreur";
			}
			
			if( longeur_nom_projet < 8 )
			{
				nom_projet_longueur = "trop_court";
			}	
			
			if( longeur_nom_projet > 12 )
			{
				nom_projet_longueur = "trop_long";
			}	
			
			if( nom_projet_longueur == "trop_court")
			{
				$('.erreur_nom_projet').hide();
				$('.erreur_nom_projet').text("Trop court (au moins 8 caractéres)");
				$('.erreur_nom_projet').show();
				nom_projet_valide = "no";
			}
			
			if( nom_projet_longueur == "trop_long")
			{
				$('.erreur_nom_projet').hide();
				$('.erreur_nom_projet').text("Trop long ( pas plus de 12 caractéres)");
				$('.erreur_nom_projet').show();
				nom_projet_valide = "no";
			}
			
			if( nom_projet_compatible == "erreur" )
			{
				$('.erreur_nom_projet').hide();
				$('.erreur_nom_projet').text("Pas de caractére spécial : uniquement [09][az][AZ]");
				$('.erreur_nom_projet').show();
				nom_projet_valide = "no";
			}
			
			if( nom_projet_longueur == "trop_court"  && nom_projet_compatible == "erreur")
			{
				$('.erreur_nom_projet').hide();
				$('.erreur_nom_projet').text("Trop court (entre 8 et 12 caractéres) & pas de caractére spécial : [09][az][AZ]");
				$('.erreur_nom_projet').show();
				nom_projet_valide = "no";
			}
			
			if( nom_projet_longueur == "trop_long" && nom_projet_compatible == "erreur")
			{
				$('.erreur_nom_projet').hide();
				$('.erreur_nom_projet').text("Trop long (entre 8 et 12 caractéres) & pas de caractére spécial : [09][az][AZ] ");
				$('.erreur_nom_projet').show();
				nom_projet_valide = "no";
			}
			
	}
	
	//let mess = "<span style='color:red'> Username already exists .</span>";
	
	//$("#projet-availability-status").html(mess);

  //let text = document.getElementById("myInput").value;
  //document.getElementById("demo").innerHTML = "You wrote: " + text;
}

 function div_field()
 {
    var id = $('#p_type').val();
    $.ajax({
                  url: "div_field.php?id="+id,
                  success: function(html){
				 
				  $('#suc_msg2').show();
                   //s $('#div-field').html(html);
                   alert("Bingo");
                  }
                });

  }
  function mem_list(){
    var id = $('#tid').val();
    $.ajax({
                  url: "mem_list.php?id="+id,
                  success: function(html){
                    $('#mem-field').html(html);
                   
                  }
                });

  }

/*

sdate

let startDate = document.getElementById('startDate')
let endDate = document.getElementById('endDate')

startDate.addEventListener('change',(e)=>{
  let startDateVal = e.target.value
  document.getElementById('startDateSelected').innerText = startDateVal
})

endDate.addEventListener('change',(e)=>{
  let endDateVal = e.target.value
  document.getElementById('endDateSelected').innerText = endDateVal
})  

https://www.codeply.com/p/zU0EWDmIfn




*/

</script>
