@extends('adminlte.app')

@section('content')
    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                <h1 class="m-0">Centros de Carga</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                
                </div><!-- /.col -->
            </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->


        <div class="card mx-3 mt-3">
            <div class="card-header ">
                <div class="row">
                    <div class="col-md-6">
                        Editar Centro de Carga
                    </div>
                    <div class="col-md-6 text-right">
                        
                        <a href="javascript:history.back()"><button type="button" id="voltar" class="btn btn-primary d-print-none">Voltar</button></a>
                    </div>
                </div>
            </div>

    
            <form action="/portos/{{ $porto->id }}" method="POST" class="pt-4">
                @csrf
                @method('PATCH')

                <div class="row">
                    <div class="col-12">
                        <div class="row pl-3 ml-3 pb-0 pt-0 mt-3 mr-3 bg-dark text-white">
                            <div class="col-sm-12">
                                Dados do Centro de Carga
                            </div> 
                        </div>
                        <div class="pl-3 ml-3 pb-0 pt-3 mt-0 mr-3 bg-light text-white border"> 
                                <div class="form-group row pl-3 pr-3">

                                    <div class="col-md-3">
                                        <label for="nome_porto" class="col-form-label text-md-right">Nome do Centro de Carga</label>
                                        <input id="nome_porto" type="text" class="form-control @error('nome_porto') is-invalid @enderror" name="nome_porto" value="{{ old('nome_porto', $porto->nome_porto) }}" required>

                                        @error('nome_porto')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-3">
                                        <label for="localidade" class="col-form-label text-md-right">Localidade</label>
                                        <input id="localidade" type="text" class="form-control @error('localidade') is-invalid @enderror" name="localidade" value="{{ old('localidade', $porto->localidade) }}" required>
    
                                        @error('localidade')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
    
                                    <div class="col-md-3">
                                        <label for="pais" class="col-form-label text-md-right">País</label>
                                        <input id="pais" type="text" class="form-control @error('pais') is-invalid @enderror" name="pais" value="{{ old('pais', $porto->pais) }}" required>
    
                                        @error('pais')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                        </div>

                        <div class="row pl-3 ml-3 pb-0 pt-0 mt-3 mr-3 bg-dark text-white">
                            <div class="col-sm-12">
                                Adicionar Produtos ao Centro de Carga
                            </div>
                            <input id="produto_id" type="hidden" class="form-control @error('produto_id') is-invalid @enderror" name="produto_id" value="{{ old('produto_id') }}"  readonly >
                            <input id="artigo" type="hidden" class="form-control @error('artigo') is-invalid @enderror" name="artigo" value="{{ old('artigo') }}" readonly>
                        </div>

                        <div class="border pt-3 ml-3 mr-3 mb-3 bg-light ">
                            <div class="form-group row mb-0 pl-3 pr-3">
                                <div class="col-md-2">
                                    <button type="button" id="chama_modal" class="btn btn-primary"data-toggle="modal" data-target="#modalProdutos" >Adicionar Produtos</button>
                                </div>
                            </div>  

                            <div class="form-group row  pl-3 pr-3">
                                <div class="col-md-10">
                                    <span id="linha" class="d-none">{{ count(json_decode($porto->produtos)) }}</span> 
                                    <input id="linhas_produtos" type="text" class="form-control d-none" value="{{ count(json_decode($porto->produtos)) }}" name="linhas_produtos">
                                </div>
                            </div>  



                            <div class="row mb-3 pl-3 pr-3">
                                <div class="table-responsive">
                                    <table  class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Id</th>
                                                <th>Nome do Produto</th>
                                                <th>Remover</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tabelaProdutos">
                                            @foreach ($porto->produtos_encontrados as $item)
                                                <tr>
                                                    <td><input name="produto_id{{ $loop->index }}" class="bg-light" style="width: 50px; border:0; box-shadow: none;" readonly value="{{ $item->id }}"></td>
                                                    <td ><input name="artigo{{ $loop->index }}" class="bg-light form-control" style="border:0; box-shadow: none;" readonly value="{{ $item->artigo }}"></td>
                                                    <td><button class="btn btn-outline-secondary" type="button" onclick="deleteRowProduto(this.parentNode.parentNode.rowIndex-1);">Remover</button></td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                            
                                    </table>
                                </div>
                            </div>  
                        </div>
                        <div class="row pt-2 pb-3">
                            <button class="btn btn-primary rounded mx-auto d-block">Editar</button>
                        </div>
                    </div>
                </div>
            </form>

            <!-- Modal Produtos -->
            <div class="modal fade" id="modalProdutos" tabindex="-1" role="dialog" aria-labelledby="modalProdutosLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalProdutosLabel">Produtos</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table id="tabelashow" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>Nome</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($produtos as $produto)
                                            <tr id="produto-linha{{ $produto->id }}">
                                                <td>{{ $produto->artigo }}</td>
                                                <td><button
                                                onclick="document.getElementById('produto_id').value = {{ $produto->id }};
                                                document.getElementById('artigo').value = '{{ $produto->artigo }}';
                                                addTabelaProduto()">Selecionar</button></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
                            <!--<button type="button" class="btn btn-primary">Save changes</button> -->
                        </div>
                    </div>
                </div>
            </div>
            <script>

                var rec_produtos = @json($porto->produtos_encontrados);
                check_produtos = [];

                for (let index = 0; index < rec_produtos.length; index++) {
                    check_produtos.push(String(rec_produtos[index].id));
                }

                console.log(check_produtos)


                function addTabelaProduto(){

                    if (!check_produtos.includes(document.getElementById('produto_id').value)){
                        check_produtos.push(document.getElementById('produto_id').value);

                    var tabelaRef = document.getElementById('tabelaProdutos');
                    var newRow = tabelaRef.insertRow();
                    
                    var btn = document.createElement("BUTTON");
                    var txt_id = document.createElement("INPUT");
                    var txt_nome_mao = document.createElement("INPUT");


                    document.getElementById('linha').innerHTML = parseFloat(document.getElementById('linha').innerHTML) + 1;
                    linha= document.getElementById('linha').innerHTML;   

                    txt_id.id= "produto_id" + linha;
                    txt_id.style="width: 50px; border:0; box-shadow: none;";
                    txt_id.setAttribute("class","bg-light");
                    txt_id.setAttribute("readonly","");
                    txt_id.setAttribute("name", "produto_id" + linha);

                    txt_nome_mao.id="artigo" + linha;
                    txt_nome_mao.style=" border:0; box-shadow: none;";
                    txt_nome_mao.setAttribute("class", "bg-light form-control");
                    txt_nome_mao.setAttribute("readonly","");
                    txt_nome_mao.setAttribute("name", "artigo" + linha);

                    btn.innerHTML = "Remover";
                    btn.className = "btn btn-outline-secondary";
                    btn.type = "button";

                    var c0 = newRow.insertCell(0);
                    var c1 = newRow.insertCell(1);
                    var c2 = newRow.insertCell(2);


                    c0.appendChild(txt_id);
                    txt_id.value = document.getElementById('produto_id').value;
                    
                    c1.appendChild(txt_nome_mao);
                    txt_nome_mao.value = document.getElementById('artigo').value;

                    c2.appendChild(btn);

                    linha = newRow.rowIndex - 1;

                    btn.setAttribute("onclick", "deleteRowProduto(this.parentNode.parentNode.rowIndex-1);");

                    $('#produto-linha' + txt_id.value).addClass('d-none');


                    document.getElementById('linhas_produtos').value = document.getElementById("tabelaProdutos").rows.length;
                    
                    };
                    };

                function deleteRowProduto(i){
                    a = document.getElementById('tabelaProdutos').rows[i].cells[0].firstChild.value;
                    index = check_produtos.indexOf(a);
                    check_produtos.splice(index, 1);

                    var $linhaId = '#produto-linha' + a;
                    var table = $('#tabelashow').DataTable();

                    linha = table.rows([$linhaId]);
                    linha.nodes().to$().removeClass('d-none');

                    document.getElementById('tabelaProdutos').deleteRow(i);
                    document.getElementById('linhas_produtos').value = document.getElementById("tabelaProdutos").rows.length;
                };
            </script>
            {{-- fim modal --}}
        </div>
    </div>

    <!-- DataTables  & Plugins -->
    <script src={{ asset('/plugins/datatables/jquery.dataTables.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}></script>
    <script src={{ asset('/plugins/jszip/jszip.min.js') }}></script>
    <script src={{ asset('/plugins/pdfmake/pdfmake.min.js') }}></script>
    <script src={{ asset('/plugins/pdfmake/vfs_fonts.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/buttons.html5.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/buttons.print.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/buttons.colVis.min.js') }}></script>
 
    <!-- Page specific script -->
    <script>
        $('#tabelashow').DataTable( {
            
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "buttons": [ "csv", "excel", "pdf", {"extend":"print","text":"Imprimir"}, {"extend":"colvis","text":"Colunas"}],
            "lengthMenu": [[8, 10, 25, 50, -1], [8, 10, 25, 50, "All"]],
            // "pageLength": -1,
                        "bJQueryUI": true,
                        "oLanguage": {
                            "sProcessing":   "Processando...",
                            "sLengthMenu":   "Registros _MENU_ ",
                            "sZeroRecords":  "Não foram encontrados resultados",
                            "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                            "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                            "sInfoFiltered": "",
                            "sInfoPostFix":  "",
                            "sSearch":       "Buscar:",
                            "sUrl":          "",
                            "oPaginate": {
                                "sFirst":    "Primeiro",
                                "sPrevious": "Anterior",
                                "sNext":     "Seguinte",
                                "sLast":     "Último"
                            }
                        }
        
        } ).buttons().container().appendTo('#tabelashow_wrapper .col-md-6:eq(0)');

    </script>
    <script >
        
        
        $("#telefone").mask("(00) 0000-0000");
        $("#celular").mask("(00) 00000-0000");
    
        $('.money').mask('#.##9,99', { reverse: true });   
    
    </script>

@endsection