@extends('adminlte.app')

@section('content')

    <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">Fornecedores</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                    
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
        @endif
        @if ($message = Session::get('danger'))
            <div class="alert alert-danger">
                <p>{{ $message }}</p>
            </div>
        @endif

        <div class="card mx-3 mt-3">
            <div class="card-header ">
                <div class="row">
                    <div class="col-md-6">
                        Cadastrar novo Fornecedor
                    </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="/fornecedores/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 Fornecedor
                            </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_fornecedor" class="col-form-label text-md-right">Nome do Fornecedor</label>
                                    <input id="nome_fornecedor" type="text" class="form-control @error('nome_fornecedor') is-invalid @enderror" name="nome_fornecedor" value="{{ old('nome_fornecedor') }}" required>

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

                                <div class="col-md-3">
                                    <label for="email_fornecedor" class="col-form-label text-md-right">Email do Fornecedor</label>
                                    <input id="email_fornecedor" type="text" class="form-control @error('email_fornecedor') is-invalid @enderror" name="email_fornecedor" value="{{ old('email_fornecedor') }}" required>

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

                                <div class="col-md-3">
                                    <label for="telefone_fornecedor" class="col-form-label text-md-right">Telefone do Fornecedor</label>
                                    <input id="telefone_fornecedor" type="text" class="form-control @error('telefone_fornecedor') is-invalid @enderror" name="telefone_fornecedor" value="{{ old('telefone_fornecedor') }}" required>

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

                                <div class="col-md-3">
                                    <label for="envia_precos_iva" class="col-form-label text-md-right">Enviar Preços com IVA?</label>
                                    <select class="form-control @error('envia_precos_iva') is-invalid @enderror" name="envia_precos_iva" id="envia_precos_iva" required>
                                        <option value="Sim">Sim</option>
                                        <option value="Não">Não</option>
                                    </select>

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

                            </div>
                            <div class="form-group row pl-3 pr-3">
                                <div class="col-md-3">
                                    <label for="controle_pvp" class="col-form-label text-md-right">Controlar PVPs?</label>
                                    <select class="form-control @error('controle_pvp') is-invalid @enderror" name="controle_pvp" id="controle_pvp" required>
                                        <option value="Não">Não</option>
                                        <option value="Sim">Sim</option>
                                    </select>

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

                                <div class="col-md-3">
                                    <label for="bandeira_id" class="col-form-label text-md-right">Atribuir Bandeira</label>
                                    <select class="form-control @error('bandeira_id') is-invalid @enderror" name="bandeira_id" id="bandeira_id">
                                        <option value=""></option>
                                        @foreach ($bandeiras as $bandeira)
                                            <option value="{{ $bandeira->id }}">{{ $bandeira->nome_bandeira }}</option>
                                        @endforeach
                                    </select>

                                    @error('bandeira_id')
                                        <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 Centros de Carga ao Fornecedor
                            </div>
                            <input id="porto_id" type="hidden" class="form-control @error('porto_id') is-invalid @enderror" name="porto_id" value="{{ old('porto_id') }}"  readonly >
                            <input id="nome_porto" type="hidden" class="form-control @error('nome_porto') is-invalid @enderror" name="nome_porto" value="{{ old('nome_porto') }}" 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="#modalPortos" >Adicionar Centro de Carga</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_portos" type="text" class="form-control d-none" value="0" name="linhas_portos">
                                </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 Centro de Carga</th>
                                                <th>Remover</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tabelaPortos">
                                        </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 Portos -->
            <div class="modal fade" id="modalPortos" tabindex="-1" role="dialog" aria-labelledby="modalPortosLabel" 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="modalPortosLabel">Centros de Carga</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 ($portos as $porto)
                                            <tr>
                                                <td>{{ $porto->nome_porto }}</td>
                    
                                                <td><button type="button"
                                                onclick="document.getElementById('porto_id').value = {{ $porto->id }};
                                                document.getElementById('nome_porto').value = '{{ $porto->nome_porto }}';
                                                addTabelaPorto()">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_portos = [];


                function addTabelaPorto(){

                    if (!check_portos.includes(document.getElementById('porto_id').value)){
                        check_portos.push(document.getElementById('porto_id').value);

                    var tabelaRef = document.getElementById('tabelaPortos');
                    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= "porto_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", "porto_id" + linha);

                    txt_nome_mao.id="nome_porto" + 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", "nome_porto" + 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('porto_id').value;
                    
                    c1.appendChild(txt_nome_mao);
                    txt_nome_mao.value = document.getElementById('nome_porto').value;

                    c2.appendChild(btn);

                    linha = newRow.rowIndex - 1;

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

                    document.getElementById('linhas_portos').value = document.getElementById("tabelaPortos").rows.length;
                    
                    };
                    };

                function deleteRowPorto(i){

                    a = document.getElementById('tabelaPortos').rows[i].cells[0].firstChild.value;
                    index = check_portos.indexOf(a);
                    check_portos.splice(index, 1);
                    document.getElementById('tabelaPortos').deleteRow(i);
                    document.getElementById('linhas_portos').value = document.getElementById("tabelaPortos").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"]],
                        "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