@extends('admin/layouts/dashboard')

@section('breadcrumbs', Breadcrumbs::render(Route::current()->getName(), $page))

@section('content')
    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title">Редактировать страницу сайта</h5>
        </div>

        <div class="card-body">
            <form method="POST" action="{{ route('admin.page.update', $page->id) }}">
                @csrf

                {{ Form::hidden('_method', 'PUT') }}

                @include('admin.helper.form.input', [
                    'name' => 'name',
                    'value' => $page->name,
                    'label' => 'Название'
                ])

                @include('admin.helper.form.input', [
                    'name' => 'slug',
                    'value' => $page->slug,
                    'label' => 'URL'
                ])

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12">
                            <label>Содержимое</label>

                            <div id="js-content">{{ $page->content }}</div>

                            <input type="hidden" name="content" value="{{ $page->content }}">
                        </div>
                    </div>
                </div>

                @include('admin.helper.form.input', [
                    'name' => 'title',
                    'value' => $page->title,
                    'label' => 'Title'
                ])

                @include('admin.helper.form.input', [
                    'name' => 'keywords',
                    'value' => $page->keywords,
                    'label' => 'Keywords'
                ])

                @include('admin.helper.form.input', [
                    'name' => 'description',
                    'value' => $page->description,
                    'label' => 'Description'
                ])

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12">
                            <label for="name">Текст 1</label>

                            <textarea name="text1" id="text1" rows="10" cols="80">{{ $page->text1 }}</textarea>

                            <input type="hidden" name="text1" value="{{ $page->text1 }}">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12">
                            <label for="name">Текст 2</label>

                            <textarea name="text2" id="text2" rows="10" cols="80">{{ $page->text2 }}</textarea>

                            <input type="hidden" name="text2" value="{{ $page->text2 }}">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12">
                            <label for="name">Текст 3</label>

                            <textarea name="text3" id="text3" rows="10" cols="80">{{ $page->text3 }}</textarea>

                            <input type="hidden" name="text3" value="{{ $page->text3 }}">
                        </div>
                    </div>
                </div>

                @include('admin.helper.form.submit', [
                    'label' => 'Сохранить'
                ])
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>

    <script>
        (function() {
            let save = function(editor) {
                $.ajax({
                    url: '{{ route('admin.page.update', $page->id) }}',
                    dataType: 'json',
                    method: 'POST',
                    data: {
                        _method: 'PUT',
                        content: editor.getValue(),
                        name: $('input[name="name"]').val(),
                        slug: $('input[name="slug"]').val(),
                        title: $('input[name="title"]').val(),
                        keywords: $('input[name="keywords"]').val(),
                        description: $('input[name="description"]').val(),
                        text1: $('input[name="text1"]').val(),
                        text2: $('input[name="text2"]').val(),
                        text3: $('input[name="text3"]').val()
                    },
                    success: function() {
                        window.FlashMessage.success('Страница успешно сохранена');
                    },
                    error: function(jqXHR) {
                        if(jqXHR.responseJSON.errors) {
                            var erorrs = jqXHR.responseJSON.errors;

                            for(var error in erorrs) {
                                window.FlashMessage.error(erorrs[error]);
                            }
                        }
                    }
                });
            };

            var text1 = CKEDITOR.replace('text1');
            text1.on('change', function( evt ) {
                $('input[name="text1"]').val(evt.editor.getData());
            });

            var text2 = CKEDITOR.replace('text2');
            text2.on('change', function( evt ) {
                $('input[name="text2"]').val(evt.editor.getData());
            });

            var text3 = CKEDITOR.replace('text3');
            text3.on('change', function( evt ) {
                $('input[name="text3"]').val(evt.editor.getData());
            });


            // Инициализируем редактор
            let editor = ace.edit("js-content");
            editor.setTheme("ace/theme/xcode");
            editor.session.setMode("ace/mode/php");
            let textarea = $('input[name="content"]');
            editor.getSession().on("change", function () {
                textarea.val(editor.getSession().getValue());
            });

            editor.commands.addCommand({
                name: 'Save',
                bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},

                exec: function(editor) {
                    // Отправляем данные на сервер
                    save(editor);
                },
                readOnly: true
            });

            $('form button[type="submit"]').click(function(event) {
                event.preventDefault();

                save(editor);
            });
        })();
    </script>

    @include('admin.helper.unique', [
        'entity' => "\\\JustWeCMS\\\Entities\\\Page",
        'pk' => $page->id
    ])
@endsection