@extends('layouts.default') 
@section('content')
<style>
.aide{
	width: 39px;
    height: 17px;
    border-radius: 4px;
    margin-right: 7px;
}
.green{background: green;}
.red{background: red;}
.blue{background: blue;}
.gris{background: #ddd;}
	.etat_0 {
	    background: #ddd;
	    width: 300px;
	    height: 25px;
	    float: left;
	    margin: 3px;
	    color: white;
	     font-size: 14px;
	    cursor: pointer;
	    line-height: 25px;
	    text-align: center;
	    font-weight: 700;
	}
	.etat_1 {
	    background: blue;
	    width: 300px;
		height: 25px;
	    float: left;
	    margin: 3px;
	    color: white;
	    font-size: 14px;
	    cursor: pointer;
		line-height: 25px;
	    text-align: center;
	    font-weight: 700;
	}
	.etat_2 {
	    background: red;
	    width: 300px; 
		height: 25px;
	    float: left;
	    margin: 3px;
	    color: white;
	    font-size: 14px;
	    cursor: pointer;
		line-height: 25px;
	    text-align: center;
	    font-weight: 700;
	}
	.etat_3 {
	    background: green;
	    width: 300px; 
		height: 25px;
	    float: left;
	    margin: 3px;
	    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('position.syncPositions')}}" class="btn btn-success" style="position: absolute;right: 14px;">
				<i class="fa fa-refresh" style="font-size: 16px!important;"></i> Sync
			</a>
			@if($count_position == 0)
			<form action="{{ route('position.importPositions') }}" method="POST" class="pull-left form-inline"
				  enctype="multipart/form-data">
					@csrf
					<label for="">Importer</label>
					<input type="file" name="file"  class="form-control" style="width: 200px"> 
					<button class="btn btn-info btn-sm" style="padding: 3px;margin: 0px;margin-top: -7px;">
						<i class="fa fa-save" style="font-size: 17px;"></i>
					</button>
			</form>
			@endif
			<form action="{{ route('position.store') }}" method="POST" class="text-center form-inline">
					@csrf
					<label for="">Nombre de position</label>
					<input type="text" name="nbr_position"  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: #ddd;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">
				<div class="col-md-10 col-md-offset-1">
					<div class="pull-left" style="width:25%;">
						<div class="pull-left aide green" ></div> Controlée
					</div>
					<div class="pull-left" style="width:25%;">
						<div class="pull-left aide red" ></div> Avec Ecart à controler
					</div>
					<div class="pull-left" style="width:25%;">
						<div class="pull-left aide blue" ></div> Sans Ecart à valider
					</div>
					<div class="pull-left" style="width:25%;">
						<div class="pull-left aide gris" ></div> Non traitée
					</div>
				</div>
				@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->verifie == 0)
							@if($position->etat == 1 && $position->ecart == 1)
								<div class="etat_2" title="{{$position->nbr_prod}} / {{$position->position}}"
									 data-toggle="modal" data-target="#panel_position_modal"
										onclick='getPositionsStockMultiple("{{$position->position}}","{{$position->libelle}}");'>{{$position->libelle}}</div>
							@elseif($position->etat == 1 && $position->ecart == 0)
								<div class="etat_1" title="{{$position->nbr_prod}} / {{$position->position}}"
									 data-toggle="modal" data-target="#panel_position_modal"
										onclick='getPositionsStockMultiple("{{$position->position}}","{{$position->libelle}}");'>{{$position->libelle}}</div>
							@else
								<div class="etat_0" title="{{$position->nbr_prod}} / {{$position->position}}"
									 data-toggle="modal" data-target="#panel_position_modal"
										onclick='getPositionsStockMultiple("{{$position->position}}","{{$position->libelle}}");'>{{$position->libelle}}</div>
							@endif
						@else
							<div class="etat_3" title="{{$position->nbr_prod}} / {{$position->position}}"
									 data-toggle="modal" data-target="#panel_position_modal"
										onclick='getPositionsStockMultiple("{{$position->position}}","{{$position->libelle}}");'>{{$position->libelle}}</div>
						@endif
						@endforeach
						<div class="clearfix"></div>
						<hr>
					</div>
				@endforeach
			</div>
		</div>
	</div>
	

<div class="modal fade" id="panel_position_modal" tabindex="-1" role="dialog" aria-labelledby="panel_position_modalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered  modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5 class="modal-title" id="exampleModalLongTitle">Position et stock Groupé par code a barre</h5>
      </div>
      <div class="modal-body">
        <div id="panel_stock_postions"></div>
      </div>
    </div>
  </div>
</div>
	<!-- <div class="col-md-12">
		<div class="panel panel-body text-center">
			<h1 class="text-center" style="color:red">Depricated page</h1>
			<a href="{{ route('positionSomocer.indexSomocer')}}" class="btn btn-info text-center"> 
					Cliquer ici
			</a>
		</div>
	</div> -->
	
<script>
	function getPositionsStockMultiple(position,libelle){
        $('#panel_stock_postions').empty();

        $.ajax({
            url: '{{route("position.getPositionsStockMultiple")}}',
            type: 'GET',
            data: { position : position},
        })
        .done(function(response) {
            var block = ``;
            var tr = '';
            var thead = `<thead>
                            <tr>
								<th class="text-center">Code</th>
								<th class="text-center">Code a barre</th>
								<th class="text-center">Designation</th>
                                <th class="text-center">Stock_théorique</th>
                                <th class="text-center">Quantite stock</th>
                                <th class="text-center">Stock_total</th>
                                <th class="text-center">Ecart</th>
                                <th class="text-center">Type</th>
                                <th class="text-center">Date</th>
                                <th class="text-center">Agent</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>`;
            if(response.stock.length > 0){
                response.stock.forEach( function(element, index) {
                    var id =  element.id + '_' + element.produit_code;
                        
                    //var id_pos = id+'_pos';
                    var id_quantite = id+'_pos';
                    //var id_type = id+'_type';
					var red_col = '';
					if(element.stock_theorique != element.stock_total){
						red_col="background: #fbaeb9f5!important;";
					}
					var ecart = element.stock_total - element.stock_theorique;
                    tr += `
                        <tr style="${red_col}">
							<td class="text-center">${element.produit_code}</td>
							<td class="text-center">${element.code_a_barre}</td>
							<td class="text-center">${element.designation}</td>
							<td class="text-center">${element.stock_theorique}</td>
                            <td class="text-center">
                                <input type="text" class="inputPosition" id="${id}_quantite" value="${element.stock_inventaire}" />
                            </td>
                            <td class="text-center">${element.stock_total}</td>
                            <td class="text-center">${ecart}</td>
                            <td class="text-center">${element.type}</td>
                            <td class="text-center">${element.date_inventaire}</td>
                            <td class="text-center">${element.nom}</td>
                            <td class="text-center">
                                <button class="btn btn-primary btn-xs" style="margin:0px;"
                                		onclick="updatequantiteFromPosition(
											'${element.id}', '${element.produit_code}', '${element.code_a_barre}',
											'${position}', '${element.inventaire_code}'
										);">
                                    <i class="fa fa-pencil"></i>
                                </button>
                            </td>
                        </tr>
                    `;
                });
            }
			
            block += `<Button class="btn btn-success" onclick="updateToVerified('${position}');" 
								style="position: absolute;right: 52px;top: 12px;">Vérifie</Button>`;
            block += `<h3 class="text-center">Position N° : ${position} / ${libelle}</h3>`;
            block += `<div class="col-md-4 col-md-offset-3" style="position:absolute;">`;
            block += `<h4 class="pull-left">${response.nbr_prods} Produits</h4>`;
            block += `<h4 class="pull-right">${response.nbr_cab} Code a barre</h4>`;
            block += `</div>`;
            block += `<div class="clearfix"></div>`;
            block += `<div class="row">
						<div class="col-md-12">
							<table class="table" id="position-inv">
								${thead}
								<tbody>
									${tr}
								</tbody>
							</table>
						</div>
					 </div>`;
            $('#panel_stock_postions').append(block);

			$(document).ready(function() {

				$("#position-inv").DataTable({
					// dom: "Bfrtip",
					//fixedHeader: true,
					//"scrollY": 800,
					//'stripeClasses':['stripe1','stripe2'],
					order: [[ 6, "desc" ]],
					paging : true,
					ordering : true,
					searching : true,
					buttons: [],
					responsive: false
				});
			});
        })
        .fail(function() {
            console.log("error");
        }); 
    };

	function updateToVerified(position){
		var data = {position};
		$.ajax({
                url: '{{route("position.updateToVerified")}}',
                type: 'POST',
                data:data,
                headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
            })
            .done(function(response) {
                if(response.success==true){
                    toastr.success('Saved', "Succès!!");
                }
                if(response.success==false){
                    toastr.warning('Attention', response.message);
                }

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
	}
	function updatequantiteFromPosition(id_stock, produit_code, code_a_barre, position, inventaire_code){
		var id =  id_stock + '_' + produit_code;
        var quantite = $(`#${id}_quantite`).val();
        var data =  {
                    code_a_barre: code_a_barre,
                    produit_code: produit_code,
                    position: position,
                    quantite: quantite,
					inventaire_code: inventaire_code
                };
				console.log(data);
            $.ajax({
                url: '{{route("position.updatequantiteFromPosition")}}',
                type: 'POST',
                data:data,
                headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
            })
            .done(function(response) {
                if(response.success==true){
                    toastr.success('Saved', "Succès!!");
                    //window.location.reload();
                }
                if(response.success==false){
                    toastr.warning('Attention', response.message);
                }

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
          
    };
	
</script>
</div>
@endsection