@extends('adminlte::page')

@section('content_header')
    <label>{{ $cliente->nome_fantasia }} > {{ $convenio->nome_fantasia }}</label>
@endsection

@section('content')
    <div class="card" :json="[form.setData({{ $data }}),
                                form.setCustomData('novo_procedimento', {{ $novo_procedimento }}),
                                form.setCustomData('nova_despesa', {{ $nova_despesa }}),
                                form.setCustomData('url_procedimentos', '{{ $url_procedimentos }}'),
                                form.setCustomData('medicos', {{ $cliente->medicos }}),
                                form.setCustomData('planos', {{ $convenio->planos }}),]">
        <div class="card-body">
            <form @submit.prevent="$refs.submit.submit_form">
                <div class="row">
                    <div class="col-md-6">
                        <label>Contrato ATD x Prestador</label>
                        <v-select v-model="form.data.cliente_convenio_id"
                            :reduce="contrato => contrato.id"
                            :options='@json($cliente_convenios)'
                            ref="cliente_convenio_id"
                            label="contrato">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.contrato }} - @{{ option.inicio_formatado }} - @{{ option.termino_formatado }} -&nbsp;<span class="text-success">@{{ option.ativo ? 'ATIVO' : '' }}</span>
                            </template>

                            <template #selected-option="option">
                                @{{ option.contrato }} - @{{ option.inicio_formatado }} - @{{ option.termino_formatado }} -&nbsp;<span class="text-success">@{{ option.ativo ? 'ATIVO' : '' }}</span>
                            </template>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.cliente_convenio_id"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>
                    <div class="col-md-6">
                        <label>Plano no Prestador</label>
                        <v-select v-model="form.data.convenio_plano_id" :reduce="plano => plano.id" :options='form.planos' label="nome">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.nome }}
                            </template>

                            <template #selected-option="option">
                                @{{ option.nome }}
                            </template>

                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="form.planos.length > 0 && !form.data.convenio_plano_id"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>
                </div>
                <div class="row border border mt-3">
                    <div class="col-md-8 align-self-center">
                        <h3 class="text-center">Guia de SP SADT</h3>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Nº da Guia no Prestador</label>
                        <input type="text" class="form-control" v-model="form.data.cabecalho_numero_guia_prestador" @change="nGuiaPrestadorChange" maxlength="20" required />
                    </div>
                    <div class="form-group col-md-5">
                        <label>Registro ANS</label>
                        <input type="text" class="form-control" value="{{ $convenio->ans }}" required disabled />
                    </div>
                    <div class="form-group col-md-5">
                        <label>Nº da Guia Principal</label>
                        <input type="text" class="form-control" v-model="form.data.cabecalho_numero_guia_principal" maxlength="20" />
                    </div>
                    <div class="form-group col-md-3">
                        <label>Data da autorização</label>
                        <input type="date" class="form-control" v-model="form.data.dados_autorizacao_data_autorizacao" required/>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Senha</label>
                        <input type="text" class="form-control" v-model="form.data.dados_autorizacao_senha" maxlength="20" />
                    </div>
                    <div class="form-group col-md-3">
                        <label>Data Validade da Senha</label>
                        <input type="date" class="form-control" v-model="form.data.dados_autorizacao_data_validade_senha" />
                    </div>
                    <div class="form-group col-md-3">
                        <label>Nº Guia Atribuído Operadora</label>
                        <input type="text" class="form-control" v-model="form.data.dados_autorizacao_numero_guia_operadora" maxlength="20" />
                    </div>
                </div>

                <fieldset class="row border rounded mt-3">
                    <legend>Dados do Beneficiário</legend>
                    <div class="form-group col-md-4">
                        <label>Nº Carteira</label>
                        <input type="text" class="form-control" v-model="form.data.dados_beneficiario_numero_carteira" maxlength="20" required/>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Validade Carteira</label>
                        <input type="date" class="form-control" v-model="form.data.dados_beneficiario_validade_carteira"/>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Atendimento a RN</label>
                        <select class="form-control" v-model="form.data.dados_beneficiario_atendimento_rn" required>
                            <option value="N">Não</option>
                            <option value="S">Sim</option>
                        </select>
                    </div>
                    <div class="form-group col-md-8">
                        <label>Nome</label>
                        <input type="text" class="form-control" v-model="form.data.dados_beneficiario_nome_beneficiario" maxlength="70" required/>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Cartão Nacional de Saúde</label>
                        <input type="text" class="form-control" v-model="form.data.dados_beneficiario_numero_cns" maxlength="15"/>
                    </div>
                </fieldset>

                <fieldset class="row border rounded mt-3">
                    <legend>Dados do Contratado Solicitante</legend>
                    <div class="form-group col-md-5">
                        <label>Código na Operadora/CNPJ do Contratado</label>
                        <input type="text" class="form-control" v-model="form.data.dados_solicitante_contratado_codigo_prestador_na_operadora" required/>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Nome do Contratado</label>
                        <input type="text" class="form-control" v-model="form.data.dados_solicitante_contratado_nome" required/>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Código CNES</label>
                        <input type="text" class="form-control" v-model="form.data.dados_solicitante_contratado_cnes"/>
                    </div>
                </fieldset>

                <fieldset class="row border rounded mt-3">
                    <legend>Dados do Profissional Solicitante</legend>
                    <div class="form-group col-4" v-if="!form.data.id">
                        <!-- selecionando um médico daqui, preenche os campos da tela / senão os campos podem ser digitados -->
                        <label>Pesquisar Médico</label>
                        <v-select
                            @input="selecionaMedicoSolicitante"
                            :options='@json($medicos ?? null)'
                            :filter="medicoSearch"
                            label="id">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.nome }} [ @{{ option.numero_conselho }} - @{{ option.conselho?.termo }} - CBO: @{{ option.cbo_codigo }}]
                            </template>
                            <template #selected-option="option">
                                @{{ option.nome }} [ @{{ option.numero_conselho }} - @{{ option.conselho?.termo }} - CBO: @{{ option.cbo_codigo }}]
                            </template>
                        </v-select>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Nome</label>
                        <input type="text" class="form-control" v-model="form.data.dados_solicitante_profissional_nome" required/>
                    </div>

                    <div class="form-group col-md-4">
                        <label>CBO</label>
                        <v-select v-model="form.data.dados_solicitante_profissional_cbo"
                            :reduce="especialidade => especialidade.codigo"
                            :options='@json(App\Models\Terminologia::listCbo())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #selected-option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.dados_solicitante_profissional_cbo"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Conselho</label>
                        <v-select v-model="form.data.dados_solicitante_profissional_conselho"
                            :reduce="conselho => conselho.codigo"
                            :options='@json(App\Models\Terminologia::listConselho())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #selected-option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.dados_solicitante_profissional_conselho"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Número no Conselho</label>
                        <input type="text" class="form-control" v-model="form.data.dados_solicitante_profissional_numero_conselho" required/>
                    </div>

                    <div class="form-group col-md-4">
                        <label>UF do Conselho</label>
                        <v-select v-model="form.data.dados_solicitante_profissional_uf_conselho"
                            :reduce="conselho => conselho.codigo"
                            :options='@json(App\Models\Terminologia::listEstado())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #selected-option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.dados_solicitante_profissional_uf_conselho"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>
                </fieldset>

                <fieldset class="row border rounded mt-3">
                    <legend>Dados da Solicitação / Procedimentos e Exames Solicitados</legend>
                    <div class="form-group col-md-4">
                        <label>Caráter do Atendimento</label>
                        <v-select v-model="form.data.dados_solicitacao_carater_atendimento"
                            :reduce="tipo => tipo.codigo"
                            :options='@json(App\Models\Terminologia::listCaraterAtendimento())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #selected-option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.dados_solicitacao_carater_atendimento"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Data da Solicitação</label>
                        <input type="date" class="form-control" v-model="form.data.dados_solicitacao_data_solicitacao"/>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Ind. Cobertura Especial</label>
                        <v-select v-model="form.data.dados_solicitacao_ind_cob_especial"
                            :reduce="tipo => tipo.codigo"
                            :options='@json(App\Models\Terminologia::listCoberturaEspecial())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #selected-option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                        </v-select>
                    </div>
                    <div class="form-group col-md-12">
                        <label>Indicação Clínica</label>
                        <input type="text" class="form-control" v-model="form.data.dados_solicitacao_indicacao_clinica" maxlength="500"/>
                    </div>
                </fieldset>


                <fieldset class="row border rounded mt-3">
                    <legend>Dados do Contratado Executante</legend>
                    <div class="form-group col-md-2">
                        <label>Código na Operadora</label>
                        <input type="text" class="form-control" v-model="form.data.dados_executante_codigo_prestador_na_operadora" required/>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Nome do Contratado</label>
                        <input type="text" class="form-control" v-model="form.data.dados_executante_nome" required/>
                    </div>
                    <div class="form-group col-md-3">
                        <label>CNPJ do Contratado</label>
                        <the-mask type="tel" class="form-control" mask="##.###.###/####-##" v-model="form.data.dados_executante_cpf_cnpj_contratado" required />
                    </div>
                    <div class="form-group col-md-3">
                        <label>Código CNES</label>
                        <input type="text" class="form-control" v-model="form.data.dados_executante_cnes" required/>
                    </div>
                </fieldset>

                <fieldset class="row border rounded mt-3">
                    <legend>Dados do Atendimento</legend>
                    <div class="form-group col-md-6">
                        <label>Tipo do Atendimento</label>
                        <v-select v-model="form.data.dados_atendimento_tipo_atendimento"
                            :reduce="tipo => tipo.codigo"
                            :options='@json(App\Models\Terminologia::listTipoAtendimento())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>

                            <template #selected-option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.dados_atendimento_tipo_atendimento"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>
                    <div class="form-group col-md-6">
                        <label>Motivo Encerramento Atend.</label>
                        <v-select v-model="form.data.dados_atendimento_motivo_encerramento"
                            :reduce="tipo => tipo.codigo"
                            :options='@json(App\Models\Terminologia::listMotivoEncerramento())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>

                            <template #selected-option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                        </v-select>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Indicação de Acidente</label>
                        <v-select v-model="form.data.dados_atendimento_indicacao_acidente"
                            :reduce="tipo => tipo.codigo"
                            :options='@json(App\Models\Terminologia::listIndicacaoAcidente())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>

                            <template #selected-option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.dados_atendimento_indicacao_acidente"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>
                    <div class="form-group col-md-4">
                        <label>Tipo de Consulta</label>
                        <v-select v-model="form.data.dados_atendimento_tipo_consulta"
                            :reduce="tipo => tipo.codigo"
                            :options='@json(App\Models\Terminologia::listTipoConsulta())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <span slot="no-options">Nenhum item encontrado</span>
                            <template v-slot:option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>

                            <template #selected-option="option">
                                @{{ option.codigo }} - @{{ option.termo }}
                            </template>s
                        </v-select>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Regime de Atendimento</label>
                        <select class="form-control" v-model="form.data.dados_atendimento_regime_atendimento" required>
                            @foreach ($regimes_atendimentos as $regime)
                            <option value="{{ $regime->codigo }}">{{ $regime->termo }}</option>
                            @endforeach
                        </select>
                    </div>
                </fieldset>

                <!-- -------------------------------------------------------- -->
                <!-- Dados da Execução / Procedimentos e Exames Realizados -->
                <fieldset class="row border rounded mt-3">
                    <legend>
                        Dados da Execução / Procedimentos e Exames Realizados
                        <button class="btn btn-sm" type="button" title="Adicionar Procedimento" @click="addProcedimento">
                            <i class="far fa-plus-square text-success" style="font-size: 1.4rem;"></i>
                        </button>
                    </legend>

                    <fieldset class="col-12 border-danger" v-for="(procedimento, k) in form.data.procedimentos_executados.filter((procedimento) => !procedimento.deleted)" :key="k">
                        <legend class="text-danger">
                            Seq. @{{ (k+1) }}
                            <button class="btn btn-sm float-right" type="button" title="Remover Procedimento" @click="delProcedimento(k)">
                                <i class="far fa-minus-square text-danger" style="font-size: 1.4rem;"></i>
                            </button>
                        </legend>
                        <div class="row">
                            <div class="form-group col-md-2">
                                <label>Data</label>
                                <input type="date" class="form-control" v-model="procedimento.data_execucao" required/>
                            </div>
                            <div class="form-group col-md-2">
                                <label>Hora Inicial</label>
                                <input type="time" class="form-control" v-model="procedimento.hora_inicial"/>
                            </div>
                            <div class="form-group col-md-2">
                                <label>Hora Final</label>
                                <input type="time" class="form-control" v-model="procedimento.hora_final"/>
                            </div>
                            <div class="form-group col-md-4">
                                <label>
                                    Procedimento
                                    <small class="text-danger" v-if="form.planos.length > 0 && !form.data.convenio_plano_id">Selecione o Plano no Prestador</small>
                                </label>
                                <v-select v-model="procedimento.procedimento_obj"
                                    :disabled="form.planos.length > 0 && !form.data.convenio_plano_id"
                                    @input="(val) => {procedimento.procedimento_id = val.id; atualizaValorProcedimento(procedimento); adicionaMatMed(procedimento, val)}"
                                    @search="(search, loading) => fetchOptions(search, null, procedimento)"
                                    :filterable="false"
                                    :options="procedimento.procedimentos_pesquisa"
                                    label="id">
                                    <span slot="no-options">Nenhum item encontrado</span>
                                    <template v-slot:option="option">
                                        @{{ option.tabela }} - @{{ option.codigo }} - @{{ option.termo }}
                                    </template>

                                    <template #selected-option="option">
                                        @{{ option.tabela }} - @{{ option.codigo }} - @{{ option.termo }}
                                    </template>

                                    <template #no-options="{ search, searching, loading }">
                                        Nenhum termo encontrado. Comece a digitar para pesquisar.
                                    </template>

                                    <template #search="{attributes, events}">
                                        <input
                                        class="vs__search"
                                        :required="!procedimento.procedimento_id"
                                        v-bind="attributes"
                                        v-on="events"
                                        />
                                    </template>
                                </v-select>
                            </div>
                            <div class="form-group col-md-2">
                                <label>Valor Procedimento</label>
                                <money class="form-control" :value="procedimento.procedimento_obj?.valor" v-bind="money_config" required disabled></money>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Qtde</label>
                                <input type="number" class="form-control" v-model="procedimento.quantidade_executada" min="1" step="1" @blur="atualizaValorProcedimento(procedimento, false)"/>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Via</label>
                                <v-select v-model="procedimento.via_acesso_obj"
                                    @input="(val) => {procedimento.via_acesso = val.codigo; atualizaValorProcedimento(procedimento)}"
                                    :options='@json(App\Models\Terminologia::listViaAcesso())'
                                    :filter="terminologiasSearch"
                                    label="codigo">
                                    <span slot="no-options">Nenhum item encontrado</span>
                                    <template v-slot:option="option">
                                        @{{ option.codigo }} - @{{ option.termo }}
                                    </template>

                                    <template #selected-option="option">
                                    @{{ option.codigo }} - @{{ option.termo }}
                                    </template>
                                </v-select>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Técnica</label>
                                <v-select v-model="procedimento.tecnica_utilizada_obj"
                                    @input="(val) => {procedimento.tecnica_utilizada = val.codigo; atualizaValorProcedimento(procedimento);}"
                                    :options='@json(App\Models\Terminologia::listTecnicaUtilizada())'
                                    :filter="terminologiasSearch"
                                    label="codigo">
                                    <span slot="no-options">Nenhum item encontrado</span>
                                    <template v-slot:option="option">
                                        @{{ option.codigo }} - @{{ option.termo }}
                                    </template>

                                    <template #selected-option="option">
                                    @{{ option.codigo }} - @{{ option.termo }}
                                    </template>
                                </v-select>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Red. Acrés.</label>
                                <money class="form-control" v-model="procedimento.reducao_acrescimo" required @blur.native="atualizaValorProcedimento(procedimento, false)"></money>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Valor Unit.</label>
                                <money class="form-control" v-model="procedimento.valor_unitario" v-bind="money_config" required disabled></money>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Valor Total (profissionais)</label>
                                <money class="form-control" v-model="procedimento.valor_total" v-bind="money_config" required disabled></money>
                            </div>
                        </div>


                        <!-- -------------------------------------------------------- -->
                        <!-- Profissionais executantes -->
                        <fieldset class="col-12 border rounded mt-1">
                            <legend>
                                Profissionais executantes
                                <button class="btn btn-sm" type="button" title="Adicionar Profissional" @click="procedimento.equipe.push({});">
                                    <i class="far fa-plus-square text-success" style="font-size: 1.4rem;"></i>
                                </button>
                            </legend>
                            <div class="row" v-for="(equipe, j) in procedimento.equipe.filter((equipe) => !equipe.deleted)" :key="j">
                                <div class="form-group col-md-1">
                                    <label>Seq.</label>
                                    <input type="number" class="form-control" :value="j+1" required disabled/>
                                </div>
                                <div class="form-group col-md-3">
                                    <label>Grau de Participação</label>
                                    <v-select v-model="equipe.grau_part_obj"
                                        @input="(val) => {equipe.grau_part = val.codigo; atualizaValorProfissional(procedimento, equipe); calculaValores()}"
                                        :options='@json(App\Models\Terminologia::listGrauParticipacao())'
                                        :filter="terminologiasSearch"
                                        label="codigo">
                                        <span slot="no-options">Nenhum item encontrado</span>
                                        <template v-slot:option="option">
                                            @{{ option.codigo }} - @{{ option.termo }}
                                        </template>
                                        <template #selected-option="option">
                                            @{{ option.codigo }} - @{{ option.termo }}
                                        </template>
                                        <template #search="{attributes, events}">
                                            <input
                                            class="vs__search"
                                            :required="!equipe.grau_part"
                                            v-bind="attributes"
                                            v-on="events"
                                            />
                                        </template>
                                    </v-select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Profissional Executante</label>
                                    <v-select v-model="equipe.medico_id"
                                        :reduce="medico => medico.id"
                                        :options='form.medicos'
                                        :filter="medicoSearch"
                                        label="nome">
                                        <span slot="no-options">Nenhum item encontrado</span>
                                        <template v-slot:option="option">
                                            @{{ option.nome }} [ @{{ option.numero_conselho }}/@{{ option.uf_conselho }} - @{{ option.conselho?.termo }} - CBO: @{{ option.cbo }}]
                                        </template>
                                        <template #selected-option="option">
                                            @{{ option.nome }} [ @{{ option.numero_conselho }}/@{{ option.uf_conselho }} - @{{ option.conselho?.termo }} - CBO: @{{ option.cbo }}]
                                        </template>
                                        <template #search="{attributes, events}">
                                            <input
                                            class="vs__search"
                                            :required="!equipe.medico_id"
                                            v-bind="attributes"
                                            v-on="events"
                                            />
                                        </template>
                                    </v-select>
                                </div>
                                <div class="form-group col-md-3">
                                    <label>Valor</label>
                                    <money class="form-control" v-model="equipe.valor" v-bind="money_config" required @blur.native="calculaValores()"></money>
                                </div>
                                <div class="form-group col-md-1 align-self-end">
                                    <button v-if="j>0" class="btn btn-sm float-right" type="button" title="Remover Profissional" @click="delProfissional(procedimento, j)">
                                        <i class="far fa-minus-square text-danger" style="font-size: 1.4rem;"></i>
                                    </button>
                                </div>
                                <hr class="col-5 my-2 bg-warning">
                            </div>
                        </fieldset>

                        <!-- -------------------------------------------------------- -->
                        <!-- Outras despesas -->
                        <fieldset class="col-12 border rounded mt-1">
                            <legend>
                                Outras despesas
                                <button class="btn btn-sm" type="button" title="Adicionar Despesa" @click="addOutraDespesa(procedimento)">
                                    <i class="far fa-plus-square text-success" style="font-size: 1.4rem;"></i>
                                </button>
                            </legend>
                            <div class="row" v-for="(despesa, j) in procedimento.outras_despesas.filter((despesa) => !despesa.deleted)" :key="j">
                                <div class="form-group col-md-2">
                                    <label>Seq.</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" :value="j+1" required disabled/>
                                        <button class="btn btn-sm float-right" type="button" title="Remover Despesa" @click="delOutraDespesa(procedimento, j)">
                                            <i class="far fa-minus-square text-danger" style="font-size: 1.4rem;"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Cód. Despesa</label>
                                    <v-select v-model="despesa.codigo_despesa"
                                        :reduce="tipo => tipo.codigo"
                                        :options='@json(App\Models\Terminologia::listDespesas())'
                                        :filter="terminologiasSearch"
                                        @input="calculaValores()"
                                        label="codigo">
                                        <span slot="no-options">Nenhum item encontrado</span>
                                        <template v-slot:option="option">
                                            @{{ option.codigo }} - @{{ option.termo }}
                                        </template>
                                        <template #selected-option="option">
                                            @{{ option.codigo }} - @{{ option.termo }}
                                        </template>
                                        <template #search="{attributes, events}">
                                            <input
                                            class="vs__search"
                                            :required="!despesa.codigo_despesa"
                                            v-bind="attributes"
                                            v-on="events"
                                            />
                                        </template>
                                    </v-select>
                                </div>
                                <div class="form-group col-md-2">
                                    <label>Data</label>
                                    <input type="date" class="form-control" v-model="despesa.data_execucao" required/>
                                </div>
                                <div class="form-group col-md-2">
                                    <label>Hora Inicial</label>
                                    <input type="time" class="form-control" v-model="despesa.hora_inicial"/>
                                </div>
                                <div class="form-group col-md-2">
                                    <label>Hora Final</label>
                                    <input type="time" class="form-control" v-model="despesa.hora_final"/>
                                </div>
                                <div class="form-group col-md-5">
                                    <label>Item</label>
                                    <v-select v-model="despesa.procedimento"
                                        @search="(search, loading) => fetchOptions(search, loading, despesa)"
                                        @input="selecionaDespesa(despesa)"
                                        :filterable="false"
                                        :options="despesa.procedimentos_pesquisa"
                                        label="id">
                                        <span slot="no-options">Nenhum item encontrado</span>
                                        <template v-slot:option="option">
                                            @{{ option.tabela }} - @{{ option.codigo }} - @{{ option.termo }}
                                        </template>

                                        <template #selected-option="option">
                                            @{{ option.tabela }} - @{{ option.codigo }} - @{{ option.termo }}
                                        </template>

                                        <template #no-options="{ search, searching, loading }">
                                            Nenhum termo encontrado. Comece a digitar para pesquisar.
                                        </template>

                                        <template #search="{attributes, events}">
                                            <input
                                            class="vs__search"
                                            :required="!despesa.procedimento_id"
                                            v-bind="attributes"
                                            v-on="events"
                                            />
                                        </template>
                                    </v-select>
                                </div>
                                <div class="form-group col-md-3">
                                    <label>Qtde Executada</label>
                                    <input type="number" class="form-control" v-model="despesa.quantidade_executada" min="1" step="1" @blur="calculaValores()"/>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Un. Medida</label>
                                    <v-select v-model="despesa.unidade_medida"
                                        :reduce="tipo => tipo.codigo"
                                        :options='@json(App\Models\Terminologia::listUnidadeMedida())'
                                        :filter="terminologiasSearch"
                                        label="codigo">
                                        <template #search="{attributes, events}">
                                            <input class="vs__search" :required="!despesa.unidade_medida" v-bind="attributes" v-on="events"/>
                                        </template>
                                        <span slot="no-options">Nenhum item encontrado</span>
                                        <template v-slot:option="option">
                                            @{{ option.codigo }} - @{{ option.termo }}
                                        </template>
                                        <template #selected-option="option">
                                            @{{ option.codigo }} - @{{ option.termo }}
                                        </template>
                                    </v-select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Red. Acrés.</label>
                                    <money class="form-control" v-model="despesa.reducao_acrescimo" required @blur.native="calculaValores()"></money>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Valor Unit.</label>
                                    <money class="form-control" v-model="despesa.valor_unitario" v-bind="money_config" required @blur.native="calculaValores()"></money>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Valor Total</label>
                                    <money class="form-control" v-model="despesa.valor_total" v-bind="money_config" required disabled></money>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Reg. ANVISA</label>
                                    <input type="text" class="form-control" v-model="despesa.registro_anvisa" maxlength="15"/>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Ref. Fabricante</label>
                                    <input type="text" class="form-control" v-model="despesa.codigo_ref_fabricante" maxlength="60"/>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Nº Aut. Funcionamento</label>
                                    <input type="text" class="form-control" v-model="despesa.autorizacao_funcionamento" maxlength="30"/>
                                </div>
                                <hr class="col-5 my-2 bg-warning">
                            </div>
                        </fieldset>
                    </fieldset>
                </fieldset>

                <fieldset class="row border rounded mt-3">
                    <legend>Observação / Justificativa</legend>
                    <div class="form-group col-md-12">
                        <input type="text" class="form-control" v-model="form.data.observacao" maxlength="500"/>
                    </div>
                </fieldset>

                <!-- totais -->
                <fieldset class="row border rounded mt-3">
                    <legend>Totais</legend>
                    <div class="form-group col-md-3">
                        <label>Procedimentos</label>
                        <money class="form-control" v-model="form.data.valor_total_valor_procedimentos" v-bind="money_config" required disabled></money>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Diárias</label>
                        <money class="form-control" v-model="form.data.valor_total_valor_diarias" v-bind="money_config" required disabled></money>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Taxas e Aluguéis</label>
                        <money class="form-control" v-model="form.data.valor_total_valor_taxas_alugueis" v-bind="money_config" required disabled></money>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Materiais</label>
                        <money class="form-control" v-model="form.data.valor_total_valor_materiais" v-bind="money_config" required disabled></money>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Medicamentos</label>
                        <money class="form-control" v-model="form.data.valor_total_valor_medicamentos" v-bind="money_config" required disabled></money>
                    </div>
                    <div class="form-group col-md-3">
                        <label>OPME</label>
                        <money class="form-control" v-model="form.data.valor_total_valor_opme" v-bind="money_config" required disabled></money>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Gases Medicinais</label>
                        <money class="form-control" v-model="form.data.valor_total_valor_gases_medicinais" v-bind="money_config" required disabled></money>
                    </div>
                    <div class="form-group col-md-3">
                        <label>Total Geral</label>
                        <money class="form-control" v-model="form.data.valor_total_valor_total_geral" v-bind="money_config" required disabled></money>
                    </div>
                </fieldset>

                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-secondary btn-block" onclick="history.back(-1)">Cancelar</button>
                    </div>
                    <div class="col-md-6">
                        <submit-btn ref="submit" url="{{ route('clientes.convenios.guia_sadts.store', [$cliente->id, $convenio->id]) }}" >Salvar</submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection