@extends('_layout')

@section('title', 'Movimentação')

@section('content')

  <style>
    #iframe-ver-pdf {
      background: #f00;
    }
  </style>

  <div id="movimentacao-form">
    <x-form :action="$model->mov_id ? route('movimentacao.update', $model->mov_id) : route('movimentacao.store')"
            :method="$model->mov_id ? 'put' : 'post'">

      <ul class="nav nav-pills my-3">
        <li class="nav-item">
          <a class="nav-link" v-bind:class="{ active: nav === 'cadastro' }" href="javascript:"
             v-on:click="nav = 'cadastro'">Cadastro</a>
        </li>
        <li class="nav-item" v-show="documento_gerar == 1">
          <a class="nav-link" v-bind:class="{ active: nav === 'documento' }" href="javascript:"
             v-on:click="nav = 'documento'">Documento</a>
        </li>
      </ul>

      @bind($model)
        <div class="row" v-show="nav === 'cadastro'">
          <div class="col-xl-6">
            <div class="card shadow mb-4">
              <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Cadastro</h6>
              </div>
              <div class="card-body">

                <x-form-input name="mov_nome" label="{{ __('validation.attributes.mov_nome') }}" />
                <div class="row">
                  <div class="col-xl">
                    <x-form-input v-model="mov_med_numero" name="mov_med_numero" label="{{ __('validation.attributes.mov_med_numero') }}" />
                  </div>
                  <div class="col-xl">
                    <x-form-select name="mov_documento_tipo"
                                   label="{{ __('validation.attributes.mov_documento_tipo') }}"
                                   v-model="documento_tipo" ref="documento_tipo">
                      <option value="processo">Processo</option>
                      <option value="ain">AIN</option>
                      <option value="oficio">Ofício</option>
                      <option value="multa">Multa</option>
                    </x-form-select>
                  </div>
                </div>

                <div class="row">
                  <div class="col-xl-3">
                    <x-form-group label="{{ __('validation.attributes.mov_oculta') }}">
                      <x-form-radio name="mov_oculta" value="0" label="Habilitada" />
                      <x-form-radio name="mov_oculta" value="1" label="Desabilitada" />
                    </x-form-group>
                  </div>
                  <div class="col-xl-3">
                    <x-form-group label="{{ __('validation.attributes.mov_aceitar_anexo') }}">
                      <x-form-radio name="mov_aceitar_anexo" value="0" label="Não" v-model="aceitar_anexo" />
                      <x-form-radio name="mov_aceitar_anexo" value="1" label="Sim" v-model="aceitar_anexo" />
                    </x-form-group>
                  </div>
                  <div class="col-xl-3">
                    <x-form-group label="{{ __('validation.attributes.mov_movimentacao_inicial') }}">
                      <x-form-radio name="mov_movimentacao_inicial" value="0" label="Não" />
                      <x-form-radio name="mov_movimentacao_inicial" value="1" label="Sim" />
                    </x-form-group>
                  </div>
  {{--                <div class="col-xl-3">--}}
  {{--                  <x-form-group label="{{ __('validation.attributes.mov_registro_livre') }}">--}}
  {{--                    <x-form-radio name="mov_registro_livre" value="0" label="Não" />--}}
  {{--                    <x-form-radio name="mov_registro_livre" value="1" label="Sim" />--}}
  {{--                  </x-form-group>--}}
  {{--                </div>--}}
                </div>
              </div>
            </div>
            <div class="card shadow mb-4">
              <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Sucessoras</h6>
              </div>
              <div class="card-body">
                <v-movimentacao v-bind:options="movimentacoes" name="sucessoras[]"
                                multiple v-model="sucessoras_selected" label=""></v-movimentacao>
              </div>
            </div>
            <div class="card shadow mb-4">
              <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Movimentação Automática</h6>
              </div>
              <div class="list-group list-group-flush">

                <div class="list-group-item">
                  <div class="row">
                    <div class="col-xl">
                      <x-form-group label="{{ __('validation.attributes.mov_movimentacao_automatica') }}">
                        <div class="d-flex align-items-center">
                          <x-form-radio name="mov_movimentacao_automatica" value="0" label="Movimentação Manual"
                                        v-model="automatica" />
                          <i class="fa fa-question-circle ml-1" data-toggle="tooltip"
                             title="Apenas indica com cores."></i>
                        </div>
                        <x-form-radio name="mov_movimentacao_automatica" value="1" label="Movimentação Automática"
                                      v-model="automatica" />
                      </x-form-group>
                    </div>
                    <div class="col-xl">
                      <x-form-input name="mov_prazo_dias" label="{{ __('validation.attributes.mov_prazo_dias') }}" />
                    </div>
                  </div>
                </div>

                <template v-if="automatica == 1">
                  <div class="list-group-item py-4" v-for="(destino, index) of destinos" v-bind:key="destino.mov">
                    <div class="row">
                      <div class="col-xl-6">
                        <div class="form-group">
                          <label>{{ __('validation.attributes.destinos.*.evento') }}</label>
                          <div class="form-check">
                            <input type="radio" class="form-check-input" v-bind:id="`evento_${index}_0`"
                                   v-bind:name="`destinos[${index}][evento]`" value="instantaneo" v-model="destino.evento">
                            <label class="form-check-label" v-bind:for="`evento_${index}_0`">Instantâneo</label>
                          </div>
                          <div class="form-check">
                            <input type="radio" class="form-check-input" v-bind:id="`evento_${index}_1`"
                                   v-bind:name="`destinos[${index}][evento]`" value="tempo" v-model="destino.evento">
                            <label class="form-check-label" v-bind:for="`evento_${index}_1`">Tempo</label>
                          </div>
                          <div class="form-check">
                            <input type="radio" class="form-check-input" v-bind:id="`evento_${index}_2`"
                                   v-bind:name="`destinos[${index}][evento]`" value="encaminhado-camara" v-model="destino.evento">
                            <label class="form-check-label" v-bind:for="`evento_${index}_2`">Encaminhado câmara</label>
                          </div>
                          <div class="form-check">
                            <input type="radio" class="form-check-input" v-bind:id="`evento_${index}_3`"
                                   v-bind:name="`destinos[${index}][evento]`" value="encaminhado-plenario" v-model="destino.evento">
                            <label class="form-check-label" v-bind:for="`evento_${index}_3`">Encaminhado plenário</label>
                          </div>
                        </div>
                      </div>
                      <div class="col-xl-6" v-if="destino.evento === 'tempo'">
                        <div class="form-group">
                          <label>{{ __('validation.attributes.destinos.*.prazo_dias') }}</label>
                          <input type="text" class="form-control" v-bind:name="`destinos[${index}][prazo_dias]`" v-model="destino.prazo_dias">
                        </div>
                        <div class="form-group">
                          <label>{{ __('validation.attributes.destinos.*.tolerancia_dias') }}</label>
                          <input type="text" class="form-control" v-bind:name="`destinos[${index}][tolerancia_dias]`" v-model="destino.tolerancia_dias">
                        </div>
                      </div>
                    </div>

                    <v-movimentacao v-bind:options="movimentacoes"
                                    v-bind:name="`destinos[${index}][mov]`"
                                    label="{{ __('validation.attributes.destinos.*.mov') }}"
                                    v-model="destino.mov"></v-movimentacao>

                    <div class="row">
                      <div class="col-xl-6">
                        <div class="form-group">
                          <label>{{ __('validation.attributes.destinos.*.condicao') }}</label>
                          <div class="form-check">
                            <input type="radio" class="form-check-input" v-bind:id="`condicao_${index}_0`"
                                   v-bind:name="`destinos[${index}][condicao]`" v-bind:value="null" v-model="destino.condicao">
                            <label class="form-check-label" v-bind:for="`condicao_${index}_0`">Nenhuma</label>
                          </div>
                          <div class="form-check">
                            <input type="radio" class="form-check-input" v-bind:id="`condicao_${index}_1`"
                                   v-bind:name="`destinos[${index}][condicao]`" value="modalidade" v-model="destino.condicao">
                            <label class="form-check-label" v-bind:for="`condicao_${index}_1`">Modalidade</label>
                          </div>
                          <div class="form-check">
                            <input type="radio" class="form-check-input" v-bind:id="`condicao_${index}_2`"
                                   v-bind:name="`destinos[${index}][condicao]`" value="multa" v-model="destino.condicao">
                            <label class="form-check-label" v-bind:for="`condicao_${index}_2`">Status Multa</label>
                          </div>
                        </div>
                      </div>
                      <div class="col-xl-6" v-if="destino.condicao === 'modalidade'">
                        <div class="form-group">
                          <label>{{ __('validation.attributes.destinos.*.mods') }}</label>
                          <select class="form-control select2" v-bind:name="`destinos[${index}][mods][]`" multiple
                                  v-select2 v-model="destino.mods">
                            @foreach($modalidades as $modalidade)
                              <option>{{ $modalidade }}</option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                      <div class="col-xl-6" v-if="destino.condicao === 'multa'">
                        <v-movimentacao v-bind:options="multa_movs" v-bind:name="`destinos[${index}][multa_movs][]`" multiple
                                        label="{{ __('validation.attributes.destinos.*.multa_movs') }}"
                                        v-model="destino.multa_movs"></v-movimentacao>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-xl-6">

                        <div class="form-group">
                          <label>{{ __('validation.attributes.destinos.*.ignorar_ar') }}</label>
                          <div class="form-check">
                            <input class="form-check-input" type="radio" value="0" v-model="destino.ignorar_ar"
                                   v-bind:name="`destinos[${index}][ignorar_ar]`"
                                   v-bind:id="`destinos.${index}.ignorar_ar.nao`" >
                            <label class="form-check-label" v-bind:for="`destinos.${index}.ignorar_ar.nao`">
                              Não
                            </label>
                          </div>
                          <div class="form-check">
                            <input class="form-check-input" type="radio" value="1" v-model="destino.ignorar_ar"
                                   v-bind:name="`destinos[${index}][ignorar_ar]`"
                                   v-bind:id="`destinos.${index}.ignorar_ar.sim`" >
                            <label class="form-check-label" v-bind:for="`destinos.${index}.ignorar_ar.sim`">
                              Sim
                            </label>
                          </div>
                        </div>

                      </div>
                    </div>

                    <button type="button" class="btn btn-sm btn-outline-warning" v-bind:disabled="destinos.length === 1"
                            v-on:click="removerDestino(index)">
                      <i class="fa fa-minus"></i>
                      Remover
                    </button>
                  </div>

                  <div class="list-group-item">
                    <button type="button" class="btn btn-sm btn-outline-secondary" v-on:click="adicionarDestino()">
                      <i class="fa fa-plus"></i>
                      Adicionar
                    </button>
                  </div>
                </template>

              </div>
            </div>
            <div class="card shadow mb-4" v-bind:hidden="documento_tipo !== 'processo'">
              <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Multa</h6>
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-xl">
                    <v-movimentacao v-bind:options="multa_movs" name="mov_multa_mov_id"
                                    label="{{ __('validation.attributes.mov_multa_mov_id') }}"
                                    v-model="mov_multa_mov_id"></v-movimentacao>
                  </div>
                  <div class="col-xl">
                    <x-form-group label="{{ __('validation.attributes.mov_multa_alterar') }}">
                      <x-form-radio name="mov_multa_alterar" value="0" label="Não" />
                      <x-form-radio name="mov_multa_alterar" value="1" label="Sim" />
                    </x-form-group>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-6" v-bind:hidden="documento_tipo !== 'processo'">
            <div class="card shadow mb-4">
              <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Integração MED/GED</h6>
              </div>
              <div class="card-body">
                <x-form-group label="{{ __('validation.attributes.mov_med_tem') }}">
                  <x-form-radio name="mov_med_tem" value="0" label="Não" v-model="med" />
                  <x-form-radio name="mov_med_tem" value="1" label="Sim" v-model="med" />
                </x-form-group>
                <div v-if="med == 1">
                  <x-form-input name="mov_med_destino_departamento"
                                label="{{ __('validation.attributes.mov_med_destino_departamento') }}" />
                  <x-form-input name="mov_med_destino_usuario"
                                label="{{ __('validation.attributes.mov_med_destino_usuario') }}" />
                  <x-form-input name="mov_ged_usuario"
                                label="{{ __('validation.attributes.mov_ged_usuario') }}" />
                  <x-form-select name="mov_ged_situacao" :options="$ged_situacoes"
                                 label="{{ __('validation.attributes.mov_ged_situacao') }}" />
                  <x-form-input name="mov_ged_situacoes_adicionais"
                                label="{{ __('validation.attributes.mov_ged_situacoes_adicionais') }}" />
                  <div class="despacho_wrapper mb-3">
                    <x-form-textarea name="mov_med_despacho" label="{{ __('validation.attributes.mov_med_despacho') }}" />
                    <small class="seletor-campos">
                      Campos:
                      @foreach($campos_despacho as $campo => $exemplo)
                        <span title="{{ $exemplo }}">[{{ $campo }}]</span>
                      @endforeach
                    </small>
                  </div>
                  <div class="row">
                    <div class="col-6" v-if="aceitar_anexo == 1">
                      <x-form-select name="mov_anexo_codigo" :options="$codigos_arquivo"
                                     label="{{ __('validation.attributes.mov_anexo_codigo') }}" />
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-xl-12">
                      <x-form-group label="{{ __('validation.attributes.mov_med_complemento_despacho') }}">
                        <x-form-radio name="mov_med_complemento_despacho" value="0" label="Não" v-model="complemento_despacho" />
                        <x-form-radio name="mov_med_complemento_despacho" value="1" label="Sim" v-model="complemento_despacho" />
                      </x-form-group>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-xl-12">
                      <x-form-group label="{{ __('validation.attributes.mov_med_documento_gerar') }}">
                        <x-form-radio name="mov_med_documento_gerar" value="0" label="Não" v-model="documento_gerar" />
                        <x-form-radio name="mov_med_documento_gerar" value="1" label="Sim" v-model="documento_gerar" />
                      </x-form-group>
                    </div>

                    <div class="col-xl-12">
                      <x-form-input name="mov_med_documento_nome"
                                    label="{{ __('validation.attributes.mov_med_documento_nome') }}"
                                    placeholder="doc" />
                    </div>

                    <div class="col-xl-3" v-if="documento_gerar == 1">
                      <x-form-group label="{{ __('validation.attributes.mov_imprimir') }}">
                        <x-form-radio name="mov_imprimir" value="0" label="Não" v-model="imprimir" />
                        <x-form-radio name="mov_imprimir" value="1" label="Sim" v-model="imprimir" />
                      </x-form-group>
                    </div>
                    <div class="col-xl-6" v-if="documento_gerar == 1">
                      <x-form-select name="mov_documento_codigo" :options="$codigos_arquivo"
                                     label="{{ __('validation.attributes.mov_documento_codigo') }}" />
                    </div>
                  </div>
                  <div class="row" v-if="documento_gerar == 1">
                    <div class="col-xl-6">
                      <x-form-select name="mov_pof_tipo" :options="$tipos_oficios"
                                     label="{{ __('validation.attributes.mov_pof_tipo') }}" />
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label>{{ __('validation.attributes.mov_contato') }}</label>
                        <select class="form-control select2" name="mov_contato[]" multiple
                                v-select2 v-model="mov_contato">
                          @foreach($contatos as $id => $contato)
                            <option value="{{ $id }}">{{ $contato }}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row align-items-start" v-show="nav === 'documento' && documento_gerar == 1">
          <div class="col-xl">
            <x-form-textarea name="mov_med_documento_texto" id="mov_med_documento_texto"
                             v-model="med_documento_texto" />
            <small class="seletor-campos" id="seletor-campos">
              Campos:
              @foreach($campos as $campo => $exemplo)
                <span title="{{ $exemplo }}">[{{ $campo }}]</span>
              @endforeach
            </small>
          </div>
          <div class="col-xl align-self-stretch d-flex flex-column">
            <div class="mb-2">
              <button type="submit" class="btn btn-secondary"
                      form="form-ver-pdf" v-on:click="verPdf = true">Visualizar</button>
              <button type="button" class="btn btn-outline-secondary"
                      form="form-ver-pdf" v-if="verPdf" v-on:click="verPdf = false">Ocultar</button>
            </div>
            <iframe name="iframe-ver-pdf" frameborder="0" class="flex-grow-1" v-show="verPdf"></iframe>
          </div>
        </div>
        <div class="my-3">
          <button type="submit" class="btn btn-primary">Salvar</button>
        </div>
      @endbind
    </x-form>

    <x-form action="{{ route('movimentacao.ver-pdf') }}" id="form-ver-pdf" target="iframe-ver-pdf">
      <input type="hidden" name="mov_med_documento_texto" v-model="med_documento_texto">
      <input type="hidden" name="mov_contato[]" v-for="id in mov_contato" v-bind:value="id">
    </x-form>
  </div>

@endsection

@push('scripts')
  <script>
    let todas_seq = 0;
    Vue.component('v-movimentacao', {
      inheritAttrs: false,
      props: ['options', 'label', 'value'],
      data() {
        return {
          all: false,
          todas_seq: todas_seq++,
        };
      },
      computed: {
        options_filtered() {
          return this.options.filter((_) => this.all || _.oculta === 0);
        },
      },
      methods: {
        selected(key) {
          const value = this.value instanceof Array ? this.value : [this.value];
          const selected = value.indexOf(+key) !== -1;
          return selected;
        },
        input(event) {
          let selected = Array.from(event.target.options).filter(_ => _.selected).map(_ => _.value === '' ? null : +_.value);
          selected = this.$attrs.multiple === undefined ? selected[0] : selected;
          this.$emit('input', selected);
        },
      },
      template: `
        <div>
          <div class="form-group mb-1">
            <label>@{{ label || 'Movimentação' }}</label>
            <select v-bind="$attrs"
                    class="form-control select2"
                    v-on:change="input($event)"
                    v-select2>
              <option value="" v-if="$attrs.multiple === undefined">Nenhuma</option>
              <option v-for="option in options_filtered" v-bind:value="option.id" v-bind:key="option.id" v-bind:selected="selected(option.id)">
                @{{ option.nome }}
              </option>
            </select>
          </div>
          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" v-bind:id="'todas_' + todas_seq" v-model="all">
            <label class="form-check-label" v-bind:for="'todas_' + todas_seq">
              Mostrar Todas
            </label>
          </div>
        </div>
      `,
    });

    Vue.directive('select2', {
      inserted(el) {
        $(el).on('select2:select', () => {
          const event = new Event('change', { bubbles: true, cancelable: true });
          el.dispatchEvent(event);
        });

        $(el).on('select2:unselect', () => {
          const event = new Event('change', {bubbles: true, cancelable: true})
          el.dispatchEvent(event)
        })
      },
    });

    new Vue({
      el: '#movimentacao-form',
      mounted() {
        tinymce.init({
          selector: '#mov_med_documento_texto',
          language: 'pt_BR',
          plugins: 'code fullscreen hr image lists pagebreak paste table',
          menubar: 'file edit view insert format tools table help',
          toolbar: 'undo redo | bold italic underline strikethrough | fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | fullscreen',
          height: 600,
          toolbar_mode: 'sliding',
          content_style: `
            body {
              font-family: "DejaVu Serif Condensed", serif;
              font-size: 10pt;
              line-height: 1.25;
              text-align: justify;
            }
          `,
          setup: (editor) => {
            editor.on('init', () => $('.tox-editor-container').after($('#seletor-campos')));
            editor.on('change', () => this.med_documento_texto = editor.getContent());
          },
        });
      },
      data: {
        automatica: @json(old('mov_movimentacao_automatica', $model->mov_movimentacao_automatica ?? 0)),
        documento_tipo: @json(old('mov_documento_tipo', $model->mov_documento_tipo ?? 0)),
        med: @json(old('mov_med_tem', $model->mov_med_tem ?? 0)),
        documento_gerar: @json(old('mov_med_documento_gerar', $model->mov_med_documento_gerar ?? 0)),
        complemento_despacho: @json(old('mov_med_complemento_despacho', $model->mov_med_complemento_despacho ?? 0)),
        aceitar_anexo: @json(old('mov_aceitar_anexo', $model->mov_aceitar_anexo ?? 0)),
        destinos: @json($destinos),
        imprimir: @json(old('mov_imprimir', $model->mov_imprimir ?? 0)),
        nav: 'cadastro',
        med_documento_texto: @json(old('mov_med_documento_texto', $model->mov_med_documento_texto ?? '')),
        verPdf: false,
        mov_contato: @json(old('mov_contato', $model->contatos->pluck('moc_usf_id') ?? [])),
        mov_med_numero: @json(old('mov_med_numero', $model->mov_med_numero ?? '')),
        movimentacoes: @json($movimentacoes),
        sucessoras_selected: @json(old('sucessoras', $model->sucessoras->pluck('mov_id') ?? '')),
        mov_multa_mov_id: @json(old('mov_multa_mov_id', $model->mov_multa_mov_id)),
      },
      computed: {
        multa_movs() {
          return this.movimentacoes.filter(_  => _.tipo === 'multa');
        },
      },
      watch: {
        mov_med_numero(newVal) {
          if (newVal === '51') return;
          this.destinos = [this.destinos[0]];
        }
      },
      methods: {
        removerDestino(index) {
          this.destinos.splice(index, 1);
        },
        adicionarDestino() {
          this.destinos.push({
            evento: 'instantaneo',
            prazo_dias: null,
            tolerancia_dias: null,
            mov: null,
            condicao: null,
            mods: [],
            multa_movs: [],
            ignorar_ar: '0', // TODO int?
          });
        },
      }
    });
  </script>
@endpush