@extends('dashboard.layouts.master')
@section('title', __('View CMS'))
@push('after-styles')
    <link href="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
    <style>
        .ck-editor__editable_inline {
            min-height: 300px;
        }

        @media (max-width: 768px) {
            .ck-editor__editable_inline {
                min-height: 250px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="padding edit-package website-crm-show">
        <div class="box">
            <div class="box-header m-b-2">
                <div class="box-header-left">
                    <h3>{{ __('backend.view') }} {{ __('backend.cms') }}</h3>
                    <small>
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                        <a href="{{ route('cms') }}">{{ __('backend.cms') }}</a> / View CMS
                    </small>
                </div>
            </div>
            <div class="box-body">
                {{ Form::open(['route' => ['cms'], 'method' => 'POST', 'files' => true, 'enctype' => 'multipart/form-data']) }}

                <div class="personal_informations">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xl-2 form-control-label">Page Name [EN]</label>
                            <div class="col-xl-10">
                                <input type="text" readonly name="page_name" id="page_name" class="form-control" placeholder="Page Name [EN]" value="{{ $cms->page_name }}">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <label class="col-xl-2 form-control-label">Page Name [AR]</label>
                            <div class="col-xl-10">
                                <input type="text" readonly name="page_name_ar" id="page_name_ar" class="form-control" placeholder="Page Name [AR]" value="{{ $cms->page_name_ar }}">
                            </div>
                        </div>
                    </div>
                   
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xl-2 form-control-label">Page Content [EN]</label>
                            <div class="col-xl-10">
                                <textarea class="form-control" id="page_content" name="page_content" disable>{!! urldecode($cms->page_content) !!}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <label class="col-xl-2 form-control-label">Page Content [AR]</label>
                            <div class="col-xl-10">
                                <textarea class="form-control" id="page_content_ar" name="page_content_ar" disable>{!! urldecode($cms->page_content_ar) !!}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-group m-t-md">
                        <div class="row">
                            <div class="offset-xl-2 col-xl-10">
                                <a href="{{ route('cms') }}" class="border-btn">{!! __('backend.cancel') !!}</a>
                            </div>
                        </div>
                    </div>
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>
@endsection

@push('after-scripts')
    <script src="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.js') }}"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

    <script>
CKEDITOR.on('instanceReady', function(ev) {
    document.getElementById('eMessage').innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';
 
    document.getElementById('eButtons').style.display = 'block';
});
 
function InsertHTML() {
    var editor = CKEDITOR.instances.editor1;
    var value = document.getElementById('htmlArea').value;
 
    if (editor.mode == 'wysiwyg') {
        editor.insertHtml(value);
    } else
        alert('You must be in WYSIWYG mode!');
}
 
function InsertText() {
    var editor = CKEDITOR.instances.editor1;
    var value = document.getElementById('txtArea').value;
 
    if (editor.mode == 'wysiwyg') {
        editor.insertText(value);
    } else
        alert('You must be in WYSIWYG mode!');
}
 
function SetContents() {
    var editor = CKEDITOR.instances.editor1;
    var value = document.getElementById('htmlArea').value;
 
    editor.setData(value);
}
 
function GetContents() {
    var editor = CKEDITOR.instances.editor1;
    alert(editor.getData());
}
 
function ExecuteCommand(commandName) {
    var editor = CKEDITOR.instances.editor1;
 
    if (editor.mode == 'wysiwyg') {
        editor.execCommand(commandName);
    } else
        alert('You must be in WYSIWYG mode!');
}
 
function CheckDirty() {
    var editor = CKEDITOR.instances.editor1;
    alert(editor.checkDirty());
}
 
function ResetDirty() {
    var editor = CKEDITOR.instances.editor1;
    editor.resetDirty();
    alert('The "IsDirty" status has been reset');
}
 
function Focus() {
    CKEDITOR.instances.editor1.focus();
}
 
function onFocus() {
    document.getElementById('eMessage').innerHTML = '<b>' + this.name + ' is focused </b>';
}
 
function onBlur() {
    document.getElementById('eMessage').innerHTML = this.name + ' lost focus';
}
 
CKEDITOR.replace('page_content', {
    filebrowserUploadUrl: '{!! route('upload_ckeditor', ['_token' => csrf_token()] ) !!}',
    filebrowserUploadMethod: 'form',
    filebrowserBrowseUrl:"{{ route('file_browser') }}",
 
    on: {
        focus: onFocus,
        blur: onBlur,
        pluginsLoaded: function(evt) {
            var doc = CKEDITOR.document,
                ed = evt.editor;
            if (!ed.getCommand('bold')) doc.getById('exec-bold').hide();
            if (!ed.getCommand('link')) doc.getById('exec-link').hide();
        }
    }
});

CKEDITOR.replace('page_content_ar', {
    filebrowserUploadUrl: '{!! route('upload_ckeditor', ['_token' => csrf_token()] ) !!}',
    filebrowserUploadMethod: 'form',
    filebrowserBrowseUrl:"{{ route('file_browser') }}",
 
    on: {
        focus: onFocus,
        blur: onBlur,
        pluginsLoaded: function(evt) {
            var doc = CKEDITOR.document,
                ed = evt.editor;
            if (!ed.getCommand('bold')) doc.getById('exec-bold').hide();
            if (!ed.getCommand('link')) doc.getById('exec-link').hide();
        }
    }
});
</script>
<script type="text/javascript">
CKEDITOR.config.height = '600px';
</script>
@endpush