@extends('layouts.master')

@section('title', config('page.create'))

@section('content')
<div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="container-fluid">
                <!-- ============================================================== -->
                <!-- Bread crumb and right sidebar toggle -->
                <!-- ============================================================== -->
                <div class="row page-titles">
                    <div class="col-md-5 align-self-center">
                        <h4 class="text-themecolor">{!! config('page.create') !!} <span class="text-info">{{ $page->title }}</span></h4>
                    </div>
                    <div class="col-md-7 align-self-center text-end">
                        <div class="d-flex justify-content-end align-items-center">
                            <ol class="breadcrumb justify-content-end">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{ route('pages.index') }}">{!! config('page.name') !!}</a></li>
                                <li class="breadcrumb-item active">{!! config('page.create') !!} {{ $page->title }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
           
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <!-- <h4 class="card-title">Basic Form</h4> -->
                                <ul class="nav nav-tabs" role="tablist">
                                  @foreach(config('translatable.locales') as $locale)
                                    <li class="nav-item"> <a class="nav-link {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" href="#{{ $locale }}" role="tab" aria-selected="true"><span class="hidden-sm-up"><i class="ti-text"></i></span> <span class="hidden-xs-down">{{ trans('messages.'.$locale) }}</span></a> </li>
                                    @endforeach
                                </ul>
                                <form method="POST" enctype="multipart/form-data" action="{{ route('pages.update',['page' => $page->id]) }}">
                                    @method('PUT')
                                    @csrf

                                   <div class="tab-content tabcontent-border">
                                      @foreach(config('translatable.locales') as $locale)
                                        <div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="{{ $locale }}" role="tabpanel">
                                            <div class="p-20 mt-3">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-floating mb-1">
                                                            <input type="text" class="form-control" id="tb-fname" name="{{ $locale }}[title]"
                                                                placeholder="Enter title here" value="{{ $page->translate($locale)->title }}" onload="convertToSlug(this.value, 'slug_input_{{ $locale }}')"
                                                                   onkeyup="convertToSlug(this.value, 'slug_input_{{ $locale }}')">
                                                            <label for="tb-fname">Title {{ $locale }} <span class="text-danger">*</span></label>
                                                        </div>
                                                        @error("$locale.title")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-floating mb-1">
                                                            <input type="text" class="form-control" id="slug_input_{{ $locale }}" name="{{ $locale }}[slug]"
                                                                placeholder="Enter slug here" value="{{ $page->translate($locale)->slug }}">
                                                            <label for="slug_input_{{ $locale }}">Slug {{ $locale }} <span class="text-danger">*</span></label>
                                                        </div>
                                                        @error("$locale.slug")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-floating mb-1">
                                                            <input type="text" class="form-control" id="tb-fname" name="{{ $locale }}[page_title]"
                                                                placeholder="Enter page name here" value="{{ $page->translate($locale)->page_title }}">
                                                            <label for="tb-fname">Page Name {{ $locale }} <span class="text-danger">*</span></label>
                                                        </div>
                                                        @error("$locale.page_title")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-12">
                                                       <div class="mt-3 mb-1">
                                                           <label class="mb-2">Description {{ $locale }} <span class="text-danger">*</span></label>
                                                           <textarea id="mymce-{{ $locale }}" name="{{ $locale }}[description]">{{ $page->translate($locale)->description }}</textarea>
                                                        </div>
                                                        @error("$locale.description")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="card-header bg-info mt-3 mb-3">
                                                        <h3 class="mb-0 text-white">SEO Details</h3>
                                                    </div>
                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-floating mb-4">
                                                            <input type="text" class="form-control" id="tb-meta_title" name="{{ $locale }}[meta_title]"
                                                                placeholder="Enter meta title here" value="{{ $page->translate($locale)->meta_title }}">
                                                            <label for="tb-meta_title">Meta Title {{ $locale }}</label>
                                                        </div>
                                                        @error("$locale.meta_title")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-floating mb-4">
                                                            <input type="text" class="form-control" id="tb-alt_image" name="{{ $locale }}[alt_image]"
                                                                placeholder="Enter alt image here" value="{{ $page->translate($locale)->alt_image }}">
                                                            <label for="tb-alt_image">Alt Image {{ $locale }}</label>
                                                        </div>
                                                        @error("$locale.alt_image")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-floating mb-4">
                                                            <input type="text" class="form-control" id="tb-canonical_url" name="{{ $locale }}[canonical_url]"
                                                                placeholder="Enter canonical here" value="{{ $page->translate($locale)->canonical_url }}">
                                                            <label for="tb-canonical_url">Canonical Url {{ $locale }}</label>
                                                        </div>
                                                        @error("$locale.canonical_url")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-1">
                                                            <textarea class="form-control" id="tb-meta_description" name="{{ $locale }}[meta_description]"
                                                                placeholder="Enter meta description here" rows="5"> {{ $page->translate($locale)->meta_description }} </textarea>
                                                            <!-- <label for="tb-meta_description">Meta Description {{ $locale }}</label> -->
                                                        </div>
                                                        @error("$locale.meta_description")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-1">
                                                            <textarea class="form-control" id="tb-meta_keywords" name="{{ $locale }}[meta_keywords]"
                                                                placeholder="Enter meta keywords here" rows="5"> {{ $page->translate($locale)->meta_keywords }} </textarea>
                                                            <!-- <label for="tb-meta_keywords">Meta Keywords {{ $locale }}</label> -->
                                                        </div>
                                                        @error("$locale.meta_keywords")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                        <div class="card-header bg-info mt-3 mb-3">
                                            <h3 class="mb-0 text-white">Images Required</h3>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mt-3">
                                                <div class="mb-1">
                                                    <label class="mb-2">Main Image (1110 × 494 px) <span class="text-danger">*</span></label>
                                                    <input type="file" name="image" class="dropify" data-height="200" data-default-file="{{ $page->image ?? ''}}"/>
                                                </div>
                                                @if($errors->has('image'))
                                                    <span class="text-danger">{{ $errors->first('image') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="d-md-flex align-items-center mt-3">
                                                <button type="button" onclick="parent.history.back();" class="btn btn-outline-danger">Back</button>
                                                <div class="ms-auto mt-3 mt-md-0">
                                                    <button type="submit"
                                                        class="btn btn-outline-info">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
</div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
    <script>
        $('.dropify').dropify();

        /* Encode string to slug */
        function convertToSlug( str, element ) {

            //replace all special characters | symbols with a space
            str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ')
                .toLowerCase();

            // trim spaces at start and end of string
            str = str.replace(/^\s+|\s+$/gm,'');

            // replace space with dash/hyphen
            str = str.replace(/\s+/g, '-');

            $('#' + element).val(str);
        }
    </script>
      <script src="/backEnd/dist/assets/node_modules/tinymce/tinymce.min.js"></script>
    <script>
    $(function() {

        if ($("#mymce-en").length > 0) {
            tinymce.init({
                selector: "textarea#mymce-en",
                theme: "modern",
                height: 300,
                plugins: [
                    "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                    "save table contextmenu directionality emoticons template paste textcolor"
                ],
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",

                image_title: true,
                /* enable automatic uploads of images represented by blob or data URIs*/
                automatic_uploads: true,
                /*
                    URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
                    images_upload_url: 'postAcceptor.php',
                    here we add custom filepicker only to Image dialog
                */
                file_picker_types: 'image',
                /* and here's our custom image picker*/
                file_picker_callback: function (cb, value, meta) {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');

                    /*
                    Note: In modern browsers input[type="file"] is functional without
                    even adding it to the DOM, but that might not be the case in some older
                    or quirky browsers like IE, so you might want to add it to the DOM
                    just in case, and visually hide it. And do not forget do remove it
                    once you do not need it anymore.
                    */

                    input.onchange = function () {
                    var file = this.files[0];

                    var reader = new FileReader();
                    reader.onload = function () {
                        /*
                        Note: Now we need to register the blob in TinyMCEs image blob
                        registry. In the next release this part hopefully won't be
                        necessary, as we are looking to handle it internally.
                        */
                        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();
                },

            });
        }

        if ($("#mymce-ar").length > 0) {
            tinymce.init({
                selector: "textarea#mymce-ar",
                theme: "modern",
                height: 300,
                plugins: [
                    "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                    "save table contextmenu directionality emoticons template paste textcolor"
                ],
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",

                image_title: true,
                /* enable automatic uploads of images represented by blob or data URIs*/
                automatic_uploads: true,
                /*
                    URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
                    images_upload_url: 'postAcceptor.php',
                    here we add custom filepicker only to Image dialog
                */
                file_picker_types: 'image',
                /* and here's our custom image picker*/
                file_picker_callback: function (cb, value, meta) {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');

                    /*
                    Note: In modern browsers input[type="file"] is functional without
                    even adding it to the DOM, but that might not be the case in some older
                    or quirky browsers like IE, so you might want to add it to the DOM
                    just in case, and visually hide it. And do not forget do remove it
                    once you do not need it anymore.
                    */

                    input.onchange = function () {
                    var file = this.files[0];

                    var reader = new FileReader();
                    reader.onload = function () {
                        /*
                        Note: Now we need to register the blob in TinyMCEs image blob
                        registry. In the next release this part hopefully won't be
                        necessary, as we are looking to handle it internally.
                        */
                        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();
                },

            });
        }
    });
    </script>
@endpush