@php
/**
 * @var \App\Models\Documento $model
 * @var \App\Models\Movimentacao $movimentacao
 * @var \App\Services\Sgf\AinShape $ain
 */
$title_no_h1 = true;

if ($_ = config('external.gedws_host')) {
    $gedws_url = "http://$_";
} else {
    $gedws_url = "https://ged.creadf.org.br";
}
$ged = $gedws_url . "/processo/{$model->doc_numero}/redirect";
@endphp

@extends('_layout')

@section('title')
  @if(!Auth::user()->getPermissoesAcesso('processo_retirar_acoes_consulta'))
    @if($model->doc_tipo === 'processo' || $model->doc_tipo == 'processo_fisico' || $model->doc_tipo == 'processo_cache')
      <x-form action="{{ $ged }}" method="GET" name="consultaprotocolo" target="_blank">
        <h2 class="mb-0">
          {{$model->tipo_formatado}}
          <button id = "url-processo" type="submit" class="btn text-primary">
            <a>{{$model->doc_numero}}</a> {{$model->doc_pof_tipo}}
          </button>
        </h2>
      </x-form>
    @else
      <h2 class="mb-0">{{$model->tipo_formatado}} {{$model->doc_numero}} {{$model->doc_pof_tipo}}</h2>
    @endif
  @else
    <h2 class="mb-0">{{$model->tipo_formatado}} {{$model->doc_numero}} {{$model->doc_pof_tipo}}</h2>
  @endif
@endsection

@section('content')
  <div class="mb-3">
  @if($model->doc_ar)
      <span class="badge badge-warning">
        <i class="fa fa-envelope"></i>
        AR
      </span>
  @endif
  @if($model->doc_tipo === 'processo_fisico')
    <span class="badge badge-warning">
      <i class="fa fa-anchor"></i>
      Físico
    </span>
  @endif
  @if($model->doc_tipo === 'processo_cache')
    <span class="badge badge-warning">
      <i class="fa fa-anchor"></i>
      Cache
    </span>
  @endif
  </div>

  @if($ain)
    <div class="row">
      <div class="col-xl-6">
        <div class="card shadow mb-4">
          <div class="card-header">
            <h6 class="m-0 font-weight-bold text-primary"> Informações do processo </h6>
          </div>
          <div class="card-body">
            <dl>
              <dt>Modalidade do AIN</dt>
              <dd id="modalidade-processo">
                @if($alterar_modalidade)
                <template v-if="state === 'initial'">
                  {{ $ain->modalidade ?? "Não informado"}}
                  <button class="btn btn-outline-secondary btn-sm ml-2" v-on:click="edit()">
                    <i class="fa fa-edit"></i>
                    Alterar
                  </button>
                </template>

                <template v-else>
                  <div class="input-group d-inline-flex w-auto">
                    {{-- <input type="text" class="form-control" size="14" v-model="value"
                           v-bind:readonly="waiting"> --}}

                    <select v-model="modalidadeProcesso"
                           v-bind:readonly="waiting">
                      <option :value="key" v-for="[key, value] in alterarModalidadesOpcoes">@{{ value }}</option>
                    </select>

                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" type="button"
                              v-if="state === 'editing'"
                              v-on:click="save()"
                              v-bind:disabled="!canSave">
                        Confirmar
                      </button>
                      <button class="btn btn-outline-secondary" type="button" disabled
                              v-if="state === 'loading'">
                        Aguarde...
                      </button>
                      <button class="btn btn-outline-secondary" type="button" disabled
                              v-if="state === 'success'">
                        Recarregando...
                      </button>
                      <button class="btn btn-outline-secondary" type="button"
                              v-on:click="cancel()"
                              v-bind:disabled="!canCancel">
                        Cancelar
                      </button>
                    </div>
                  </div>
                </template>
                @else
                {{ $ain->modalidade ?? "Não informado"}}
                @endif
              </dd>

              <dt>Nome <!-- {{ $ain->origem_dados->nome }} --></dt>
              <dd>{{ $ain->nome ? $ain->nome : "Não informado"}}</dd>

              <dt>CPF/CNPJ  <!-- {{ $ain->origem_dados->cpf_cnpj }} --></dt>
              <dd id="cpf-cnpj">
                @if($alterar_cpfcnpj)
                  <template v-if="state === 'initial'">
                    {{ $ain->cpf_cnpj ?: "Não informado"}}
                    <button class="btn btn-outline-secondary btn-sm ml-2" v-on:click="edit()">
                      <i class="fa fa-edit"></i>
                      Alterar
                    </button>
                  </template>

                  <template v-else>
                    <div class="input-group d-inline-flex w-auto">
                      <input type="text" class="form-control" size="14" v-model="value"
                             v-bind:readonly="waiting">
                      <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button"
                                v-if="state === 'editing'"
                                v-on:click="save()"
                                v-bind:disabled="!canSave">
                          Confirmar
                        </button>
                        <button class="btn btn-outline-secondary" type="button" disabled
                                v-if="state === 'loading'">
                          Aguarde...
                        </button>
                        <button class="btn btn-outline-secondary" type="button" disabled
                                v-if="state === 'success'">
                          Recarregando...
                        </button>
                        <button class="btn btn-outline-secondary" type="button"
                                v-on:click="cancel()"
                                v-bind:disabled="!canCancel">
                          Cancelar
                        </button>
                      </div>
                    </div>
                  </template>
                @else
                  {{ $ain->cpf_cnpj ?: "Não informado"}}
                @endif
              </dd>

              <dt>Endereço <!-- {{ $ain->origem_dados->resp_endereco }} --></dt>
              <dd>
                @if($ain->resp_endereco)
                  {{$ain->resp_endereco}}
                @elseif($ain->corpws_encontrado)
                  Sem endereço no Corporativo. Favor verificar.
                @elseif(!$ain->resp_endereco)
                  <div>Sem registro no Corporativo e sem endereço no RMO.</div>
                @endif
              </dd>

              <dt>Email</dt>
              <dd>{{ $ain->resp_email ?: $ain->email ?: "Não informado" }}  </dd>
            </dl>
          </div>
        </div>
      </div>
      @if(!$ain->corpws_encontrado && !$ain->resp_endereco)
      <div class="col-xl-6">
        <div class="card shadow mb-4">
          <div class="card-header">
            <h6 class="m-0 font-weight-bold text-primary"> Endereço do Autuado </h6>
          </div>
          <div class="card-body">
            <x-form :action="route('documento.endereco', $model)" id="vue-endereco">
              <div class="row">
                <div class="col-lg-6">
                  <div class="form-group">
                    <label>CEP</label>
                    <div class="input-group mb-3">
                      <input type="text" name="cep" class="form-control" required v-model="cep">
                      <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" v-on:click="buscarCep" v-bind:disabled="cepInvalido || buscando">
                          <i class="fa fa-search"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <x-form-input name="endereco" v-model="endereco" required label="Endereço" v-bind:disabled="buscando" />
                </div>
                <div class="col-lg-6">
                  <x-form-input name="numero" v-model="numero" required label="Número" v-bind:disabled="buscando" />
                </div>
                <div class="col-lg-6">
                  <x-form-input name="complemento" v-model="complemento" label="Complemento" v-bind:disabled="buscando" />
                </div>
                <div class="col-lg-6">
                  <x-form-input name="cidade" v-model="cidade" required label="Cidade" v-bind:disabled="buscando" />
                </div>
                <div class="col-lg-6">
                  <x-form-input name="uf" v-model="uf" required label="UF" v-bind:disabled="buscando" />
                </div>
              </div>
              <div class="dropdown-divider my-3"></div>
              <button type="submit" class="btn btn-primary">Salvar</button>
            </x-form>
          </div>
        </div>
      </div>
      @endif
    </div>

    @push('scripts')
    <script>
      new Vue({
        el: '#cpf-cnpj',
        data: {
          initialValue: @json($ain->cpf_cnpj),
          value: '',
          state: 'initial', // initial editing loading success
        },
        computed: {
          canSave() {
            return this.value !== this.initialValue
          },
          canCancel() {
            return this.state === 'editing' || this.state === 'loading'
          },
          waiting() {
            return this.state === 'loading' || this.state === 'success'
          }
        },
        methods: {
          edit() {
            this.state = 'editing'
            this.value = this.initialValue
          },
          save() {
            this.state = 'loading'

            $.post(
              @json(route('documento.alterar-cpfcnpj')),
              $.param({
                processo: @json($model->doc_id),
                cpfcnpj: this.value,
              })
            ).then(
              () => {
                if (this.state !== 'loading') return
                this.state = 'success'
                window.location = window.location
              },
              (xhr) => {
                if (this.state !== 'loading') return
                this.state = 'editing'
                const allErrors = []
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                  for (const errors of Object.values(xhr.responseJSON.errors)) {
                    allErrors.push(...errors)
                  }
                  alert(allErrors.join("\n"))
                } else {
                  alert("Erro inesperado.")
                  console.log(xhr.responseJSON)
                }
              },
            )
          },
          cancel() {
            this.state = 'initial'
          },
        },
      })
    </script>
    @endpush

    @push('scripts')
    <script>
      new Vue({
        el: '#modalidade-processo',
        data: {
          initialValue: @json($ain->modalidade),
          modalidadeProcesso: '',
          state: 'initial', // initial editing loading success
          alterarModalidadesOpcoes: @json($alterarModalidadesOpcoes),
        },
        computed: {
          canSave() {
            return this.modalidadeProcesso !== this.initialValue
          },
          canCancel() {
            return this.state === 'editing' || this.state === 'loading'
          },
          waiting() {
            return this.state === 'loading' || this.state === 'success'
          }
        },
        methods: {
          edit() {
            this.state = 'editing'
            this.modalidadeProcesso = this.initialValue
          },
          save() {
            this.state = 'loading'

            $.post(
              @json(route('documento.alterar-modalidade')),
              $.param({
                processo: @json($model->doc_id),
                modalidade: this.modalidadeProcesso,
              })
            ).then(
              () => {
                if (this.state !== 'loading') return
                this.state = 'success'
                window.location = window.location
              },
              (xhr) => {
                if (this.state !== 'loading') return
                this.state = 'editing'
                const allErrors = []
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                  for (const errors of Object.values(xhr.responseJSON.errors)) {
                    allErrors.push(...errors)
                  }
                  alert(allErrors.join("\n"))
                } else {
                  alert("Erro inesperado.")
                  console.log(xhr.responseJSON)
                }
              },
            )
          },
          cancel() {
            this.state = 'initial'
          },
        },
      })
    </script>
    @endpush
  @endif

  <div class="row mt-3" id="documento-form">
    @if($pode_movimentar)
      <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">Movimentar</h6>
          </div>
          <div class="card-body">
            <x-form id="documentoForm"
                    :action="$model->doc_id ? route('documento.update', $model->doc_id) : route('documento.store')"
                    :method="$model->doc_id ? 'put' : 'post'"
                    enctype="multipart/form-data"
                    @submit.prevent="verificarCadastro">
              @bind($model_dom)
                <x-form-select name="dom_mov_id"
                               label="{{ __('validation.attributes.dom_mov_id') }}"
                               v-model="dom_mov_id">
                  <option :value="key" v-for="[key, value] in movimentacoes_options">@{{ value }}</option>
                </x-form-select>

                @if($ignorar_sucessoras)
                  <div class="text-xl-right">
                    <x-form-checkbox label="Todas as movimentações" name="" v-model="movimentacoes_mostrar_todas"></x-form-checkbox>
                  </div>
                @endif

                <div v-if="mov_id__aceitar_anexo[dom_mov_id]" class="mb-3">
                  <div class="mb-4" v-for="(anexo, index) in anexos" v-bind:key="anexo.seq">
                    <div class="row">
                      <div class="col">
                        <x-form-input name="anexo[]"
                                      label="{{ __('validation.attributes.anexo') }}"
                                      type="file"
                                      accept=".pdf"
                                      help="PDF, máx. 10mb"
                                      v-bind:required="anexo.tipo !== ''"
                                      v-on:change="alterarArquivo($event, index)">
                        </x-form-input>
                      </div>
                      <div class="col-auto">
                        <x-form-select name="anexo_tipo[]"
                                       label="Tipo"
                                       :options="$anexo_tipos"
                                       v-model="anexo.tipo"
                                       v-bind:required="anexo.arquivo === true">
                        </x-form-select>
                      </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-warning" v-if="anexos.length > 1" v-on:click="removerAnexo(index)">
                      <i class="fa fa-minus"></i>
                      Remover
                    </button>
                  </div>
                  <button type="button" class="btn btn-sm btn-outline-secondary" v-on:click="novoAnexo()">
                    <i class="fa fa-plus"></i>
                    Adicionar
                  </button>
                </div>
                @if($model->doc_tipo === 'rmo')
                  <div v-if="Number(dom_mov_id) === 10">

                    @if($eh_admin || $eh_operador)
                      <div class="">
                        <x-form-group label="Tem AR?">
                          <x-form-radio name="tem_ar" value="0" label="Não" v-model="tem_ar" />
                          <x-form-radio name="tem_ar" value="1" label="Sim" v-model="tem_ar" />
                        </x-form-group>
                      </div>
                    @endif

                    <x-form-select name="modalidade" required
                                   label="{{ __('validation.attributes.modalidade') }}"
                                   v-model="modalidade">
                      <option :value="key" v-for="[key, value] in modalidadesOpcoes">@{{ value }}</option>
                    </x-form-select>

                    <x-form-select name="capitular" required
                                   label="{{ __('validation.attributes.capitular') }}"
                                   v-model="capitular"
                                   v-on:change="changeSelectCapitulacao(capitular)">>
                      <option value="0">A - Proprietário</option>
                      <option :value="key" v-for="[key, value] in capitularOpcoes">@{{ value }}</option>
                    </x-form-select>

                    <div class="alert alert-info" v-if="regularizacoes[capitular]">
                      Tipo de Regularização: @{{ regularizacoes[capitular] }}
                    </div>

                    <x-form-select name="capitulacao" required
                                   label="{{ __('validation.attributes.capitulacao') }}"
                                   v-model="capitulacao">
                      <option :value="key" v-for="[key, value] in opcoesDinamicas">@{{ value }}</option>
                    </x-form-select>

                    <div class="">
                      <x-form-checkbox label="Reincidente" name="reincidente" v-model="reincidente"></x-form-checkbox>
                    </div>

                      <hr/>
                      <div class="dropdown" v-if="temModelo">
                        <button class="btn btn-secondary dropdown-toggle"
                                type="button"
                                data-toggle="dropdown">
                          Modelo
                        </button>
                        <br>
                        <small class="text-danger" v-if="!complemento">*Selecione um modelo para poder prosseguir. </small>
                        <div class="dropdown-menu">
                          <button class="dropdown-item"
                                  type="button"
                                  v-for="[key, value] in textosComplemento[capitulacao]" v-on:click="complemento = value">
                            @{{ value }}
                          </button>
                        </div>
                      </div>
                      <hr/>

                    <x-form-textarea required
                                     v-model="complemento"
                                     name="complemento"
                                     label="Complemento">
                    </x-form-textarea>
                  </div>
                @endif

              <div v-if="mov_id__complemento_despacho[dom_mov_id]">
                <div v-if="dom_mov_id != 34 && dom_mov_id != 37">
                  <x-form-textarea v-model="complemento_despacho"
                                  name="complemento_despacho"
                                  label="Complemento do despacho">
                  </x-form-textarea>
                </div>
                <div v-if="dom_mov_id == 34 || dom_mov_id == 37">
                  <x-form-select name="complemento_despacho"
                                  label="Complemento do arquivamento"
                                  v-model="complemento_despacho">
                      <option value="situacao_regular">Regular</option>
                      <option value="situacao_irregular">Irregular</option>
                      <option value="situacao_sem_resposta">Sem resposta</option>
                  </x-form-select>
                </div>

              </div>
              <small v-if="(Number(dom_mov_id) === 10 && eh_rmo) || (mov_id__complemento_despacho[dom_mov_id] && Number(dom_mov_id) !== 34)"
                     class="text-right d-block"
                     v-text="totalCaracteresComplemento + '/' + limiteCaracteresComplemento">
              </small>

            @if(\Gate::allows('documento/mudar-status-multa'))
                <div class="row" v-if="mov_id__multa_alterar[dom_mov_id]">
                  <div class="col-xl">
                    <x-form-group label="{{ __('validation.attributes.mov_multa_alterar') }}">
                      <x-form-radio name="multa_alterar" value="0" label="Não" v-model="multa_alterar" />
                      <x-form-radio name="multa_alterar" value="1" label="Sim" v-model="multa_alterar" />
                    </x-form-group>
                  </div>
                  <div class="col-xl" v-if="multa_alterar === '1'">
                    <x-form-input label="{{ __('validation.attributes.multa_alterar_valor') }}"
                                  name="multa_alterar_valor" :value="old('multa_alterar_valor', $multa_valor)"></x-form-input>
                  </div>
                </div>
              @endif

                <div class="dropdown-divider my-3"></div>

                <div class="row align-items-center">
                  <div class="col-auto">
                    @if($model->doc_tipo === 'rmo')
                      <button type="submit"
                              class="btn btn-primary"
                              v-on:click="validarRmo($event)">
                        Movimentar
                      </button>
                      <button type="button"
                              class="btn btn-success"
                              v-on:click="validarAutuado($event)">
                        Verificar se já existe autuação para o capitulado
                      </button>
                    @else
                      <button type="submit"
                              class="btn btn-primary">
                        Movimentar
                      </button>
                    @endif
                  </div>
                </div>
              @endbind
            </x-form>
          </div>
        </div>
      </div>
    @endif

    <div class="col-xl-6">
      @if(($eh_admin || $eh_operador) && $model->doc_id && $model->doc_tipo == 'processo')

        <div class="card shadow mb-4" v-if="!eh_ain">
          <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('validation.attributes.doc_ar') }}</h6>
          </div>
          <div class="card-body">
            <x-form :action="route('documento.update_ar', $model->doc_id)"
                    :method="'put'"
                    enctype="multipart/form-data">
              @bind($model_dom)
              <div class="row">
                <div class="col-xl-6">
                  <x-form-group>
                    <x-form-radio name="doc_ar" value="0" label="Não" :bind="$model" />
                    <x-form-radio name="doc_ar" value="1" label="Sim" :bind="$model" />
                  </x-form-group>
                </div>
              </div>

              <div class="dropdown-divider my-3"></div>
              <button type="submit" class="btn btn-primary">Salvar</button>
              @endbind
            </x-form>
          </div>
        </div>
      @endif
      @if(\Gate::check('multa.alterarValor'))
        <div class="card shadow mb-4" v-if="eh_multa">
        <div class="card-header py-3">
          <h6 class="m-0 font-weight-bold text-primary">{{ __('validation.attributes.valor_multa') }}</h6>
        </div>
        <div class="card-body">
          <x-form :action="route('documento.update_valor_multa', $model->doc_id)"
                  :method="'put'"
                  enctype="multipart/form-data">
            <div class="row">
              <div class="col-xl-6">
                <x-form-input label="{{ __('validation.attributes.multa_alterar_valor') }}"
                              name="valor_multa" :value="$multa_valor"></x-form-input>
              </div>
            </div>

            <div class="dropdown-divider my-3"></div>
            <button type="submit" class="btn btn-primary">Alterar</button>
          </x-form>
        </div>
      </div>
      @endif
    </div>
  </div>

  @if($dom)
  <div class="position-fixed" style="top: 0; right: 0; width: 30vw;">
    <div class="card p-2">
      <table class="table table-sm">
        <thead>
        <tr>
          <td>Destino</td>
          <td>Origem</td>
          <td>Dias</td>
          <td>Condição</td>
        </tr>
        </thead>
        <tbody>
        @foreach ($automaticas as $item)
          <tr>
            <td>{{ $item->mov2_med_numero }}</td>
            <td>{{ $item->mov1_med_numero }}</td>
            <td>{{ $item->mod_prazo_dias }}</td>
            <td>{{ $item->mod_condicao }}</td>
          </tr>
        @endforeach
        </tbody>
      </table>
      <div class="d-flex justify-content-between mt-2">
        <x-form :action="route('documento.edit-mov-ok', $model)">
          <button type="submit" class="btn btn-outline-secondary mr-2">OK</button>
        </x-form>
        <x-form :action="route('documento.edit-mov-proximo', $model)">
          <button type="submit" class="btn btn-outline-secondary mr-2">Próximo</button>
        </x-form>
        <x-form :action="route('documento.edit-mov-ignorar', $model)">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Notas" name="notas">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="submit">Ignorar</button>
            </div>
          </div>
        </x-form>
      </div>
    </div>
  </div>
  @endif

  <div class="row" id="vue-movimentacoes">
    <div class="col-6">
      <div class="d-flex justify-content-between align-content-center">
        <h2 class="h4 mb-4 text-gray-800">Movimentações</h2>
        @if($dom)
        <div>
          <span class="badge badge-info">@{{ ultima_movimentacao }}</span>
        </div>
        @endif
      </div>
      @forelse ($historico as $movimentacao)
      <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between">
          <h6 class="m-0 font-weight-bold">{{ $movimentacao->pivot->created_at->format('d/m/Y H:i') }}</h6>
          <div class="d-flex align-content-center">
            <div>
              <span style="word-wrap: break-word; white-space: normal;"  class="badge {{ $dom && in_array($movimentacao->mov_id, [18, 31, 116, 117, 122, 134]) ? 'badge-light' : 'badge-dark' }}">{{ $movimentacao->mov_nome }}</span>
            </div>
            @if($movimentacao->pivot->dom_id && (strcasecmp($movimentacao->doc_tipo_formatado,'processo') == 0 && strcasecmp($movimentacao->pivot->documento->doc_tipo, 'processo_cache') != 0 ) && $eh_admin)
            <div class="ml-1">
              <button type="button" class="btn btn-outline-danger btn-sm" v-on:click="remover($event, '{{ $movimentacao->pivot->dom_id }}', '{{ $movimentacao->pivot->documento->doc_id }}', '{{$movimentacao->pivot->dom_mov_id}}')">
                @if($movimentacao->pivot->dom_mov_id != 10)
                  <i class="fa fa-trash"></i>
                @else
                  <i class="fas fa-dumpster"></i>
                @endif
              </button>
            </div>
            @endif
          </div>
        </div>
        @if(trim($movimentacao->pivot->dom_despacho) !== '' || $movimentacao->pivot->anexos->count())
        <div class="card-body">
          <div class="d-inline-block mb-3 {{ $dom && $movimentacao->pivot->dom_despacho === 'Movimentação automática' ? 'bg-warning text-dark' : '' }}">
            {!! nl2br(e($movimentacao->pivot->dom_despacho)) !!}
          </div>
          <div>
            @foreach ($movimentacao->pivot->anexos as $anexo)
              <div>
                <a href="{{ url('/admin/documento/anexo', $anexo) }}" class="btn btn-outline-info btn-sm mb-2 mr-2">
                  <i class="fa fa-download mr-2"></i>
                  {{ $anexo->dma_nome }}
                </a>
              </div>
            @endforeach
          </div>
        @if($model->doc_ar && $movimentacao->mov_imprimir)
            <a href="{{ route('ar.imprimir') }}?ids={{ $movimentacao->pivot->dom_doc_id }}" class="btn btn-outline-primary">
              <i class="fas fa-print"></i> Etiqueta
            </a>
          @endif
        </div>
        @endif
        <div class="card-footer">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <i class="fa fa-user mr-2"></i>
              {{ $movimentacao->pivot->user->name ?? 'Sistema' }}
            </div>
            @can('recriar-doc', $movimentacao->pivot)
              <x-form :action="route('recriar-doc', $movimentacao->pivot)" method="post" style="display: inline-block" v-on:submit="confirmarRecriar">
                <button type="submit" class="btn btn-light btn-sm">
                  <i class="fa fa-bolt mr-2"></i>
                  Recriar doc.
                </button>
              </x-form>
            @endcan
          </div>
        </div>
      </div>
      @empty
        <p>Sem registros.</p>
      @endforelse
    </div>
  </div>

  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Formulário X</h5>
          <button class="close" type="button" data-dismiss="modal">
            <span>×</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label>Campo 1</label>
              <input type="email" class="form-control">
            </div>
            <div class="form-group">
              <label>Campo 2</label>
              <input type="password" class="form-control">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>
          <a class="btn btn-primary" href="#" data-toggle="tooltip" title="Faz anexar um PDF com os dados">Salvar</a>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 50%; /* Could be more or less, depending on screen size */
      min-width: 400px;
      text-align: center;
    }

    #url-processo{
      margin: 0 0 5px 0;
      padding: 0;
      border: 0;
      user-select: auto;
    }

    #url-processo a{
      font-size: 2rem;
      color: #0047CF;
    }

    #url-processo a:hover{
      font-size: 2rem;
      text-decoration: underline;
      color: #00007F;
    }
  </style>

  <div id="modalAfterDelete" class="modal">
    <div class="modal-content">
      <h5></h5>
    </div>
  </div>
@endsection

@push('scripts')

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script>
    vue = new Vue({
      el: '#documento-form',
      data: {
        eh_rmo: @json($model->doc_tipo === 'rmo'),
        eh_ain: @json($model->doc_tipo === 'ain'),
        eh_multa: @json($model->doc_tipo === 'multa'),
        dom_mov_id: @json(old('dom_mov_id', $model_dom->dom_mov_id ?? 0)),
        mov_id__aceitar_anexo: @json($mov_id__aceitar_anexo),
        mov_id__multa_alterar: @json($mov_id__multa_alterar),
        mov_id__complemento_despacho: @json($mov_id__complemento_despacho),
        movimentacoes: @json($movimentacoes),
        movimentacoes_todas: @json($movimentacoes_todas),
        movimentacoes_mostrar_todas: false,
        multa_alterar: @json(old('multa_alterar', '0')),
        complemento_despacho: @json(old('complemento_despacho', '')),
        limiteCaracteresComplemento: @json($limiteCaracteresComplemento),
        limiteCaracteresComplementoController: @json($limiteCaracteresComplemento),
        limiteCaracteresAuto: @json($limiteCaracteresAuto),
        anexos: [],
        anexoSeq: 0,
        @if($model->doc_tipo === 'rmo')
          modalidade: @json(old('modalidade', $model_dom->modalidade ?? 0)),
          capitular: @json(old('capitular', $model_dom->capitular ?? 0)),
          capitulacao: @json(old('capitulacao', $model_dom->capitulacao ?? 0)),
          textoComplemento: @json(old('textoComplemento', $model_dom->textoComplemento ?? 0)),
          complemento: @json(old('complemento', $model_dom->complemento ?? '')),
          modalidadesOpcoes: @json($modalidadesOpcoes),
          capitularOpcoes: @json($capitularOpcoes),
          envolvidosMultas: @json($envolvidosMultas),
          capitulacaoOpcoes: @json($capitulacaoOpcoes),
          capitulacaoOpcoesEnvolvidos: @json($capitulacaoOpcoesEnvolvidos),
          reincidente: @json((bool)old('reincidente',false)),
          tem_ar: @json(old('tem_ar', '0')),
          textosComplemento: @json($textosComplemento),
          regularizacoes: @json($regularizacoes),
          opcoesDinamicas: @json($capitulacaoOpcoesEnvolvidos)[0],
        @endif
      },
      computed: {
        movimentacoes_options() {
          return this.movimentacoes_mostrar_todas ? this.movimentacoes_todas : this.movimentacoes;
        },
        temModelo() {
          return this.textosComplemento[this.capitulacao] !== undefined;
        },
        totalCaracteresComplemento() {
          return (this.complemento + this.complemento_despacho).length;
        }
      },
      created() {
        this.novoAnexo();
      },
      watch: {
        dom_mov_id() {
          this.complemento = '';
          this.complemento_despacho = '';
          if(vue.dom_mov_id == 10){
            this.limiteCaracteresComplemento = this.limiteCaracteresAuto;
          }
          else{
            this.limiteCaracteresComplemento = this.limiteCaracteresComplementoController;
          }
        },
        capitulacao() {
          this.complemento = '';
        },
        complemento(newValue, oldValue) {
          const max = this.limiteCaracteresComplemento - this.complemento_despacho.length;
          if (newValue.length <= max) return;
          this.complemento = newValue.substring(0, max);
        },
        complemento_despacho(newValue, oldValue) {
          const max = this.limiteCaracteresComplemento - this.complemento.length;
          if (newValue.length <= max) return;
          this.complemento_despacho = newValue.substring(0, max);
        }
      },
      methods: {
        verificarCadastro() {
          const pathArray = window.location.pathname.split('/');
          const docId = pathArray[3];

          fetch("{{ route('documento.verificar') }}", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
              doc_id: docId,
              capitulacao: this.capitulacao,
              complemento: this.complemento
            })
          })
            .then(response => response.json())
            .then(data => {
              if (data.success) {
                document.getElementById('documentoForm').submit();
              } else {
                Swal.fire({
                  title: "<h4>O CNPJ "+ data.cnpj +" já tem autuação nas capitulação(ões)!</h4>",
                  html: data.message,
                  icon: "error"
                });
              }
            })
            .catch(() => {
              Swal.fire({
                title: "Erro!",
                text: "Ocorreu um erro ao verificar o documento.",
                icon: "error"
              });
            });
        },
        validarRmo(event) {
          if (this.temModelo) {
            if (!this.complemento) {
              alert('Selecione um modelo para poder prosseguir.');
              event.preventDefault();
            }
          }
        },
        validarAutuado(event) {
          // console.log(this.envolvidosMultas[this.capitular]);
          // console.log(document.locale);
          // console.log(window.location.href);
          if(this.envolvidosMultas[this.capitular].length == 0){
            //alert('A pessoa a ser autuada não possui nenhuma capitulação cadastrada no sistema.');

            Swal.fire({
              title: "Atenção! ",
              text: 'Não foi encontrado nenhuma capitulação cadastrada no sistema para o(a) autuado(a).',
              icon: "success"
            });

          }
          else{
            var string_multas = '';
            for(indexMulta in this.envolvidosMultas[this.capitular]){
              if(indexMulta == this.envolvidosMultas[this.capitular].length-1){
                string_multas+= '<a target="_blank" href="'+window.location.protocol+'//'+window.location.host+'/admin/documento/buscar?documento='+this.envolvidosMultas[this.capitular][indexMulta].numero+'">'+this.envolvidosMultas[this.capitular][indexMulta].numero+'</a>';
              }
              else{
                string_multas+= '<a target="_blank" href="'+window.location.protocol+'//'+window.location.host+'/admin/documento/buscar?documento='+this.envolvidosMultas[this.capitular][indexMulta].numero+'">'+this.envolvidosMultas[this.capitular][indexMulta].numero+'</a>'+', ';
              }

            }
            //alert('Atenção! A pessoa a ser autuada já possui as seguintes capitulações: \n'+string_multas);

            Swal.fire({
              title: "Atenção! ",
              html: '<p> A pessoa a ser autuada já possui as seguintes capitulações: </p><br>'+string_multas,
              icon: "info"
            });

          }
          // if(this.envolvidosMultas[this.capitular] == 1){
          //   alert('Atenção! A pessoa a ser autuada já possui algumas capitulações cadastradas no sistema.')
          // }
          // else{
          //   alert('A pessoa a ser autuada não possui nenhuma capitulação cadastrada no sistema.')
          // }
        },
        novoAnexo() {
          this.anexos.push({
            seq: this.anexoSeq++,
            arquivo: false,
            tipo: '',
          });
        },
        removerAnexo(index) {
          this.anexos.splice(index, 1);
        },
        alterarArquivo(event, index) {
          this.anexos[index].arquivo = (event.target.value ?? '') !== '';
        },
        changeSelectCapitulacao(valor){
          this.opcoesDinamicas = this.capitulacaoOpcoesEnvolvidos[valor];
        },
      }
    });
    console.log(vue.dom_mov_id);
    vue.$forceUpdate();
  </script>

  <script>
    new Vue({
      el: '#vue-movimentacoes',
      data: {
        ultima_movimentacao: @json($ultima_movimentacao->mov_nome),
        movimentacoes: @json($movimentacoes),
        msg: "222"
      },
      methods: {
        remover(event, dom_id, doc_id, mov_id) {
          //se mov_id == 10, então o processo, a multa e o AIN serão removidos
          const msg = mov_id == 10 ? "Remover a movimentação que gera o processo implica em REMOVER JUNTO COM O PROCESSO, A MULTA E O AUTO DE INFRAÇÃO! Tem certeza que deseja remover essa movimentação??? " : "Tem certeza que deseja remover essa movimentação?";
          const router = mov_id == 10 ? @json(route('documento.remover-mov-origem', '@')) : @json(route('documento.remover-dom', '@'));
          const param = mov_id == 10 ? doc_id : dom_id;
          if(confirm(msg)){
            const card = event.target.closest('.card');
            card.style.opacity = '0.3';
            $.post(router.replace('@', param)).then(
              (resp) => {
                let modal = document.getElementById("modalAfterDelete");
                if(mov_id == 10) {
                  setTimeout(() => { window.location.replace('/admin/movimentacao') }, 5000);
                  modal.children[0].children[0].innerHTML = "O processo, multa e AIN foram removidos. Aguarde um instante...";
                }else {
                  this.ultima_movimentacao          = resp.ultima_movimentacao;
                  this.movimentacoes                = resp.movimentacoes;
                  setTimeout(() => { window.location.reload() }, 3000);
                  modal.children[0].children[0].innerHTML = "A movimentação foi removida! Espere a página ser recarregada.";
                }
                card.remove();
                modal.style.display = "block";
              },
              (err) => {
                alert('Erro ao remover. ' + (err ? (err.responseJSON ? err.responseJSON.message : "") : ""));
              },
            ).done(() => {
              card.style.opacity = null;

            });
          }
        },
        confirmarRecriar(event) {
          if (!confirm('Recriar documento?')) {
            event.preventDefault();
          }
        }
      }
    })
  </script>
  <script>
    new Vue({
      el: '#vue-endereco',
      data: {
        cep: @json(old('cep', '')),
        endereco: '',
        numero: '',
        complemento: '',
        cidade: '',
        uf: '',
        buscando: false,
      },
      computed: {
        cepInvalido() {
          return this.cepNumerico.length !== 8;
        },
        cepNumerico() {
          return this.cep.replace(/\D/g, '');
        },
      },
      methods: {
        buscarCep() {
          this.buscando = true;
          $.getJSON(`https://viacep.com.br/ws/${this.cepNumerico}/json/`)
            .then(
              (data) => {
                this.endereco = data.logradouro;
                this.numero = '';
                this.complemento = '';
                this.cidade = data.localidade;
                this.uf = data.uf;
              },
              function (...args) {
                alert('Erro ao buscar CEP.');
                console.log(args);
              },
            )
            .done(() => this.buscando = false);
        },
      },
    });
  </script>
@endpush