<?php

	include("template_top.php");
	
	//include('config/config_DB.php');
	
?>

<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
-->

<!--
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
-->	 
  
  <!--
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  -->
<!--
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->

<!--
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>


<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

-->

<!--
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open modal
  </button>
</div>
-->

<!--
 <script src="datatables/jquery.dataTables.js"></script>
    <script src="datatables/dataTables.bootstrap.js"></script>
    <link href="datatables/dataTables.bootstrap.css" rel="stylesheet">
-->


<!--
<script src= "https://cdn.datatables.net/2.1.4/js/dataTables.bootstrap5.js"></script>
<script src= "https://cdn.datatables.net/2.1.4/js/dataTables.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/2.1.4/css/dataTables.bootstrap5.css"/>

<link rel="stylesheet" href="https://cdn.datatables.net/2.1.4/css/dataTables.dataTables.css"/>
-->


<script src= "bootstrap_datatables/jquery-3.7.1.js"></script>

<script src= "bootstrap_datatables/bootstrap.bundle.min.js"></script>

<script src= "bootstrap_datatables/dataTables.js"></script>

<script src= "bootstrap_datatables/dataTables.bootstrap5.js"></script>

<link rel="stylesheet" href="bootstrap_datatables/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap_datatables/dataTables.bootstrap5.css"/>



<!--

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.2/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
-->

			
				<!-- Main content -->
				<section class="content">
					
					<div class="container-fluid">
		  
		<!-- -->

<!--		
		<div class="modal fade" id="myModal" role="dialog">
			
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Modal Header</h4>
					</div>
					<div class="modal-body">
						<p>Some text in the modal.</p>
					</div>
					<div class="modal-footer">
					  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
	-->	  

		<!-- -->
		
		
		 <a href="bootstrap_datatables/dev01.php">  Click Here to Redirect   </a>
		

                        <div class="row">
                                
                                <!--<div class="col-lg-12"> -->
                                <!--
									<div class="col-md-11 col-md-offset-10">
                                    <!--<div class="align-self-end ml-auto">   --> 
                       	        <!--    <a class="col-sm-2 btn btn-md btn-info" href="#new_project" data-toggle="modal"><center><i class="fa fa-plus"></i> New Project</center></a>
                                    </div>	
								-->
							
								<div class="d-flex flex-column"> <!-- text-white text-center border border-dark"> -->
        
								<!--
								<div class="bg-success p-2 m-2 align-self-start"> 
								align-self-start 
								</div> -->
		
									<div class=" p-2 m-2 align-self-end "> <!-- ml-auto" -->
									
										<!--
										<a  class =" btn btn-md btn-info  text-white text-center border border-dark" href="#new_project" data-toggle="modal"><center><i class="fa fa-plus"></i> New Project</center></a>
										<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="plouf">   Open modal </button>
										-->
										<!--
										<a href="#new_project" class="btn btn-lg btn-primary" data-bs-toggle="modal"><i class="fa fa-plus"></i> Nouveau projet</a>
										-->
										<a href="#new_project" class="btn btn-md btn-primary  text-white text-center border border-dark" data-bs-toggle="modal"><i class="fa fa-plus"></i> Nouveau projet</a>

<!-- -->
										<a href="#update_project" class="btn btn-md btn-primary  text-white text-center border border-dark" data-bs-toggle="modal"><i class="fa fa-plus"></i> Edition projet</a>

										</div> 
		
								</div>
							
							</div>
		
		<!--
        <div class="bg-success p-2 m-2 align-self-center"> 
            align-self-center 
        </div> 
        <div class="bg-success p-2 m-2 align-self-baseline"> 
            align-self-baseline 
        </div> 
        <div class="bg-success p-2 m-2 align-self-stretch"> 
            align-self-stretch 
        </div> -->
    
	<!--</div>  -->
           
   
	<?php
		//include ("/modales/nouveau_projet_modal.php");
		
	?>
		
	
<!--		 
<div class="modal" id="plouf">
  <div class="modal-dialog">
    <div class="modal-content">

      
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

     
      <div class="modal-body">
        Modal body..
      </div>

     
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
-->		   
                             <div class="row">
							
							<table id="example" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009-01-12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012-03-29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
			 <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
			 <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
			 <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
			 <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
			 <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
			 <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
			 <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
			 <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
           
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
	
	</div>

                           

<!-- -->						
							<div class="row">
								<div class="col-12 col-sm-6 col-md-3">
									<div class="info-box">
										<span class="info-box-icon bg-info elevation-1"><i class="fas fa-users"></i></span>
										<div class="info-box-content">
										<span class="info-box-text">Clients</span>
										<span class="info-box-number"><?php echo "123"; ?></span>
										</div>
									</div>
								</div>
								
								
								<div class="col-12 col-sm-6 col-md-3">
									<div class="info-box mb-3">
										<span class="info-box-icon bg-danger elevation-1"><i class="fas fa-user-tie"></i></span>
										<div class="info-box-content">
										<span class="info-box-text">Staffs</span>
										<span class="info-box-number">
										<?php echo "coco"; ?></span>
										</div>
									</div>
								</div>
								
							</div><!-- ./ row -->
							
							<div class="panel panel-default">
								<div class="panel-heading">
								<h3>dfgqsdfsdfdf</h3>
								</div>
								
									<div class="panel-body"> 
			
										<!--
										<div class = "row">
										-->
											<div class="col-md-12">
											
												<table id="wposition" class="table table-bordered table-condensed">
												<thead>
												<tr id="heads">
												<th class="col-md-2 text-center">Project</th>
												<th class="col-md-2 text-center">Location</th>
												<th class="col-md-1 text-center">Deadline</th>
												<th class="col-md-1 text-center"></th>
												</tr>
												</thead>
												<tbody>
												
												<?php
	$sql = "SELECT * FROM appli_projects";
	$result = $connexion->query($sql);
	
	if ($result->num_rows > 0) 
	{
		$i = 1;
		while($row = $result->fetch_assoc()) 
		{
?>
			<tr>
			<td style="text-transform:capitalize" class="text-center"><?php echo $row["project"] ?></td>
			<td style="text-transform:capitalize" class="text-center"><?php echo $row["categorie"] ?></td>
			<td style="text-transform:capitalize" class="text-center"><?php echo $row["client"] ?></td>
			<td style="text-transform:capitalize" class="text-center">
			<center><a href="index.php?page=project_detail&id=<?php echo $i ?>&stats=<?php echo "xxx" ?>"><i class="fa fa-eye"></i> View </a></center></td>
			</tr>

<?php	
	
			$i++;
		} 
	}
	
?>
												

<?php
										//for($i=1; $i<10;$i++)
										//{
?>

										<!--	
											<tr>
											<td style="text-transform:capitalize" class="text-center"><?php echo "un" ?></td>
											<td style="text-transform:capitalize" class="text-center"><?php echo "deux" ?></td>
											<td style="text-transform:capitalize" class="text-center"><?php echo "trois"?></td>
											<td style="text-transform:capitalize" class="text-center">
											<center><a href="index.php?page=project_detail&id=<?php echo "1" ?>&stats=<?php echo "xxx" ?>"><i class="fa fa-eye"></i> View </a></center></td>
											</tr>
										-->	
<?php
//										}
?>										
											
												</tbody>
												</table>
											</div>	
										
										<!--
										</div>
										-->
										

										
										
									</div>	
									
							</div>	
							

							<div class="row">
								<div class="col-md-12">
									<div class="card card-purple">
										<div class="card-header">
										<h3 class="card-title">xxxxxxxxxxxxxxxxxxx Création d'une catégorie</h3>
										</div>
                                
										<form method="post" enctype="multipart/form-data" role="form">
										<div class="card-body">
											<div class="row">
												<div class=" col-md-6 form-group">
													<label for="exampleInputEmail1">Nom</label>
													<input type="text" name="name" required class="form-control" id="exampleInputEmail1">
												</div>
											</div>

											<div class="row">
												<div class=" col-md-6 form-group">
													<label for="exampleInputEmail1">Staff Phone Number</label>
													<input type="text" name="phone" required class="form-control" id="exampleInputEmail1">
												</div>
                                            </div>

											<div class="row">
												<div class=" col-md-6 form-group">
													<label for="exampleInputEmail1">Staff Email</label>
													<input type="email" name="email" required class="form-control" id="exampleInputEmail1">
												</div>
											</div>

										<div class="clearfix"></div>

										</div> <!-- /.card-body -->

										<div class="card-footer">
											<button type="submit" name="ajouter_categorie" class="btn btn-success">Ajouter</button>
										</div>
										
										</form>
									</div>   <!-- /.card -->
								</div><!-- /.col -->
							</div> <!-- /.row -->
							
							
							
							
							<!--
							<div class="panel panel-default">
								<div class="panel-heading">
								<h3>Zoulou</h3>
								</div> 
        
								<div class="panel-body"> 
			
									<table id="position" class="table table-bordered table-condensed">
										<thead>
								
										<tr id="heads">
										<th class="col-md-2 text-center">Project</th>
										<th class="col-md-2 text-center">Location</th>
										<th class="col-md-1 text-center">Deadline</th>
										<th class="col-md-1 text-center"></th>
										</tr>
										</thead>
		
										<tbody>
								
										
										</tbody>
									</table>
								</div>
							</div>
							-->
							
						</div>
							
							
							
					</div><!--/. container-fluid -->
				</section> <!-- /.content -->
			

<?php

	//include("add_modal.php"); // prévoir un répertoire ("../includes/blabla");

	//include ("/modales/nouveau_projet_modal.html");
	
?>



<?php
	
	
	// probléme : décalage du footer
	
	// si on le met en commentaire, il manque admilte.js et le menu de navigation ne fonctionne pas
	
	// si on l'ajoute, on a un probléme avec datatable
	
	include("template_bottom.php");
	
	
	
	include ("modales/nouveau_projet_modal.php");

	
	//include ("modales/update_projet_modal.php");
	
	include ("modales/update.php");
	
	
	
?>

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

<!--
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-->
<script>


 $(function() {
            $("#wposition").dataTable(
        { "aaSorting": [[ 2, "desc" ]] }
      );
        });


$(document).ready( function () {
  $('#example').dataTable( {
    "pageLength": 10,
	language: {
        url: '//cdn.datatables.net/plug-ins/2.1.4/i18n/fr-FR.json',
    }
  } );
} );



/*
$.extend(true, $.fn.dataTable.defaults, {
        language: {
            url: '/build/datatables-fr-FR.json'
        },
});
*/

/*
new DataTable('#example', {
	pageLength: 5,
	lengthMenu: [
        [10, 25, 50, -1],
        [10, 25, 50, 'All']
    ],
    layout: {
        topStart: 'info',
        bottom: 'paging',
        bottomStart: null,
        bottomEnd: null
    }
});
*/

  /*


	jQuery(document).ready(function(){
						jQuery("#proj_form").submit(function(e){
								e.preventDefault();
								var formData = jQuery(this).serialize();
								
								console.log("  --- " + formData);
								
								$.ajax({
									type: "POST",
									url: "gestion_form_nouveau_projet.php?action=project",
									data: formData,
									success: function(html)
									{
										console.log(html);
									
										if( html === "error")
											 $('#err_msg2').show();
										else
										{
											 $('#suc_msg2').show();
											  setTimeout(function() {
                $('#new_project').modal('toggle');
            }, 3000);
										}
										//$('#retCode1').html(html); // html
										//console.log("pipotron");
										
										// $('#suc_msg2').show();
										//s $('#div-field').html(html);
										//alert("Bingo");
									 
									}
								});
									return false;
						});
						});
						*/
						
</script>

