@extends('layouts.back-end.app')

@section('title', \App\CPU\translate('Edit Blog'))

@push('css_or_js')
    <link href="{{ asset('public/assets/back-end/css/tags-input.min.css') }}" rel="stylesheet">
    <link href="{{ asset('public/assets/select2/css/select2.min.css') }}" rel="stylesheet">
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush


@section('content')
    <div class="content container-fluid">
        <!-- Page Title -->
        <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
            <h2 class="h1 mb-0 d-flex gap-2">
                <img src="{{asset('/public/assets/back-end/img/inhouse-product-list.png')}}" alt="">
                {{\App\CPU\translate('Edit')}} {{\App\CPU\translate('Blog')}}
            </h2>
        </div>
        <!-- End Page Title -->

        <!-- Content Row -->
        <div class="row">
            <div class="col-md-12">
                <form class="product-form" action="{{ route('admin.blogs.update', ['id' => $blogs->id]) }}" method="POST"
                      style="text-align: {{ Session::get('direction') === 'rtl' ? 'right' : 'left' }};"
                      enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="px-4 pt-3">
                            @php($language = \App\Model\BusinessSetting::where('type', 'pnc_language')->first())
                            @php($language = $language->value ?? null)
                            @php($default_lang = 'en')

                            @php($default_lang = json_decode($language)[0])
                            <ul class="nav nav-tabs w-fit-content mb-4">
                                @foreach (json_decode($language) as $lang)
                                    <li class="nav-item">
                                        <a class="nav-link text-capitalize lang_link {{ $lang == $default_lang ? 'active' : '' }}"
                                           href="#"
                                           id="{{ $lang }}-link">{{ \App\CPU\Helpers::get_language_name($lang) . '(' . strtoupper($lang) . ')' }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="card-body">
                            @foreach (json_decode($language) as $lang)
                                <div class="{{ $lang != $default_lang ? 'd-none' : '' }} lang_form"
                                     id="{{ $lang }}-form">
                                    <div class="form-group">
                                        <label class="title-color"
                                               for="{{ $lang }}_name">{{ \App\CPU\translate('Title') }}
                                            ({{ strtoupper($lang) }})
                                        </label>
                                        <input type="text" {{ $lang == $default_lang ? 'required' : '' }} name="title"
                                               id="{{ $lang }}_name" class="form-control" placeholder="Enter Title" value="{{$blogs->title}}">
                                    </div>
                                    <div class="form-group">
                                        <label class="title-color"
                                                for="">{{ \App\CPU\translate('category') }}
                                        </label>
                                      
                                        <select class="js-example-basic-multiple js-example-responsive form-control"
                                            name="category"
                                            id="category"
                                            >
                                        <option value="0" selected disabled>---{{\App\CPU\translate('Select')}}---</option>
                                        @foreach($categories as $category)
                                            <option value="{{$category['id']}}" {{ $category->id==$blogs->category ? 'selected' : ''}} >{{$category['category_name']}}</option>
                                        @endforeach
                                    </select>
                                    </div>
                                    <input type="hidden" name="lang[]" value="{{ $lang }}">
                                    <div class="form-group pt-4">
                                        <label class="title-color"
                                               for="{{ $lang }}_description">{{ \App\CPU\translate('description') }}
                                            ({{ strtoupper($lang) }})</label>
                                        <textarea name="description" class="textarea editor-textarea">{{ $blogs->description }}</textarea>
                                    </div>

                                    <div class="form-group">
                                        <label class="title-color"
                                                for="">{{ \App\CPU\translate('image') }}
                                        </label>
                                        <input type="file"  name="image"
                                                id="image" class="form-control" placeholder="">
                                                @if($blogs->image != null)
                                                    <a href="{{ asset('blog/' . $blogs->image) }}" target="_blank">View Image</a>
                                                @endif
                                    </div>

                                    <div class="form-group">
                                        <label class="title-color"
                                                for="">{{ \App\CPU\translate('date') }}
                                        </label>
                                        <input type="date"  name="date"
                                                id="date" class="form-control" placeholder="" value="{{ $blogs->date }}">
                                    </div>
                                </div>
                            @endforeach

                            <div class="row justify-content-end gap-3 mt-3 me-3">
                                <button type="reset" class="btn btn-secondary">{{ \App\CPU\translate('reset') }}</button>
                                <button type="submit"  class="btn btn--primary">{{ \App\CPU\translate('Update') }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@push('script')
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css">
    <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.1/"
                }
            }
    </script>
    <script type="module">
        import { ClassicEditor, Font, Essentials, Autoformat, Bold, Italic, Underline, Strikethrough, Link, Image, ImageToolbar, ImageUpload, List, Paragraph, Alignment } from 'ckeditor5';
        ClassicEditor
        .create(document.querySelector('.textarea'), {
            plugins: [
                Font, // Font plugin for font customization
                Essentials, // Core features like undo/redo
                Autoformat, // Autoformatting features
                Bold, // Bold text
                Italic, // Italic text
                Underline, // Underline text
                Strikethrough, // Strikethrough text
                Link, // Hyperlink functionality
                Image, // Image support
                ImageToolbar, // Toolbar for images
                ImageUpload, // Image upload support
                List, // Lists (ordered/unordered)
                Paragraph, // Paragraph formatting
                Alignment // Text alignment options
            ],
            toolbar: [
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', // Font options
                '|', // Separator
                'bold', 'italic', 'underline', 'strikethrough', // Text formatting
                '|',
                'link', // Hyperlink
                'bulletedList', 'numberedList', // List options
                '|',
                'alignment', // Text alignment
                '|',
                'imageUpload' // Image upload
            ],
            image: {
                toolbar: ['imageTextAlternative', 'imageStyle:full', 'imageStyle:side']
            },
            alignment: {
                options: ['left', 'center', 'right', 'justify']
            }
        })
        .then(editor => {
            console.log('Editor initialized:', editor);
        })
        .catch(error => {
            console.error('Editor initialization error:', error);
        });
    

        ClassicEditor
        .create(document.querySelector('.additional-editor-textarea'), {
            plugins: [
                Font, // Font plugin for font customization
                Essentials, // Core features like undo/redo
                Autoformat, // Autoformatting features
                Bold, // Bold text
                Italic, // Italic text
                Underline, // Underline text
                Strikethrough, // Strikethrough text
                Link, // Hyperlink functionality
                Image, // Image support
                ImageToolbar, // Toolbar for images
                ImageUpload, // Image upload support
                List, // Lists (ordered/unordered)
                Paragraph, // Paragraph formatting
                Alignment // Text alignment options
            ],
            toolbar: [
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', // Font options
                '|', // Separator
                'bold', 'italic', 'underline', 'strikethrough', // Text formatting
                '|',
                'link', // Hyperlink
                'bulletedList', 'numberedList', // List options
                '|',
                'alignment', // Text alignment
                '|',
                'imageUpload' // Image upload
            ],
            image: {
                toolbar: ['imageTextAlternative', 'imageStyle:full', 'imageStyle:side']
            },
            alignment: {
                options: ['left', 'center', 'right', 'justify']
            }
        })
        .then(editor => {
            console.log('Editor initialized:', editor);
        })
        .catch(error => {
            console.error('Editor initialization error:', error);
        });
    </script>
@endpush