@extends('adminlte::page')

@section('content_header')
    <h1>Cliente</h1>
    <label>{{ $data->id ? $data->nome_fantasia : 'Novo Cliente' }}</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('clientes.convenios.index', [$data->id]) }}">Prestador x Convênios</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ route('clientes.contratos.index', [$data->id]) }}">ATD x Cliente</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ route('clientes.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-3">
                        <label>CNPJ</label>
                        <the-mask type="tel" class="form-control" mask="##.###.###/####-##" v-model="form.data.cnpj" required />
                    </div>

                    <div class="form-group col-md-4">
                        <label>Nome Fantasia</label>
                        <input type="text" class="form-control" v-model="form.data.nome_fantasia" required/>
                    </div>

                    <div class="form-group col-md-5">
                        <label>Razão Social</label>
                        <input type="text" class="form-control" v-model="form.data.razao_social" required/>
                    </div>

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

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

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

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

                    <div class="form-group col-12 mt-5">
                        <label>Responsável Técnico</label>
                        <v-select v-model="form.data.medico_id" :reduce="medico => medico.code" :options='@json($medicos)'/>
                    </div>

                    <div class="form-group col-12">
                        <label>Corpo Clínico</label>
                        <div class="input-group">
                            <v-select class="form-control border-0 p-0" v-model="form.data.medicos_id" multiple :reduce="medico => medico.code" :options='@json($medicos)'></v-select>
                            @if ($data->id)
                            <a href="{{ route('clientes.download', [$data->id]) }}" target="_blank" class="btn btn-success input-group-append">
                                <i class="fas fa-download mr-1 mt-1"></i>
                                Download dos documentos
                            </a>
                            @endif
                        </div>
                    </div>

                    <div class="form-group col-md-4">
                        <label>CREMESP</label>
                        <input type="tel" class="form-control" v-model="form.data.cremesp"/>
                    </div>

                    <div class="form-group col-md-4">
                        <label>CNES</label>
                        <the-mask type="tel" class="form-control" mask="#######" v-model="form.data.cnes" required />
                    </div>

                    <div class="form-group col-md-4">
                        <label>Inscrição Municipal</label>
                        <input type="tel" class="form-control" v-model="form.data.inscricao_municipal"/>
                    </div>

                    <div class="form-group col-md-6">
                        <label>Número de Alvará</label>
                        <input type="tel" class="form-control" v-model="form.data.alvara"/>
                    </div>

                    <div class="form-group col-md-6">
                        <label>Nº Vigilância Sanitária</label>
                        <input type="tel" class="form-control" v-model="form.data.vigilancia"/>
                    </div>

                    <div class="form-group col-12">
                        <label>Status</label>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" v-model="form.data.ativo" value="1"> Ativo
                            </label>
                        </div>
                    </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('clientes.store') }}" >Salvar</submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('css')
<style>
    .vs--searchable, .vs__dropdown-toggle {
        height: auto!important;
    }
</style>
@endpush