@extends('layouts.default') 
@section('content')
<style>
	input{
		width: 90%!important;
	}
	.picker.picker--focused.picker--opened{
		position: fixed!important;
	}
</style>
<!--<p class="titre_page">Stock It </p>-->
<div class="row">
	<div class="col-md-2">
		@include('partials.articles_menu')
	</div>
	<div class="col-md-10">
		<div class="panel panel_body">
			<button class="btn btn_plus" data-toggle="modal" data-target="#ajouter">
				<i class="fa fa-plus btn_plus_icon"></i>
			</button>
			<table class="table" id="positionTable">
				<thead onclick="toggle_searchable();">
					<tr>
						<th class="text-center">Localisation</th>
						<th class="text-center">Code</th>
						<th class="text-center">N° Cmd</th>
						<th class="text-center">N° Piece</th>
						<th class="text-center">N° Facture</th>
						<th class="text-center">Lieu livraison</th>
						<th class="text-center">Date livraison</th>
						<th class="text-center">Date Achat</th>
						<th class="text-center">Date Facture</th>
						<th class="text-center">Article</th>
						<th class="text-center">Quantite</th>
						<th class="text-center" style="width: 170px;">Fournisseur</th>
					</tr>
				</thead>
				<thead id="panel-searchable" style="display: none;">
					<form action="" method="GET">
						<tr>
							<th class="text-center bg-white" >
								<select name="localisation_code" class="form-control" style="width: 100%">
									<option value="">Choisir...</option>
									@foreach($localisations as $localisation)
										<option value="{{ $localisation->code}}"
											@if($localisation_code == $localisation->code) selected @endif>
											{{$localisation->code}}
										</option>									
									@endforeach
								</select>
							</th>
							<th class="text-center bg-white" colspan="4">
								<input type="text" placeholder="Code" class="form-control" name="code"
										@if($code) value="{{$code}}" @endif>
							</th>
							<th class="text-center bg-white">
								<input type="text" placeholder="lieu_livraison" class="form-control" name="lieu_livraison"
										@if($lieu_livraison) value="{{$lieu_livraison}}" @endif>
							</th>
							<th class="text-center bg-white" colspan="3">
								<input type="text" placeholder="date" class="form-control datepicker-pickadate " name="date"
										@if($date) value="{{$date}}" @endif>
							</th>
							<th class="text-center bg-white" colspan="2">
								<select name="article_code" class="form-control" style="width: 100%">
									<option value="">Choisir...</option>
									@foreach($articles as $article)
										<option value="{{ $article->code}}"
											@if($article_code == $article->code) selected @endif>
											{{$article->designation}}
										</option>									
									@endforeach
								</select>
							</th>
							<th class="text-center bg-white">
								<select name="fournisseur_code"  class="form-control" style="width: 70%!important;">
									<option value="">Choisir...</option>
									@foreach($fournisseurs as $fournisseur)
										<option value="{{ $fournisseur->code}}"
											@if($fournisseur_code == $fournisseur->code) selected @endif>
											{{$fournisseur->designation}}
										</option>
									@endforeach
								</select>

								<button class="btn btn-xs btn-info">
									<i class="fa fa-search"></i>
								</button>
							</th>
						</tr>
					</form>
				</thead>
				<tbody>
					@foreach($stock_its as $stock_it)
					<tr>
						<td class="text-center">{{ $stock_it->localisation_code }}</td>
						<td class="text-center">
							<div class="c-blue"  data-toggle="modal" data-target="#{{ $stock_it->id }}">{{ $stock_it->code }}</div>
							<div class="modal fade" id="{{ $stock_it->id }}" role="dialog">
							  <div class="modal-dialog" 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">Modifiction de stock_it : {{$stock_it->code}}</h5>
							      </div>
							      <div class="modal-body">
							        <form action="{{ route('stock_it.update')}}" method="POST">
							        	<div class="row">
							        		<div class="col-md-6">
							        			{{csrf_field()}}
												<input type="hidden" name="_method" value="PUT">
												<input type="hidden" name="id" value="{{$stock_it->id}}">
												<div class="form-group">
													<label for="code">Code</label>
													<input type="text" class="form-control" name="code" required 
													value="{{$stock_it->code}}">
												</div>
												<div class="form-group">
													<label for="num_commande">Num° Commande</label>
													<input type="text" class="form-control" name="num_commande"  
													value="{{$stock_it->num_commande}}">
												</div>
												<div class="form-group">
													<label for="num_piece">Num° Piece</label>
													<input type="text" class="form-control" name="num_piece"  
													value="{{$stock_it->num_piece}}">
												</div>
												<div class="form-group">
													<label for="num_facture">Num° facture</label>
													<input type="text" class="form-control" name="num_facture"  
													value="{{$stock_it->num_facture}}">
												</div>
												<div class="form-group">
													<label for="lieu_livraison">Lieu Livraison</label>
													<input type="text" class="form-control" name="lieu_livraison"  
													value="{{$stock_it->lieu_livraison}}">
												</div>
							        		</div>
							        		<div class="col-md-6">
							        			<div class="form-group">
													<label for="date_livraison">Date Livraison</label>
													<input type="text" class="form-control datepicker-pickadate" name="date_livraison"  
													value="{{$stock_it->date_livraison}}">
												</div>
												<div class="form-group">
													<label for="date_achat">Date d'Achat</label>
													<input type="text" class="form-control datepicker-pickadate" name="date_achat"  
													value="{{$stock_it->date_achat}}">
												</div>
												<div class="form-group">
													<label for="date_facture">Date Facture</label>
													<input type="text" class="form-control datepicker-pickadate" name="date_facture"  
													value="{{$stock_it->date_facture}}">
												</div>
												<div class="form-group">
													<label for="article_code">Article</label>
													<select name="article_code" class="form-control">
														<option value="">Choisir...</option>
														@foreach($articles as $article)
															<option value="{{$article->code}}" 
																@if($article->code == $stock_it->article_code) selected @endif>
																{{$article->designation}}
															</option>
														@endforeach
													</select>
												</div>

												<div class="form-group">
													<label for="quantite">Quantite</label>
													<input type="number" class="form-control" name="quantite" required 
													value="{{$stock_it->quantite}}">
												</div>
												<div class="form-group">
													<label for="fournisseur_code">Fournisseur</label>
													<select name="fournisseur_code" class="form-control" required>
														<option value="">Choisir...</option>
														@foreach($fournisseurs as $fournisseur)
															<option value="{{$fournisseur->code}}" 
																@if($fournisseur->code == $stock_it->fournisseur_code) selected @endif>
																{{$fournisseur->designation}}
															</option>
														@endforeach
													</select>
												</div>
							        		</div>
							        		<div class="col-md-12">
							        			<div class="form-group">
													<label for="localisation_code">Localisation</label>
													<select name="localisation_code" class="form-control" required>
														<option value="">Choisir...</option>
														@foreach($localisations as $localisation)
															<option value="{{$localisation->code}}" 
																@if($localisation->code == $stock_it->localisation_code) selected @endif>
																{{$localisation->code}}
															</option>
														@endforeach
													</select>
												</div>
												<div class="form-group">
													<button class="btn btn-info pull-right">Enregistrer</button>
												</div>
							        		</div>
							        	</div>
									</form>
							      </div>
							    </div>
							  </div>
							</div>
						</td>
						<td class="text-center">{{ $stock_it->num_commande }}</td>
						<td class="text-center">{{ $stock_it->num_piece }}</td>
						<td class="text-center">{{ $stock_it->num_facture }}</td>
						<td class="text-center">{{ $stock_it->lieu_livraison }}</td>
						<td class="text-center">{{ $stock_it->date_livraison }}</td>
						<td class="text-center">{{ $stock_it->date_achat }}</td>
						<td class="text-center">{{ $stock_it->date_facture }}</td>
						<td class="text-center">{{ $stock_it->article }}</td>
						<td class="text-center">{{ $stock_it->quantite }}</td>
						<td class="text-center" style="width: 170px;">{{ $stock_it->fournisseur }}</td>
					</tr>
					@endforeach
				</tbody>
			</table>
			<div class="pull-right">
				{{ $stock_its->appends($_GET)->links() }}
			</div>
		</div>
	</div>
	


	<div class="modal fade" id="ajouter" role="dialog">
	  <div class="modal-dialog  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">Ajouter Stock It</h5>
	      </div>
	      <div class="modal-body">
	        <form action="{{ route('stock_it.store')}}" method="POST">
				{{csrf_field()}}
				<div class="row">
					<div class="col-md-4">
						<div class="form-group">
							<label for="num_commande">Num° Commande</label>
							<input type="text" class="form-control" name="num_commande">
						</div>
						<div class="form-group">
							<label for="num_piece">Num° Piece</label>
							<input type="text" class="form-control" name="num_piece">
						</div>
						<div class="form-group">
							<label for="num_facture">Num° facture</label>
							<input type="text" class="form-control" name="num_facture">
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label for="date_livraison">Date Livraison</label>
							<input type="text" class="form-control datepicker-pickadate" name="date_livraison">
						</div>
						<div class="form-group">
							<label for="date_achat">Date d'Achat</label>
							<input type="text" class="form-control datepicker-pickadate" name="date_achat">
						</div>
						<div class="form-group">
							<label for="date_facture">Date Facture</label>
							<input type="text" class="form-control datepicker-pickadate" name="date_facture">
						</div>
					</div>
					<div class="col-md-4">

						<div class="form-group">
							<label for="fournisseur_code">Fournisseur</label>
							<select name="fournisseur_code" class="form-control" required>
								<option value="">Choisir...</option>
								@foreach($fournisseurs as $fournisseur)
									<option value="{{$fournisseur->code}}">
										{{$fournisseur->designation}}
									</option>
								@endforeach
							</select>
						</div>
						<div class="form-group">
							<label for="lieu_livraison">Lieu Livraison</label>
							<input type="text" class="form-control" name="lieu_livraison">
						</div>
						<div class="form-group">
							<label for="localisation_code">Localisation</label>
							<select name="localisation_code" class="form-control">
								<option value="">Choisir...</option>
								@foreach($localisations as $localisation)
									<option value="{{$localisation->code}}" 
										@if($localisation->initial == 1) selected @endif>
										{{$localisation->code}}
									</option>
								@endforeach
							</select>
						</div>
					</div>
				</div>
				<div class="row gradian-border">
					<input type="hidden" id="id_article" value="0">
					<div class="col-md-5 col-md-offset-1">
						<div class="form-group">
							<label for="fournisseur_code">Article</label>
							<select name="articles[0][article]" class="form-control" id="article-0" onchange="checkifExist('0');" required>
								<option value="">Choisir...</option>
								@foreach($articles as $article)
									<option value="{{$article->code}}">
										{{$article->designation}}
									</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="col-md-5">
						<div class="form-group">
							<label for="quantite">Quantite</label>
							<input type="number" class="form-control" name="articles[0][quantite]" required id="quantite-0">
						</div>
					</div>
					<div class="col-md-1" style="position: relative;">
						<i class="fa fa-plus" title="Ajouter un article" onclick="addArticle();"
						   style="position: absolute;font-size: 27px;color: #1fd01f;top: 25px;left: 21px;cursor: pointer"></i>
					</div>
					<div id="panel-articles">
						
					</div>
				</div>
				<div class="row">
					<div class="col-md-11 col-md-offset-1">
						<div class="form-group">
							<button class="btn btn-info">Enregistrer</button>
						</div>
					</div>
				</div>
			</form>
	      </div>
	    </div>
	  </div>
	</div>
</div>
<script>
	var articles = [];

	function addArticle(){
		var numero = $('#id_article').val(); 

		var article = $('#article-'+numero).val();
		var quantite = $('#quantite-'+numero).val();

		var obj = {
			article : article,
			quantite : quantite
		};

		articles.push(obj);


		numero = Number(numero) +1; 
		$('#id_article').val(numero); 

		var content= `
			<div id="article-panel-${numero}">
				<div class="col-md-5 col-md-offset-1">
					<div class="form-group">
						<label for="article-${numero}">Article</label>
						<select name="articles[${numero}][article]" class="form-control" required
								id="article-${numero}"  onchange="checkifExist('${numero}');">
							<option value="">Choisir...</option>
							@foreach($articles as $article)
								<option value="{{$article->code}}">
									{{$article->designation}}
								</option>
							@endforeach
						</select>
					</div>
				</div>
				<div class="col-md-5">
					<div class="form-group">
						<label for="quantite-${numero}">Quantite</label>
						<input type="number" class="form-control" name="articles[${numero}][quantite]" required id="quantite-${numero}">
					</div>
				</div>
				<div class="col-md-1" style="position: relative;">
					<i class="fa fa-minus" title="Supprimer un article" onclick="removeArticle('${numero}');"
					   style="position: absolute;font-size: 27px;color: red;top: 25px;left: 21px;cursor: pointer"></i>
				</div>
			</div>
		`;
		$('#panel-articles').append(content);
		console.log(articles);
	};


	function removeArticle(numero){
		$('#article-panel-'+numero).remove();
	};

	function checkifExist(numero){
		var article = $('#article-'+numero).val();
		if(articles.length>0){
			var i = 0;
			articles.forEach( function(element, index) {
				if(element.article == article){
					i = i+1;
				}
			});
			if(i>0){
				toastr.warning('Oups!', "Vous avez deja saisi l'article code "+article);
				$('#article-'+numero).val('');
			}
		}
	};
</script>
@endsection