@extends('adminlte::page')

@section('content_header')
    <h1>Cliente</h1>
    <label>
        <a href="{{ route('clientes.edit', [$cliente->id]) }}">{{ $cliente->nome_fantasia }}</a> >
        <a href="{{ route('clientes.convenios.index', [$cliente->id]) }}">Prestador x Convênios</a> >
        {{ $data->id ? $data->convenio->nome_fantasia : 'Novo convênio' }}
    </label>
    <ul class="nav nav-tabs nav-stacked">
        <li class="nav-item">
            <a class="nav-link" href="{{ route('clientes.edit', [$cliente->id]) }}">Dados Cadastrais</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active">Prestador x Convênios</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ route('clientes.contratos.index', [$cliente->id]) }}">ATD x Cliente</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ route('clientes.documentos.index', [$cliente->id]) }}">Documentos</a>
        </li>
    </ul>
@endsection

@section('content')
    <div class="card" :json="[form.setData({{ $data }})]">
        <div class="card-body">
            <form @submit.prevent="$refs.submit.submit_form">
                <div class="row">
                    <div class="form-group col-md-3">
                        <label>Convênio</label>
                        <v-select v-model="form.data.convenio_id" :reduce="convenio => convenio.code" :options='@json($convenios)'>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.convenio_id"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>

                    <div class="form-group col-md-3">
                        <label>Contrato</label>
                        <input type="text" class="form-control" v-model="form.data.contrato" required/>
                    </div>

                    <div class="form-group col-md-3">
                        <label>Código na Operadora</label>
                        <the-mask type="tel" class="form-control" mask="##############" v-model="form.data.codigo_na_operadora" required />
                    </div>

                    <div class="form-group col-md-3">
                        <label>Versão</label>
                        <select class="form-control" v-model="form.data.versao" required style="text-transform: none;">
                            @foreach (App\Models\Guia::VERSOES as $versao)
                            <option>{{ $versao }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Data de Início</label>
                        <the-mask type="tel" class="form-control" mask="##/##/####" v-model="form.data.inicio_formatado" required></the-mask>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Data de Término</label>
                        <the-mask type="tel" class="form-control" mask="##/##/####" v-model="form.data.termino_formatado" required></the-mask>
                    </div>

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

                    <div class="form-group col-md-6">
                        <label>Cronograma de faturamento</label>
                        <input type="text" class="form-control" v-model="form.data.cronograma_faturamento"/>
                    </div>

                    <div class="form-group col-md-6">
                        <label>Previsão de pagamento</label>
                        <input type="text" class="form-control" v-model="form.data.previsao_pagamento"/>
                    </div>

                    <div class="form-group col-md-12">
                        <label>Outras informações</label>
                        <textarea class="form-control" rows="2" v-model="form.data.obs"></textarea>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Validar as regras na importação do XML</label>
                        <select class="form-control" v-model="form.data.validar_importacao_xml">
                            <option value="1">Sim</option>
                            <option value="0">Não</option>
                        </select>
                    </div>
                </div>

                <div class="row mt-5">
                    <div class="col-12">
                        <legend>Conta para recebimento</legend>
                    </div>
                    <div class="form-group col-md-3">
                        <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">
                        <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">
                        <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">
                        <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('clientes.convenios.store', [$cliente->id]) }}" >Salvar</submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection