@extends('admins.layouts.app')

@section('content')
    <!--Header-->
    <div class="content-header bg-white mb-0 py-3 pt-0 border-bottom">
        <div class="container-fluid">
            <div class="d-flex flex-wrap align-items-center justify-content-between" style="row-gap: 8px;">
                <div class="d-flex align-items-center">
                    @if (Auth::guard('stores')->check())
                        <a href="{{ route('store.products') }}" class="me-2"><i class="bi bi-arrow-left"></i></a>
                    @else
                        <a href="{{ route('admin.products.index') }}" class="me-2"><i class="bi bi-arrow-left"></i></a>
                    @endif
                    <h3 class="mb-1">
                     Description Editor - {{ substr($product->name, 0, 20) }}  {{strlen($product->name) > 20 ? '...' : ''}} </h3>
                </div><!-- /.col -->
                <div></div>
                <div class="text-right">

                </div>
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <div class="container-fluid mt-4 mb-5">


       <div class="mt-3">
           <div id="quill-editor-toolbar">
               <select class="ql-header"></select>
               <button class="ql-header"></button>
               <button class="ql-color"></button>
               <button class="ql-background"></button>
               <button class="ql-bold"></button>
               <button class="ql-italic"></button>
               <button class="ql-underline"></button>
               <button class="ql-strike"></button>
               <span class="ql-format">
            <button class="ql-indent" value="-1" type="button"></button>
            <button class="ql-indent" value="+1" type="button"></button>
          </span>
               <button class="ql-indent"></button>
               <select class="ql-align"></select>
               <button class="ql-clean"></button>
               <button class="ql-link"></button>
               <button class="ql-image"></button>
               <button class="ql-showHtml" style="margin-right: 8px;">HTML</button>
           </div>
           <div id="quill-editor" style="height: 375px;"></div>
            <div class="mt-3 d-flex justify-content-end mb-5">
                <form action="{{ route('admin.products.code-block-store',['product'=>$product->id]) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-dark">Save Description
                    </button>
                    <input type="hidden" name="description" class="quill-text-output" />
                </form>
            </div>
       </div>

        <div class="card p-3">
            <div class="quill-html-output"></div>
        </div>
    </div>


@endsection
@push('script')
    <script>
        this.quill = new Quill("#quill-editor", {
            modules: {
                toolbar: {
                    container: "#quill-editor-toolbar",
                }
            },
            theme: 'snow'
        })

        $(document).ready( function () {
            const description = @js($product->description);
            document.querySelector('.quill-text-output').value = description
            document.querySelector('.quill-html-output').innerHTML = description
            const editor = document.querySelector('#quill-editor')
            editor.children[0].innerHTML = description;
        });

        function PreviewHTML() {
            const txtArea = document.createElement('textarea')

            txtArea.style.cssText = "width: 100%;margin: 0px;background: rgb(29, 29, 29);box-sizing: border-box;color: rgb(204, 204, 204);font-size: 15px;outline: none;padding: 20px;line-height: 24px;font-family: Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace;position: absolute;top: 0;bottom: 0;border: none;display:none"

            const htmlEditor = this.quill.addContainer('ql-custom')
            htmlEditor.appendChild(txtArea)

            const selfQuill = this.quill
            const myEditor = document.querySelector('#quill-editor')

            this.quill.on('text-change', function(delta, oldDelta, source) {
                const text = selfQuill.root.innerHTML
                const html = myEditor.children[0].innerHTML
                txtArea.value = html

                document.querySelector('.quill-text-output').value = text
                document.querySelector('.quill-html-output').innerHTML = html
            })

            const customButton = document.querySelector('.ql-showHtml');

            customButton.addEventListener('click', function() {
                if (txtArea.style.display === '') {
                    const html = txtArea.value
                    selfQuill.pasteHTML(html)
                }
                txtArea.style.display = txtArea.style.display === 'none' ? '' : 'none'
            })
        }

        PreviewHTML()
    </script>
@endpush