@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('/cherchertableau') }}',
                 data:{
                   'search':search,
                   "_token":"{{ csrf_token() }}"
                 },
                     

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

                         $(".tableaux").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">Tableaux de bord</h4>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">Accueil</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Tableaux de bord</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>
					<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 tableaux">
					@foreach($tableau as $tableaux)
					<div class="col-md-6 col-lg-6 col-xl-4">
					    <div class="top_courses">
					        <div class="thumb">
					            <img class="img-whp" src="{{asset($tableaux->photo)}}" alt="{{$tableaux->nameP}}" style="height: 200px; overflow: hidden;">
					            <div class="overlay">
					                <div class="tag">Tableau de bord</div>
					                <div class="icon paniertableau{{$tableaux->id}}"><span class="fa fa-shopping-cart" title="Ajouter au panier"></span></div>
					                <a class="tc_preview_course" href="{{url('tableaux/'.$tableaux->id)}}">Description du tableau</a>
					            </div>
					        </div>
					        <div class="details">
					            <div class="tc_content" onclick="window.location.href='{{url('tableaux/'.$tableaux->id)}}'">
					                <h5 style="height: 80px; overflow: hidden;">{{$tableaux->nameP}}</h5>
					            </div>
					            <div class="tc_footer">
					            	<ul class="tc_meta float-left paniertableau{{$tableaux->id}}">
					            	    <li class="list-inline-item"><span class="fa fa-shopping-cart" title="Ajouter au panier">Ajouter au panier</span></li> 
					            	    
					            	</ul>
					                <div class="tc_price float-right">{{$tableaux->price}} XOF</div>
					            </div>
					        </div>
					    </div>
					</div>

					<script type="text/javascript">
						$('.paniertableau{{$tableaux->id}}').on('click', function(){

							var id = {{$tableaux->id}};
							var nombre = 1;
							
									var csrfToken = $('meta[name="csrf-token"]').attr('content');
									var payant = "payant";
									
									$.ajax({
									type: 'POST',
									enctype: 'multipart/form-data',
									url: '{{url('addToCart')}}',
									data: {
									'id': id,
									'nombre':nombre,
									"_token":csrfToken
									    },

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


									Swal.fire({
									  icon: 'success',
									  title: '{{$tableaux->nameP}} bien ajouté au panier',
									  showConfirmButton: false,
									  timer: 1500
									});

									
									  $(".cart").html(result.data);
									                                        
									                            
									                                        
									                                        
									}
								}
							});
								
						});


						
					</script>



					@endforeach

					{{$tableau->Links()}}
					
					
				</div>

				<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="#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_tableau')}}',
															data: {
															payant:payant,
															"_token":csrfToken
															    },

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

															$(".tableaux").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_tableau')}}',
															data: {
															gratuit:gratuit,
															"_token":csrfToken
															    },

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

															$(".tableaux").hide();

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

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


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


@endsection