@extends('adminlte::page')

@section('content_header')
    <h1>Médico</h1>
    <label>{{ $data->id ? $data->nome : 'Novo Médico' }}</label>
    <ul class="nav nav-tabs nav-stacked">
        <li class="nav-item">
            <a class="nav-link active">Dados Cadastrais</a>
        </li>
        @if ($data->id)
        <li class="nav-item">
            <a class="nav-link" href="{{ route('medicos.documentos.index', [$data->id]) }}">Documentos</a>
        </li>
        @endif
    </ul>
@endsection

@section('content')
    <div class="card" :json='[form.setData({{ $data }}),form.setCustomData("cidades", @json($cidades_endereco))]'>
        <div class="card-body">
            <form @submit.prevent="$refs.submit.submit_form">
                <div class="row">
                    <div class="form-group col-md-4">
                        <label>Nome</label>
                        <input type="text" class="form-control" v-model="form.data.nome" required/>
                    </div>
                    <div class="form-group col-md-4">
                        <label>CPF</label>
                        <the-mask type="tel" class="form-control" mask="###.###.###-##" v-model="form.data.cpf" required />
                    </div>

                    <div class="form-group col-md-4">
                        <label>CBO</label>
                        <v-select v-model="form.data.cbo_codigo"
                            :reduce="cbo => cbo.codigo"
                            :options='@json(App\Models\Terminologia::listCbo())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <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.cbo_codigo"
                                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.conselho_codigo"
                            :reduce="conselho => conselho.codigo"
                            :options='@json(App\Models\Terminologia::listConselho())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <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.conselho_codigo"
                                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.numero_conselho" required/>
                    </div>

                    <div class="form-group col-md-4">
                        <label>UF do Conselho</label>
                        <v-select v-model="form.data.uf_conselho_codigo"
                            :reduce="uf_conselho => uf_conselho.codigo"
                            :options='@json(App\Models\Terminologia::listEstado())'
                            :filter="terminologiasSearch"
                            label="codigo">
                            <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.uf_conselho_codigo"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>

                    <div class="form-group col-12">
                        <label>Convênios</label>
                        <v-select v-model="form.data.convenios_id" multiple :reduce="convenios => convenios.code" :options='@json($convenios)'/>
                    </div>

                    <div class="form-group col-md-4 mt-5">
                        <label>CEP</label>
                        <the-mask type="tel" class="form-control" mask="#####-###" v-model="form.data.cep"/>
                    </div>

                    <div class="form-group col-md-4 mt-5">
                        <label>Estado</label>
                        <v-select v-model="form.data.estado" :reduce="estado => estado.label" :options='@json($estados_endereco)'/>
                    </div>

                    <div class="form-group col-md-4 mt-5">
                        <label>Cidade</label>
                        <v-select v-model="form.data.cidade" :options="form.cidades.filter(cidade => cidade.uf == form.data.estado)"  @input="cidade => {form.data.cidade_ibge = cidade.code; form.data.cidade = cidade.label}"/>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Bairro</label>
                        <input type="text" class="form-control" v-model="form.data.bairro"/>
                    </div>

                    <div class="form-group col-md-8">
                        <label>Complemento</label>
                        <input type="text" class="form-control" v-model="form.data.complemento"/>
                    </div>

                    {{-- <div class="form-group col-md-3">
                        <label>Tipo Logradouro</label>
                        <input type="text" class="form-control" v-model="form.data.tipo_logradouro"/>
                    </div> --}}

                    <div class="form-group col-md-8">
                        <label>Logradouro</label>
                        <input type="text" class="form-control" v-model="form.data.logradouro"/>
                    </div>

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

                    <div class="form-group col-md-6">
                        <label>Telefone</label>
                        <the-mask type="tel" class="form-control" :mask="['(##) ####-####', '(##) #####-####']" v-model="form.data.telefone"/>
                    </div>

                    <div class="form-group col-md-6">
                        <label>E-mail</label>
                        <input type="email" class="form-control" v-model="form.data.email"/>
                    </div>

                    <div class="form-group col-md-3 mt-5">
                        <label>Banco</label>
                        <v-select :options="{{ $bancos }} " label="ShortName" v-model="form.data.banco" :reduce="option => option.COMPE">
                            <template v-slot:option="option">
                                @{{ option.COMPE }} - @{{ option.ShortName }}
                            </template>

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

                            <template v-slot:no-options="{ search, searching }">
                                <template v-if="searching">
                                    Nenhum banco encontrado <em>@{{ search }}</em>.
                                </template>
                            </template>
                        </v-select>
                    </div>

                    <div class="form-group col-md-3 mt-5">
                        <label>Agência</label>
                        <the-mask type="tel" class="form-control" mask="####" v-model="form.data.agencia"/>
                    </div>

                    <div class="form-group col-md-3 mt-5">
                        <label>Conta/Dígito</label>
                        <div class="input-group">
                            <the-mask type="tel" class="form-control" mask="###############" v-model="form.data.conta"></the-mask>
                            <the-mask type="tel" class="form-control col-2" mask="#" v-model="form.data.digito"></the-mask>
                        </div>
                    </div>

                    <div class="form-group col-md-3 mt-5">
                        <label>Chave Pix</label>
                        <input type="text" class="form-control" v-model="form.data.pix" maxlength="100"/>
                    </div>
                </div>

                <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('medicos.store') }}" >Salvar</submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection