@extends('adminlte::page')

@section('content_header')
    <h1>Convênio</h1>
    <label>{{ $data->id ? $data->nome_fantasia : 'Novo convênio' }}</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('convenios.carteiras.index', [$data->id]) }}">Carteiras</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ route('convenios.planos.index', [$data->id]) }}">Planos</a>
        </li>
        @endif
    </ul>
@endsection

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

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

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

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

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

                    <div class="form-group col-md-12 mt-5">
                        <label>Logo / Imagem</label>
                        <Imagem v-model="form.data.logo" :image="form.data.logo"></Imagem>
                    </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('convenios.store') }}" >Salvar</submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection