@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('url_procedimentos', '{{ $url_procedimentos }}'),
                                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 ATD</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.numero_guia_prestador" maxlength="20" required />
                    </div>
                </div>

                <fieldset class="row border rounded mt-3">
                    <legend>Dados do Beneficiário</legend>
                    <div class="form-group col-md-12">
                        <label>Nome</label>
                        <input type="text" class="form-control" v-model="form.data.nome_beneficiario" maxlength="70" required/>
                    </div>
                </fieldset>

                <fieldset class="row border rounded mt-3">
                    <legend>Dados do Contratado</legend>
                    <div class="form-group col-12">
                        <label>Profissional Executante</label>
                        <v-select v-model="form.data.medico_id"
                            :reduce="medico => medico.id"
                            :options='@json($cliente->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>
                        </v-select>
                    </div>
                </fieldset>

                <fieldset class="row border rounded mt-3">
                    <legend>Dados do Atendimento / Procedimento Realizado</legend>

                    <div class="form-group col-md-3">
                        <label>Data do Atendimento</label>
                        <input type="date" class="form-control" v-model="form.data.data_atendimento" required/>
                    </div>

                    <div class="form-group col-md-6">
                        <label>
                            Tabela / Cód. 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="form.data.procedimento"
                            :disabled="form.planos.length > 0 && !form.data.convenio_plano_id"
                            @search="fetchOptions"
                            @input="selecionaProcedimento"
                            ref="procedimentos"
                            :filterable="false"
                            :options="procedimentos"
                            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="!form.data.procedimento_id"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>

                    <div class="form-group col-3">
                        <label>Valor do Procedimento</label>
                        <money class="form-control" v-model="form.data.valor_procedimento" v-bind="money_config" required></money>
                    </div>

                    <div class="form-group col-md-12">
                        <label>Observação / Justificativa</label>
                        <input type="text" class="form-control" v-model="form.data.observacao" maxlength="500"/>
                    </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_atds.store', [$cliente->id, $convenio->id]) }}" >Salvar</submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection