@extends('layouts.default') 
@section('content')
<style media="print">
	.noprint{
		display: none!important;
	}
</style>
<style>
@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>

<div class="row page_details">
	<div class="col-md-5 p-0-imprime " style="width: 400px!important;height: 560px!important">	
		<a href="javascript:window.print()" class="btn btn-primary text-center noprint">Imprimer </a> 
		
		@if($check_code_barre==false)
		<a href="{{route('participant.regenerateCodebarre', ['id' => $participant->id])}}" 
			class="btn btn-success pull-right noprint">Generer CodeBarre </a>
		@endif

		<div class="clearfix"></div>
		<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>
	<div class="col-md-7 noprint">
		<br><br>
		<div class="panel panel-body" style="margin-top: 7px;">
			<table class="table">
				<thead>
					<tr>
						<th class="text-center">Date</th>
						<th class="text-center">Type</th>
						<th class="text-center">Locale</th>
						<th class="text-center">Satisfaction</th>
					</tr>
				</thead>
				<tbody>
					@foreach($mvts as $mvt)
					<tr>
						<td class="text-center">{{$mvt->date}}</td>
						<td class="text-center">{{$mvt->type}}</td>
						<td class="text-center">{{$mvt->locale}}</td>
						<td class="text-center">
							@if($mvt->type =='sortie')
								@if($mvt->satisfaction == '1')
									<i class="fa fa-smile-o" style="color: #03c173;font-size: 18px;font-weight: 600;"></i>
								@else
									<i class="fa fa-frown-o" style="color: #f34137;font-size: 18px;font-weight: 600;"></i>
								@endif
							@endif
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>
		</div>
	</div>
</div>
@endsection