@extends('frontend.layout.layout')
@section('title', $page->title)
@section('meta')
    <meta name="description" content="{{ $page->meta_description }}">
    <meta property="og:description" content="{{ $page->meta_description }}">
    <meta property="og:image" content="{{ asset('storage/uploads/' . $page->og_image) }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta name="twitter:description" content="{{ $page->meta_description }}">
    <meta name="twitter:image" content="{{ asset('storage/uploads/' . $page->og_image) }}">
@endsection
@section('main')
<style>
    .ql-container{
        height: auto!important;
    }
</style>
    @if ($page->type === 'richtext')
        <div class="container mx-auto px-6 md:px-14 py-4">
            <div id="quill-container"></div>
            <input id="url" type="hidden" name="" value="{{ route('page.getcontent', $page->slug) }}">
        </div>
    @endif

    @if ($page->type === 'custom_code')
       
        {!! json_decode($page->content) !!}
    @endif
@endsection


<script>
    document.addEventListener('DOMContentLoaded', () => {
        const contentType = @js($page->type);
           
        if (contentType == 'richtext') {

            (async function getContent()
            {
                const url = document.querySelector('#url').value;
                try {
                    
                    const req = await fetch(`${url}`);
                    const res = await req.json();
                    const content = res.content;
    
                    const quill = new Quill('#quill-container',{ReadOnly: true});
    
                    quill.setContents(content);
                    
                    setTimeout(() => {
                        const quillContainers = document.querySelectorAll('.ql-editor');
                        quillContainers.forEach(container => {
                            container.setAttribute('contenteditable', false);
                        });
                    }, 2000);
    
                } catch (error) {
                    console.log(error);
                }
    
            })();
        }
    });
</script>