@extends('backend.app')

@section('title', 'Terms of Service CMS')

@push('style')
    <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
    <style>
        .ql-editor p {
            margin-bottom: 0px !important;
        }
    </style>
@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">Terms of Service 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">Terms of Service 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('cms.terms-of-service.update') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-5">
                                    <label class="form-label required">Title</label>
                                    <input type="text" name="title" class="form-control mb-2" value="{{ old('title', $page->title ?? '') }}" required>
                                </div>
                                <div class="col-md-6 mb-5">
                                    <label class="form-label required">Last Updated Date</label>
                                    <input type="date" name="last_updated" class="form-control mb-2" value="{{ old('last_updated', $page->content['last_updated'] ?? '') }}" required>
                                </div>
                            </div>
                            <div class="mb-5">
                                <label class="form-label required">Content</label>
                                <div id="editor" style="height: 500px;"></div>
                                <input type="hidden" name="description" id="content_hidden" value="{{ old('description', $page->content['description'] ?? '') }}">
                            </div>
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @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);

                let 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' }],
                            ['link', 'image']
                        ]
                    },
                    placeholder: 'Type your content here...'
                });

                // 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() {
                    document.getElementById('content_hidden').value = quill.root.innerHTML;
                });
                
                // Form submit validation
                $('form').on('submit', function() {
                    document.getElementById('content_hidden').value = quill.root.innerHTML;
                });
            });
        </script>
    @endpush
@endsection