@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> >
        <a href="{{ route('clientes.convenios.edit', [$cliente->id, $convenio->id]) }}">{{ $convenio->convenio->nome_fantasia }}</a> >
        <a href="{{ route('clientes.convenios.edit', [$cliente->id, $convenio->id]) }}">Procedimentos</a> >
        {{ $data->id ? $data->procedimento->termo : 'Novo pacote' }}
    </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 }}),
                                form.setCustomData('url_procedimentos', '{{ route('procedimentos.pesquisa') }}'),
                                form.setCustomData('unidades_medida', {{ App\Models\Terminologia::listUnidadeMedida() }}),
                                form.setCustomData('codigos_despesa', {{ App\Models\Terminologia::listDespesas() }})
                                ]">
        <div class="card-body">
            <div class="row">
                <div class="form-group col-12">
                    <label>Pacote</label>
                    <v-select v-model="form.data.procedimento_id"
                        @search="(search, loading) => fetchOptions(search, loading, 'pacote')"
                        ref="pacote"
                        :filterable="false"
                        :reduce="procedimento => procedimento.id">
                        <template v-slot:option="option">
                            @{{ option.codigo }} - @{{ option.termo }}
                        </template>

                        <template #selected-option="option">
                            @{{ option.codigo  }} - @{{ option.termo }}
                        </template>

                        <template #no-options="{ search, searching, loading }">
                            Nenhum termo encontrado. Comece a digitar para pesquisar.
                        </template>

                        <template #search="{attributes, events}">
                            <input
                            class="vs__search"
                            :required="!form.data.procedimento_id"
                            v-bind="attributes"
                            v-on="events"
                            />
                        </template>
                    </v-select>
                </div>
            </div>

            <fieldset><legend>Materiais e medicamentos do pacote</legend>
                <form @submit.prevent="addProcedimento">
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label>Material / Medicamento</label>
                            <v-select v-model="mat_med_adicionar.procedimento"
                                @search="(search, loading) => fetchOptions(search, loading, 'procedimentos')"
                                :filterable="false"
                                :options="mat_med_adicionar.procedimentos_pesquisa"
                                ref="procedimentos"
                                label="id">
                                <span slot="no-options">Nenhum item encontrado</span>
                                <template v-slot:option="option">
                                    @{{ option.tabela }} - @{{ option.codigo }} - @{{ option.termo }}
                                </template>

                                <template #selected-option="option">
                                    @{{ option.tabela }} - @{{ option.codigo }} - @{{ option.termo }}
                                </template>

                                <template #no-options="{ search, searching, loading }">
                                    Nenhum termo encontrado. Comece a digitar para pesquisar.
                                </template>

                                <template #search="{attributes, events}">
                                    <input
                                    class="vs__search"
                                    :required="!mat_med_adicionar.procedimento?.id"
                                    v-bind="attributes"
                                    v-on="events"
                                    />
                                </template>
                            </v-select>
                        </div>
                        <div class="form-group col-md-2">
                            <label>Qtde.</label>
                            <input type="number" class="form-control" v-model="mat_med_adicionar.quantidade_executada" min="1" step="1"/>
                        </div>
                        <div class="form-group col-md-2">
                            <label>Red. Acrés.</label>
                            <money class="form-control" v-model="mat_med_adicionar.reducao_acrescimo" required></money>
                        </div>
                        <div class="form-group col-md-4">
                            <label>Un. Medida</label>
                            <v-select v-model="mat_med_adicionar.unidade_medida"
                                :reduce="tipo => tipo.codigo"
                                :options='form.unidades_medida'
                                :filter="terminologiasSearch"
                                label="codigo">
                                <template #search="{attributes, events}">
                                    <input class="vs__search" :required="!mat_med_adicionar.unidade_medida" v-bind="attributes" v-on="events"/>
                                </template>
                                <span slot="no-options">Nenhum item encontrado</span>
                                <template v-slot:option="option">
                                    @{{ option.codigo }} - @{{ option.termo }}
                                </template>
                                <template #selected-option="option">
                                    @{{ option.codigo }} - @{{ option.termo }}
                                </template>
                            </v-select>
                        </div>
                        <div class="form-group col-md-4">
                            <label>Cód. Despesa</label>
                            <v-select v-model="mat_med_adicionar.codigo_despesa"
                                :reduce="tipo => tipo.codigo"
                                :options='form.codigos_despesa'
                                :filter="terminologiasSearch"
                                label="codigo">
                                <span slot="no-options">Nenhum item encontrado</span>
                                <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="!mat_med_adicionar.codigo_despesa"
                                    v-bind="attributes"
                                    v-on="events"
                                    />
                                </template>
                            </v-select>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-block btn-sm btn-outline-success" type="submit" title="Adicionar Material / Medicamento">
                                <i class="far fa-plus-square text-success"></i> Adicionar Material / Medicamento
                            </button>
                        </div>
                    </div>
                </form>

                <table class="table table-sm table-striped table-hover">
                    <tr>
                        <th>Código</th>
                        <th>Nome</th>
                        <th>Quantidade</th>
                        <th>Red. / Acrés.</th>
                        <th>Un. Medida</th>
                        <th>Cód. Despesa</th>
                        <th width="20px"></th>
                    </tr>
                    <tr v-for="(mat_med, k) in form.data.materiais_medicamentos" v-if="!mat_med.deleted">
                        <td v-html="mat_med.procedimento?.codigo"></td>
                        <td v-html="mat_med.procedimento?.termo"></td>
                        <td v-html="mat_med.quantidade_executada"></td>
                        <td v-html="mat_med.reducao_acrescimo"></td>
                        <td v-html="unMedida(mat_med.unidade_medida)?.codigo + ' - ' + unMedida(mat_med.unidade_medida)?.termo"></td>
                        <td v-html="codDespesa(mat_med.codigo_despesa)?.codigo + ' - ' + codDespesa(mat_med.codigo_despesa)?.termo"></td>
                        <td>
                            <button type="button" class="btn btn-outline-danger" title="Excluir" @click="deleteMatMed(k)">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                </table>
            </fieldset>

            <form @submit.prevent="$refs.submit.submit_form">
                <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.pacotes.store', [$cliente->id, $convenio->id]) }}" >Salvar</submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection