@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">Grupo de Clientes</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 Grupo de Clientes
                    </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="/grupo-cliente/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 Grupo de Clientes
                     </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-6">
                                <label for="nome_grupo" class="col-form-label text-md-right">Nome do Grupo</label>
                                <input id="nome_grupo" type="text" class="form-control @error('nome_grupo') is-invalid @enderror" name="nome_grupo" value="{{ old('nome_grupo') }}" required>

                                @error('nome_grupo')
                                    <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 Clientes ao Grupo
                    </div> 
        
                </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="#modal_mao_obra" >Adicionar Cliente</button>
                            </div>
                           
                    </div>  

                    <div class="form-group row pl-3 pr-3 d-none">   
                        <div class="col-md-2 input-group mb-3">
                            <input id="mao__obras_id" type="text" class=" pr-0 form-control @error('mao__obras_id') is-invalid @enderror" name="mao__obras_id" value="{{ old('mao__obras_id') }}" autocomplete="mao__obras_id"  readonly>
                                    
                            @error('mao__obras_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                             <!-- Button trigger modal -->
                            <div class="input-group-append">
                                <button type="button" class="btn btn-outline-secondary"data-toggle="modal" data-target="#modal_mao_obra" >...</button>
                            </div>
                        
                            
                       
                        </div>
                                
                            <div class="col-md-6">
                                <input id="cliente_id" type="text" class="form-control @error('cliente_id') is-invalid @enderror" name="cliente_id" value="{{ old('cliente_id') }}"  autocomplete="cliente_id" readonly >
                                    
                                    @error('cliente_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                            </div>
                    
                            <div class="col-md-2">
                                <input id="nome" type="text" class="form-control @error('nome') is-invalid @enderror" name="nome" value="{{ old('nome') }}"  autocomplete="nome"  readonly>
                                    
                                    @error('nome')
                                        <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-10">
                                <span id="linha" class="d-none">0</span> 
                                <input id="linhas_mo" type="text" class="form-control d-none" value="0" name="linhas_mo">
                            </div>
                            <!-- <div class="col-md-2">
                                <button onclick="addTabelaMaoObra()" type="button" class="btn btn-primary rounded mx-auto d-block">Adicionar</button>   
                            </div> -->
                    </div>  

                    <script>

                        var check_mao = [];


                        function addTabelaMaoObra(){

                            if (!check_mao.includes(document.getElementById('cliente_id').value)){
                                check_mao.push(document.getElementById('cliente_id').value);

                            var tabelaRef = document.getElementById('tabela_mao_obra');
                            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= "mao_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", "id" + linha);

                            txt_nome_mao.id="mao_nome" + 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_mao" + 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('cliente_id').value;
                            
                            c1.appendChild(txt_nome_mao);
                            txt_nome_mao.value = document.getElementById('nome').value;

                            c2.appendChild(btn);

                            linha = newRow.rowIndex - 1;

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

                            document.getElementById('linhas_mo').value = document.getElementById("tabela_mao_obra").rows.length;
                            
                            };
                            };

                        function deleteRowMaoObra(i){

                            a = document.getElementById('tabela_mao_obra').rows[i].cells[0].firstChild.value;
                            index = check_mao.indexOf(a);
                            check_mao.splice(index, 1);
                            document.getElementById('tabela_mao_obra').deleteRow(i);
                            document.getElementById('linhas_mo').value = document.getElementById("tabela_mao_obra").rows.length;

                        };


                    </script>

                    <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 Cliente</th>
                        <th>Remover</th>
                        </tr>
                    </thead>
                    <tbody id="tabela_mao_obra">
                    
                    </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>
        </div>
        
<!-- Modal 2 Mão de Obra-->
<div class="modal fade" id="modal_mao_obra" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Clientes</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="row">
                @if($permissao->exibir_todos_clientes )
                    <div class="col-md-3 pb-3">
                        
                        <label for="gestor" class=" control-label my-auto mr-2">Gestor</label>
                        <select name="gestor"   id="gestor" class=" form-control">
                            <option value=""></option>
                            @foreach ($gestores as $gestor)
                                
                                    <option @if($gestor->id== $gestor_escolhido) selected @endif value="{{$gestor->id}}">{{$gestor->name}}</option>
                                
                            @endforeach
                        </select> 
                  
                    </div>
                    <div class="col-md-3 mt-1 pt-3">
                           <a href="" id="pesquisar_clientes"> <button  type="button" class="btn btn-primary" >Pesquisar Clientes</button></a>
                    </div>
                    @endif
            </div>
        <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>
                        @if($gestor_escolhido != null or !$permissao->exibir_todos_clientes)
                            @foreach ($clientes as $cliente)
                                <tr>
                                    <td>{{ $cliente->nome }}</td>
        
                                    <td><button
                                    onclick="document.getElementById('cliente_id').value = {{ $cliente->id }};
                                    document.getElementById('nome').value = '{{ addslashes($cliente->nome) }}';
                                    addTabelaMaoObra()">Selecionar</button></td>
                                </tr>
                            @endforeach
                        @endif
                    </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>
  {{-- fim modal --}}
    </form>
</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>
    $('#equipamentos').on('change', function() {
        if(this.value =="Sim" ){

            $('#div_valor_investido_equipamentos').removeClass('d-none');
        }else{
            $('#div_valor_investido_equipamentos').addClass('d-none');
        }

    });

    $('#gestor').on('change', function(){

       
        $('#pesquisar_clientes').attr("href", "/grupo-cliente/create?gestor_escolhido=" + this.value );

    });


    $('#assistencia').on('change', function() {
        if(this.value =="Sim" ){

            $('#div_valor_investido_assistencias').removeClass('d-none');
        }else{
            $('#div_valor_investido_assistencias').addClass('d-none');
        }

    });

    $(document).ready(function() {
        @if($gestor_escolhido!=null)
        $(window).on('load',function(){
                $("#chama_modal").click();
                
            });
        @endif
    })

</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