@extends('backend.app')

@section('title', 'Shop CMS')

@push('style')
    <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
@endpush

@section('content')
    <div class="content fs-6 d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="toolbar" id="kt_toolbar">
            <div class="container-fluid d-flex flex-stack flex-wrap flex-sm-nowrap">
                <div class="d-flex flex-column align-items-start justify-content-center flex-wrap me-2">
                    <h1 class="text-dark fw-bold my-1 fs-2">Shop CMS</h1>
                    <ul class="breadcrumb fw-semibold fs-base my-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <li class="breadcrumb-item text-dark">Shop CMS</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="post fs-6 d-flex flex-column-fluid" id="kt_post">
            <div class="container-fluid">
                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                <div class="card card-flush">
                    <div class="card-body">
                        <form action="{{ route('admin.shop.cms.update') }}" method="POST">
                            @csrf
                            <div class="mb-5">
                                <label class="form-label required fw-bold fs-6">Shop Title</label>
                                <input type="text" name="title" class="form-control" value="{{ old('title', $page->content['title'] ?? '') }}" required>
                            </div>

                            <div class="mb-5">
                                <label class="form-label required fw-bold fs-6">Shop Description</label>
                                <div id="editor" style="height: 100px;"></div>
                                <input type="hidden" name="description" id="content_hidden" value="{{ old('description', $page->content['description'] ?? '') }}">
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-check fs-2 me-1"></i> Save Changes
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script>
        $(document).ready(function() {
            // Register inline styles instead of class names
            const Size = Quill.import('attributors/style/size');
            Size.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '32px'];
            Quill.register(Size, true);

            const Align = Quill.import('attributors/style/align');
            Quill.register(Align, true);

            // Inject custom CSS to display numeric font sizes in the toolbar dropdown
            const sizeCss = `
            .ql-snow .ql-picker.ql-size .ql-picker-label::before,
            .ql-snow .ql-picker.ql-size .ql-picker-item::before {
                content: '14px' !important;
            }
            .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
                content: '12px' !important;
            }
            .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
                content: '14px' !important;
            }
            .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
                content: '16px' !important;
            }
            .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
                content: '18px' !important;
            }
            .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
                content: '20px' !important;
            }
            .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
                content: '24px' !important;
            }
            .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
                content: '32px' !important;
            }
            `;
            const styleEl = document.createElement('style');
            styleEl.innerHTML = sizeCss;
            document.head.appendChild(styleEl);

            // Custom header styling to bypass frontend resets
            const Header = Quill.import('formats/header');
            class CustomHeader extends Header {
                static create(value) {
                    const node = super.create(value);
                    if (value === 1) {
                        node.setAttribute('style', 'font-size: 2em !important; font-weight: bold !important; margin-top: 0.67em !important; margin-bottom: 0.67em !important; display: block !important;');
                    } else if (value === 2) {
                        node.setAttribute('style', 'font-size: 1.5em !important; font-weight: bold !important; margin-top: 0.83em !important; margin-bottom: 0.83em !important; display: block !important;');
                    } else if (value === 3) {
                        node.setAttribute('style', 'font-size: 1.17em !important; font-weight: bold !important; margin-top: 1em !important; margin-bottom: 1em !important; display: block !important;');
                    } else if (value === 4) {
                        node.setAttribute('style', 'font-size: 1em !important; font-weight: bold !important; margin-top: 1.33em !important; margin-bottom: 1.33em !important; display: block !important;');
                    } else if (value === 5) {
                        node.setAttribute('style', 'font-size: 0.83em !important; font-weight: bold !important; margin-top: 1.67em !important; margin-bottom: 1.67em !important; display: block !important;');
                    } else if (value === 6) {
                        node.setAttribute('style', 'font-size: 0.67em !important; font-weight: bold !important; margin-top: 2.33em !important; margin-bottom: 2.33em !important; display: block !important;');
                    }
                    return node;
                }
            }
            Quill.register(CustomHeader, true);

            var quill = new Quill('#editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'size': ['12px', false, '16px', '18px', '20px', '24px', '32px'] }],
                        [{ 'align': [] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        ['clean']
                    ]
                }
            });

            // Safely load HTML content dynamically to prevent double newline parser bugs
            quill.root.innerHTML = {!! json_encode(old('description', $page->content['description'] ?? '')) !!};

            quill.on('text-change', function() {
                $('#content_hidden').val(quill.root.innerHTML);
            });

            $('form').on('submit', function() {
                $('#content_hidden').val(quill.root.innerHTML);
            });
        });
    </script>
@endpush