@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="tags">Tags (separe com vírgula ",")</label>
                    <input type="text" name="tags" id="tags" placeholder="tags, para, melhor, posicionamento" maxlength="1000" class="form-control" value="{{ $pagina->tags }}">
                  </div>
                  <div class="form-group">
                    <label for="description">Descreva sobre esta página (ficará apenas para que os "robôs" de pesquisa leiam)</label>
                    <textarea id="description" class="form-control" name="description" rows="3">{{ $pagina->description }}</textarea>
                  </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="category_id">Categoria da página:  </label>
                    @php
                    $categorias = \App\Categoria::whereNull('categoria_pai')->get();
                    @endphp
                    <select name="category_id" id="category_id"  class="form-control">
                      <option value="">Sem categoria</option>
                      @foreach ($categorias as $categoria)
                      <option value="{{$categoria->id}}" @if($pagina->category_id === $categoria->id) selected @endif >{{ $categoria->nome }}</option>
                      @php
                      $filhas = \App\Categoria::where('categoria_pai', $categoria->id)->get();
                      @endphp
                      @foreach ($filhas as $filha)
                      <option value="{{$filha->id}}"  @if ($pagina->category_id === $filha->id) selected @endif >{{ $categoria->nome }} >> {{ $filha->nome }}</option>
                      @endforeach
                      @endforeach
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="image_default">Imagem em destaque (<span class="font-italic">Insira o texto com ou sem imagem que ficará em destaque. Este texto deve ser curto, com no máximo 300 caracteres.</span>) </label>
                    <textarea class="form-control ckeditor" name="image_default" id="image_default" rows="5" placeholder="Descrição">{{ $pagina->image_default }}</textarea>
                  </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">
                    <label for="link_video">Link para vídeo no Youtube <i class="fa fa-youtube-play" aria-hidden="true"></i> <small>(Cole apenas o código de incorporação do vídeo do Youtube)</small></label>
                <input type="text" name="link_video" class="form-control" value="{{$pagina->link_video}}">
                    <fieldset disabled="disabled">
                        <label for="exemplo_video">Abaixo exemplo: <i class="fa fa-youtube-play" aria-hidden="true"></i></label><br>
                        <iframe name="exemplo_video" width="560" height="315" src="https://www.youtube.com/embed/{{$pagina->link_video}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </fieldset>
                  </div>
                <div class="form-group">
                    @include('admin.shared.status-select', ['status' => $pagina->status])
                </div>
                <div class="form-group-sm">
                  @include('admin.shared.menu-select', ['menu' => $pagina->menu])<small> (deixe como "Não", caso não queira que apareça no menu)</small>
                </div>
                <div class="form-group-sm">
                  @include('admin.shared.blog-select', ['blog' => $pagina->blog])<small> (deixe como "Não", caso não queira que apareça na área de destaque (se o site possuir -  informe-se com o desenvolvedor a respeito))</small>
                </div>
                <div class="form-group-sm">
                  @include('admin.shared.destaque-select', ['destaque' => $pagina->destaque])<small> (deixe como "Não", caso não queira que apareça na área de destaque (se o site possuir -  informe-se com o desenvolvedor a respeito))</small>
                </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.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(/-+$/, '')
        $("#slug").val(Text)
        $("#link").val(UrlBase+'/pagina/'+Text)
      })
      $('#icon').blur(function(){
        $('#show-icon').html($(this).val())
      })
    })
  </script>
@endsection