@extends('layouts.app',['dashBoardTitle'=>'Instant Page Helper']) 
@php
use Illuminate\Support\Str;
@endphp
@section('content')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

@if (session('status'))
  



    <div class="alert alert-success" id="popup"> 
        {{ session('status') }} 
        <!-- <button type="button" class="close" data-dismiss="alert">×</button> -->
        <button class="close-button" aria-label="Dismiss alert" type="button" id="close" style="float:right">
       <span aria-hidden="true">&times;</span>
  </button>
    </div>
    
@endif  
<!-- <input type="button" class="mybutton btn btn-primary" onclick="showModal()" value="Open Model" />  -->
<button type="button" class="btn btn-success text-white pull-right" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Add</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Page Instant Helper</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="POST" action="{{url('/page_help/add')}}" enctype="multipart/form-data">
        @csrf
          <div class="form-group">
            <label for="slug" class="col-form-label">Slug: <span style=color:red>*</span></label>
            <input type="text" class="form-control" name="slug" id="slug" required>
          </div>
          <div class="form-group">
            <label for="description" class="col-form-label">Description: <span style=color:red>*</span></label>
            <textarea class="form-control" name="description" id="description" required></textarea>
          </div>
       
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
</form>
    </div>
  </div>
</div>



<div class="container">
<div class="col-sm-12">

           <!-- <a href="{{url('payment-request')}}"> <span class="mj_btn btn btn-success">Pay Now</span></a> -->
<!-- <a href="{{url('pricing')}}">Request for License</a> -->

<!-- <input type="button" class="mybutton" data-toggle="modal"     data-target="#mymodal" value="Request for License" /> -->
<!-- <input type="button" class="mybutton" onclick="showModal()" value="Open Model" /> -->



<!-- @if (\Session::has('Credit'))
    <div class="alert alert-success">
        Payment Successful
    </div>
@endif
@if (\Session::has('Failed'))
    <div class="alert alert-failure">
        Payment Failure
    </div>
@endif  -->

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<!--<button class="tablink" onclick="openPage('myModal', this, '#22b3ab')"style="
    width: 302px;
    margin-top: 5px;
    height: 48px;
    height: 30px;
    font-weight:bold;
    font-size: 15px;padding-top: 2px;
">Add Instant Helper</button>-->
<!-- <button class="tablink" onclick="openPage('About', this, 'orange')">About</button> -->

<div class="tabcontent">

  @if(count($data)>0)
    <table class=  "table table-striped table-nowrap custom-table mb-0 datatable dataTable no-footer" id="" role="grid" aria-describedby="DataTables_Table_0_info">
      <thead>
        <tr role="row">
          <th>Id</th>
          <th class="text-center">Slug</th>
          <th>Description</th>
          <th>Status</th>
          <th style="width: 100px;">Created Date</th>
      </thead>

        <tbody>    
         @foreach($data as $content)
          <tr>
            <td>{{$loop->iteration}}</td>
            <td style="
    padding-left: 26px;
">{{$content->id}}</td>
            <td class="text-center">{{$content->slug}}</td>
            <td class="text-center">{!! Str::of($content->description)->limit(20) !!}</td>
            <td>{{$content->created_at}}</td>
          </tr>
          @endforeach
        </tbody>
    </table>
    {{ $data->links() }}
  </div>
    <div>
      @else
        <p> No Records Found</p>
      @endif
    </div>




<script>
$(document).ready(function () {
    
});
</script>
<script>
         ClassicEditor.create(document.getElementById("description"), {
                // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
                toolbar: {
                    items: [
                      //  'exportPDF','exportWord', '|',
                      //  'findAndReplace', 'selectAll', '|',
                        'heading', '|',
                        'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
                        'bulletedList', 'numberedList', 'todoList', '|',
                        'outdent', 'indent', '|',
                        'undo', 'redo',
                        '-',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
                        'alignment', '|',
                        'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
                        'specialCharacters', 'horizontalLine', 'pageBreak', '|',
                       // 'textPartLanguage', '|',
                        'sourceEditing'
                    ],
                    shouldNotGroupWhenFull: true
                },
                // Changing the language of the interface requires loading the language file using the <script> tag.
                // language: 'es',
                list: {
                    properties: {
                        styles: true,
                        startIndex: true,
                        reversed: true
                    }
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                    ]
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
                placeholder: 'Page Instant Helper',
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
                fontFamily: {
                    options: [
                        'default',
                        'Arial, Helvetica, sans-serif',
                        'Courier New, Courier, monospace',
                        'Georgia, serif',
                        'Lucida Sans Unicode, Lucida Grande, sans-serif',
                        'Tahoma, Geneva, sans-serif',
                        'Times New Roman, Times, serif',
                        'Trebuchet MS, Helvetica, sans-serif',
                        'Verdana, Geneva, sans-serif'
                    ],
                    supportAllValues: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
                fontSize: {
                    options: [ 10, 12, 14, 'default', 18, 20, 22 ],
                    supportAllValues: true
                },
                // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
                // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
                htmlSupport: {
                    allow: [
                        {
                            name: /.*/,
                            attributes: true,
                            classes: true,
                            styles: true
                        }
                    ]
                },
                // Be careful with enabling previews
                // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
                htmlEmbed: {
                    showPreviews: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
                
                // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
                
                // The "super-build" contains more premium features that require additional configuration, disable them below.
                // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
                removePlugins: [
                    // These two are commercial, but you can try them out without registering to a trial.
                    // 'ExportPdf',
                    // 'ExportWord',
                    'CKBox',
                    'CKFinder',
                    'EasyImage',
                    // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
                    // Storing images as Base64 is usually a very bad idea.
                    // Replace it on production website with other solutions:
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
                    // 'Base64UploadAdapter',
                    'RealTimeCollaborativeComments',
                    'RealTimeCollaborativeTrackChanges',
                    'RealTimeCollaborativeRevisionHistory',
                    'PresenceList',
                    'Comments',
                    'TrackChanges',
                    'TrackChangesData',
                    'RevisionHistory',
                    'Pagination',
                    'WProofreader',
                    // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
                    // from a local file system (file://) - load this site via HTTP server if you enable MathType.
                    'MathType',
                    // The following features are part of the Productivity Pack and require additional license.
                    'SlashCommand',
                    'Template',
                    'DocumentOutline',
                    'FormatPainter',
                    'TableOfContents',
                    'PasteFromOfficeEnhanced'
                ]
            });
    </script>


@endsection