@extends('admin.layouts.app')

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
@endsection

@section('content')
    <!--begin::Content container-->
    <div id="kt_app_content_containe pt-5" class="app-container container-xxl" data-bs-backdrop='static'>
        <!--begin::Card-->
        <div class="card my-5 m-xl-10">
            <!--begin::Card body-->
            <div class="card-body py-4">
                <form class="kt-form"
                    action="{{ isset($record) ? route('admin.' . $route . '.update', [$route => $record->post_id]) : route('admin.' . $route . '.store') }}"
                    name="post_form" id="post_form" method="POST" enctype="multipart/form-data">
                    @csrf
                    @if (isset($record))
                        @method('PUT')
                    @else
                        @method('POST')
                    @endif

                    <div class="row">
                        <div class={{ isset($record) ? 'col-lg-10' : 'col-lg-12' }}>
                            <div class="form-group py-3">
                                <label for="post_image" class="form-label">Post image</label>
                                <input type="file" name="post_image" id="post_image"
                                    class="form-control form-control-lg mb-3 mb-lg-0"
                                    accept=".png,.jpg,.jpeg,.gif,.ico,.swg" {{ isset($record) ? '' : 'required' }} />
                                <p class="help-block">800 x 450px recommended</p>
                                @error('post_image')
                                    <span class="error text-danger" aria-hidden="true">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        @isset($record)
                            <div class="col-lg-2">
                                <div class="image_container">
                                    <div class="setting-block__image">
                                        <img id="img_preview" src="{{ asset('uploads/' . $record->post_preview_image) }}"
                                            class="img-thumbnail">
                                    </div>
                                </div>
                            </div>
                        @endisset
                        <div class="col-lg-12">
                            <div class="form-group py-3">
                                <label for="post_title" class="form-label">Post Title</label>
                                <input type="text" name="post_title" id="post_title"
                                    class="form-control form-control-lg mb-3 mb-lg-0 update_seo"
                                    value="{{ old('post_title', isset($record) ? $record->post_title : '') }}" required />
                                @error('post_title')
                                    <span class="error text-danger" aria-hidden="true">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group py-3">
                                <label for="post_content_short" class="form-label">Post Content Breif</label>
                                <textarea type="text" rows="3" name="post_content_short" id="post_content_short"
                                    class="form-control form-control-lg mb-3 mb-lg-0 summernoteBreif" required>{{ old('post_content_short', isset($record) ? $record->post_content_short : '') }}</textarea>
                                @error('post_content_short')
                                    <span class="error text-danger" aria-hidden="true">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group py-3">
                                <label for="post_content_full" class="form-label">Post Content Detailed</label>
                                <textarea type="text" rows="5" name="post_content_full" id="post_content_full"
                                    class="form-control form-control-lg mb-3 mb-lg-0 summernoteDetailed">{{ old('post_content_full', isset($record) ? $record->post_content_full : '') }}</textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group py-3">
                                <label for="post_url">URL</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="url-addon">{{ site_url() . 'blog/' }}</span>
                                    </div>
                                    <input type="text" class="form-control update_seo" id="post_url" name="post_url"
                                        aria-describedby="url-addon"
                                        value="{{ old('post_url', isset($record) ? $record->post_url : '') }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group py-3">
                                <label for="post_visibility" class="form-label">Status</label>
                                <select name="post_visibility" id="post_visibility" class="form-select">
                                    <option value="0"
                                        {{ old('post_visibility', isset($record) ? $record->post_visibility : 0) == 0 ? 'selected' : '' }}>
                                        Unpublished
                                    </option>
                                    <option value="1"
                                        {{ old('post_visibility', isset($record) ? $record->post_visibility : 1) == 1 ? 'selected' : '' }}>
                                        Published
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="bg-grey" id="seo-block-container">
                                <div class="appearance-seo__block">
                                    <div class="appearance-seo__block-title">Search engine listing preview</div>
                                    <a class="other_services collapsed" href="javascript:void(0)" role="button"
                                        data-bs-toggle="collapse" data-bs-target="#collapse-languages-seo"
                                        aria-controls="collapse-languages-seo" aria-expanded="false" aria-label="Toggle">
                                        Edit page SEO
                                    </a>
                                    <div class="seo-preview">
                                        <div class="seo-preview__title edit-seo__title" id="seo__title"></div>
                                        <div class="seo-preview__url">
                                            {{ site_url() . 'blog/' }}<span
                                                id="seo-slug">{{ isset($record) ? $record->post_url : '' }}</span>
                                        </div>
                                        <div class="seo-preview__description edit-seo__meta" id="seo__meta"></div>
                                    </div>
                                </div>
                                <div class="appearance-seo__block-collapse collapse" id="collapse-languages-seo"
                                    aria-expanded="false" style="height: 10px;">
                                    <div class="col-lg-12">
                                        <div class="form-group py-3">
                                            <label for="seo_page_title" class="form-label">Page title</label>
                                            <input type="text" name="seo_page_title" id="seo_page_title"
                                                class="form-control form-control-lg mb-3 mb-lg-0"
                                                value="{{ old('seo_page_title', isset($record) ? $record->seo_page_title : '') }}" />
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group py-3">
                                            <label for="meta_keywords" class="form-label">Meta-keywords (Press Enter after
                                                entering
                                                every keyword)</label>
                                            <input type="text" name="meta_keywords" id="meta_keywords"
                                                class="form-control form-control-lg mb-3 mb-lg-0"
                                                value="{{ old('meta_keywords', isset($record) ? $record->meta_keywords : '') }}" />
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group py-3">
                                            <label for="meta_robots" class="form-label">Meta Robots</label>
                                            <input type="text" name="meta_robots" id="meta_robots"
                                                class="form-control form-control-lg mb-3 mb-lg-0"
                                                value="{{ old('meta_robots', isset($record) ? $record->meta_robots : '') }}" />
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group py-3">
                                            <label for="meta_description" class="form-label">Meta-description</label>
                                            <textarea type="text" rows="4" name="meta_description" id="meta_description"
                                                class="form-control form-control-lg mb-3 mb-lg-0">{{ old('meta_description', isset($record) ? $record->meta_description : '') }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group py-3">
                                            <label for="custom_header" class="form-label">Custom Header <span
                                                    class="fa fa-exclamation-circle" data-toggle="tooltip"
                                                    data-placement="top"
                                                    title="You can add Open graph (og) and other meta tags here. Do not use it if you don't have idea about it. (Invalid code can harm your SEO)"></span></label>
                                            <textarea type="text" rows="3" name="custom_header" id="custom_header"
                                                class="form-control form-control-lg mb-3 mb-lg-0">{{ old('custom_header', isset($record) ? $record->custom_header : '') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit"
                        class="btn btn-dark">{{ isset($record) ? 'Update Post' : 'Create Post' }}</button>
                </form>
            </div>
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
    </div>
    <!--end::Content container-->
@endsection

@section('script')
    <script src="https://unpkg.com/@yaireo/tagify/dist/jQuery.tagify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.summernoteBreif').summernote({
                height: 100
            });
            $('.summernoteDetailed').summernote({
                height: 300,
                tabsize: 2
            });
            let $input = $('#meta_keywords').tagify({
                    whitelist: [{
                        "id": 1,
                        "value": "some string"
                    }]
                })
                .on('add', function(e, tagName) {
                    console.log('JQEURY EVENT: ', 'added', tagName)
                })
                .on("invalid", function(e, tagName) {
                    console.log('JQEURY EVENT: ', "invalid", e, ' ', tagName);
                });

            // get the Tagify instance assigned for this jQuery input object
            // so its methods could be accessed
            let jqTagify = $input.data('tagify');
        });
        $('.update_seo').on('input', function() {
            const val = $(this).val();
            const url = val.replace(/\s/g, '-').replace(/\./g,
                ''); // Replace spaces with hyphens and remove dots
            $("#seo-slug").text(url)
            $("#post_url").val(url);
        });
    </script>
@endsection