@extends('adminlte::page')

@section('content_header')
    <h1>Interação</h1>
    <label>{{ $data->id ? $data->cliente->nome_fantasia : 'Nova interação' }}</label>
@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-4">
                        <label>Usuário</label>
                        <v-select v-model="form.data.usuario_id" :reduce="usuario => usuario.code" :options='@json($usuarios)'>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.usuario_id"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Data de início</label>
                        <input type="date" class="form-control" v-model="form.data.data" required />
                    </div>

                    <div class="form-group col-md-4">
                        <label>Status</label>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" v-model="form.data.finalizado" value="1"> Finalizado
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-4">
                        <label>Cliente</label>
                        <v-select v-model="form.data.cliente_id" :reduce="cliente => cliente.code" :options='@json($clientes)'>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.cliente_id"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Convênio</label>
                        <v-select v-model="form.data.convenio_id" :reduce="convenio => convenio.code" :options='@json($convenios)' />
                    </div>

                    <div class="form-group col-md-4">
                        <label>Tipo Interação</label>
                        <v-select v-model="form.data.tipo_interacao_id" :reduce="tipo_interacao => tipo_interacao.code" :options='@json($tipos_interacoes)'>
                            <template #search="{attributes, events}">
                                <input
                                class="vs__search"
                                :required="!form.data.tipo_interacao_id"
                                v-bind="attributes"
                                v-on="events"
                                />
                            </template>
                        </v-select>
                    </div>
                </div>

                <fieldset>
                    <legend>
                        Ocorrências
                        <button class="btn btn-sm" type="button" title="Adicionar Ocorrência" @click="addOcorrencia">
                            <i class="far fa-plus-square text-success" style="font-size: 1.4rem;"></i>
                        </button>
                    </legend>
                    <fieldset class="col-12 border-danger" v-for="(ocorrencia, k) in form.data.ocorrencias" :key="k" v-if="!ocorrencia.deleted" :id="'ocorrencia_'+k">
                        <legend class="text-danger">
                            Ocorrência @{{ (k+1) }}
                            <button v-if="k>0" class="btn btn-sm float-right" type="button" title="Remover Ocorrencia" @click="delOcorrencia(k)">
                                <i class="far fa-minus-square text-danger" style="font-size: 1.4rem;"></i>
                            </button>
                        </legend>
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-group col-md-12">
                                    <label>Data</label>
                                    <input type="date" class="form-control" v-model="ocorrencia.data" required/>
                                </div>
                                <div class="form-group col-md-12">
                                    <label>Ocorrência</label>
                                    <input-autocomplete placeholder="Ocorrência" endpoint="{{ route('interacao_ocorrencia_list') }}" v-model="ocorrencia.ocorrencia" type="textarea" rows="4" required></input-autocomplete>
                                </div>
                                <div class="form-group col-md-12">
                                    <label>Obs internas</label>
                                    <textarea class="form-control" placeholder="Observações internas ATD" v-model="ocorrencia.obs_internas" rows="2"></textarea>
                                </div>
                            </div>
                            <fieldset class="col-md-5">
                                <legend>Anexos</legend>
                                <div class="form-group col-12">
                                    <label>Adicionar anexo</label>
                                    <input type="file" class="form-control" name="documento" accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.png,.jpg,.jpeg" @change="addDocumento(ocorrencia, $event)"/>
                                </div>
                                <table>
                                    <tr v-for="(documento, j) in ocorrencia.documentos" :key="j" v-if="!documento.deleted">
                                        <td>
                                            <button class="btn btn-sm float-right" type="button" title="Remover Anexo" @click="delDocumento(ocorrencia, j)">
                                                <i class="far fa-minus-square text-danger" style="font-size: 1.4rem;"></i>
                                            </button>
                                        </td>
                                        <td><a :href="documento.arquivo" :download="documento.nome"><button type="button" class="btn btn-sm btn-dark"><i class="fas fa-file-download"></i> @{{ documento.nome }}</button></a></td>
                                    </tr>
                                </table>
                            </fieldset>
                        </div>
                    </fieldset>
                </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('interacao.store') }}" >{{ $data->id ? 'Atualizar interação' : 'Criar interação' }}</submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection