@section('plugins.Summernote', true)

<div class="row">
  <x-adminlte-input name="titulo" label="Título" placeholder="título da página" class="form-control-sm"
    fgroup-class="col-md-12" disable-feedback value="{{ old('titulo') ?? (!empty($pagina) ? $pagina->titulo : '') }}" />

    @if(!empty($pagina))
      <x-adminlte-input name="uri" label="URI/Apelido da página" placeholder="Apelido de acesso da página" class="form-control-sm"
        fgroup-class="col-md-12" disable-feedback value="{{ old('uri') ?? !empty($pagina) ? $pagina->uri : '' }}" />
    @endif

    <x-adminlte-text-editor name="descricao" label="Descrição" placeholder="Conteúdo da página"
    fgroup-class="col-md-12" disable-feedback :config="[
      'height' => 200,
      'toolbar' => [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']],
        ['table', ['table']],
        ['insert', ['link', 'picture']],
        ['view', ['fullscreen', 'codeview', 'help']],
      ]
    ]">{{ old('descricao') ?? (!empty($pagina) ? $pagina->descricao : '') }}</x-adminlte-text-editor>

  <div class="col-md-12">
    <div class="form-check">
      <input type="checkbox" name="exibir_menu" id="exibir_menu" class="form-check-input" onchange="toggleMenu()"
        value="1" {{ old('exibir_menu') == '1' || (!empty($pagina) && $pagina->exibir_menu == '1') ? 'checked' : '' }} />
      <label for="exibir_menu">Exibir página no menu lateral?</label>
    </div>
  </div>

  <x-adminlte-input name="nome_menu" label="Nome de exibição no menu" placeholder="informe o nome a ser exibido no menu" class="form-control-sm"
    fgroup-class="col-md-6 campos_menu" disable-feedback value="{{ old('nome_menu') ?? (!empty($pagina) ? $pagina->nome_menu : '') }}" />

  <x-adminlte-input type="number" name="ordem_menu" label="Ordem de exibição no menu" placeholder="informe a ordem a ser exibido no menu" class="form-control-sm"
    fgroup-class="col-md-6 campos_menu" disable-feedback value="{{ old('ordem_menu') ?? (!empty($pagina) ? $pagina->ordem_menu : 1) }}" />

  <x-adminlte-select name="status" label="Status" fgroup-class="col-md-6" disable-feedback class="form-control-sm">
    <option value="publicado"
      {{ old('status') == 'publicado' || (!empty($pagina) && $pagina->status == 'publicado') ? 'selected' : '' }}>Publicado</option>
    <option value="despublicado"
      {{ old('status') == 'despublicado' || (!empty($pagina) && $pagina->status == 'despublicado') ? 'selected' : '' }}>Despublicado</option>
  </x-adminlte-select>
</div>

@section('css')
  <style>
    .campos_menu {
      display: none;
    }
  </style>
@stop

@section('js')
  <script>
    function toggleMenu() {
      let els = document.getElementsByClassName('campos_menu');

      for (el of els) {
        el.style.display = document.getElementById('exibir_menu').checked ? 'block' : 'none';
      }
    }

    toggleMenu();
  </script>
@stop