@extends('layouts.base')
@section('styles')
    <link href="{{asset('assets/plugins/custom/ckeditor5/ckeditor5.css')}}"  rel="stylesheet" type="text/css"  >
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

        @media print {
            body {
                margin: 0 !important;
            }
        }

        .main-container {
            font-family: 'Lato';
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        .ck-content {
            font-family: 'Lato';
            line-height: 1.6;
            word-break: break-word;
        }

        .editor-container_classic-editor .editor-container__editor {
            min-width: 795px;
            max-width: 795px;
        }

        .ck-content h3.category {
            font-family: 'Oswald';
            font-size: 20px;
            font-weight: bold;
            color: #555;
            letter-spacing: 10px;
            margin: 0;
            padding: 0;
        }

        .ck-content h2.document-title {
            font-family: 'Oswald';
            font-size: 50px;
            font-weight: bold;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .ck-content h3.document-subtitle {
            font-family: 'Oswald';
            font-size: 20px;
            color: #555;
            margin: 0 0 1em;
            font-weight: bold;
            padding: 0;
        }

        .ck-content p.info-box {
            --background-size: 30px;
            --background-color: #e91e63;
            padding: 1.2em 2em;
            border: 1px solid var(--background-color);
            background: linear-gradient(
                135deg,
                var(--background-color) 0%,
                var(--background-color) var(--background-size),
                transparent var(--background-size)
            ),
            linear-gradient(
                135deg,
                transparent calc(100% - var(--background-size)),
                var(--background-color) calc(100% - var(--background-size)),
                var(--background-color)
            );
            border-radius: 10px;
            margin: 1.5em 2em;
            box-shadow: 5px 5px 0 #ffe6ef;
        }

        .ck-content blockquote.side-quote {
            font-family: 'Oswald';
            font-style: normal;
            float: right;
            width: 35%;
            position: relative;
            border: 0;
            overflow: visible;
            z-index: 1;
            margin-left: 1em;
        }

        .ck-content blockquote.side-quote::before {
            content: '“';
            position: absolute;
            top: -37px;
            left: -10px;
            display: block;
            font-size: 200px;
            color: #e7e7e7;
            z-index: -1;
            line-height: 1;
        }

        .ck-content blockquote.side-quote p {
            font-size: 2em;
            line-height: 1;
        }

        .ck-content blockquote.side-quote p:last-child:not(:first-child) {
            font-size: 1.3em;
            text-align: right;
            color: #555;
        }

        .ck-content span.marker {
            background: yellow;
        }

        .ck-content span.spoiler {
            background: #000;
            color: #000;
        }

        .ck-content span.spoiler:hover {
            background: #000;
            color: #fff;
        }

        .ck-content pre.fancy-code {
            border: 0;
            margin-left: 2em;
            margin-right: 2em;
            border-radius: 10px;
        }

        .ck-content pre.fancy-code::before {
            content: '';
            display: block;
            height: 13px;
            background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
            margin-bottom: 8px;
            background-repeat: no-repeat;
        }

        .ck-content pre.fancy-code-dark {
            background: #272822;
            color: #fff;
            box-shadow: 5px 5px 0 #0000001f;
        }

        .ck-content pre.fancy-code-bright {
            background: #dddfe0;
            color: #000;
            box-shadow: 5px 5px 0 #b3b3b3;
        }

    </style>
@endsection
@section('content')

    <!--begin::پایه info-->
    <div class="card mb-5 mb-xl-10">
        <!--begin::کارت header-->
        <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
            <!--begin::کارت title-->
            <div class="card-title m-0">
                <h3 class="fw-bold m-0">تنظیمات</h3>
            </div>
            <!--end::کارت title-->
        </div>
        <!--begin::کارت header-->
        <!--begin::Content-->
        <div id="kt_account_settings_profile_details" class="collapse show">
            <!--begin::form-->
            <form id="kt_account_profile_details_form" class="form" action="{{route('settings.update', ['settingId'=>$settings->id])}}" method="post" enctype="multipart/form-data">
                @csrf
                <!--begin::کارت body-->
                <div class="card-body border-top p-9">
                    <!--begin::Input group-->
                    <div class="row mb-6">
                        <!--begin::Tags-->
                        <label class="col-lg-2 col-form-label required fw-semibold fs-6">پروتکل ها</label>
                        <!--end::Tags-->
                        <!--begin::Col-->
                        <div class="col-lg-8 fv-row">
                            <textarea name="protocols" id="protocols">{!! $settings->protocols !!}</textarea>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->
                    <!--begin::Input group-->
                    <div class="row mb-6">
                        <!--begin::Tags-->
                        <label class="col-lg-2 col-form-label required fw-semibold fs-6">راهنما</label>
                        <!--end::Tags-->
                        <!--begin::Col-->
                        <div class="col-lg-8 fv-row">
                            <textarea  name="manuals" id="manuals">{!! $settings->manuals !!}</textarea>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->
                </div>
                <!--end::کارت body-->
                <!--begin::Actions-->
                <div class="card-footer d-flex justify-content-end py-6 px-9">
                    <button type="reset" class="btn btn-light btn-active-light-primary me-2">لغو</button>
                    <button type="submit" class="btn btn-primary" id="kt_account_profile_details_submit">ذخیره تغییرات</button>
                </div>
                <!--end::Actions-->
            </form>
            <!--end::form-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::پایه info-->
@endsection

@section('script')

    <script type="importmap">
        {
            "imports": {
                "ckeditor5": "{{asset('assets/plugins/custom/ckeditor5/ckeditor5.js')}}",
                "ckeditor5/": "{{url('assets/plugins/custom/ckeditor5/')}}/"
            }
        }
    </script>
    <script  type="module">
        import {
            ClassicEditor,
            Alignment,
            Autoformat,
            AutoImage,
            AutoLink,
            Autosave,
            Base64UploadAdapter,
            BlockQuote,
            Bold,
            Bookmark,
            CloudServices,
            Code,
            Essentials,
            FindAndReplace,
            FontBackgroundColor,
            FontColor,
            FontFamily,
            FontSize,
            GeneralHtmlSupport,
            Heading,
            Highlight,
            HorizontalLine,
            ImageBlock,
            ImageCaption,
            ImageInline,
            ImageInsert,
            ImageInsertViaUrl,
            ImageResize,
            ImageStyle,
            ImageTextAlternative,
            ImageToolbar,
            ImageUpload,
            Indent,
            IndentBlock,
            Italic,
            Link,
            LinkImage,
            List,
            ListProperties,
            MediaEmbed,
            PageBreak,
            Paragraph,
            PasteFromOffice,
            RemoveFormat,
            SpecialCharacters,
            SpecialCharactersArrows,
            SpecialCharactersCurrency,
            SpecialCharactersEssentials,
            SpecialCharactersLatin,
            SpecialCharactersMathematical,
            SpecialCharactersText,
            Strikethrough,
            Style,
            Subscript,
            Superscript,
            Table,
            TableCaption,
            TableCellProperties,
            TableColumnResize,
            TableProperties,
            TableToolbar,
            TextPartLanguage,
            TextTransformation,
            TodoList,
            Underline
        } from 'ckeditor5';

        /**
         * Create a free account with a trial: https://portal.ckeditor.com/checkout?plan=free
         */
        const LICENSE_KEY = 'GPL'; // or <YOUR_LICENSE_KEY>.

        const editorConfig = {
            toolbar: {
                items: [
                    'heading',
                    'style',
                    '|',
                    'fontSize',
                    'fontFamily',
                    'fontColor',
                    'fontBackgroundColor',
                    '|',
                    'bold',
                    'italic',
                    'underline',
                    '|',
                    'link',
                    'insertImage',
                    'insertTable',
                    'highlight',
                    'blockQuote',
                    '|',
                    'alignment',
                    '|',
                    'bulletedList',
                    'numberedList',
                    'todoList',
                    'outdent',
                    'indent'
                ],
                shouldNotGroupWhenFull: false
            },
            plugins: [
                Alignment,
                Autoformat,
                AutoImage,
                AutoLink,
                Autosave,
                Base64UploadAdapter,
                BlockQuote,
                Bold,
                Bookmark,
                CloudServices,
                Code,
                Essentials,
                FindAndReplace,
                FontBackgroundColor,
                FontColor,
                FontFamily,
                FontSize,
                GeneralHtmlSupport,
                Heading,
                Highlight,
                HorizontalLine,
                ImageBlock,
                ImageCaption,
                ImageInline,
                ImageInsert,
                ImageInsertViaUrl,
                ImageResize,
                ImageStyle,
                ImageTextAlternative,
                ImageToolbar,
                ImageUpload,
                Indent,
                IndentBlock,
                Italic,
                Link,
                LinkImage,
                List,
                ListProperties,
                MediaEmbed,
                PageBreak,
                Paragraph,
                PasteFromOffice,
                RemoveFormat,
                SpecialCharacters,
                SpecialCharactersArrows,
                SpecialCharactersCurrency,
                SpecialCharactersEssentials,
                SpecialCharactersLatin,
                SpecialCharactersMathematical,
                SpecialCharactersText,
                Strikethrough,
                Style,
                Subscript,
                Superscript,
                Table,
                TableCaption,
                TableCellProperties,
                TableColumnResize,
                TableProperties,
                TableToolbar,
                TextPartLanguage,
                TextTransformation,
                TodoList,
                Underline
            ],
            fontFamily: {
                supportAllValues: true
            },
            fontSize: {
                options: [10, 12, 14, 'default', 18, 20, 22],
                supportAllValues: true
            },
            heading: {
                options: [
                    {
                        model: 'paragraph',
                        title: 'Paragraph',
                        class: 'ck-heading_paragraph'
                    },
                    {
                        model: 'heading1',
                        view: 'h1',
                        title: 'Heading 1',
                        class: 'ck-heading_heading1'
                    },
                    {
                        model: 'heading2',
                        view: 'h2',
                        title: 'Heading 2',
                        class: 'ck-heading_heading2'
                    },
                    {
                        model: 'heading3',
                        view: 'h3',
                        title: 'Heading 3',
                        class: 'ck-heading_heading3'
                    },
                    {
                        model: 'heading4',
                        view: 'h4',
                        title: 'Heading 4',
                        class: 'ck-heading_heading4'
                    },
                    {
                        model: 'heading5',
                        view: 'h5',
                        title: 'Heading 5',
                        class: 'ck-heading_heading5'
                    },
                    {
                        model: 'heading6',
                        view: 'h6',
                        title: 'Heading 6',
                        class: 'ck-heading_heading6'
                    }
                ]
            },
            htmlSupport: {
                allow: [
                    {
                        name: /^.*$/,
                        styles: true,
                        attributes: true,
                        classes: true
                    }
                ]
            },
            image: {
                toolbar: [
                    'toggleImageCaption',
                    'imageTextAlternative',
                    '|',
                    'imageStyle:inline',
                    'imageStyle:wrapText',
                    'imageStyle:breakText',
                    '|',
                    'resizeImage'
                ]
            },
            licenseKey: LICENSE_KEY,
            link: {
                addTargetToExternalLinks: true,
                defaultProtocol: 'https://',
                decorators: {
                    toggleDownloadable: {
                        mode: 'manual',
                        label: 'Downloadable',
                        attributes: {
                            download: 'file'
                        }
                    }
                }
            },
            list: {
                properties: {
                    styles: true,
                    startIndex: true,
                    reversed: true
                }
            },
            menuBar: {
                isVisible: true
            },
            placeholder: 'Type or paste your content here!',
            style: {
                definitions: [
                    {
                        name: 'Article category',
                        element: 'h3',
                        classes: ['category']
                    },
                    {
                        name: 'Title',
                        element: 'h2',
                        classes: ['document-title']
                    },
                    {
                        name: 'Subtitle',
                        element: 'h3',
                        classes: ['document-subtitle']
                    },
                    {
                        name: 'Info box',
                        element: 'p',
                        classes: ['info-box']
                    },
                    {
                        name: 'Side quote',
                        element: 'blockquote',
                        classes: ['side-quote']
                    },
                    {
                        name: 'Marker',
                        element: 'span',
                        classes: ['marker']
                    },
                    {
                        name: 'Spoiler',
                        element: 'span',
                        classes: ['spoiler']
                    },
                    {
                        name: 'Code (dark)',
                        element: 'pre',
                        classes: ['fancy-code', 'fancy-code-dark']
                    },
                    {
                        name: 'Code (bright)',
                        element: 'pre',
                        classes: ['fancy-code', 'fancy-code-bright']
                    }
                ]
            },
            table: {
                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
            }
        };

        ClassicEditor.create(document.querySelector('#protocols'), editorConfig);

        ClassicEditor.create(document.querySelector('#manuals'), editorConfig);
    </script>
    <script>

    </script>
@endsection