@extends('adminlte::page')
@section('title', 'Páginas - ' . config('app.name') )
@section('content_header')

    <h1>P&aacute;ginas</h1>

@stop

@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.update', $pagina->id) }}" method="post" class="form" enctype="multipart/form-data">
              <div class="col-lg-12 col-md-12">
              {{ csrf_field() }}
                <input type="hidden" name="_method" value="put">
                <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="{{ $pagina->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="{{ $pagina->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="{{ $pagina->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="{{ $pagina->ordem }}">
                </div>

                <div class="form-group">
                  <label for="nome">Ícone (este é o icone utilizado neste momento: <span class="" id="show-icon">{!! $pagina->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="{{ $pagina->icon }}"
                    aria-describedby="basic-addon2">

                </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">{{ $pagina->conteudo }}</textarea>
                </div>
                <div class="form-group">
                    @include('admin.shared.status-select', ['status' => $pagina->status])
                </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">Atualizar</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.toLowerCase()
          .replace(/[^\w ]+/g,'')
          .replace(/ +/g,'-')
        $("#slug").val(Text)
        $("#link").val(UrlBase+'/pagina/'+Text)
      })
      $('#icon').blur(function(){
        $('#show-icon').html($(this).val())
      })
    })
  </script>
@endsection