@extends('layouts.admin.app')

@section('content')
    <!-- Main content -->
    <section class="content">
        @include('layouts.errors-and-messages')
        <main>
            <!--MDB -->
            <!--Title-->
            <h3 class="text-center font-up font-bold pink-text pb-2"><strong>Nova página</strong></h3>
              <!--MDB -->
          </main>
        <div class="box">

            <form action="{{ route('admin.paginas.store') }}" method="post" class="form" enctype="multipart/form-data">
              <div class="col-lg-12 col-md-12">
              {{ csrf_field() }}
              <input type="hidden" name="_method" value="post">
              <div class="form-group">
                  <label for="nome">Título <span class="text-danger">*</span></label>
                  <input type="text" name="nome" id="nome" placeholder="Nome" class="form-control" value="{{ old('nome') }}">
              </div>
              <div class="form-group">
                  <label for="slug">Slug</label>
                  <input type="text" name="slug" id="slug" placeholder="slug-criado-pelo-nome" class="form-control" value="{{ old('slug') }}" readonly>
              </div>
              <div class="form-group">
                  <label for="link">Link</label>
                  <input type="text" name="link" id="link" placeholder="{{ url('') }}/link-criado-pelo-nome" class="form-control" value="{{ old('link') }}" readonly>
              </div>
              <div class="form-group">
                  <label for="nome">Ordem a ser listada <span class="text-danger">*</span></label>
                  <input type="number" name="ordem" id="ordem" placeholder="0" class="form-control" value="{{ old('ordem') }}">
              </div>
              <div class="form-group">
                  <label for="nome">Ícone  <span class="" id="show-icon"></span> <span class="font-italic"> Selecione um (outro) ícone <a href="https://mdbootstrap.com/docs/jquery/content/icons-list/?utm_ref_id=58074" target="_blank">aqui <i class="fas fa-external-link-alt"></i></a></span></label>
                  <input type="text" name="icon" id="icon" placeholder="Ícone que irá aparecer na listagem" class="form-control" value="{{ old('icon') }}">
                  <span id="show-icon"></span>
              </div>
              <div class="form-group">
                  <label for="conteudo">Conteúdo </label>
                  <textarea class="form-control ckeditor" name="conteudo" id="conteudo" rows="5" placeholder="Descrição">{{ old('conteudo') }}</textarea>
              </div>
              <div class="form-group">
                  @include('admin.shared.status-select', ['status' => 1])
              </div>
                </div>
                <!-- /.box-body -->
                <div class="box-footer">
                    <div class="btn-group">
                        <a href="{{ route('admin.paginas.index') }}" class="btn btn-default">Voltar</a>
                        <button type="submit" class="btn btn-primary">Criar</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.box -->

    </section>
    <!-- /.content -->
@endsection
@section('js')
  <script>
    $(document).ready(function () {
      $("#nome").keyup(function(){
        let UrlBase = "{{ url('') }}"
        let Text = $(this).val()
        Text = Text.toString().toLowerCase()
        .replace(/[àÀáÁâÂãäÄÅåª]+/g, 'a')       // Special Characters #1
        .replace(/[èÈéÉêÊëË]+/g, 'e')         // Special Characters #2
        .replace(/[ìÌíÍîÎïÏ]+/g, 'i')         // Special Characters #3
        .replace(/[òÒóÓôÔõÕöÖº]+/g, 'o')        // Special Characters #4
        .replace(/[ùÙúÚûÛüÜ]+/g, 'u')         // Special Characters #5
        .replace(/[ýÝÿŸ]+/g, 'y')           // Special Characters #6
        .replace(/[ñÑ]+/g, 'n')             // Special Characters #7
        .replace(/[çÇ]+/g, 'c')             // Special Characters #8
        .replace(/[ß]+/g, 'ss')             // Special Characters #9
        .replace(/[Ææ]+/g, 'ae')            // Special Characters #10
        .replace(/[Øøœ]+/g, 'oe')           // Special Characters #11
        .replace(/[%]+/g, 'pct')            // Special Characters #12
        .replace(/\s+/g, '-')               // Replace spaces with -
        .replace(/[^\w\-]+/g, '')           // Remove all non-word chars
        .replace(/\-\-+/g, '-')             // Replace multiple - with single -
        .replace(/^-+/, '')                 // Trim - from start of text
        .replace(/-+$/, '');                // Trim - from end of text

        $("#slug").val(Text)
        $("#link").val(UrlBase+'/pagina/'+Text)
      })
      $('#icon').blur(function(){
        $('#show-icon').html('(este é o icone inserido: ' + $(this).val() +')')
      })
    })
  </script>
@endsection