@extends('adminlte::page')

@section('question_postfix', ' - Perguntas Frequentes')
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
 
@section('content_header')
<h1>Perguntas Frequentes</h1>
@stop

@section('content')

<div class="box box-primary" style="margin-top: 2px;">
<!--  <div class="box-header with-border">
    <h3 class="box-title">Novas Perguntas Frequentes</h3>
  </div>-->

  <div class="box-body">
    <ul class="nav nav-tabs">
      @foreach($locales as $locale)
      <li class="{{ $locale == $locales[0] ? 'active' : ''}}" ><a data-toggle="tab" href="#locale_{{ $locale->lang }}">{{ $locale->name }}</a></li>
      @endforeach
    </ul>

    <form action="{{ config('app.url') }}/faq" method="POST" enctype=multipart/form-data style="margin-top: 20px">
      @csrf
      <div class="tab-content">
        @foreach($locales as $locale)
        <div id="locale_{{ $locale->lang }}" class="tab-pane fade {{ $locale == $locales[0] ? 'in active' : ''}}">
          <div class="form-group">
            <label for="inputQuestion_{{ $locale->lang }}">Pergunta  {!! $locale == $locales[0] ? '<span style="color: indianred">*</span>' : '' !!}</label>
            <input type="text" class="form-control" id="inputQuestion_{{ $locale->lang }}" name="question_{{ $locale->lang }}" {{ $locale == $locales[0] ? 'required' : ''}}>
          </div>

          <div class="form-group">
            <label for="inputAnswer_{{ $locale->lang }}">Resposta  {!! $locale == $locales[0] ? '<span style="color: indianred">*</span>' : '' !!}</label>
             <textarea class="summernote" id="inputAnswer_{{ $locale->lang }}" name="answer_{{ $locale->lang }}" {{ $locale == $locales[0] ? 'required' : ''}}></textarea>
          </div>
        </div>
        @endforeach
      </div>

      <div class="form-group">
        <label for="inputFile">Imagem</label>
        <input type="file" id="inputFile" name="image">
      </div>

      <button type="submit" class="btn btn-success"><i class="fa fa-check"></i>&nbsp;Submeter</button>
    </form>
  </div>
</div>

@stop

@section('css')
<!--<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">-->
@endsection

@section('js')
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdn.ckeditor.com/4.10.1/full-all/ckeditor.js"></script>
<script src="{{ asset('js/ckeditor.js') }}"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

 include summernote css/js 
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<link href="{{ asset('js/summernote.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/summernote.min.js') }}"></script>-->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script>
$(document).ready(function() {
   $('.limitedsummernote').summernote({
        fontSizes: ['8', '9', '10', '11', '12', '14','16', '18','20','22', '24','26', '28','30','32', '34', '36','38','40','42', '44','46', '48' , '50','64', '82', '150'],
         spellCheck: false,
         lang: 'en-US', // default: 'en-US'
         disableGrammar: false,
        toolbar: [
	// [groupName, [list of button]]
	['font', ['fontname']],
        ['font', ['fontsize', 'color','fontsizeunit']],
                ['style', ['style']],
	['font', ['bold', 'italic', 'underline','superscript','subscript', 'strikethrough','clear']],
	
	['table', ['table']],
	['para', ['ul','ol','paragraph','height']],
	['insert', ['link','image', 'doc','picture']], // image and doc are customized buttons
	['misc', ['codeview', 'fullscreen','undo','redo',]],
],
    placeholder: 'Pequena descrição',
    height: 400,
     tabsize: 2,
                callbacks: {
                    onKeydown: function (e) { 
                        var t = e.currentTarget.innerText; 
                        if (t.trim().length >= 400) {
                            //delete keys, arrow keys, copy, cut, select all
                            if (e.keyCode != 8 && !(e.keyCode >=37 && e.keyCode <=40) && e.keyCode != 46 && !(e.keyCode == 88 && e.ctrlKey) && !(e.keyCode == 67 && e.ctrlKey) && !(e.keyCode == 65 && e.ctrlKey))
                            e.preventDefault(); 
                        } 
                    },
                    onKeyup: function (e) {
                        var t = e.currentTarget.innerText;
                        $('#maxContentPost').text(400 - t.trim().length);
                    },
                    onPaste: function (e) {
                        var t = e.currentTarget.innerText;
                        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                        e.preventDefault();
                        var maxPaste = bufferText.length;
                        if(t.length + bufferText.length > 400){
                            maxPaste = 400 - t.length;
                        }
                        if(maxPaste > 0){
                            document.execCommand('insertText', false, bufferText.substring(0, maxPaste));
                        }
                        $('#maxContentPost').text(400 - t.length);
                    }
                }
            });
 
  $('.summernote').summernote({
      fontSizes: ['8', '9', '10', '11', '12', '14','16', '18','20','22', '24','26', '28','30','32', '34', '36','38','40','42', '44','46', '48' , '50','64', '82', '150'],
         spellCheck: false,
         lang: 'en-US', // default: 'en-US'
         disableGrammar: false,
        toolbar: [
	// [groupName, [list of button]]
	['font', ['fontname']],
        ['font', ['fontsize', 'color','fontsizeunit']],
                ['style', ['style']],
	['font', ['bold', 'italic', 'underline','superscript','subscript', 'strikethrough','clear']],
	
	['table', ['table']],
	['para', ['ul','ol','paragraph','height']],
	['insert', ['link','image', 'doc','picture']], // image and doc are customized buttons
	['misc', ['codeview', 'fullscreen','undo','redo',]]],
             height: 400,
        tabsize: 2
        });
}); 
     

</script>
@endsection