@extends('_layout')

@section('title', 'Depto. Assinatura')

@section('content')

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

      @bind($model)
        <div class="row">
            <div class="col-xl-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Dados</h6>
                    </div>
                    <div class="card-body">
                      <div class="row">
                        <div class="col-xl-6">
                          <x-form-input name="ofc_titulo" label="{{ __('validation.attributes.ofc_titulo') }}" />
                        </div>
                        <div class="col-xl-6">
                          <x-form-select name="ofc_usu_id" :options="$contatos" class="form-control" label="{{ __('validation.attributes.ofc_responsavel') }}" />
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="my-3">
          <button type="submit" class="btn btn-primary">Salvar</button>
        </div>
      @endbind
    </x-form>
  </div>

@endsection

@push('scripts')
  <script>
    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: '#oficio-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: {
        ofc_titulo: @json(old('ofc_titulo', $model->ofc_titulo ?? ''))
      }
    });
  </script>
@endpush