@extends('layouts.master2')

@section('content')

<script type="text/javascript">
    $( document ).ready(function() {


        //pour la recherche


          $("#recherche").keyup(function() {
        
             //Assigning search box value to javascript variable named as "name".
        
             // var search = $('#recherche').val();
              var search = document.getElementById("recherche").value;
             $.ajax({
                 type: 'POST',
                 url: '{{ url('/chercher') }}',
                 data:{
                   'search':search,
                   "_token":"{{ csrf_token() }}"
                 },
                     

                 success:function(result) {
                     // showWaitingMask(false);
                     console.log(result);
                     if(result.number == '1'){

                         $(".formations").hide();
                         $(".partieFormation").hide();
                         $(".partieFormateur").hide();
                         $(".partiePayante").hide();
                         $(".partieGratuite").hide();
                         $(".champ").html(result.data);
                         
                     }
                     else{
                         

                         console.log(result);

                         
                     }
                 },

                 error:function(result){
                     console.log(result);
                     

                 }
             })

        
        

        });
    });


      



</script>

<!-- Inner Page Breadcrumb -->
<section class="inner_page_breadcrumb">
    <div class="container">
        <div class="row">
            <div class="col-xl-6 offset-xl-3 text-center">
                <div class="breadcrumb_content">
                    <h4 class="breadcrumb_title">Nos formations</h4>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">Accueil</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Nos formations</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="our-team pb40">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-lg-8 col-xl-9">
				<div class="row">
					<div class="col-xl-4">
						<!-- <div class="instructor_search_result style2">
							<p class="mt10 fz15"><span class="color-dark pr10">85 </span> results <span class="color-dark pr10">1,236</span> Video Tutorials</p>
						</div> -->
					</div>
					<div class="col-xl-8">
						<div class="candidate_revew_select style2 text-right mb25">
							<ul>
								<li class="list-inline-item">
									<div class="candidate_revew_search_box course mb30 fn-520">
										<form class="form-inline my-2 my-lg-0">
									    	<input class="form-control mr-sm-2" type="search" placeholder="rechercher une formation" aria-label="Search" id="recherche">
									    	<button class="btn my-2 my-sm-0" type="javascript:void(0)"><span class="flaticon-magnifying-glass"></span></button>
									    </form>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="row formations">
					@foreach($formation as $formations)
					<div class="col-md-6 col-lg-6 col-xl-4" onclick="window.location.href='{{url('formations/'.$formations->idformation)}}'">
					    <div class="top_courses">
					        <div class="thumb">
					            <img class="img-whp" src="{{asset($formations->PhotoFormation)}}" alt="{{$formations->LibelleFormation}}" style="height: 200px; overflow: hidden;">
					            <div class="overlay">
					                <div class="tag">{{$formations->LibelleCategorie}}</div>
					                <div class="icon"><span class="flaticon-like"></span></div>
					                <a class="tc_preview_course" href="{{url('formations/'.$formations->idformation)}}">Détails sur la formation</a>
					            </div>
					        </div>
					        <div class="details">
					            <div class="tc_content">
					                <p>{{$formations->name }} {{$formations->prenom}}</p>
					                <h5 style="height: 80px; overflow: hidden;">{{$formations->LibelleFormation}}</h5>
					                <ul class="tc_review">
					                    <li class="list-inline-item"><a href="#"><i class="fa fa-star"></i></a></li>
					                    
					                </ul>
					            </div>
					            <div class="tc_footer">
					                <ul class="tc_meta float-left">
					                    <li class="list-inline-item"><a href="#"><i class="fa fa-play-circle"></i></a></li>
					                    <li class="list-inline-item"><a href="#">15</a></li>
					                    
					                </ul>
					                <div class="tc_price float-right">{{$formations->PrixFormation}} XOF</div>
					            </div>
					        </div>
					    </div>
					</div>
					@endforeach

					{{$formation->Links()}}
					
					
				</div>
				@foreach($categories as $categorie)
				<div class="row formation{{$categorie->id}} partieFormation">
					
				</div>
				@endforeach

				@foreach($formateur as $formateurs)
				<div class="row formateur{{$formateurs->id}} partieFormateur">
					
				</div>
				@endforeach

				<div class="row partiePayante">
					
				</div>
				<div class="row partieGratuite">
					
				</div>
				<div class="row champ">
					
				</div>
			</div>
			<div class="col-lg-4 col-xl-3">
				<div class="selected_filter_widget style2 mb30">
				  	<div id="accordion" class="panel-group">
					    <div class="panel">
					      	<div class="panel-heading">
						      	<h4 class="panel-title">
						        	<a href="#panelBodySoftware" class="accordion-toggle link fz20 mb15" data-toggle="collapse" data-parent="#accordion">Filtrer par Categories</a>
						        </h4>
					      	</div>
					      	    <div id="panelBodyAuthors" class="panel-collapse collapse show">
					      	        <div class="panel-body">
					      				<div class="cl_skill_checkbox">
					      					<div class="content ui_kit_checkbox style2 text-left">
					      						@foreach($categories as $categorie)
					      						<div class="custom-control custom-checkbox">
					      							<input type="checkbox" class="custom-control-input" id="customCheck{{$categorie->id}}" onclick="cat{{$categorie->id}}()">
					      							<label class="custom-control-label" for="customCheck{{$categorie->id}}">{{$categorie->LibelleCategorie}} <span class="float-right">{{counter_formation($categorie->id)}}</span></label>
					      						</div>
					      						<script type="text/javascript">
											function cat{{$categorie->id}}(){
												if(document.getElementById("customCheck{{$categorie->id}}").checked){
															var csrfToken = $('meta[name="csrf-token"]').attr('content');
															var idcategorie = {{$categorie->id}};
															$.ajax({
															type: 'POST',
															enctype: 'multipart/form-data',
															url: '{{url('cat_show')}}',
															data: {
															idcategorie:idcategorie,
															"_token":csrfToken
															    },

															success:function(result) {
															if(result.number == '1'){
																console.log(result);

															$(".formations").hide();

															$(".formation{{$categorie->id}}").show();

															$(".formation{{$categorie->id}}").html(result.data);
															                                        
															                            
															                                        
															                                        
															}
														}
													});
												}else{
													$(".formation{{$categorie->id}}").hide();
												}
												
											}
										</script>
					      						@endforeach
					      					</div>
					      				</div>
					      	        </div>
					      	    </div>
						    
					    </div>
					</div>
				</div>
				<div class="selected_filter_widget style2">
				  	<div id="accordion" class="panel-group">
					    <div class="panel">
					      	<div class="panel-heading">
						      	<h4 class="panel-title">
						        	<a href="#panelBodyAuthors" class="accordion-toggle link fz20 mb15" data-toggle="collapse" data-parent="#accordion">Formateurs</a>
						        </h4>
					      	</div>
						    <div id="panelBodyAuthors" class="panel-collapse collapse show">
						        <div class="panel-body">
									<div class="cl_skill_checkbox">
										<div class="content ui_kit_checkbox style2 text-left">
											@foreach($formateur as $formateurs)
											<div class="custom-control custom-checkbox">
												<input type="checkbox" class="custom-control-input" id="formateurCheck{{$formateurs->id}}" onclick="formateurs{{$formateurs->id}}()">
												<label class="custom-control-label" for="formateurCheck{{$formateurs->id}}">@if($formateurs->sexe == "M")
													M. {{ $formateurs->name }} 
													@else
													Mme. {{ $formateurs->name }} 
													@endif
													<span class="float-right">{{nbFormationFormateur($formateurs->id)}}</span></label>
											</div>
											<script type="text/javascript">
											function formateurs{{$formateurs->id}}(){
												if(document.getElementById("formateurCheck{{$formateurs->id}}").checked){
															var csrfToken = $('meta[name="csrf-token"]').attr('content');
															var idformateur = {{$formateurs->id}};
															console.log(idformateur);
															$.ajax({
															type: 'POST',
															enctype: 'multipart/form-data',
															url: '{{url('forma_show')}}',
															data: {
															idformateur:idformateur,
															"_token":csrfToken
															    },

															success:function(result) {
															if(result.number == '1'){
																console.log(result);

															$(".formations").hide();
															$(".partieFormation").hide();

															$(".formateur{{$formateurs->id}}").show();

															$(".formateur{{$formateurs->id}}").html(result.data);
															                                        
															                            
															                                        
															                                        
															}
														}
													});
												}else{
													$(".formateur{{$formateurs->id}}").hide();
												}
												
											}
										</script>
											@endforeach
										</div>
									</div>
						        </div>
						    </div>
					    </div>
					</div>
				</div>
				<div class="selected_filter_widget style2 mb30">
				  	<div id="accordion" class="panel-group">
					    <div class="panel">
					      	<div class="panel-heading">
						      	<h4 class="panel-title">
						        	<a href="#panelBodyPrice" class="accordion-toggle link fz20 mb15" data-toggle="collapse" data-parent="#accordion">Prix</a>
						        </h4>
					      	</div>
						    <div id="panelBodyPrice" class="panel-collapse collapse show">
						        <div class="panel-body">
									<div class="ui_kit_whitchbox">
										<div class="custom-control custom-switch">
											<input type="checkbox" class="custom-control-input" id="payant" onclick="payant()">
											<label class="custom-control-label" for="payant">Payantes </label>
										</div>
										<div class="custom-control custom-switch">
											<input type="checkbox" class="custom-control-input" id="gratuit" onclick="gratuit()">
											<label class="custom-control-label" for="gratuit">Gratuites</label>
										</div>
									</div>
									<script type="text/javascript">
										function payant(){
											if(document.getElementById("payant").checked){
															var csrfToken = $('meta[name="csrf-token"]').attr('content');
															var payant = "payant";
															
															$.ajax({
															type: 'POST',
															enctype: 'multipart/form-data',
															url: '{{url('payant')}}',
															data: {
															payant:payant,
															"_token":csrfToken
															    },

															success:function(result) {
															if(result.number == '1'){
																console.log(result);

															$(".formations").hide();
															$(".partieFormation").hide();

															$(".partieFormateur").hide();
															$(".partiePayante").show();

															$(".partiePayante").html(result.data);
															                                        
															                            
															                                        
															                                        
															}
														}
													});
												}else{
													$(".partiePayante").hide();
												}
										}

										function gratuit(){
											if(document.getElementById("gratuit").checked){
															var csrfToken = $('meta[name="csrf-token"]').attr('content');
															var gratuit = "gratuit";
															
															$.ajax({
															type: 'POST',
															enctype: 'multipart/form-data',
															url: '{{url('gratuit')}}',
															data: {
															gratuit:gratuit,
															"_token":csrfToken
															    },

															success:function(result) {
															if(result.number == '1'){
																console.log(result);

															$(".formations").hide();
															$(".partieFormation").hide();

															$(".partieFormateur").hide();
															$(".partiePayante").hide();
															$(".partieGratuite").show();

															$(".partieGratuite").html(result.data);
															                                        
															                            
															                                        
															                                        
															}
														}
													});
												}else{
													$(".partieGratuite").hide();
												}
										}


										
									</script>
						        </div>
						    </div>
					    </div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</section>


@endsection