@extends('layouts.default') 
@section('content')
<style>
	.inputPosition{
        width: 110px!important;
        font-size: 15px!important;
        border: 1px solid #ada7a7!important;
        padding-left: 5px!important;
        height: 14px!important;
    }

</style>
<div class="row">
	
	<div class="col-md-6 col-md-offset-3">
		<div class="panel panel-body">

			<h5 class="text-center">{{ count($hors_inventaire) }} Article(s) hors inventaire</h5>
			<form action="{{ route('hors_inventaire.index')}}" method="GET" class="text-center">
				<label for="start">start</label>
				<input type="number" value="{{$start}}" class="inputPosition" name="start">
				<label for="end">end</label>
				<input type="number" value="{{$end}}"  class="inputPosition" name="end">

				<label for="end">get One</label>
				<input type="checkbox" @if($getone) checked @endif name="getone">

				<button type="submit" class="btn btn-info btn-xs"><i class="fa fa-search"></i></button>
			</form>
			<div class="relative">   
                <table class="table" id="hors-invs">
                    <thead>
                        <tr>
                            <th class="text-center">Code a barre</th>
                            <th class="text-center">Codes</th>
                            <th class="text-center">nbr Article</th>
                            <th class="text-center">Position</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody id="panel_details_hors_inv">
                        @foreach($hors_inventaire as $hr)
                        <tr class="@if($hr->produit_code != null) bg-green @endif" 
                            id="tdhor{{$hr->code_a_barre}}-{{$hr->inventaire_code}}-{{$hr->position}}" >
                            <td class="">
                                <a  data-toggle="modal" data-target="#modal_hors_inv" class="c-blue pull-right" 
                                    onclick="affectationcodeabarre('{{$hr->code_a_barre}}','{{$hr->inventaire_code}}', '{{$hr->produit_code}}')">
                                    {{$hr->code_a_barre}}
                                </a>
                            </td>
                            <td class="">
                            	@if(count($hr->codes)>0)
									@foreach($hr->codes as $k => $code)
										@if(count($hr->codes)== 1)
                                    		<button class="btn btn-success btn-xs" style="margin: 0px;height: 17px;" 
                                    			onclick="validerCabHoreInv('{{$hr->code_a_barre}}','{{$hr->inventaire_code}}', '{{$code->code}}')"
                                    			id="c-{{$hr->code_a_barre}}-{{$hr->inventaire_code}}-{{$code->code}}">
                                    			<i class="fa fa-save" style="margin-top: -8px;"></i>
                                    		</button>
                                    	@endif
										<a  data-toggle="modal" data-target="#modal_hors_inv" class="c-blue" 
                                    		onclick="affectationcodeabarre('{{$hr->code_a_barre}}','{{$hr->inventaire_code}}', '{{$code->code}}', true)" title="{{$code->designation}}">
                                    		{{ $code->code_a_barre}}
                                    	</a> 
                                    	@if(count($hr->codes)> 1) | @endif
                                    	
										@if($k==3) <div class="clearfix"></div> @endif
									@endforeach
                            	@endif
                            	@if($hr->more == true)
                            		<b title="plus de 8 code exist">...</b>
                            	@endif
                            </td>
                            <td class="text-center">{{$hr->stock_inventaire}}</td>
                            <td class="text-center">{{$hr->position}}</td>

                            <td class="text-center">
                                <button class="btn btn-danger btn-xs"  style="margin: 0px;" 
                                    onclick="deleteCAB('{{$hr->code_a_barre}}','{{$hr->inventaire_code}}', '{{$hr->position}}')">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
		</div>
	</div>
	

	<!-- Modal -->
	<div class="modal fade" id="modal_hors_inv" role="dialog" aria-labelledby="modal_hors_invTitle" aria-hidden="true">
	  <div class="modal-dialog modal-dialog-centered" 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">Affecter Code a barre</h5>
	      </div>
	      <div class="modal-body">
	        <div id="panel_hors_inv"></div>
	      </div>
	    </div>
	  </div>
	</div>


</div>


<script>
	function affectationcodeabarre(code_a_barre, inventaire_code, produit_code, getOne=false){
        $('#panel_hors_inv').empty();
        $('#panel_hors_inv').append(`<h3 class="text-center">${code_a_barre}</h3>`);
        var search = '';

        $.ajax({
            url: '{{route("dashboard.selecthorsInvProd")}}',
            type: 'GET',
            data : {
                getone : getOne,//if code produit exist dans inventaire
                produit_code : produit_code,
                inventaire_code : inventaire_code
            }
        })
        .done(function(response) {
            var options = '<option value="">Choisir...</option>';
            response.forEach( function(element, index) {
                var selected = (element.code == produit_code && produit_code != 'null')? 'selected' : '';
                options += `<option value="${element.code}" ${selected} >${element.designation}</option>`;
                            console.log(element.code, produit_code, selected);

            });
            search = `
            <div class="row">
                <div class="col-md-12">
                    <div class="text-center">
                        <b>Produit : </b>
                        <select type="text" class="form-control" id="prods_select" >
                            ${options}
                        </select>
                    </div>
                    <button class="btn btn-success pull-right" onclick="changeCabHoreInv('${code_a_barre}', '${inventaire_code}');">
                        <i class="fa fa-save"></i>
                    </button>
                </div>
            </div>`;
            $('#panel_hors_inv').append(search);

            $("#prods_select").select2({
                theme: "classic",
                placeholder: 'Produit...',
                allowClear: true,
                sorter: function(results) {
                        var query = $('.select2-search__field').val().toLowerCase();
                        return results.sort(function(a, b) {
                          return a.text.toLowerCase().indexOf(query) -
                            b.text.toLowerCase().indexOf(query);
                        });
                      }
            });
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

    };

    function changeCabHoreInv(code_a_barre, inventaire_code){
       var code = $('#prods_select').val();
        if(code){
            $.ajax({
                url: '{{route("dashboard.changeCabHoreInv")}}',
                type: 'POST',
                data: {
                    code: code,
                    code_a_barre: code_a_barre,
                    inventaire_code: inventaire_code
                },
                headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
            })
            .done(function(response) {
                if(response.success == true){
                    console.log(response);
                    toastr.success('Succés', 'Code a barre affecté avec succée!');
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
            
        }else{
            toastr.warning('Attention', 'Produit Obligatoire!');

        }
    };

    function validerCabHoreInv(code_a_barre, inventaire_code, code){
            $.ajax({
                url: '{{route("dashboard.changeCabHoreInv")}}',
                type: 'POST',
                data: {
                    code: code,
                    code_a_barre: code_a_barre,
                    inventaire_code: inventaire_code
                },
                headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
            })
            .done(function(response) {
                if(response.success == true){
                    console.log(response);
                    toastr.success('Succés', 'Code a barre affecté avec succée!');
                    $(`#c-${code_a_barre}-${inventaire_code}-${code}`).hide(500);
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    };

    function deleteCAB(code_a_barre, inventaire_code, position){
    	console.log(code_a_barre, inventaire_code, position);
        Swal.fire({
          title: 'Supprimer code a barre : '+code_a_barre+' ?',
          text: "",
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Oui',
          cancelButtonText: 'Non'
        }).then((result) => {
            if (result.value) {
                var id ='tdhor'+code_a_barre+'-'+ inventaire_code + '-'+position
                var data = {
                    code_a_barre : code_a_barre,
                    inventaire_code : inventaire_code,
                    position : position
                };

                $.ajax({
                    url: '{{ route("dashboard.deleteCAB") }}',
                    type: 'POST',
                    data: data,
                    headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
                })
                .done(function(response) {
                    if(response.success==true){
                        toastr.success('Succés', 'Code a barre supprimé avec succée!');
                        $(`#${id}`).hide(1000);
                    }else{
                        toastr.warning('Attention', 'Code a barre non supprimé!');
                    }
                })
                .fail(function() {
                    //console.log("error");
                })
                .always(function() {
                    //console.log("complete");
                });   
            }
        })    
    };
</script>
@endsection