@extends('layouts.default') 
@section('content')
<style media="print">
	.noprint{
		display: none!important;
	}
</style>
<style>
		@media print
		{
		      .page-break  { min-height: 1px;display:block!important; page-break-before:always!important; }

		}
		@page  
		{ 
		       /* auto is the initial value */ 
		    /* this affects the margin in the printer settings */ 
		    margin: 0px!important;  
		    padding: 0px!important; 
		}
	@media print {

		@page  
		{ 
		      /* auto is the initial value */ 
		    /* this affects the margin in the printer settings */ 
		    margin: 0px!important;  
		    padding: 0px!important;
		} 
	  a[href]:after {
	    content: none !important;
	  }
	  .backcolor{width: 100%;
	  	-webkit-print-color-adjust: exact; 
	  }
	  .type_case{
	  		width: 70%;color: #fff;
	  		-webkit-print-color-adjust: exact; 
	  }
	  .groupe_case{
	  	width: 30%;color:#fff!important;
	   -webkit-print-color-adjust: exact; 
	  }
	  .c-f{
		color:#fff!important;
		-webkit-print-color-adjust: exact;
	   }
	   .page_details{
		   /* margin-left: -93px!important;*/
		}
		.p-0-imprime{
		    padding: 0px!important;
		}


		.right_col {
		    padding: 0px!important;
		    margin-left: 0px!important;
		}
	}
	.c-f{
		color:#fff!important;
	}

</style>
 <a class="btn btn-info noprint" href="{{route('participant.index')}}" style="position: absolute;right: 87px;top: 6px;">
 	<i class="fa fa-list"></i>
 </a>
 <a class="btn btn-info noprint" href="{{route('participant.addParticipant')}}" style="position: absolute;right: 130px;top: 6px;">
 	<i class="fa fa-plus"></i>
 </a>
	<a href="javascript:window.print()" class="btn btn-primary pull-right noprint">Imprimer </a> 

<div class="row page_details">	
	@foreach($participants as $k=>$participant)	
	<div class="col-md-5 p-0-imprime " style="width: 400px!important;height: 560px!important">	
		<div class="panel panel-body text-center p-0-imprime" style="height: 555px!important">
			<img src="{{ asset('uploads/FTTH.PNG') }}" style="width: 60%;margin-top:30px;padding-bottom: 10px;">
			<br>
			<div>Congrès Annuel : Sousse le 27/01/2019</div>
			<br>
			<div class="text-center">
				<div class="col-md-12 backcolor" style="width:100%;background-color:{{$participant->color}}!important;margin-bottom: 14px;">
					<div class="col-md-10 text-center type_case"><h3 class="text-center c-f">{{$participant->type}}</h3></div>
					<div class="col-md-2 groupe_case"><h3 class="text-center c-f">{{$participant->groupe}}</h3></div>
				</div>
				<div class="clearfix"></div>
				<h5 class="text-center"style="height: 50px;">
					Mr/Mme <br> <span style="font-size: 20px;height: 50px;">{{$participant->nom}}</span></h5>

				<div class="text-center" style="height: 60px;">
    				Societé/Organisme <br> <span style="font-size: 15px;height: 60px;">{{$participant->societe}}</span></div>
				<br>
				<img src="{{asset('/uploads/barcode/'.$participant->code_barre.'.png')}}" alt="">
					
				<div>{{$participant->code_barre}}	</div>
			</div>
		</div>
	</div>
	@if($k%4==0) <div class="page-break"></div> @endif
	@endforeach
</div>
@endsection