@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 Categoria de P&aacute;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" id="slug" name="slug" placeholder="slug-criado-pelo-nome" class="form-control" value="{{ old('slug') }}" readonly>
        </div>
        <div class="form-group">
          <label for="ordem">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', 1) }}">
        </div>
        <div class="form-group">
          <label for="icon">Ícone  <span class="" id="show-icon">(este é o icone inserido: <i class="fas fa-home"></i>) </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', '<i class="fas fa-home"></i>') }}">
        </div>
        <div class="form-group">
          <label for="category_id">Categoria pai:  </label>
          <select name="category_id" id="category_id"  class="form-control">
            <option value="">Sem categoria</option>
            @foreach ($categorias as $categoria)
            <option value="{{$categoria->id}}">{{ $categoria->nome }}</option>
            @php
            $filhas = $categoria->categorias;
            @endphp
            @foreach ($filhas as $filha)
            <option value="{{$filha->id}}">{{ $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">{{ old('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">{{ old('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">
          <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="" 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' => 1])
        </div>
        <div class="form-group-sm">
          <label for="menu">Estará no menu </label>
          @include('admin.shared.menu-select', ['menu' => 0])<small> (deixe como "Não", caso não queira que apareça no menu)</small>
        </div>
        <div class="form-group-sm">
          @include('admin.shared.destaque-select', ['destaque' => 0])<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.pagina-categoria.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(/-+$/, '')
      $("#slug").val(Text)
      $("#link").val(UrlBase+'/pagina/'+Text)
    })
    $('#icon').blur(function(){
      $('#show-icon').html('(este é o icone inserido: ' + $(this).val() +')')
    })
    $('input[name=link_video]').on('blur', function(){
      let link_video = $(this).val()
      if(link_video.length > 0) {
        link_video = 'https://www.youtube.com/embed/'+link_video
        $('iframe[name=exemplo_video]').attr('src',link_video)
      }
    })
  })
</script>
@endsection