@extends('layouts.app_1')

@section('content')


    <div class="container" style="display: none"><br><br>
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card text-center" >
                    <div class="card-header h1" style="background-color:#{{ $colore }};color: white ">{{ strtoupper($componente) }} </div>

                    <div class="card-body"  style="height: 100%!important;">

                        <table class="table table-striped" id="tabella_componenti">
                        <thead>
                        <th style="font-size: 18px;">Codice</th>
                        <th style="font-size: 18px;">Descrizione</th>
                        <th style="font-size: 18px;">Quantità</th>
                        </thead>
                          <tbody>
                         @foreach($componenti_categoria as $elemento)
                              <tr>
                              <td style="font-size: 18px;" data-sort="{{$elemento->id}}">{{$elemento->codice}}</td>
                              <td style="font-size: 18px;" data-sort="{{$elemento->id}}">{{$elemento->descrizione}}</td>
                              <td style="font-size: 18px;"  class="quantity" id="quantita_{{$elemento->codice}}">
                     <input type="number"  id="{{$elemento->id}}" style="margin-left: auto;margin-right: auto" class="form-control text-center w-25" value="{{$elemento->quantita}}">
                                  </td>
                              </tr>
                         @endforeach
                          </tbody>
                      </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('myscript')

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
    <link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
    <script>
        @foreach($componenti_categoria as $elemento)
        $("#{{$elemento->id}}").on('input', function(){

            let codice = "{{$elemento->id}}";
            test(codice);
        });
        @endforeach
        function test(codice){
            console.log($("#"+codice).text());
            var quantita =  $("#"+codice).val();
            var data = {
                _token: "{{ csrf_token() }}",
                quantita: quantita,
                codice: codice
            };
            $("#"+codice).css("background","white");
            $("#"+codice).css("color","black");
            $.ajax({
                type: "POST",
                url: '/cambia_quantita_prodotto',
                dataType: "json",
                data: data,
                success: function (data)
                {

                    if (data.status == '200') {
                        $("#"+codice).css("background","darkgreen");
                        $("#"+codice).css("color","white");
                        $("#"+codice).css("text-decoration","bold");
                        console.log('updated');
                    }
                },
                error: function(data)
                {
                    $("#"+codice).css("background","darkred");
                    $("#"+codice).css("color","white");
                    $("#"+codice).css("text-decoration","bold");
                    console.log(data);
                }
            });
        }
        $("#modifica").click(function () {
            var attr = $(".quantity").attr('contenteditable');
            if (typeof attr !== 'undefined' && attr !== false) {
                console.log("content false " +attr);
                if(attr === false){
                    $(".quantity").attr('contenteditable', true);
                }
                $(".quantity").attr('contenteditable', false);
            }else{
                console.log("content true" +attr);
                $(".quantity").attr('contenteditable', true);

                $(".quantity").prop('contenteditable', true);
                var attr = $(".quantity").attr('contenteditable');
                console.log("content true" +attr);
            }

        });
        $(document).ready( function () {
            $('.container').delay(800).fadeIn(800);
            $('#tabella_componenti').DataTable({
                responsive: true,
                keys: true,
                pageLength: 14,

                colReorder: true,
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend:'excel',
                        exportOptions: {
                            format:
                            {
                                body: function ( data, row, column, node ) {
                                    if($(data).is("input")){
                                        return $(data).val();
                                    }else{
                                        return data;
                                    }
                                }
                            }
                        }
                    }
                    ,
                    {
                        extend:'pdf',
                        exportOptions: {
                            format:
                                {
                                    body: function ( data, row, column, node ) {
                                        if($(data).is("input")){
                                            return $(data).val();
                                        }else{
                                            return data;
                                        }
                                    }
                                }
                        }
                    },
                    {
                    extend:'print',
                        exportOptions: {
                            format:
                                {
                                    body: function ( data, row, column, node ) {
                                        if($(data).is("input")){
                                            return $(data).val();
                                        }else{
                                            return data;
                                        }
                                    }
                                }
                        }
                    }
                        ]
            });
        });

    </script>
@endsection