@extends('admin.layouts.app')

@section('page-title')
Page @isset($page) Update @else Add @endisset
@endsection

@section('css')
<style>
    /* This selector targets the editable element (excluding comments). */
    .ck-editor__editable_inline:not(.ck-comment__input *) {
        height: 200px;
        overflow-y: auto;
    }
</style>
<link rel="stylesheet" href="{{ asset('admin/assets/vendor/maxlength/maxlength.css') }}">
@endsection

@section('content')

<div class="container-xxl">
    <form action="{{ isset($page) ? route('admin.page.update', $page) : route('admin.page.store') }}" method="post" id="addeditpage">
        @csrf
        @if(isset($page))
        @method('PUT')
        @endif
        <div class="row">
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Page Information</h4>
                    </div>
                    <div class="card-body">
                        @foreach (config('translatable.locales') as $locale)
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="title_{{ $locale }}" class="form-label"><strong class="text-primary">*</strong> {{ Str::upper($locale) }} - Title</label>
                                    <input type="text" id="title_{{ $locale }}" name="{{ $locale }}[title]" value="{{ old($locale . '.title', isset($page) ? $page->translate($locale)->title : '') }}" class="form-control" placeholder="Page Title">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="content_{{ $locale }}" class="form-label"><strong class="text-primary">*</strong> {{ Str::upper($locale) }} - Content</label>
                                    <textarea name="{{$locale}}[content]" class="form-control bg-light-subtle ckeditor-classic" id="content_{{ $locale }}" rows="7" placeholder="Page content">{{ old($locale . '.content', isset($page) ? $page->translate($locale)->content : '') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="meta_title_{{ $locale }}" class="form-label">{{ Str::upper($locale) }} - Meta Title</label>
                                    <input type="text" id="meta_title_{{ $locale }}" name="{{ $locale }}[meta_title]" value="{{ old($locale . '.meta_title', isset($page) ? $page->translate($locale)->meta_title : '') }}" class="form-control" placeholder="Meta Title">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="meta_description_{{ $locale }}" class="form-label">{{ Str::upper($locale) }} - Meta Description</label>
                                    <textarea name="{{$locale}}[meta_description]" class="form-control bg-light-subtle" id="meta_description_{{ $locale }}" rows="3" placeholder="Meta Description">{{ old($locale . '.meta_description', isset($page) ? $page->translate($locale)->meta_description : '') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="my-2">
                            @if (!$loop->last)
                            <hr style="border-top:1px solid lightgrey;" class="mb-4" />
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Page Attributes</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <!-- <div class="mb-3">
                                    <label for="slug" class="form-label"><strong class="text-primary">*</strong> Slug</label>
                                    <input type="text" id="slug" name="slug" value="{{ old('slug', isset($page) ? $page->slug : '') }}" class="form-control" placeholder="page-slug">
                                </div> -->

                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" {{ old('is_active', isset($page) ? $page->is_active : false) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">Active</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="p-3 bg-white mb-3 rounded">
                    <div class="row g-2">
                        <div class="col-lg-2">
                            <button type="submit" name="submitPageForm" id="submitPageForm" class="btn btn-primary w-100">
                                @isset($page) Update @else Create @endisset Page
                                <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                <span class="visually-hidden">...</span>
                            </button>
                        </div>
                        <div class="col-lg-2">
                            <a href="{{ route('admin.page.index') }}" class="btn btn-outline-secondary w-100">Cancel</a>
                        </div>
                        <small><strong class="text-primary">*</strong> Required fields</small>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@endsection

@section('scripts')
<script src="{{ asset('admin/assets/vendor/maxlength/jquery.maxlength.js') }}"></script>
<script src="{{ asset('admin/assets/vendor/tinymce/tinymce.min.js') }}"></script>
<script>
    $(function() {
        $('input[id^="title_"]').maxlength({max:120});
        $('input[id^="meta_title_"]').maxlength({max:160});
        $('textarea[id^="meta_description_"]').maxlength({max:255});
    });

    document.addEventListener('DOMContentLoaded', function() {
        // add spinner when submit form
        const form = document.getElementById('addeditpage');
        const submitButton = form.querySelector('button[type="submit"]');

        form.addEventListener('submit', function(e) {
            submitButton.disabled = true;
            submitButton.querySelector('.spinner-border').classList.remove('d-none');
        });


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        const demoBaseConfig = {
            selector: 'textarea.ckeditor-classic',
            width: "100%",
            height: 300,
            resize: false,
            menubar: false,
            autosave_ask_before_unload: false,
            plugins: [
                'advlist', 'anchor', 'autolink', 'codesample', 'fullscreen', 'help',
                'image', 'lists', 'link', 'media', 'preview',
                'searchreplace', 'table', 'visualblocks', 'wordcount', 'code'
            ],
            toolbar: [
                'removeformat |insertfile a11ycheck undo redo | blocks fontfamily fontsize | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify',
                'bullist numlist | link image | code fullscreen preview'
            ],
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
            images_upload_url: "{{ route('admin.upload.store', 'general') }}",
            file_picker_types: 'image',
            // relative_urls: 'true',
            // remove_script_host : 'true',
            // automatic_uploads: false,
            file_picker_callback: function(cb, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.onchange = function() {
                    var file = this.files[0];

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        var id = 'blobid' + (new Date()).getTime();
                        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                        var base64 = reader.result.split(',')[1];
                        var blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);
                        cb(blobInfo.blobUri(), { title: file.name });
                    };
                };
                input.click();
            }
        };

        tinymce.init(demoBaseConfig);
    });
</script>
@endsection