@extends('dashboard.layouts.master')
@section('title', __('backend.edit_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" />

@endpush
@section('content')
    <div class="padding edit-package">
        <div class="box">
            <div class="box-header m-b-2">
                <div class="box-header-left">
                    <h3>{{ __('backend.edit_cms') }}</h3>
                    <small>
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / {{ __('backend.settings') }} /
                        <a href="{{ route('cms') }}">{{ __('backend.cms') }}</a> / {{ __('backend.edit_cms') }}
                    </small>
                </div>
                <div class="box-header-right">
                    <div class="box-tool">
                        <ul class="nav">
                            <li class="nav-item inline">
                                <a class="nav-link" href="{{ route('cms') }}">
                                    <i class="material-icons md-18">×</i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="box-body">
                {{ Form::open(['route' => ['cms.update', 'id' => $cms->id], 'method' => 'POST', 'files' => true, 'id' => 'cmsForm']) }}
                <div class="personal_informations">
                    <div class="form-group">
                        <div class="row">
                            <label for="page_name" class="col-xl-2 form-control-label">{!! __('backend.newpage') !!}<span class="valid_field">*</span></label>
                            <div class="col-xl-10">
                                <input type="text" name="page_name" id="page_name" class="form-control" placeholder="{!! __('backend.newpage') !!}"
                                    value="{{ isset($cms->page_name) ? $cms->page_name : old('page_name') }}">
                                @if ($errors->has('page_name'))
                                    <span class="help-block">
                                        <span style="color: red;" class='validate'>{{ $errors->first('page_name') }}</span>
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <label for="page_content" class="col-xl-2 form-control-label">{!! __('backend.pagecontent') !!}<span class="valid_field">*</span></label>
                            <div class="col-xl-10">
                                <textarea class="form-control" id="page_content" name="page_content" autofocus>{{ isset($cms->page_content) ? urldecode($cms->page_content) : old('page_content') }}</textarea>
                                @if ($errors->has('page_content'))
                                    <span class="help-block">
                                        <span style="color: red;" class='validate'>{{ $errors->first('page_content') }}</span>
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="form-group m-t-md">
                        <div class="row">
                            <div class="offset-xl-2 col-xl-10">
                                <button type="submit" class="solid-button m-r-1" id="submitDetail">{!! __('backend.update') !!}</button>
                                <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="{{ asset('assets/dashboard/js/summernote/dist/summernote.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>


    <script>
        $(document).ready(function() {
            $('#submitDetail').on('click', function() {
                var myForm = $("form#cmsForm");
                if (myForm) {
                    $(this).prop('disabled', true);
                    $(myForm).submit();
                }
            });
        });
        $(function() {
            $('.icp-auto').iconpicker({
                placement: '{{ @Helper::currentLanguage()->direction == 'rtl' ? 'topLeft' : 'topRight' }}'
            });
        });

        function sendFile(file, editor, welEditable, lang) {
            data = new FormData();
            data.append("file", file);
            data.append("_token", "{{ csrf_token() }}");

        }

        // update progress bar
        function progressHandlingFunction(e) {
            if (e.lengthComputable) {
                $('progress').attr({
                    value: e.loaded,
                    max: e.total
                });
                // reset progress on complete
                if (e.loaded == e.total) {
                    $('progress').attr('value', '0.0');
                }
            }
        }
    </script>
    <script type="text/javascript">
        document.getElementById('bannerimage').onchange = function(evt) {
            const file = evt.target.files[0];
            if (!file) return;

            const allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
            const maxSize = 2 * 1024 * 1024; // 2 MB

            if (!allowedExtensions.exec(file.name)) {
                this.value = ''; // Reset the input
                document.querySelector('.help-block.with-errors').innerHTML =
                    'Please upload only .png , .jpg , .jpeg only.';
                return;
            }

            if (file.size > maxSize) {
                this.value = ''; // Reset the input
                document.querySelector('.help-block.with-errors').innerHTML = 'File upload size is not more than 2 MB.';
                return;
            }

            document.querySelector('.help-block.with-errors').innerHTML = ''; // Clear error messages
            const reader = new FileReader();

            reader.onload = function(e) {
                document.getElementById('previewImage').src = e.target.result;
            };

            reader.readAsDataURL(file);
        }
    </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_fr', {
            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('mobile_page_content', {
            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('mobile_page_content_fr', {
            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