@extends('base')

@section('content')


    <div class="alert alert-success text-center">ETAT DES STOCKS</div>

    <div id="etat_stock_recherche"></div>

    <div class="row col-md-12">
        <div class="form-group col-md-3" >
            <label for="centrale_etat_stock" ><b>Centrale</b></label>
            <select  id="centrale_etat_stock" class="form-control" style="width: 100%;">
                <option value="0">Aucune</option>
                            </select>
        </div>
        <div class="col-md-2 " >
            <label for="etat_stock_type_produit"><b>TYPE PRODUIT</b></label>
            <select  class="form-control" style="color:black !important" id="etat_stock_type_produit" name="etat_stock_type_produit" >
                <option value="09">Tous</option>
                <option value="00">GRANULAT</option>
                <option value="01">LIANT</option>
                <option value="02">EAU</option>
                <option value="03">ADJUVANT</option>
                <option value="04">COLORANT</option>
                <option value="05">AJOUT MANUEL</option>
            </select>
        </div>
        <div class="form-group row col-md-5" style="margin-left: 0.1%;" >
            <div class="col-sm-6" style="margin-right: -15px;">
                <label for="etat_stock_produit"><b>PRODUIT/AJOUT</b></label>
                <select  class="form-control" style="color:black !important" id="etat_stock_produit" name="etat_stock_produit" >
                    <option value="0">Tous</option>

                </select>
            </div>
            <div class="col-sm-4*" style="padding-left:0 !important;padding-right:0 !important;margin-top:7.5%">
                <button class="btn btn-success" id="btn_rechercher_produit_etat_stock"><i class="fa fa-search"></i></button>
                <button class="btn btn-danger" id="btn_vider_produit_etat_stock"><i class="fas fa-times-circle"></i></button>
            </div>
            <div class="col-md-2 text-right" style="margin-top:1.5%">
                <button class="btn btn-success" id="rafraichir">Rafraichir</button>
            </div>
        </div>
    </div>
    <div id="filtre"><button type="button" class="fermer btn btn-danger" >X</button></div><div id="affiche_etat_stock"></div>
    <div class="col-md-12 text-center">Nombre de(s) etat stock : <span class="badge" style="background : #dff0d8; color: #000; font-size: 15px; margin-bottom:0.5%;">0</span></div>
    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered" id="table_etat_stock" style="width:100%">
            <thead style="background-color:#28a745; color:white">
            <tr>
                <th scope="col" class="text-center">CENTRALE</th>
                <th scope="col" class="text-center">PRODUIT</th>
                <th scope="col" class="text-center">TYPE PRODUIT</th>
                <th scope="col" class="text-center">STOCK COURANT</th>
                <th scope="col" class="text-center">UNITE</th>
            </tr>
            </thead>

        </table>
    </div>



    <script>

        $(function() { // Dom ready

            $('title').text("ETAT STOCK - SMART CENTRAL");

            $("#filtre").click(function(e) {
                e.preventDefault();
                $("#affiche_etat_stock").hide();
                $("#etat_stock_recherche").hide();
                $("#filtre").hide();

            });
            $(".fermer").click(function(e) {
                e.preventDefault();
                $("#filtre").click();
            });

            var table = $('#table_etat_stock').on('processing.dt', function (e, settings, processing) {

                $('.ring').css('display', processing ? 'block' : 'none');
                $('#filtre_loading').css('display', processing ? 'block' : 'none');
            }).DataTable({
                scrollX: true,
                orderCellsTop: true,
                // fixedHeader: true,
                scrollCollapse: true,
                autoWidth: true,
                // paging: true,
                // serverSide: true,
                iDisplayLength: '50',
                dom: 'lBfrtip',
                buttons: [
                    { "extend": 'excel', "text": 'Export excel', "className": 'btn_export_excel', title: 'Liste de(s) etats stock',"attr": {"style" :"color: rgb(255, 255, 255); background-color: rgb(33, 136, 56);"}}
                ],



                'ajax': {
                    'url': '{{url('etat_stock/table')}}',
                    'type': 'GET',
                    'data': {
                        'centrale_id': function() { return $("#centrale_etat_stock").val() },
                        'type_produit': function() { return $("#etat_stock_type_produit").val() },
                        'etat_stock_produit': function() { return $("#etat_stock_produit").val() },


                    },

                    'dataSrc': function (json) {

                        $('.badge').html(json.recordsTotal);

                        return json.data;
                    },
                },



                columnDefs: [

                    {'className': 'text-center align-middle ', 'targets': '_all'},
                ],

            });



            $("#rafraichir").click(function (e){
                e.preventDefault();
                table.ajax.reload(null, false);

            });


            $("#btn_rechercher_produit_etat_stock").click(function(e) {
                e.preventDefault();
                $("#etat_stock_recherche").empty();
                $("#etat_stock_recherche").show();
                $("#filtre").show();

                function reponse(retour) {
                    // console.log(retour);
                    $("#etat_stock_recherche").html(retour);

                }

                type_feuille="produit";
                if ($("#etat_stock_type_produit").val()!="05"){
                    type_feuille="produit";
                }else{
                    type_feuille="ajout";
                }
                $.get('{{url('etat_stock/etat_stock_recherche')}}', {fiche_recherche: type_feuille, type_produit:$("#etat_stock_type_produit").val()}, reponse, 'html');
            });

            $("#etat_stock_type_produit").change(function (e) {
                e.preventDefault();
                $("#etat_stock_produit").empty();

                function reponse(retour) {
                    //$("#etat_stock_produit").html(retour.option);

                    $('#etat_stock_produit').empty();
                    $('#etat_stock_produit').append('<option value="0">Tous</option>');



                    $.each(retour, function(index, produit) {
                        var selected=''
                        if(typeof produit_id !== 'undefined' && produit.id_produit==produit_id){
                            selected='selected';
                        }
                        $('#etat_stock_produit').append('<option '+ selected +'  value="' + produit.id_produit + '">' + produit.produit_code + ' -> ' + produit.produit_libelle + '</option>');
                        //$('#composition_produit_libelle').append('<option '+ selected +' value="' + produit.id_produit + '">' + produit.produit_libelle + '</option>');
                    });

                }
                //$.get('{{url('etat_stock/etat_stock_produit')}}', {produit_type: $("#etat_stock_type_produit").val(), centrale_id: $("#centrale_etat_stock").val()}, reponse, 'json');
                $.get('{{url('etat_stock/etat_stock_produit')}}',{produit_type: $("#etat_stock_type_produit").val(), centrale_id: $("#centrale_etat_stock").val()} ,reponse, 'json');
            });

        });
    </script>
@endsection