@extends('_layout')

@section('title', "Confirmação de Recebimento de Defesa")

@section('content')

  <div id="defesa">
    <div class="row align-items-start" >
      <div class="col-xl">
        <x-form-textarea name="mov_med_documento_texto" id="mov_med_documento_texto"
                         v-model="texto_base" />
        <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>
    <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="texto_base">
      <input type="hidden" name="mov_contato_usf_id" v-model="mov_contato_usf_id">
    </x-form>
  </div>
@endsection

@push('scripts')
  <script>
    new Vue({
      el: '#defesa',
      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.texto_base = editor.getContent());
          },
        });
      },
      data: {
        texto_base: @json($texto_base),
        mov_contato_usf_id: 189,
        verPdf: false
      }
    });
  </script>
@endpush