@extends('layouts.theme_selector')

@section('content')
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-10">
        <div class="card {{ session('theme_card') }}">

          <div class="card-header">
            <a href="{{ url()->previous() }}" class="text-decoration-none text-primary mr-2">
              <i class="bi bi-caret-left"></i>
            </a>
            Novedades
          </div>

          <div class="card-body {{ session('theme_bg_black') }}">

            <p class="lead">Para generar un link correctamente recuerde:</p>
            <p>"Display Text", es el texto que se verá. Usar frases como "haga click aquí" o "este enlace", NO poner el link</p>
            <p>"Tipo de Vinculo", siempre URL</p>
            <p>"URL", acá se pone la dirección a la que querés que te lleve el vínculo</p>
            <p>"Destino", te permite definir DONDE se va a abrir el link una vez que los usuarios hagan click.</p>
            <ul>
              <li>Si no se coloca nada, al hace click, se usa la misma ventana en que se esté parado</li>
              <li>"Nueva Ventana", para que se abra en otra pestaña en el navegador, <b>es lo mejor</b> para que el usuario no pierda donde estaba</li>
            </ul>

            <br>

            @include('layouts.alerts.success')

            @include('layouts.alerts.error')

            <hr>
            
            <br>

              <form action="{{ route('GuardarNovedad') }}" class="form" method="post">
                @csrf

                <div class="row my-3">
                  <div class="col-3">
                    <select name="portal" id="" class="form-control form-select {{session('theme_select_dark')}}">
                      @foreach($portales as $portal)
                        <option value="{{ $portal->id }}">{{ $portal->nombre_portal }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-6">
                    <input type="text" name="titulo" class="form-control {{session('theme_bg_black')}}" placeholder="Titulo corto" required>
                  </div>
                </div>

                <div class="row my-3">
                </div>

                <div class="row my-3">
                  <div class="col">
                    <textarea name="noticia" id="input_message" required></textarea>
                  </div>
                </div>

                <div class="row my-3">
                  <div class="col text-center">
                    <button type="submit" class="btn btn-lg btn-outline-primary">Guardar</button>
                  </div>
                </div>

              </form>

          </div>

        </div>
      </div>
    </div>
  </div>
@endsection 
           

@push('scripts')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trumbowyg@2.26.0/dist/ui/trumbowyg.min.css">
  <script src="https://cdn.jsdelivr.net/npm/trumbowyg@2.26.0/dist/trumbowyg.min.js"></script>
  <script>
      $('#input_message').trumbowyg({
          btns: [
              ['bold', 'italic', 'underline', 'del'], // Formatos básicos
              ['foreColor', 'backColor'],     // Colores
              ['orderedList', 'unorderedList'] // Listas,
              ['viewHTML'],
              ['undo', 'redo'], // Only supported in Blink browsers
              ['formatting'],
              // ['superscript', 'subscript'],
              ['link'],
              ['insertImage'],
              // ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
              ['unorderedList', 'orderedList'],
              ['horizontalRule'],
              ['removeformat']
          ],
          autogrow: true,
          lang: 'es'
      });
  </script>
@endpush