@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">Postos</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 Posto
                    </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 id="formNovoPosto" action="{{ route('postos_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 Posto
                            </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_posto" class="col-form-label text-md-right">Nome do Posto</label>
                                    <input id="nome_posto" type="text" class="form-control @error('nome_posto') is-invalid @enderror" name="nome_posto" value="{{ old('nome_posto') }}" required>

                                    @error('nome_posto')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                
                                {{-- <div class="col-md-3">
                                    <label for="tipo_contrato" class="col-form-label text-md-right">Tipo de Contrato</label>
                                    <select class="form-control" name="tipo_contrato" id="tipo_contrato">
                                        <option value="direto">Direto</option>
                                        <option value="indireto">Indireto</option>
                                    </select>

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

                                <div class="col-md-3">
                                    <label for="gestor_posto_id" class="col-form-label text-md-right">Gestor</label>
                                    <div class="input-group">
                                        <select name="gestor_posto_id"   id="gestor_posto_id" class=" form-control" required>
                                            @foreach ($gestores as $gestor)
                                                <option value="{{ $gestor->id }}">{{ $gestor->name }}</option>
                                            @endforeach
                                        </select> 
                                        <div class="input-group-append">
                                            <button type="button" id="chama_modalGestor" class="btn btn-primary"data-toggle="modal" data-target="#gestorModal" >
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-3">
                                    <label for="horario_abertura" class="col-form-label text-md-right">Horário Abertura</label>
                                    <input id="horario_abertura" type="time" class="form-control @error('horario_abertura') is-invalid @enderror" name="horario_abertura" value="{{ old('horario_abertura') }}">

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

                                </div>

                                <div class="col-md-3">
                                    <label for="horario_fecho" class="col-form-label text-md-right">Horário Fecho</label>
                                    <input id="horario_fecho" type="time" class="form-control @error('horario_fecho') is-invalid @enderror" name="horario_fecho" value="{{ old('horario_fecho') }}">

                                    @error('horario_fecho')
                                        <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="fornecedor" class="col-form-label text-md-right">Fornecedor Padrão</label>
                                    <select name="fornecedor" id="fornecedor" class="form-control @error('fornecedor') is-invalid @enderror">
                                        <option value=""></option>
                                        @foreach ($fornecedores as $fornecedor)
                                            <option value="{{ $fornecedor->id }}">{{ $fornecedor->nome_fornecedor }}</option>
                                        @endforeach
                                    </select>

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

                                <div class="col-md-3">
                                    <label for="porto" class="col-form-label text-md-right">Centro de Carga Padrão</label>
                                    <select name="porto" id="porto" class="form-control  @error('porto') is-invalid @enderror">
                                        <option value=""></option>
                                    </select>

                                    @error('porto')
                                        <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">Bandeira</label>
                                    <select name="bandeira_id" id="bandeira_id" class="form-control  @error('bandeira_id') is-invalid @enderror">
                                        <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 class="col-md-3">
                                    <label for="dgeg" class="col-form-label text-md-right">DGEG</label>
                                    <input id="dgeg" type="text" class="form-control @error('dgeg') is-invalid @enderror" name="dgeg" value="{{ old('dgeg') }}" required>

                                    @error('dgeg')
                                        <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="ense" class="col-form-label text-md-right">ENSE</label>
                                    <input id="ense" type="text" class="form-control @error('ense') is-invalid @enderror" name="ense" value="{{ old('ense') }}" required>

                                    @error('ense')
                                        <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">
                                Dados do Contrato
                            </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="tipo_contrato" class="col-form-label text-md-right">Tipo de Contrato</label>
                                    <select class="form-control" name="tipo_contrato" id="tipo_contrato" required>
                                        <option value="direto">Direto</option>
                                        <option value="indireto">Indireto</option>
                                    </select>

                                    @error('tipo_contrato')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-md-3">
                                    <label for="contrato_data_inicio" class="col-form-label text-md-right">Data Início</label>
                                    <input class="form-control @error('contrato_data_inicio') is-invalid @enderror" value="{{ old('contrato_data_inicio') }}" type="date" name="contrato_data_inicio" id="contrato_data_inicio" required>
                                    @error('contrato_data_inicio')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-md-3">
                                    <label for="contrato_data_fim" class="col-form-label text-md-right">Data Fim</label>
                                    <input class="form-control @error('contrato_data_fim') is-invalid @enderror" value="{{ old('contrato_data_fim') }}" type="date" name="contrato_data_fim" id="contrato_data_fim">
                                    @error('contrato_data_fim')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="col-md-3">
                                    <label for="rota" class="col-form-label text-md-right">Rota</label>
                                    <input class="form-control @error('rota') is-invalid @enderror" value="{{ old('rota') }}" type="text" maxlength="50" name="rota" id="rota">
                                    @error('rota')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row pl-3 pr-3" id="div_direto">
                                <div class="col-md-3">
                                    <label for="num_colaboradores" class="col-form-label text-md-right">Número de Colaboradores</label>
                                    <input class="form-control" type="number" min="1" step="1"  name="num_colaboradores" id="num_colaboradores" required>
                                </div>
                            </div>
                            <div class="form-group row pl-3 pr-3 d-none" id="div_indireto">
                                <div class="col-md-3">
                                    <label for="contrato_responsavel" class="col-form-label text-md-right">Responsável</label>
                                    <input class="form-control" type="text" name="contrato_responsavel" id="contrato_responsavel" required disabled>
                                </div>
                                <div class="col-md-3">
                                    <label for="contrato_email" class="col-form-label text-md-right">E-mail Comunicações</label>
                                    <input class="form-control" type="email" name="contrato_email" id="contrato_email" required disabled>
                                </div>
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="valor_minimo_garantido" class="col-form-label text-md-right">Valor Mínimo Garantido</label>
                                            <input class="form-control" step="0.00001" type="number" name="valor_minimo_garantido" id="valor_minimo_garantido" required disabled>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="op_tipo_valor_minimo_garantido" class="col-form-label text-md-right">Tipo Valor</label>
                                            <select class="form-control" name="op_tipo_valor_minimo_garantido" id="op_tipo_valor_minimo_garantido" required disabled>
                                                <option value="fixo">Valor Fixo</option>
                                                <option value="hora">Valor por Hora de Funcionamento</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="comissoes_lt_pp" class="col-form-label text-md-right">Comissões LTs PP</label>
                                            <input class="form-control" step="0.00001" type="number" name="comissoes_lt_pp" id="comissoes_lt_pp" required disabled>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="comissoes_lt_credito" class="col-form-label text-md-right">Comissões LTs Crédito</label>
                                            <input class="form-control" step="0.00001" type="number" name="comissoes_lt_credito" id="comissoes_lt_credito" required disabled>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="comissoes_loja" class="col-form-label text-md-right">Comissões Loja (%)</label>
                                            <input class="form-control" step="0.01" type="number" name="comissoes_loja" id="comissoes_loja" required disabled>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="op_comissoes_loja" class="col-form-label text-md-right">Sobre:</label>
                                            <select class="form-control" name="op_comissoes_loja" id="op_comissoes_loja" required disabled>
                                                <option value="liquido">Resultado Líquido</option>
                                                <option value="iva">Vendas Totais com IVA</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="comissoes_tabaco" class="col-form-label text-md-right">Comissões Tabaco (%)</label>
                                            <input class="form-control" step="0.01" type="number" name="comissoes_tabaco" id="comissoes_tabaco" required disabled>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="op_comissoes_tabaco" class="col-form-label text-md-right">Sobre:</label>
                                            <select class="form-control" name="op_comissoes_tabaco" id="op_comissoes_tabaco" required disabled>
                                                <option value="iva">Vendas Totais com IVA</option>
                                                <option value="mapa">Incluso no Mapa de Comissões</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="comissoes_gas" class="col-form-label text-md-right">Comissões Gás (%)</label>
                                            <input class="form-control" step="0.01" type="number" name="comissoes_gas" id="comissoes_gas" required disabled>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="op_comissoes_gas" class="col-form-label text-md-right">Sobre:</label>
                                            <select class="form-control" name="op_comissoes_gas" id="op_comissoes_gas" required disabled>
                                                <option value="iva">Vendas Totais com IVA</option>
                                                <option value="mapa">Incluso no Mapa de Comissões</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="comissoes_raspadinha" class="col-form-label text-md-right" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;">Comissões Raspadinha (%)</label>
                                            <input class="form-control" step="0.01" type="number"  name="comissoes_raspadinha" id="comissoes_raspadinha" required disabled>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="op_comissoes_raspadinha" class="col-form-label text-md-right">Sobre:</label>
                                            <select class="form-control" name="op_comissoes_raspadinha" id="op_comissoes_raspadinha" required disabled>
                                                <option  value="iva">Vendas Totais com IVA</option>
                                                <option  value="mapa">Incluso no Mapa de Comissões</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="comissoes_lavagem" class="col-form-label text-md-right">Comissões Lavagem (%)</label>
                                            <input class="form-control" step="0.01" type="number" name="comissoes_lavagem" id="comissoes_lavagem" required disabled>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="op_comissoes_lavagem" class="col-form-label text-md-right">Sobre:</label>
                                            <select class="form-control" name="op_comissoes_lavagem" id="op_comissoes_lavagem" required disabled>
                                                <option value="iva">Vendas Totais com IVA</option>
                                                <option value="mapa">Incluso no Mapa de Comissões</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="comissoes_lt_aditivado" class="col-form-label text-md-right">Comissões Aditivados</label>
                                            <input class="form-control" step="0.00001" type="number" name="comissoes_lt_aditivado" id="comissoes_lt_aditivado" required disabled>
                                        </div>
                                    </div>
                                </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">
                                Dados de Acesso
                            </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="usuario_cadastrado">Usuário já cadastrado</label>
                                    <select class="form-control" name="usuario_cadastrado" id="usuario_cadastrado">
                                        <option value="Não">Não</option>
                                        <option value="Sim">Sim</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div id="div_novo_acesso" class="form-group row pl-3 pr-3">

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

                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                
                                <div class="col-md-3">
                                    <label for="email" class="col-form-label text-md-right">Email</label>
                                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="username" >

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

                                <div class="col-md-3">
                                    <label for="password" class="col-form-label text-md-right">Senha</label>
                                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password" >

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

                                <div class="col-md-3">
                                    <label for="password-confirm" class="col-form-label text-md-right">Confirmar a Senha</label>
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password" >
                                </div>

                            </div>

                            <div id="div_usuario_cadastrado" class="form-group row pl-3 pr-3 d-none">
                                <div class="col-md-3">
                                    <label for="entidade_id" class="">Responsável (Entidade)</label>
                                    <div class="input-group">
                                        <select name="entidade_id"   id="entidade_id" class=" form-control" disabled required>
                                            @foreach ($usuarios as $gestor)
                                                <option value="{{ $gestor->id }}">{{ $gestor->name }}</option>
                                            @endforeach
                                        </select> 
                                        <div class="input-group-append">
                                            <button type="button" id="chama_modalEntidade" class="btn btn-primary"data-toggle="modal" data-target="#entidadeModal" >
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                    </div>

                                </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 Combustíveis
                            </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>
                            <input id="tabela" type="hidden" class="form-control @error('tabela') is-invalid @enderror" name="tabela" value="{{ old('tabela') }}" 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" onclick="funcNameTabela('tabelaCombustiveis')" 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_combustiveis" type="text" class="form-control d-none" value="0" name="linhas_combustiveis">
                                </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>Número do Tanque</th>
                                                <th>Capacidade do Tanque</th>
                                                <th>TARA</th>
                                                <th>Média Venda Inicial</th>
                                                <th>Remover</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tabelaCombustiveis">
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                        <div class="row pl-3 ml-3 pb-0 pt-0 mt-3 mr-3 mostrar-bombas bg-dark text-white d-none">
                            <div class="col-sm-12">
                                Adicionar Bombas
                            </div>
                        </div>

                        <div class="border pt-3 ml-3 mr-3 mb-3 bg-light mostrar-bombas d-none">
                            <div class="form-group row mb-0 pl-3 pr-3">
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-primary" onclick="addTabelaBomba()">Nova Bomba</button>
                                </div>
                            </div>  

                            <div class="form-group row  pl-3 pr-3">
                                <div class="col-md-10">
                                    <span id="linha_bomba" class="d-none">0</span> 
                                    <input id="linhas_bombas" type="text" class="form-control d-none" value="0" name="linhas_bombas">
                                </div>
                            </div>  

                            <div class="row mb-3 pl-3 pr-3">
                                <div class="table-responsive">
                                    <table  class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Número da Bomba</th>
                                                <th>Combustível</th>
                                                <th>Possui Contador</th>
                                                <th>Tipo Contador</th>
                                                <th>Operacional</th>
                                                <th>Remover</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tabelaBombas">
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                        <div class="row pl-3 ml-3 pb-0 pt-0 mt-3 mr-3 mostrar-bombas bg-dark text-white d-none">
                            <div class="col-sm-12">
                                Adicionar Famílias
                            </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 align-items-end">
                                <div class="col-sm-3 pl-3 pr-3">
                                    <label for="familia" class="col-form-label ">Familias</label>
                                    <select name="familia" id="familia" class="form-control">
                                        <option></option>
                                        @foreach($familias as $item)
                                            <option value="{{$item->id}}">{{$item->familia}}</option>
                                        @endforeach
                                    </select>    
            
            
                                    @error('familia')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
            
                                </div>
            
                            
                                <div class="col-sm-2 ">
                                    
                                    <button id="btn_adicionar" class="btn btn-primary" type="button">Adicionar</button>
                                </div>
                            </div>
                    
                            <hr>
                            <div class="row align-items-end">
        
                                <div class="col-md-6 responsive">
                                    <table id="tbl_familias" class="table table-sm table-bordered text-center ">
                                        <thead>
                                            <tr>
                                                <th>
                                                    ID
                                                </th>
                                                <th>
                                                    Nome
                                                </th>
                                                <th>
                                                    Remover
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
            
                                        </tbody>
            
                                    </table>
                                </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">
                                Objetivos dos Combustíveis
                            </div>
                            <input id="objetivos_produto_id" type="hidden" class="form-control @error('objetivos_produto_id') is-invalid @enderror" name="objetivos_produto_id" value="{{ old('objetivos_produto_id') }}"  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 align-items-end">
                                <div class="col-md-2">
                                    <label for="ano-objetivo-combustiveis" class="col-form-label text-md-right">Ano</label>
                                    <select class="form-control" name="ano-objetivo-combustiveis" id="ano-objetivo-combustiveis" required>
                                        @for ($i = date('Y')-2; $i <= date('Y') + 3; $i++)
                                            <option @if($i== date('Y') ) selected @endif  value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <button type="button"  class="btn btn-primary" data-toggle="modal" data-target="#modalProdutos" onclick="funcNameTabela('tabelaObjetivosCombustiveis')" >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_objetivos_combustiveis" type="text" class="form-control d-none" value="0" name="linhas_objetivos_combustiveis">
                                </div>
                            </div>  

                            <div class="row mb-3 pl-3 pr-3">
                                <div class="table-responsive">
                                    <table  class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Ano</th>
                                                <th>Id</th>
                                                <th>Nome do Produto</th>
                                                <th>Objetivo</th>
                                                <th>Remover</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tabelaObjetivosCombustiveis">
                                        </tbody>
                                    </table>
                                </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">
                                Objetivos dos Famílias
                            </div>
                            <input id="objetivos_familia_id" type="hidden" class="form-control @error('objetivos_familia_id') is-invalid @enderror" name="objetivos_familia_id" value="{{ old('objetivos_familia_id') }}"  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 align-items-end">
                                <div class="col-md-2">
                                    <label for="ano-objetivo-familias" class="col-form-label text-md-right">Ano</label>
                                    <select class="form-control" name="ano-objetivo-familias" id="ano-objetivo-familias" required>
                                        @for ($i = date('Y')-2; $i <= date('Y') + 3; $i++)
                                            <option @if($i== date('Y') ) selected @endif  value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="col-sm-3 pl-3 pr-3">
                                    <label for="objetivo_familia_select" class="col-form-label ">Familias</label>
                                    <select name="objetivo_familia_select" id="objetivo_familia_select" class="form-control">
                                        <option></option>
                                        @foreach($familias as $item)
                                            <option value="{{$item->id}}">{{$item->familia}}</option>
                                        @endforeach
                                    </select>    
            
            
                                    @error('objetivo_familia_select')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
            
                                </div>
            
                            
                                <div class="col-sm-2 ">
                                    
                                    <button id="btn_adicionar_objetivo_familia" class="btn btn-primary" type="button">Adicionar</button>
                                </div>
                    
                                <hr>
                            </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_objetivos_familias" type="text" class="form-control d-none" value="0" name="linhas_objetivos_familias">
                                </div>
                            </div>  

                            <div class="row mb-3 pl-3 pr-3">
                                <div class="table-responsive">
                                    <table  class="table table-bordered" id="tbl_objetivos_familias">
                                        <thead>
                                            <tr>
                                                <th>Ano</th>
                                                <th>Id</th>
                                                <th>Família</th>
                                                <th>Objetivo</th>
                                                <th>Remover</th>
                                            </tr>
                                        </thead>
                                        <tbody >
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                        <div class="row pt-2 pb-3">
                            <button type="button" id="btn_cadastrar" class="btn btn-primary rounded mx-auto d-block">Cadastrar</button>
                        </div>

                    </div>
                </div>
            </form>

            <x-forms.b-s-modal nome-modal="gestorModal" destino-id="gestor_posto_id" titulo-modal="Gestor do Posto" id-tabela="tabelaGestores" nome-item="name" :dados="$gestores" />

            <x-forms.b-s-modal nome-modal="entidadeModal" destino-id="entidade_id" titulo-modal="Usuários Cadastrados" id-tabela="tabelaEntidades" nome-item="name" :dados="$usuarios" />


            <!-- 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="tabelaProdutos" class="tabelashow 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 }}';
                                                verificaTabelaCombustiveis(document.getElementById('tabela').value)">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>
            
            
            {{-- 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 -->

    {{-- Preencher Combustives e bombas --}}
    <script>

        var check_produtos = [];
        var combustiveis = [];


        function verificaTabelaCombustiveis(tabela){
            if(tabela == 'tabelaCombustiveis'){
              addTabelaCombustiveis();
            } else if(tabela == 'tabelaObjetivosCombustiveis'){
                addTabelaObjetivosCombustiveis();
            }
        }

        function addTabelaObjetivosCombustiveis(){

            document.getElementById('objetivos_produto_id').value =document.getElementById('produto_id').value;

                if(!combustiveis.includes(document.getElementById('artigo').value)){
                    combustiveis.push(document.getElementById('artigo').value);
                }

                var tabelaRef = document.getElementById('tabelaObjetivosCombustiveis');
                var newRow = tabelaRef.insertRow();
                
                var btn = document.createElement("BUTTON");
                var txt_id = document.createElement("INPUT");
                var txt_nome_produto = document.createElement("INPUT");
                var txt_ano = document.createElement("INPUT");
                var txt_objetivo = document.createElement("INPUT");

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

                txt_id.id= "objetivos_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", "objetivos_produto_id" + linha);
                
                txt_nome_produto.id="objetivos_nome_produto" + linha;
                txt_nome_produto.style="border:0; box-shadow: none;";
                txt_nome_produto.setAttribute("class", "bg-light form-control");
                txt_nome_produto.setAttribute("readonly","");
                txt_nome_produto.setAttribute("name", "objetivos_nome_produto" + linha);

                txt_ano.id="objetivos_ano" + linha;
                txt_ano.setAttribute("class", "form-control");
                txt_ano.setAttribute("name", "objetivos_ano" + linha);
                txt_ano.setAttribute("type", "number");
                txt_ano.setAttribute("required", "required");

                txt_objetivo.id="objetivo" + linha;
                txt_objetivo.setAttribute("class", "form-control");
                txt_objetivo.setAttribute("name", "objetivo" + linha);
                txt_objetivo.setAttribute("type", "number");
                txt_objetivo.setAttribute("required", "required");
                
                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);
                var c3 = newRow.insertCell(3);
                var c4 = newRow.insertCell(4);

                c0.appendChild(txt_ano);
                txt_ano.value = document.getElementById('ano-objetivo-combustiveis').value;
                c1.appendChild(txt_id);
                txt_id.value = document.getElementById('produto_id').value;
                c2.appendChild(txt_nome_produto);
                txt_nome_produto.value = document.getElementById('artigo').value;
                c3.appendChild(txt_objetivo);
                txt_objetivo.value = 0;
                c4.appendChild(btn);

                linha = newRow.rowIndex - 1;
                btn.setAttribute("onclick", "deleteRowObjetivosCombustiveis(this.parentNode.parentNode.rowIndex-1);");

                // $('#produto-linha' + txt_id.value).addClass('d-none');
                document.getElementById('linhas_objetivos_combustiveis').value = document.getElementById("tabelaObjetivosCombustiveis").rows.length;
                

            
        };

        function addTabelaCombustiveis(tabela = 'tabelaCombustiveis'){

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

                if(!combustiveis.includes(document.getElementById('artigo').value)){
                    combustiveis.push(document.getElementById('artigo').value);
                }

                var tabelaRef = document.getElementById(tabela);
                var newRow = tabelaRef.insertRow();
                
                var btn = document.createElement("BUTTON");
                var txt_id = document.createElement("INPUT");
                var txt_artigo = document.createElement("INPUT");
                var txt_num_tanque = document.createElement("INPUT");
                var txt_cap_tanque = document.createElement("INPUT");
                var txt_tara = document.createElement("INPUT");
                var txt_media_venda_inicial = 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_artigo.id="artigo" + linha;
                txt_artigo.style="border:0; box-shadow: none;";
                txt_artigo.setAttribute("class", "bg-light form-control");
                txt_artigo.setAttribute("readonly","");
                txt_artigo.setAttribute("name", "artigo" + linha);

                txt_num_tanque.id="num_tanque" + linha;
                txt_num_tanque.setAttribute("class", "form-control");
                txt_num_tanque.setAttribute("name", "num_tanque" + linha);
                txt_num_tanque.setAttribute("type", "number");
                txt_num_tanque.setAttribute("required", "required");

                txt_cap_tanque.id="cap_tanque" + linha;
                txt_cap_tanque.setAttribute("class", "form-control");
                txt_cap_tanque.setAttribute("name", "cap_tanque" + linha);
                txt_cap_tanque.setAttribute("type", "number");
                txt_cap_tanque.setAttribute("required", "required");

                txt_tara.id="tara" + linha;
                txt_tara.setAttribute("type", "number");
                txt_tara.setAttribute("class", "form-control");
                txt_tara.setAttribute("name", "tara" + linha);
                txt_tara.setAttribute("required", "required");

                txt_media_venda_inicial.id="media_venda_inicial" + linha;
                txt_media_venda_inicial.setAttribute("type", "number");
                txt_media_venda_inicial.setAttribute("class", "form-control");
                txt_media_venda_inicial.setAttribute("name", "media_venda_inicial" + linha);
                txt_media_venda_inicial.setAttribute("required", "required");


                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);
                var c3 = newRow.insertCell(3);
                var c4 = newRow.insertCell(4);
                var c5 = newRow.insertCell(5);
                var c6 = newRow.insertCell(6);



                c0.appendChild(txt_id);
                txt_id.value = document.getElementById('produto_id').value;
                
                c1.appendChild(txt_artigo);
                txt_artigo.value = document.getElementById('artigo').value;
                
                c2.appendChild(txt_num_tanque);
                c3.appendChild(txt_cap_tanque);
                c4.appendChild(txt_tara);
                c5.appendChild(txt_media_venda_inicial);

                c6.appendChild(btn);

                linha = newRow.rowIndex - 1;

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

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

                document.getElementById('linhas_combustiveis').value = document.getElementById("tabelaCombustiveis").rows.length;
                
                $('.mostrar-bombas').removeClass('d-none');
                
                atualizarCombustiveis();

            };
        };

        function deleteRowCombustiveis(i){

            a = document.getElementById('tabelaCombustiveis').rows[i].cells[0].firstChild.value;
            index = check_produtos.indexOf(a);
            check_produtos.splice(index, 1);
            combustiveis.splice(index, 1);


            var $linhaId = '#produto-linha' + a;
            // $('#produto-linha' + a).removeClass('d-none');

            var table = $('#tabelaProdutos').DataTable();

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

            document.getElementById('tabelaCombustiveis').deleteRow(i);
            document.getElementById('linhas_combustiveis').value = document.getElementById("tabelaCombustiveis").rows.length;

            atualizarCombustiveis();

            if(check_produtos.length < 1){
                $('.mostrar-bombas').addClass('d-none');
                $('#tabelaBombas').empty();
            }


        };

        function deleteRowObjetivosCombustiveis(i){

            a = document.getElementById('tabelaObjetivosCombustiveis').rows[i].cells[1].firstChild.value;

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

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

            document.getElementById('tabelaObjetivosCombustiveis').deleteRow(i);
            document.getElementById('linhas_objetivos_combustiveis').value = document.getElementById("tabelaObjetivosCombustiveis").rows.length;



        };

        function addTabelaBomba(){
            if(check_produtos.length > 0){

                var tabelaRef = document.getElementById('tabelaBombas');
                var newRow = tabelaRef.insertRow();
                
                var btn = document.createElement("BUTTON");
                // var txt_id = document.createElement("INPUT");
                var txt_num_bomba = document.createElement("INPUT");
                var txt_bomba_combustivel = document.createElement("SELECT");
                var txt_possui_contador = document.createElement("SELECT");
                var txt_tipo_contador = document.createElement("SELECT");
                var txt_operacional = document.createElement("SELECT");


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

                // txt_id.id = "bomba_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", "bomba_id" + linha);

                txt_num_bomba.id="num_bomba" + linha;
                txt_num_bomba.setAttribute("class", "form-control");
                txt_num_bomba.setAttribute("name", "num_bomba" + linha);
                txt_num_bomba.setAttribute("required", "required");

                txt_bomba_combustivel.id = "bomba_combustivel" + linha;
                txt_bomba_combustivel.setAttribute("class", "form-control");
                txt_bomba_combustivel.setAttribute("name", "bomba_combustivel" + linha);
                txt_bomba_combustivel.setAttribute("required", "required");

                txt_possui_contador.id = "possui_contador" + linha;
                txt_possui_contador.setAttribute("class", "form-control");
                txt_possui_contador.setAttribute("name", "possui_contador" + linha);
                var sim = document.createElement('option');
                sim.setAttribute('value', 'Sim')
                var simT = document.createTextNode('Sim');
                sim.appendChild(simT);
                txt_possui_contador.appendChild(sim);
                var nao = document.createElement('option');
                nao.setAttribute('value', 'Não')
                var naoT = document.createTextNode('Não');
                nao.appendChild(naoT);
                txt_possui_contador.appendChild(nao);


                txt_tipo_contador.id = "tipo_contador" + linha;
                txt_tipo_contador.setAttribute("class", "form-control");
                txt_tipo_contador.setAttribute("name", "tipo_contador" + linha);
                var digital = document.createElement('option');
                digital.setAttribute('value', 'Digital')
                var digitalT = document.createTextNode('Digital');
                digital.appendChild(digitalT);
                txt_tipo_contador.appendChild(digital);
                var analogico = document.createElement('option');
                analogico.setAttribute('value', 'Analógico')
                var analogicoT = document.createTextNode('Analógico');
                analogico.appendChild(analogicoT);
                txt_tipo_contador.appendChild(analogico);

                txt_operacional.id = "operacional" + linha;
                txt_operacional.setAttribute("class", "form-control");
                txt_operacional.setAttribute("name", "operacional" + linha);
                var sim = document.createElement('option');
                sim.setAttribute('value', 'Sim')
                var simT = document.createTextNode('Sim');
                sim.appendChild(simT);
                txt_operacional.appendChild(sim);
                var nao = document.createElement('option');
                nao.setAttribute('value', 'Não')
                var naoT = document.createTextNode('Não');
                nao.appendChild(naoT);
                txt_operacional.appendChild(nao);




                // for(var i = 0; i < check_produtos.length; i ++){
                //     var z = document.createElement("option");
                //     z.setAttribute("value", check_produtos[i]);
                //     var t = document.createTextNode(combustiveis[i]);
                //     z.appendChild(t);
                //     txt_bomba_combustivel.appendChild(z);
                // }

                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);
                var c3 = newRow.insertCell(3);
                var c4 = newRow.insertCell(4);
                var c5 = newRow.insertCell(5);


                // c0.appendChild(txt_id);
                // txt_id.value = linha;


                c0.appendChild(txt_num_bomba);
                c1.appendChild(txt_bomba_combustivel);
                c2.appendChild(txt_possui_contador);
                c3.appendChild(txt_tipo_contador);
                c4.appendChild(txt_operacional);
                c5.appendChild(btn);

                linha = newRow.rowIndex - 1;

                txt_possui_contador.setAttribute('onchange', "mudarTipoContador(this, '" + txt_tipo_contador.id + "')")
                btn.setAttribute("onclick", "deleteRowBombas(this.parentNode.parentNode.rowIndex-1);");

                document.getElementById('linhas_bombas').value = document.getElementById("tabelaBombas").rows.length;
                atualizarCombustiveis(txt_bomba_combustivel.id);
                
                $('.mostrar-bombas').removeClass('d-none');
            };
        }

        function deleteRowBombas(i){
            a = document.getElementById('tabelaBombas').rows[i].cells[0].firstChild.value;
            index = check_produtos.indexOf(a);

            document.getElementById('tabelaBombas').deleteRow(i);
            document.getElementById('linhas_bombas').value = document.getElementById("tabelaBombas").rows.length;
        }

        function atualizarCombustiveis(id = null){
            if(id != null){
                var bombas = $('#' + id);
            } else {
                var bombas = $("select[id^='bomba_combustivel']");
            }

            bombas.each(function(index, element){
                var bombaEl = $('#' + element.id)
                bombaEl.empty();

                var z = document.createElement("option");
                z.setAttribute("value", '');
                var t = document.createTextNode('');
                z.appendChild(t);
                bombaEl.append(z);

                for(var i = 0; i < check_produtos.length; i ++){
                    var z = document.createElement("option");
                    z.setAttribute("value", check_produtos[i]);
                    // z.setAttribute("value", 'as');
                    var t = document.createTextNode(combustiveis[i]);
                    // var t = document.createTextNode('ew');
                    z.appendChild(t);
                    // bombaEl.append('<option value="asd">text</option>')
                    bombaEl.append(z);
                }
            });
        }

        function mudarTipoContador(sel, id){
            var tipo_contador = $('#' + id);
            if(sel.value == "Sim"){
                tipo_contador.prop('disabled', false)
            } else {
                tipo_contador.prop('disabled', true)
            }
        }


    </script>

    {{-- Tratar usuários novos ou cadastrados  --}}
    <script>
        $('#usuario_cadastrado').change(function(){
            if($(this).val() == "Não"){
                $('#div_usuario_cadastrado').addClass('d-none');
                $('#div_usuario_cadastrado :input').prop('disabled', true).prop('required', false);

                $('#div_novo_acesso').removeClass('d-none');
                $('#div_novo_acesso :input').prop('disabled', false).prop('required', true)
            } else {
                $('#div_usuario_cadastrado').removeClass('d-none');
                $('#div_usuario_cadastrado :input').prop('disabled', false).prop('required', true);

                $('#div_novo_acesso').addClass('d-none');
                $('#div_novo_acesso :input').prop('disabled', true).prop('required', false)

            }
        })
    </script>

    {{-- Tratar tipo de contrato  --}}
    <script>
        $('#tipo_contrato').change(function(){
            if($(this).val() == "direto"){
                $('#div_indireto').addClass('d-none');
                $('#div_indireto :input').prop('disabled', true).prop('required', false);

                $('#div_direto').removeClass('d-none');
                $('#div_direto :input').prop('disabled', false).prop('required', true)
            } else {
                $('#div_indireto').removeClass('d-none');
                $('#div_indireto :input').prop('disabled', false).prop('required', true);

                $('#div_direto').addClass('d-none');
                $('#div_direto :input').prop('disabled', true).prop('required', false)

            }
        })
    </script>

    {{-- Testar formulário antes de cadastrar --}}
    <script>
        $('#btn_cadastrar').click(function(){
            var l_combustiveis = $('#linhas_combustiveis')
            var l_bombas = $('#linhas_bombas')
            var form = document.getElementById('formNovoPosto')
            if(l_combustiveis.val() > 0 && l_bombas.val() > 0){
                if (form.checkValidity()) {
                    form.submit();
                } else {
                    form.reportValidity();
                }
            } else {
                alert('Combustíveis e bombas são necessários para o cadastro.');
            }
        });
    </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>

    {{-- Escolha do porto de acordo com o fornecedor --}}
    <script>
        var portos = @json($portos);
        var fornecedores = @json($fornecedores);

        $('#fornecedor').change(function(){
            var $porto = $('#porto')

            $porto.find('option').remove();

            var fornecedor = fornecedores.find(x => x.id == $(this).val());
            var idsPortos = JSON.parse(fornecedor.portos);

            idsTratados = idsPortos.map(id => {
                return parseInt(id);
            });

            let result = portos.filter(item => idsTratados.includes(item.id));

            $porto.append(`<option></option>`)

            result.forEach(porto => {
                $porto.append(`<option value="${porto.id}">${porto.nome_porto}</option>`)
            });
        })
    </script>
    <script >
        
        

        $(document).ready(function(){
            $('#btn_adicionar').click(function(){
                var selectedId = $('#familia').val();
                var selectedNome = $('#familia option:selected').text();

                //verficar se a familia já foi adicionada
                var familias = [];
                var rows = $('#tbl_familias tbody tr');
                rows.each(function(index, element){
                    var id = $(element).find('input[name="familia_id[]"]').val();
                    familias.push(id);
                });

                if(familias.includes(selectedId)){
                    alert('Família já adicionada');
                    return;
                }


                if(selectedId && selectedNome) {
                    var newRow = '<tr>' +
                                    '<td><input type="hidden" name="familia_id[]" value="' + selectedId + '">' + selectedId + '</td>' +
                                    '<td>' + selectedNome + '</td>' +
                                    '<td><button class="btn btn-danger btn_remover" type="button">Remover</button></td>' +
                                '</tr>';
                    
                    $('#tbl_familias tbody').append(newRow);
                }
            });

            // Remover linha ao clicar no botão "Remover"
            $(document).on('click', '.btn_remover', function(){
                $(this).closest('tr').remove();
            });


             $('#btn_adicionar_objetivo_familia').click(function(){
                var selectedId = $('#objetivo_familia_select').val();
                var selectedNome = $('#objetivo_familia_select option:selected').text();
                var selectedAno = $('#ano-objetivo-familias').val();

                if(selectedId && selectedNome) {
                    var newRow = '<tr>' +
                                    '<td><input type="number" name="objetivo_ano_familia[]" class="form-control" value="' + selectedAno + '"></td>' +
                                    '<td><input type="hidden" name="objetivo_familia_id[]" value="' + selectedId + '">' + selectedId + '</td>' +
                                    '<td>' + selectedNome + '</td>' +
                                    '<td><input type="number" name="objetivo_familia[]" class="form-control" required></td>' +
                                    '<td><button class="btn btn-danger btn_remover" type="button">Remover</button></td>' +
                                '</tr>';
                    
                    $('#tbl_objetivos_familias tbody').append(newRow);
                }
            });

            
        });

        function funcNameTabela(tabela){
            document.getElementById('tabela').value = tabela;
        }
    
    </script>

@endsection