@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="shop-single-content pb0">
	<div class="container">
		<div class="row">
			<div class="col-lg-6 col-xl-6">
				<div class="single_product_grid">
					<div class="single_product_slider">
						<div class="item">
							<div class="single_product">
								<div class="single_item">
									<div class="thumb"><img class="img-fluid" src="{{asset($tableau->photo)}}" alt="ss1.png"></div>
								</div>
								<a class="product_popup popup-img" href="{{asset($tableau->photo)}}"><span class="flaticon-zoom-in"></span></a>
							</div>
						</div>
						<div class="item">
							<div class="single_product">
								<div class="single_item">
									<div class="thumb"><img class="img-fluid" src="{{asset($tableau->photo)}}"></div>
								</div>
								<a class="product_popup popup-img" href="{{asset($tableau->photo)}}"><span class="flaticon-zoom-in"></span></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-6 col-xl-6">
				<div class="shop_single_product_details">
					<h3 class="title">{{$tableau->nameP}}</h3>
					<div class="sspd_review mb20">
						<ul>
							<li class="list-inline-item"><a href="#"><i class="fa fa-star"></i></a></li>
							<li class="list-inline-item"><a href="#"><i class="fa fa-star"></i></a></li>
							<li class="list-inline-item"><a href="#"><i class="fa fa-star"></i></a></li>
							<li class="list-inline-item"><a href="#"><i class="fa fa-star"></i></a></li>
							<li class="list-inline-item"><a href="#"><i class="fa fa-star"></i></a></li>
							<li class="list-inline-item"><a href="#">(6)</a></li>
						</ul>
					</div>
					{!! $tableau->description !!}
					<div class="sspd_price mb25">{{$tableau->price }} XOF</div>
					<ul class="cart_btns ui_kit_button mb30">
						
						<li class="list-inline-item"><button type="button" class="btn paniertableau{{$tableau->id}}"><span class="flaticon-shopping-bag pr5 fz20"></span> Ajouter au panier</button></li>
					</ul>
					<script type="text/javascript">
						$('.paniertableau{{$tableau->id}}').on('click', function(){

							var id = {{$tableau->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: '{{$tableau->nameP}} bien ajouté au panier',
									  showConfirmButton: false,
									  timer: 1500
									});

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


						
					</script>
					<!-- <ul class="sspd_social_icon">
						<li class="list-inline-item">Share:</li>
						<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
						
					</ul> -->
				</div>

			</div>
			<div style="padding-top: 100px !important; color: #fff;">f</div>
		</div>
	</div>
</section>

@endsection