@extends('layouts.default') 
@section('content')
<style>
	.etat_0 {
	    background: red;
	    min-width: 65px;
	    max-width: 130px;
	    height: 25px;
	    float: left;
	    margin: 2px;
	    color: white;
	     font-size: 14px;
	    cursor: pointer;
	    line-height: 25px;
	    text-align: center;
	    font-weight: 700;
	}
	.etat_1 {
	    background: #1abb9c;
		min-width: 65px;
	    max-width: 130px;
		height: 25px;
	    float: left;
	    margin: 2px;
	    color: white;
	    font-size: 14px;
	    cursor: pointer;
		line-height: 25px;
	    text-align: center;
	    font-weight: 700;
	}
	.etat_2 {
	    background: #1a24bb;
		min-width: 65px;
	    max-width: 130px;	    
		height: 25px;
	    float: left;
	    margin: 2px;
	    color: white;
	    font-size: 14px;
	    cursor: pointer;
		line-height: 25px;
	    text-align: center;
	    font-weight: 700;
	}
</style>
<div class="row">
	
	<div class="col-md-12">
		<div class="panel panel-body">
			<a href="{{ route('positionSomocer.reinstalPosition')}}" class="btn btn-info" style="position: absolute;right: 122px;;">
				<i class="fa fa-refresh" style="font-size: 16px!important;"></i> Re-install Position
			</a>
			<a href="{{ route('positionSomocer.syncPositions')}}" class="btn btn-success" style="position: absolute;right: 14px;">
				<i class="fa fa-refresh" style="font-size: 16px!important;"></i> Sync etat
			</a>


			<form action="{{ route('positionSomocer.store') }}" method="POST" class="text-center form-inline">
					@csrf
					<label for="">Nombre de position</label>
					<input type="text" name="nbr_position" disabled="disabled"  class="form-control" style="width: 100px" value="{{ $count_position }}"> 

					<label for="">Nombre de d'Agent</label>
					<input type="text" name="nbr_agen"  class="form-control" style="width: 100px"
							value="@if($params) {{ $params->nbr_agen }} @endif">
					<button class="btn btn-info btn-sm" style="padding: 3px;margin: 0px;">
						<i class="fa fa-save" style="font-size: 17px;"></i>
					</button>
			</form>
		</div>
	</div>
	<div class="col-md-12">
		
		<div class="col-md-4">
			<div class="panel panel-body" style="background: #e23737;color:#fff;border-radius: 10px;">
				<h2 class="text-center">Total des Positions</h2>
				<h1 class="text-center">{{$count_position}}</h1>
			</div>
		</div>
		<div class="col-md-4" >
			<div class="panel panel-body"style="background: #1abb9c;color:#fff;border-radius: 10px;">
				<h2 class="text-center">Nbr de position traitée(s)</h2>
				<h1 class="text-center">{{$count_position_traite}}</h1>
			</div>
		</div>
		<div class="col-md-4" >
			<div class="panel panel-body"style="background: #FFA500;color:#fff;border-radius: 10px;">
				<h2 class="text-center">Nbr de position non traitée(s)</h2>
				<h1 class="text-center">{{$count_position - $count_position_traite}}</h1>
			</div>
		</div>
		
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-body">
				@foreach($traveaux as $key => $traveau)
					<div class="block-{{$key}}" style="margin-top: 5px;">
						<div  style="margin: 1px;width: 77px"><b>Appareil-{{$key}}</b></div>
						@foreach($traveau as $position )
							@if($position->etat == 1 && $position->ecart == 1)
								<div class="etat_2" title="{{$position->nbr_prod}} / {{$position->position}}">{{$position->position}}</div>
							@elseif($position->etat == 1 && $position->ecart == 0)
								<div class="etat_1" title="{{$position->nbr_prod}} / {{$position->position}}">{{$position->position}}</div>
							@else
								<div class="etat_0" title="{{$position->nbr_prod}} / {{$position->position}}">{{$position->position}}</div>
							@endif
						@endforeach
						<div class="clearfix"></div>
						<hr>
					</div>
				@endforeach
			</div>
		</div>
	</div>

	
</div>
@endsection