<?php
// doc
 //https://demos.pixinvent.com/robust-html-admin-template/html/ltr/vertical-multi-level-menu-template/form-input-grid.html

session_start();
include('config/config_DB.php');
include('config/checklogin.php');
check_login();

?>

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />


<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-->

<style>
/* Profile Picture */
.profile-pic{
   display: inline-block;
   vertical-align: middle;
    width: 50px;
    height: 50px;
    overflow: hidden;
   border-radius: 50%;
}

.profile-pic img{
   width: 100%;
   height: auto;
   object-fit: cover;
}
.profile-menu .dropdown-menu {
  right: 0;
  left: unset;
}
.profile-menu .fa-fw {
  margin-right: 10px;
}

.toggle-change::after {
  border-top: 0;
  border-bottom: 0.3em solid;
  
  
  .select2-selection__choice{
  background-color: var(--bs-gray-200);
  border: none !important;
  font-size: 12px;
  font-size: 0.85rem !important;
}
}

</style>

	<!--
    <script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
	-->	
    
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
	
	<!--
    <script type="text/javascript" src="cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
	-->
		
	
	
	<!-- include summernote css/js -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
	
	<?php include("head.php"); ?>
	
	
	<style>
	
	.dual-list .list-group {
            margin-top: 8px;
        }

        .list-left li, .list-right li {
            cursor: pointer;
        }

        .list-arrows {
            padding-top: 100px;
        }

            .list-arrows button {
                margin-bottom: 20px;
            }
	
	</style>
	
	<!-- inutile
	<link rel="stylesheet" type="text/css" href="https://www.virtuosoft.eu/code/bootstrap-duallistbox/bootstrap-duallistbox/v3.0.2/bootstrap-duallistbox.css">
	<script src="dist/jquery.bootstrap-duallistbox.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../src/bootstrap-duallistbox.css">
    -->


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<!-- Or for RTL support -->
<!--
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" />
-->

 <link rel="stylesheet" type="text/css" href="bootstrap-duallistbox.css">
 
 
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
 
 <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
 
 <!--  version 7.3 qui peut être utilisée sans license-->
 <script src="tinymce.min.js"></script>
 
 <!--
 https://codepen.io/tinymce/pen/VPYjXW
 -->
 
 <script>
          tinymce.init({
            selector: 'textarea#editor',
			 license_key: 'gpl',
			 plugins: 'table advtable , save',
			 promotion: false,
			  branding: 'false',
          });
        </script>
	
	<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
	
	<div class="wrapper">
	 
			<?php include("navigation02.php"); ?>
	 
			<?php include("menu03.php"); ?>
	 
			<div class="content-wrapper">
			
					<!-- Content Header (Page header) -->
					<div class="content-header">
						<div class="container-fluid">
							<div class="row mb-2">
								<div class="col-sm-6">
									<h1 class="m-0 text-dark">Admin Dashboard</h1>
								</div><!-- /.col -->
								<div class="col-sm-6">
								<ol class="breadcrumb float-sm-right">
									<li class="breadcrumb-item"><a href="#">Home</a></li>
									<li class="breadcrumb-item active">Dashboard</li>
								</ol>
								</div><!-- /.col -->
							</div><!-- /.row -->
						</div><!-- /.container-fluid -->
					</div>  <!-- /.content-header -->
			
					<!-- Main content -->
					<section class="content">
					
						<div class="container-fluid">
<!-- -->						
							<div class="row">
							<!-- ./ iBank Clients -->
								<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><!-- ./ iBank Clients -->
<!-- -->						


							<div class="row">
								<div class="col-md-12">
									<div class="card card-purple">
										<div class="card-header">
										<h3 class="card-title">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>
											
											<!-- -->
											
											<p>&nbsp;</p>
											<!--
											<div class="row">
												<div class="col bg-info">
												<label>Available Superheroes</label>
													<select multiple class="form-control" id="lstBox1">
														<option value="123">Superman</option>
														<option value="456">Batman</option>
														<option value="789">Spiderman</option>
														<option value="654">Captain America</option>
													</select>
												</div>
               
												<div class="col bg-warning text-center">
												<input type='button' id='btnAllRight' value='>>' class="btn btn-default" />
												<br />
												<input type='button' id='btnRight' value='>' class="btn btn-default" />
												<br />
												<input type='button' id='btnLeft' value='<' class="btn btn-default" />
												<br />
												<input type='button' id='btnAllLeft' value='<<' class="btn btn-default" />
												</div>
												
												<div class="col bg-success">
												<label>Superheroes You Have Selected</label>
													<select multiple class="form-control" id="lstBox2">
														<option value="765">Nick Fury</option>
														<option value="698">The Hulk</option>
														<option value="856">Iron Man</option>
													</select>
												</div>
											</div>
											
											-->
<!--											
											<div class="row style-select">
												<div class="col-md-2">
													<div class="subject-info-box-1">
													<label>Available Superheroes</label>
													<select multiple class="form-control" id="lstBox1">
													<option value="123">Superman</option>
													<option value="456">Batman</option>
													<option value="789">Spiderman</option>
													<option value="654">Captain America</option>
													</select>
													</div>

													<div class="subject-info-arrows text-center">
														<br />
														<br />
														<input type='button' id='btnAllRight' value='>>' class="btn btn-default" />
														<br />
														<input type='button' id='btnRight' value='>' class="btn btn-default" />
														<br />
														<input type='button' id='btnLeft' value='<' class="btn btn-default" />
														<br />
														<input type='button' id='btnAllLeft' value='<<' class="btn btn-default" />
													</div>

													<div class="subject-info-box-2">
													<label>Superheroes You Have Selected</label>
													<select multiple class="form-control" id="lstBox2">
													<option value="765">Nick Fury</option>
													<option value="698">The Hulk</option>
													<option value="856">Iron Man</option>
													</select>
													</div>

													<div class="clearfix"></div>
												</div>
											</div>
-->											
											<!-- https://jsfiddle.net/nzdak7aL/ -->
											
											<div class="subject-info-box-1">
												<select multiple="multiple" id='lstBox1' class="form-control">
													<option value="ajax">Ajax</option>
													<option value="jquery">jQuery</option>		
													<option value="javascript">JavaScript</option>
													<option value="mootool">MooTools</option>
													<option value="prototype">Prototype</option>
													<option value="dojo">Dojo</option>
												</select>
											</div>

											<div class="subject-info-arrows text-center">
												<input type='button' id='btnAllRight' value='>>' class="btn btn-default" /><br />
												<input type='button' id='btnRight' value='>' class="btn btn-default" /><br />
												<input type='button' id='btnLeft' value='<' class="btn btn-default" /><br />
												<input type='button' id='btnAllLeft' value='<<' class="btn btn-default" />
											</div>

											<div class="subject-info-box-2">
												<select multiple="multiple" id='lstBox2' class="form-control">
													<option value="asp">ASP.NET</option>
													<option value="c#">C#</option>
													<option value="vb">VB.NET</option>
													<option value="java">Java</option>
													<option value="php">PHP</option>
													<option value="python">Python</option>
												</select>
											</div>

											<div class="clearfix"></div>
											
											
											<!-- https://desarrollo.educarex.es/redmine/projects/adminies/repository/adminies/revisions/3cdada1c4f7b227d393a43a98dc65c1f84dbbbe4/entry/app/webroot/lib/bootstrap-duallistbox/demo/index.html -->
											
											<!--https://bootsnipp.com/snippets/VP0M8#google_vignette -->
<!--
											<div class="row">

        <div class="dual-list list-left col-md-5">
            <div class="well text-right">
                <div class="row">
                    <div class="col-md-10">
                        <div class="input-group">
                            <span class="input-group-addon glyphicon glyphicon-search"></span>
                            <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="btn-group">
                            <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
                        </div>
                    </div>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">bootstrap-duallist <a href="https://github.com/bbilginn/bootstrap-duallist" target="_blank">github</a></li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>

        <div class="list-arrows col-md-1 text-center">
            <button class="btn btn-default btn-sm move-left">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </button>

            <button class="btn btn-default btn-sm move-right">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </button>
        </div>

        <div class="dual-list list-right col-md-5">
            <div class="well">
                <div class="row">
                    <div class="col-md-2">
                        <div class="btn-group">
                            <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="input-group">
                            <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
                            <span class="input-group-addon glyphicon glyphicon-search"></span>
                        </div>
                    </div>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>

	</div>
	
	-->
	
	
	<br />
	<br />
	<br />
	
	<h1>Hello, world!</h1>
      <textarea id="editor"></textarea>
	
	<br />
	<br />
	
	<div class="row text-center p-2 border-bottom">
    <h1>bootstrap 5 & select2</h>
  </div>
  <div class="row pt-4 justify-content-center "> <!-- vh-100 -->
  
  </br></br></br></br>
  
    <div class="col-6">
    
    <select class="form-select" id="multiple-select-field" data-placeholder="Choose anything" multiple>
    <option>Christmas Island</option>
    <option>South Sudan</option>
    <option>Jamaica</option>
    <option>Kenya</option>
    <option>French Guiana</option>
    <option>Mayotta</option>
    <option>Liechtenstein</option>
    <option>Denmark</option>
    <option>Eritrea</option>
    <option>Gibraltar</option>
    <option>Saint Helena, Ascension and Tristan da Cunha</option>
    <option>Haiti</option>
    <option>Namibia</option>
    <option>South Georgia and the South Sandwich Islands</option>
    <option>Vietnam</option>
    <option>Yemen</option>
    <option>Philippines</option>
    <option>Benin</option>
    <option>Czech Republic</option>
    <option>Russia</option>
</select>
    
    </div>  
  </div>

  
  <div class="row">
  <div class="col-md-7">
    <select multiple="multiple" size="10" name="duallistbox_demo2" class="demo2" title="duallistbox_demo2">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3" selected="selected">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6" selected="selected">Option 6</option>
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
      <option value="option9">Option 9</option>
      <option value="option0">Option 10</option>
      <option value="option0">Option 11</option>
      <option value="option0">Option 12</option>
      <option value="option0">Option 13</option>
      <option value="option0">Option 14</option>
      <option value="option0">Option 15</option>
      <option value="option0">Option 16</option>
      <option value="option0">Option 17</option>
      <option value="option0">Option 18</option>
      <option value="option0">Option 19</option>
      <option value="option0">Option 20</option>
    </select>
    
  </div>
	
	
	
	
	
	<!--
  <div class="row" style="margin-top: 40px;">
    <div class="col">
      <button class="btn btn-primary float-right">Add payees</button>

      <h2> Pay Bills </h2>
      <p><strong>Step 1:</strong> Select from your list of available payees to build a payment list</p>
      <hr/>
    </div>
  </div>
  <div class="row" style="margin-bottom: 40px;">
    <div class="col">
      <form id="demoform">
        <select multiple="multiple" size="10" name="duallistbox_demo1[]" title="duallistbox_demo1[]">
    <option value="payee1">Aviva Insurance - Business - 987654</option>
    <option value="payee2">Bell Mobility - 66853 (John Smith)</option>
    <option value="payee3">Bell Mobility - 75432 (Jane Smith)</option>
    <option value="payee4">Bell Mobility - 98765 (Jim Smith)</option>
    <option value="payee5">Canadian Tire Commercial Mastercard - **** 5525</option>
    <option value="payee6">Canadian Tire Mastercard - **** 3158 (President's Card)</option>
    <option value="payee7">FedEx Express Canada - 54321</option>
    <option value="payee8">Lowes Canada - 12345</option>
    <option value="payee9">Mastercard, PC Financial - **** 5535</option>
    <option value="payee10">Qtrade Investor - 12345</option>
    <option value="payee11" selected="selected">Servus Mastercard - **** 5545</option>
    <option value="payee12">Telus - 123456787 (Calagary  Office)</option>
    <option value="payee13">Telus - 123456788 (Edmonton NW Office)</option>
    <option value="payee14">Telus - 123456789 (Edmonton SE Office)</option>
  </select>
        <br>
        <div class="row">
          <div class="col-md-6 offset-md-6">
            <button type="submit" class="btn btn-primary w-100">Create payment (#)</button>
          </div>
        </div>
      </form>

    </div>
  </div>

	-->
												
											
											<div class="mt-2">
        <label class="control-label" for="textarea">Descrizione breve:</label>
        <textarea class="summernote" name="content_abstract">blabla</textarea>
    </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><!--/. container-fluid -->
					
					</section> <!-- /.content -->
			
			</div> <!-- /.content-wrapper -->
		
			<!-- Control Sidebar -->
			<aside class="control-sidebar control-sidebar-dark">
			<!-- Control sidebar content goes here -->
			</aside>
			<!-- /.control-sidebar -->

	
			<?php include("footer.php"); ?>
			
	
	</div> <!-- ./wrapper -->
			
			<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

			<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
	 
			<!--
			<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/js/adminlte.min.js"></script>
			-->
			
			<script src="adminlte.js"></script>
			
			<!--
			<script src="https://www.virtuosoft.eu/code/bootstrap-duallistbox/bootstrap-duallistbox/v3.0.2/jquery.bootstrap-duallistbox.js"></script>
			-->
			<script src="jquery.bootstrap-duallistbox.js"></script>
			
			<!-- pas utile ????
			<script src="jquery.selectlistactions.js"></script>
			-->
			
			<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

			
			<script>
			
			$(function () 
			{
			
      var demo2 = $('.demo2').bootstrapDualListbox({
        //nonSelectedListLabel: 'Non-selected',
        //selectedListLabel: 'Selected',
        infoText: 0,
        preserveSelectionOnMove: 'moved',
        moveOnSelect: false,
        //nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
      });
    });
			
			/**/
			
			$(function () 
			{
			
				$( '#multiple-select-field' ).select2( {
				theme: "bootstrap-5",
				width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
				placeholder: $( this ).data( 'placeholder' ),
				closeOnSelect: false,
				} );

			});
			
			/**/
			
			$(function () {

            $('body').on('click', '.list-group .list-group-item', function () {
                $(this).toggleClass('active');
            });
            $('.list-arrows button').click(function () {
                var $button = $(this), actives = '';
                if ($button.hasClass('move-left')) {
                    actives = $('.list-right ul li.active');
                    actives.clone().appendTo('.list-left ul');
                    actives.remove();
                } else if ($button.hasClass('move-right')) {
                    actives = $('.list-left ul li.active');
                    actives.clone().appendTo('.list-right ul');
                    actives.remove();
                }
            });
            $('.dual-list .selector').click(function () {
                var $checkBox = $(this);
                if (!$checkBox.hasClass('selected')) {
                    $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
                    $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
                } else {
                    $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
                    $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
                }
            });
            $('[name="SearchDualList"]').keyup(function (e) {
                var code = e.keyCode || e.which;
                if (code == '9') return;
                if (code == '27') $(this).val(null);
                var $rows = $(this).closest('.dual-list').find('.list-group li');
                var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
                $rows.show().filter(function () {
                    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                    return !~text.indexOf(val);
                }).hide();
            });

        });
			
			/**/
			
			(function () {
  $("#btnRight").click(function (e) {
    var selectedOpts = $("#lstBox1 option:selected");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }
    $("#lstBox2").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
  $("#btnAllRight").click(function (e) {
    var selectedOpts = $("#lstBox1 option");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }
    $("#lstBox2").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
  $("#btnLeft").click(function (e) {
    var selectedOpts = $("#lstBox2 option:selected");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }
    $("#lstBox1").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
  $("#btnAllLeft").click(function (e) {
    var selectedOpts = $("#lstBox2 option");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }
    $("#lstBox1").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
})(jQuery);
			
			document.querySelectorAll('.dropdown-toggle').forEach(item => 
			{
				item.addEventListener('click', event => 
				{
					if(event.target.classList.contains('dropdown-toggle') )
					{
						event.target.classList.toggle('toggle-change');
					}
					else if(event.target.parentElement.classList.contains('dropdown-toggle'))
					{
						event.target.parentElement.classList.toggle('toggle-change');
					}
				})
			});
			
			
			$(document).ready(function() {
      $('.summernote').summernote();
    });
			
			</script>
			
	</body>

</html>