@extends('layouts.admin')

@section('content')
    <main>
        <section class="dashboard-sec">
            <div class="dashboard-wrapper">
                <div class="dashboard-content-wrapper">
                    <div class="section-body">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-6">
                                <div class="card">
                                    <form action="{{ route('admin.cms.store', [$page->id]) }}" method="post" id="cmsForm">
                                        @csrf
                                        <div class="card-header">
                                            <h4>CMS Page</h4>
                                            <div class="card-header-form">
                                                {{-- <a class="" href="http://raf.test/admin/sponsor/index">Back</a> --}}
                                                <a class="btn btn-primary btn-lg float-end"
                                                    href="{{ url()->previous() }}">Back</a>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-row form-cstm">
                                                <div class="form-group col-md-12">
                                                    <label> Title <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="text" name="title"
                                                            class="form-control @error('title') is-invalid @enderror"
                                                            value="{{ old('title', @$page->title) }}" placeholder="Title">

                                                        </span>
                                                        @error('title')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="form-row form-cstm">
                                                <div class="form-group col-md-12">
                                                    <label> Tag line <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="text" name="tag_line"
                                                            class="form-control  @error('tag_line') is-invalid @enderror "
                                                            value="{{ old('tag_line', @$page->tag_line) }}"
                                                            placeholder="Tag line">
                                                        </span>
                                                        @error('tag_line')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="form-row form-cstm">
                                                <div class="form-group col-md-12">
                                                    <label> Content </label>
                                                    <div class="formfield">
                                                        <textarea class="form-control  @error('content') is-invalid @enderror " name="content">{{ old('content', @$page->content) }}</textarea>
                                                        {{-- @error('content')
                                                            <label class="error-messages">{{ $message }}</label>
                                                        @enderror --}}
                                                        </span>
                                                        @error('content')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>

                                                </div>
                                            </div>

                                       
                                        </div>
                                        <div class="card-footer">
                                            <button class="btn btn-primary" id='cmsButton' type="submit">Update</button>

                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>
    </main>
@endsection

@push('pagespecificscripts')
    @include('validation')
    {{-- @include('validations.js_cms') --}}
    {{-- @include('validations.js_cms') --}}
    <script src="{{ asset('assets/bundles/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="https://cdn.tiny.cloud/1/s0z7cz8e2t06dxo8qiyuovdp5nk6z1hjd2fa2gh9d11guf29/tinymce/5/tinymce.min.js"
        referrerpolicy="origin"></script>
    <script>
        const url = '{{ route('admin.cms.store', @$page->id) }}'

        tinymce.init({
            selector: 'textarea',
            width: '100%',
            height: '640',
            branding: false,
            plugins: 'image code anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
            toolbar: "undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist |  charmap ",
            image_title: true,
            images_upload_url: "/admin/upload-cms/{{ $page->id }}/save",
            automatic_uploads: true,
            file_picker_types: 'image',
            title: 'Circle',
           
            setup: function(editor) {
                editor.on('init change', function() {
                    editor.save();
                });
            },

            images_upload_handler: function(blobInfo, success, failure) {
                var xhr, formData;
                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', "{{ route('admin.cms.upload', ['page' => $page->id]) }}");
                xhr.onload = function() {
                    var json;
                    if (xhr.status != 200) {
                        console.log('HTTP Error: ' + xhr.status);
                        return;
                    }
                    if (xhr.responseText) {
                        json = JSON.parse(xhr.responseText);
                    }
                    if (!json || typeof json.location != 'string') {
                        console.log('Invalid JSON: ' + xhr.responseText);
                        return;
                    }
                    success(json.location);
                };
                formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                // append CSRF token in the form data
                formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

                // for (const value of formData.values()) {
                //     console.log(value);
                // }

                xhr.send(formData);
            },
            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.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
                        ); /* call the callback and populate the Title field with the file name */
                        cb(blobInfo.blobUri(), {
                            title: file.name
                        });
                    };
                    reader.readAsDataURL(file);
                };
                input.click();
            },
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            height: 500
        });
        jQuery(document).ready(function() {
            var validator = jQuery("#cmsForm").submit(function(event) {
                // update underlying textarea before submit validation
                // event.preventDefault();

                if (jQuery("#cmsForm").find('input[name="title"]').valid() && jQuery("#cmsForm").find(
                        'input[name="tag_line"]').valid()) {
                    let content = jQuery.trim(jQuery('#content_ifr').contents().find('body').text());
                    check = jQuery('#content_ifr').contents().find('body').text(content);
                    tinyMCE.triggerSave();
                    // jQuery('#cmsForm').submit();
                    // }else{
                    //     return false;
                }
            }).validate({
                errorClass: "is-invalid",
                ignore: "",
                rules: {
                    title: {
                        required: true,
                        noSpace: true,
                        minlength: titleMinLength,
                        maxlength: titleMaxLength,
                    },
                    tag_line: {
                        required: true,
                        noSpace: true,
                        minlength: tag_lineMinLength,
                        maxlength: tag_lineMaxLength
                    }
                },
                messages: {
                    title: {
                        required: `{{ __('customValidation.cms_edit.title.required') }}`,
                        noSpace: `{{ __('customValidation.cms_edit.title.noSpace') }}`,
                        minlength: `{{ __('customValidation.cms_edit.title.minlength', ['min' => '${titleMinLength}', 'max' => '${titleMaxLength}']) }}`,
                        maxlength: `{{ __('customValidation.cms_edit.title.maxlength', ['max' => '${titleMinLength}', 'max' => '${titleMaxLength}']) }}`,
                    },
                    tag_line: {
                        required: `{{ __('customValidation.cms_edit.tag_line.required') }}`,
                        noSpace: `{{ __('customValidation.cms_edit.tag_line.noSpace') }}`,
                        minlength: `{{ __('customValidation.cms_edit.tag_line.minlength', ['min' => '${tag_lineMinLength}', 'max' => '${tag_lineMaxLength}']) }}`,
                        maxlength: `{{ __('customValidation.cms_edit.tag_line.maxlength', ['max' => '${tag_lineMinLength}', 'max' => '${tag_lineMaxLength}']) }}`,
                    },
                    content: {
                        required: `{{ __('customValidation.cms_edit.content.required') }}`,
                    }
                },

                errorPlacement: function(label, element) {
                    if (element.is("textarea")) {
                        label.insertAfter(element.next());
                    } else {
                        label.insertAfter(element)
                    }
                }
            });
        })
    </script>
@endpush