@extends('moderator.layouts.app')


@section('styles')
<!-- Plugins css -->
<link href="{{ URL::asset('assets/admin/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/admin/plugins/bootstrap-touchspin/css/jquery.bootstrap-touchspin.min.css') }}" rel="stylesheet" />
<style type="text/css">
    .required{
        color:red;
    }
    .card label{
        font-size: 16px;
        letter-spacing: 1px;
        color: #545454;
    }
    .divider{
        border-bottom: 2px solid rgba(0,0,0,.1);
        margin-top: 5px;
    }
    input[type="file"] {
        display:block;
    }
    .imageThumb {
        max-height: 75px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 5px 1px;
    }
    
     #Rimg_list, #Pimg_list{
        margin-top: 5px;
        border: 2px solid #ccc;
        border-radius: 5px;
        height: 180px;
        background: #ccc;
    }
</style>
<style>
            #container {
                width: 1000px;
                margin: 20px auto;
            }
            .ck-editor__editable[role="textbox"] {
                /* Editing area */
                min-height: 200px;
            }
            .ck-content .image {
                /* Block images */
                max-width: 80%;
                margin: 20px auto;
            }
        </style>

@endsection

@section('header')
	@include('moderator.layouts.header')
@endsection

@section('sidemenu')
	@include('moderator.layouts.sidemenu')
@endsection

@section('content')
<div class="content-page">
    <div class="content">
        <div class="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="float-right">
                                <ol class="breadcrumb p-0 m-0">
                                    <li class="breadcrumb-item"><a href="">Admin</a></li>
                                    <li class="breadcrumb-item"><a href="">Moderator</a></li>
                                    <li class="breadcrumb-item active">Add Case Details</li>
                                </ol>
                            </div>
                            <h4 class="page-title">Add Case Details</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <div class="row">
                        <div class="col-md-12 col-lg-12 col-xl-1"></div>
                        <div class="col-md-12 col-lg-12 col-xl-10">
                            @if(session()->has('success-message'))
                                <div class="alert alert-success text-center">{{ session()->get('success-message') }}</div>
                            @endif
                            @if(session()->has('error-message'))
                                <div class="alert alert-danger text-center">{{ session()->get('error-message') }}</div>
                            @endif

                            <div class="card m-b-20">
                                <div class="card card-body">
                                    <h3 class="card-title font-20 mb-4 text-primary text-center">Add Case Details</h3>

                                    <div class="row" id="div-single-registration">
                                        <div class="col-sm-1"></div>
                                        <div class="col-sm-10">
                                        @if($caseOFm == [])
                                            @php $date = date("Y-m-d"); @endphp
                                            @if($moderator->end_date >= $date)
                                            <form id="createQuestionForm" name="createQuestionForm" method="POST" action="/BNA/public/moderator/admin/Add-case" onsubmit="return validateForm();" enctype="multipart/form-data" >
                                            <!--<form id="createQuestionForm" name="createQuestionForm" method="POST" action="/admin/voting/create-question" enctype="multipart/form-data" novalidate>-->
                                                {{ csrf_field() }}
                                                <div class="row">
												    <label class="col-sm-4 col-form-label m-t-5">Case No.</label>
                                                    <div class="col-sm-8 m-t-5">
                                                        <input type="text" class="form-control" name="caseno" id="caseno" value="{{ $moderator->id }}" disabled />
                                                        <input type="hidden" class="form-control" name="caseno" id="caseno" value="{{ $moderator->id }}" />
                                                    </div>
												    
													<label class="col-sm-12 col-form-label m-t-5">Title of the Case <span class="required">*</span></label>
                                                    <div class="col-sm-12 m-t-5">
                                                        <textarea class="form-control" name="title" id="title" rows="4"></textarea>
                                                        <input type="hidden" id="abtitle" name="abtitle" value="">
                                                        
                                                    </div>
                                                    
                                                    <label class="col-sm-12 col-form-label m-t-5">Short Description <span class="required">*</span></label>
                                                    <div class="col-sm-12 m-t-5">
                                                        <textarea class="form-control" name="description" id="description" rows="4"></textarea>
                                                        <input type="hidden" id="abdescription" name="abdescription" value="">
                                                    </div>
                                                    
                                                    <!--<label class="col-sm-4 col-form-label m-t-5">Case <span class="required">*</span></label>-->
                                                    <!--<div class="col-sm-8 m-t-5">-->
                                                    <!--    <textarea class="form-control" name="case" id="case" rows="4"></textarea>-->
                                                    <!--    <input type="hidden" id="abcase" name="abcase">-->
                                                    <!--</div>-->
                                                    
                                                    
                                                </div>
                                                    
                                                <div class="col-sm-12 mt-4 text-center">
                                                   <button type="submit" class="btn btn-primary" name="save_question" >Save</button>
                                                </div>
                                            </form>
                                            @else
                                            <h6 class="card-title font-20 mb-4 text-primary text-center">You can't add case details now</h6>

                                            @endif
                                        @else
                                        <h6 class="card-title font-20 mb-4 text-primary text-center">You have already submitted the case of the month</h6>

                                        @endif
                                            
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>

                        </div> <!-- end col -->
        </div> <!-- end row -->
    </div>
</div>

<!-- Modal -->
<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">Alert</h5>
       <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">×</button>
     </div>
     <div class="modal-body">
       <p id="msgbox"></p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
       <!--<button type="button" class="btn btn-primary">Save changes</button>-->
     </div>
   </div>
 </div>
</div>
@endsection

@section('footer')
	@include('moderator.layouts.footer')
@endsection

@section('scripts')

<!-- Plugins js -->
<script src="{{ URL::asset('assets/admin/plugins/select2/js/select2.min.js') }}" type="text/javascript"></script>
<script src="{{ URL::asset('assets/admin/plugins/bootstrap-touchspin/js/jquery.bootstrap-touchspin.min.js') }}" type="text/javascript"></script>

<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/super-build/ckeditor.js"></script>
<!--<script src="/BNA/public/js/ckeditor.js"></script>-->
<script type="text/javascript">

var myClassicEditor1;
var myClassicEditor2;

function createeditor(editorid){// This sample still does not showcase all CKEditor&nbsp;5 features (!)
            // Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
            CKEDITOR.ClassicEditor.create(document.getElementById(editorid), {
                // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
                
                ckfinder:{
                      uploadUrl:"{{ route('ckeditor.upload').'?_token='.csrf_token()}}"
                  },
               
                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', 'uploadImage', 'blockQuote', 'insertTable', 'codeBlock', 'htmlEmbed', '|',
                        'specialCharacters', 'horizontalLine', 'pageBreak', '|',
                        '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: 'Welcome to CKEditor 5!',
                // 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
                link: {
                    decorators: {
                        addTargetToExternalLinks: true,
                        defaultProtocol: 'https://',
                        toggleDownloadable: {
                            mode: 'manual',
                            label: 'Downloadable',
                            attributes: {
                                download: 'file'
                            }
                        }
                    }
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
                mention: {
                    feeds: [
                        {
                            marker: '@',
                            feed: [
                                '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
                                '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
                                '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
                                '@sugar', '@sweet', '@topping', '@wafer'
                            ],
                            minimumCharacters: 1
                        }
                    ]
                },
                // The "superbuild" 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',
                    'AIAssistant',
                    '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',
                    'CaseChange'
                ]
            })
            
            .then( editor => {
                
                if(editorid == 'title'){
                    myClassicEditor1 = editor;
                }else{
                    myClassicEditor2 = editor;
                }
                // console.error( editor );
                
            } )
            .catch( error => {
                // console.error( error );
            } );
            
}

createeditor('title');
createeditor('description');

    function validateForm() {
        
        var html = myClassicEditor1.getData();
        var temp = document.createElement("div");
        temp.innerHTML = html;
        var mytitle = temp.textContent || temp.innerText || ""; 
        document.getElementById("abtitle").value= mytitle;
        
        var html2 = myClassicEditor2.getData();
        var temp2 = document.createElement("div");
        temp2.innerHTML = html2;
        var mydsc = temp2.textContent || temp2.innerText || ""; 
        document.getElementById("abdescription").value= mydsc;
        
        // console.log(html);
        // console.log(html2);
        
        if(mytitle == ''){
            
            $('#exampleModal').modal('toggle');
            $('#msgbox').html("Please fill out Title of the Case!");
              return false;
        }
        
        if(mydsc == ''){
            
            $('#exampleModal').modal('toggle');
            $('#msgbox').html("Please fill out Short Description!");
              return false;
        }
       
       
    }


</script>

<script type="text/javascript">
            $(document).ready(function() {
	        });
        </script>
@endsection