@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">
                        Cadastrar novo 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/store" method="POST" class="pt-4">
                @csrf

                <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') }}" 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') }}" 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') }}" 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">0</span> 
                                    <input id="linhas_produtos" type="text" class="form-control d-none" value="0" 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">
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                        <div class="row pt-2 pb-3">
                            <button class="btn btn-primary rounded mx-auto d-block">Cadastrar</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-striped 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 type="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 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;
                    // $('#produto-linha' + a).removeClass('d-none');

                    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>
    var table = $('#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"]],
                        "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)');

        

        // $('#tabelashow tbody').on('click', 'tr', function(){
        //     var linha = table.row(this);
        //     console.log(this);

        //     if(linha.isShown()){
        //         linha.hide();
        //     } else {
        //         linha.show();
        //     }

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

@endsection