@extends('layouts.default') 
@section('content')
<style>
	input{
		width: 90%!important;
	}
</style>
<p class="titre_page">Ventes </p>

 <div class="row">
    <div class="col-md-12">
        <div class="panel panel-body">
            <form action="{{ route('ventes.VenteImport') }}" method="POST" class="pull-left form-inline"
                    title="Import .csv (code;code_a_barre;qte;date) avec entete" 
                    style="position: absolute;top: -59px;left: 112px;"
				  enctype="multipart/form-data">
					@csrf
					<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>

            <!-- <a href="{{ route('ventes.inventaire_auto') }}" 
               style="position: absolute;top: -63px;right: 116px;"
               class="btn btn-primary" title="ré-inventorier les produits Vendu">
               <i class="fa fa-pencil"></i> Ré-inventorier (auto)
            </a> -->

            <table class="table" id="table_vente">
                <thead>
                    <tr>
                        <th class="text-center">Position</th>
                        <th class="text-center">Code</th>
                        <th class="text-center">Code a barre</th>
                        <th class="text-center">Libelle</th>
                        <th class="text-center">Stock début</th>
                        <th class="text-center">Stock Inventaire</th>
                        <th class="text-center">Ecart</th>
                        <th class="text-center" title="Vente après Inventaire">Vente</th>
                        <th class="text-center" title="Vente Total">Vente Total</th>
                        <th class="text-center">Stock Final</th>
                        <!-- <th class="text-center">Nouveau Stock</th>
                        <th class="text-center">Action</th> -->
                    </tr>
                </thead>
                <tbody>
                    @foreach($stocks as $stock)
                    <tr>
                        <td class="text-center">{{$stock->group_position}}...</td>
                        <td class="text-center">
                            <a data-toggle="modal" data-target="#panel_position_modal"
							   onclick='getPositionsStockMultiple(
                                   "{{$stock->code}}", "{{$stock->code_a_barre}}", "{{$stock->designation}}",
                                   "{{$stock->stock_theorique}}","{{$stock->stock_inventaire}}", "{{$stock->quantite}}"
                                )' style="color:blue">
                               {{$stock->code}}
                            </a>
                        </td>
                        <td class="text-center">{{$stock->code_a_barre}}</td>
                        <td class="text-center">{{$stock->designation}}</td>
                        <td class="text-center">{{$stock->stock_theorique}}</td>
                        <td class="text-center">{{$stock->stock_inventaire}}</td>
                        <td class="text-center">{{$stock->stock_inventaire - $stock->stock_theorique}}</td>
                        <td class="text-center">{{$stock->quantite}}</td>
                        <td class="text-center">{{$stock->quantite_total}}</td>
                        <td class="text-center">{{$stock->stock_final}}</td>
                        <!-- <td class="text-center">
                            <input type="number" id="{{$stock->code}}_new_stk" class="form-control">
                        </td>
                        <td class="text-center">
                            <button class="btn btn-success btn-xs" 
                                    onclick="addNewStock('{{$stock->inventaire_code}}', '{{$stock->code}}', '{{$stock->code_a_barre}}', '{{$stock->position_id}}');">
                                <i class="fa fa-save"></i>
                            </button>
                        </td> -->
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </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 position et code a barre</h5>
      </div>
      <div class="modal-body">
        <div id="get_ligne_prod"></div>
        <div id="panel_stock_postions"></div>
      </div>
    </div>
  </div>
</div>


 <script>
    function addNewStock(inventaire_code, produit_code, code_a_barre, position_id, id_stock){
        var id_new_stock = id_stock + '_new_stk';

        var quantite = $(`#${id_new_stock}`).val();

        $.ajax({
            url: '{{ route("ventes.addNewStock")}}',
            type: 'POST',
            data: {
                inventaire_code: inventaire_code,
                produit_code: produit_code,
                code_a_barre: code_a_barre,
                position_id: position_id,
                quantite: quantite,
                id_stock: id_stock,
            },
            headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
        })
        .done(function(response) {
            //console.log("success");
            if(response.success==true){
                toastr.success('Succés', 'Stock modifié avec succé');
                window.location.reload();
            }else{
                toastr.warning('Attention', response.message);
            }
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
    };



    function getPositionsStockMultiple(code, code_a_barre, designation, stock_theorique, stock_inventaire, quantite){
        ecart = stock_inventaire - stock_theorique;
        table_header = `
            <table class="table">
                <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">Stock Inventaire</th>
                        <th class="text-center">Ecart</th>
                        <th class="text-center">Qte Vendu</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-center">${code}</td>
                        <td class="text-center">${code_a_barre}</td>
                        <td class="text-center">${designation}</td>
                        <td class="text-center">${stock_theorique}</td>
                        <td class="text-center">${stock_inventaire}</td>
                        <td class="text-center">${ecart}</td>
                        <td class="text-center">${quantite}</td>
                    </tr>
                </tbody>
            </table>
        `;
        $('#get_ligne_prod').empty();
        $('#get_ligne_prod').append(table_header);
        $.ajax({
            url: '{{ route("ventes.getPositionsStockMultiple")}}',
            type: 'GET',
            data: {
                code: code,
                code_a_barre: code_a_barre
            },
            headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
        })
        .done(function(response) {
            var tr = '';
            response.forEach((element, index) => {
                var id_new_stock = element.id_stock + '_new_stk';
                tr += `<tr>
                            <td class="text-center">${element.position}</td>
                            <td class="text-center">${element.stock_inventaire}</td>
                            <td class="text-center">
                                <input type="number" id="${id_new_stock}" class="form-control">
                            </td>
                            <td class="text-center">
                                <button class="btn btn-success btn-xs" 
                                        onclick="addNewStock(
                                            '${element.inventaire_code}', '${element.code}', 
                                            '${element.code_a_barre}', '${element.position_id}', '${element.id_stock}'
                                        );"
                                >
                                    <i class="fa fa-save"></i>
                                </button>
                            </td>
                        </tr>`;
            });
            var table_body = `
                <table class="table">
                    <thead>
                        <tr>
                            <th class="text-center">Position</th>
                            <th class="text-center">Stock Inventaire</th>
                            <th class="text-center">Nouveau Stock</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${tr}
                    </tbody>
                </table>
            `;

            
            $('#panel_stock_postions').empty();
            $('#panel_stock_postions').append(table_body);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
    }
 </script>
@endsection