@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>

			<div class="relative">   
                <table class="table" id="hors-invs">
                    <thead>
                        <tr>
                            <th class="text-center">Nlot</th>
                            <th class="text-center">ITMREF</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=" c-{{$hr->code_a_barre}}-{{$hr->inventaire_code}}-{{$hr->produit_code}}" 
                            id="tdhor{{$hr->code_a_barre}}-{{$hr->inventaire_code}}-{{$hr->position}}-{{$hr->produit_code}}" >
                            <td class="text-center">
                                <!--
                                <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}}')">
                                    
                                </a>
                                <button class="btn btn-success btn-xs" style="margin: 0px;height: 17px;" 
                                    onclick="validerCabHoreInv('{{$hr->code_a_barre}}',
                                    '{{$hr->inventaire_code}}', '{{$hr->produit_code}}', 
                                    '{{$hr->position}}')"
                                    id="c-{{$hr->code_a_barre}}-{{$hr->inventaire_code}}-{{$hr->produit_code}}">
                                    <i class="fa fa-save" style="margin-top: -8px;"></i>
                                </button>
                                -->
                                {{$hr->produit_code}}
                            </td>
                            <td class="text-center">
                                {{$hr->code_a_barre}}
                            </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->produit_code}}','{{$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("inv_somocer.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("inv_somocer.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, position){
        var data =  {
                    code: code,
                    code_a_barre: code_a_barre,
                    inventaire_code: inventaire_code,
                    position: position
                };
        console.log(data);
        
            $.ajax({
                url: '{{route("inv_somocer.changeCabHoreInv")}}',
                type: 'POST',
                data: data,
                headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
            })
            .done(function(response) {
                if(response.success == true){
                    console.log(response);
                    toastr.success('Succés', 'produit ajouté avec succée');
                    $(`#c-${code_a_barre}-${inventaire_code}-${code}`).hide(500);
                    $(`.c-${code_a_barre}-${inventaire_code}-${code}`).hide(500)
                }else{
                    console.log(response);

                    toastr.warning('Oups!', 'produit n\'existe pas dans la table stock '+ response.data);
 
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
            
    };

    function deleteCAB(code_a_barre,produit_code, inventaire_code, position){
    	console.log(code_a_barre,produit_code, inventaire_code, position);
        Swal.fire({
          title: 'Supprimer Nlot : '+produit_code+' ?',
          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+'-' + produit_code;
                var data = {
                    code_a_barre : code_a_barre,
                    inventaire_code : inventaire_code,
                    position : position,
                    produit_code : produit_code
                };

                $.ajax({
                    url: '{{ route("inv_somocer.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