@extends('layouts.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        #editor-container {
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            overflow: auto;
        }

        .ql-editor {
            box-sizing: border-box;
            word-wrap: break-word;
            overflow-wrap: break-word;
            -webkit-font-smoothing: antialiased;
            -webkit-text-size-adjust: 100%;
        }

        .ql-editor img {
            max-width: 100% !important;
            /* never exceed container width */
            height: auto !important;
            /* maintain aspect ratio */
            display: block;
            /* avoid inline overflow */
            margin: 12px auto;
            /* optional: center images and give spacing */
        }

        /* If images are inside <figure> or other wrappers */
        .ql-editor figure,
        .ql-editor .image-wrapper {
            max-width: 100%;
            overflow: hidden;
        }
         .editor-wrapper {
    width: 100%;
    max-width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;          
    box-sizing: border-box;
  }

  /* Toolbar stays at top, content area scrolls */
  .editor-toolbar {
    border-bottom: 1px solid #f0f0f0;
    padding: 8px;
    background: #fafafa;
  }

  /* Container that holds the editable area */
  #editor-container {
    height: 400px;              /* fixed visible height you want */
    max-height: 400px;
    overflow-y: auto;           /* SCROLL INSIDE the editor */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    padding: 12px;
    box-sizing: border-box;
  }

  /* Quill editable area - ensure it does not expand outside container */
  .ql-editor {
    box-sizing: border-box;
    min-height: auto !important;   /* let editor fit within the container height */
    max-height: none;              /* handled by parent #editor-container */
    overflow: visible;             /* let parent handle scrolling */
    word-wrap: break-word;
  }

  /* Make images fluid and center them */
  .ql-editor img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 12px auto;
  }

  /* If pasted content includes figure or iframe wrappers */
  .ql-editor figure, .ql-editor iframe {
    max-width: 100%;
    overflow: hidden;
  }

  /* Optional: show a subtle shadow when content is scrollable */
  .editor-wrapper.scrolling #editor-container {
    box-shadow: inset 0 6px 10px -6px rgba(0,0,0,0.08);
  }
    </style>
@endsection
@section('content')
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Faq', 'url' => route('admin.faqs.index'), 'active' => false],
            ['label' => 'Create', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row ">
        <div class="col-xxl-8 col-xl-7">
            <x-ui.card title="Create New Faq">

                <form action="{{ route('admin.faqs.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row gy-3">
                        <x-form.input label="Title:" class="" name="title" placeholder="Enter title" autofocus />

                        <x-form.select name="category_id" col="col-xl-6 mt-3" label="Faq Category:"
                            placeholder="Select Category" :required="true" :options="$categories->pluck('name', 'id')" :selected="old('category_id')" />

                        <x-form.textarea col="col-xl-12" label="Short Info of Answer" name="excerpt" :required="true" />

                        <x-form.input label="Youtube Video Url Option:" class="" name="video_url"
                            placeholder="Enter url" autofocus :required="false" />

                        <h5>Attached Media</h5>
                        <div id="attachedMedia" class="d-flex flex-wrap gap-2">
                            @if (!empty($media))
                                @foreach ($media as $m)
                                    <div class="card p-2" data-media-id="{{ $m->id }}">
                                        <img src="{{ asset('uploads/faq/' . $m->file_name) }}"
                                            style="width:160px!important; height:90px; object-fit:cover;">
                                        <div class="mt-1 text-center">
                                            <button class="btn btn-sm btn-danger remove-media"
                                                data-id="{{ $m->id }}">Remove</button>
                                        </div>
                                        <input type="hidden" name="media_ids[]" value="{{ $m->id }}">
                                        <input type="hidden" name="file_names[]" value="{{ $m->file_name }}">
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Content</label>
                            <div id="editor-container">{!! old('content', $faq->content ?? '') !!}</div>
                            <input type="hidden" name="content" id="contentInput">
                        </div>

                    </div>

        </div>
        </x-ui.card>

        <div class="col-xxl-4 col-xl-5">
            <x-ui.card title="Publish&nbsp;<span class='text-danger'>*</span>">
                <div class="mb-3">
                    <label class="form-label">Featured</label>
                    <input type="checkbox" name="is_featured" value="1"
                        @if (old('is_featured', $faq->is_featured ?? 0)) checked @endif>
                    &nbsp;&nbsp;
                    <label class="form-label">Published</label>
                    <input type="checkbox" name="status" value="1" @if (old('status', $faq->status ?? 1)) checked @endif>
                </div>

                <button type="submit" class="btn btn-primary mt-1 px-5">Save</button>
            </x-ui.card>

            <x-ui.card title="Media Image">
                <x-form.dropzone-image name="media" id="uploadmedia" placeholder="assets/images/media-placeholder.svg"
                    sizeLabel="400×200 px" label="Faq Attachment" />
            </x-ui.card>

        </div>
        </form>
    </div>

@endsection

@section('scripts')
    <script src="{{ asset('build/assets/libs/toastify-js/src/toastify.js') }}"></script>
    <!-- Select2 Cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

    <!-- Internal Select-2.js -->
    @vite('resources/assets/js/select2.js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Toolbar options
            var toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'],
                [{
                    'header': 1
                }, {
                    'header': 2
                }],
                [{
                    'list': 'ordered'
                }, {
                    'list': 'bullet'
                }],
                [{
                    'align': []
                }],
                ['link', 'image'],
                ['clean']
            ];

            var quill = new Quill('#editor-container', {
                theme: 'snow',
                placeholder: 'Write your FAQ content here...',
                modules: {
                    toolbar: toolbarOptions
                }
            });


            function uploadImage(file) {
                var formData = new FormData();
                formData.append('file', file);
                formData.append('_token', "{{ csrf_token() }}");

                fetch("{{ route('admin.faqs.uploadMedia') }}", {
                        method: 'POST',
                        body: formData,
                        credentials: 'same-origin'
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data && data.success && data.url) {
                            insertImageToEditor(data.url, data.file_name);
                            addAttachedMedia(data.id, data.url, data.file_name);
                            normalizeEditorImages();

                        } else {
                            alert(data.message || 'Upload failed');
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        alert('Upload failed');
                    });
            }

            function insertImageToEditor(url, fileName) {
                const range = quill.getSelection(true);
                const index = range ? range.index : quill.getLength();
                quill.insertEmbed(index, 'image', url, Quill.sources.USER);
                quill.setSelection(index + 1, Quill.sources.SILENT);

                setTimeout(function() {
                    var imgs = Array.from(quill.root.querySelectorAll('img[src]')).filter(i => i.src ===
                        url);
                    if (imgs.length) {
                        var img = imgs[imgs.length - 1];
                        img.setAttribute('data-file-name', fileName);
                    }
                }, 80);
            }

            quill.getModule('toolbar').addHandler('image', function() {
                var fileInput = this.container.querySelector('input.ql-image[type=file]');
                if (fileInput == null) {
                    fileInput = document.createElement('input');
                    fileInput.setAttribute('type', 'file');
                    fileInput.setAttribute('accept', 'image/*');
                    fileInput.classList.add('ql-image');
                    fileInput.style.display = 'none';
                    this.container.appendChild(fileInput);
                    fileInput.addEventListener('change', function() {
                        if (fileInput.files && fileInput.files[0]) {
                            uploadImage(fileInput.files[0]);
                        }
                    });
                }
                fileInput.click();
            });

            quill.root.addEventListener('paste', function(e) {
                if (e.clipboardData && e.clipboardData.items) {
                    for (var i = 0; i < e.clipboardData.items.length; i++) {
                        var item = e.clipboardData.items[i];
                        if (item.type.indexOf('image') !== -1) {
                            e.preventDefault();
                            var file = item.getAsFile();
                            uploadImage(file);
                        }
                    }
                }
            });

            function addAttachedMedia(id, url, fileName) {
                var container = document.getElementById('attachedMedia');
                var wrapper = document.createElement('div');
                wrapper.className = 'card p-2';
                wrapper.setAttribute('data-media-id', id);
                wrapper.innerHTML = `
            <img src="${url}" alt="">
            <div class="mt-1 text-center">
                <button class="btn btn-sm btn-danger remove-media" data-id="${id}">Remove</button>
            </div>
            <input type="hidden" name="media_ids[]" value="${id}">
            <input type="hidden" name="file_names[]" value="${fileName}">
        `;
                container.appendChild(wrapper);
                attachRemoveHandler(wrapper.querySelector('.remove-media'));
            }

            function attachRemoveHandler(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    var id = this.getAttribute('data-id');
                    var parentCard = this.closest('[data-media-id]');
                    var fileNameInput = parentCard ? parentCard.querySelector(
                        'input[name="file_names[]"]') : null;
                    var fileName = fileNameInput ? fileNameInput.value : null;

                    if (!confirm('Remove this media from FAQ?')) return;


                    const url = `{{ route('admin.faqs.media.delete', ['id' => '__ID__']) }}`.replace(
                        '__ID__', id);
                    fetch(url, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}",
                            'Accept': 'application/json'
                        },
                        credentials: 'same-origin'
                    }).then(resp => resp.json()).then(data => {
                        if (data.success) {
                            // Remove gallery card
                            if (parentCard) parentCard.remove();

                            // Remove hidden inputs that match
                            document.querySelectorAll('input[name="media_ids[]"]').forEach(function(
                                inp) {
                                if (inp.value == id) inp.remove();
                            });
                            if (fileName) {
                                document.querySelectorAll('input[name="file_names[]"]').forEach(
                                    function(inp) {
                                        if (inp.value === fileName) inp.remove();
                                    });

                                // Remove from Quill editor all images matching this filename
                                removeImageFromEditorByFileName(fileName);
                            }
                        } else {
                            alert(data.message || 'Could not delete media');
                        }
                    }).catch(err => {
                        console.error(err);
                        alert('Delete failed');
                    });
                });
            }

            // Attach remove handlers to existing buttons
            document.querySelectorAll('.remove-media').forEach(function(btn) {
                attachRemoveHandler(btn);
            });

            // Remove image(s) from Quill by filename or by src ending with filename
            function removeImageFromEditorByFileName(fileName) {
                if (!fileName) return;
                var needle = fileName.toString();

                // images with data-file-name that match
                let imgs = Array.from(quill.root.querySelectorAll('img[data-file-name]'))
                    .filter(img => {
                        const df = img.getAttribute('data-file-name') || '';
                        return df === needle || df.endsWith(needle);
                    });

                // images with src ending in the filename
                const srcImgs = Array.from(quill.root.querySelectorAll('img[src]'))
                    .filter(img => {
                        try {
                            const src = decodeURIComponent((img.getAttribute('src') || '').split('?')[0]);
                            return src.endsWith('/' + needle) || src.endsWith(needle);
                        } catch (e) {
                            return false;
                        }
                    });

                imgs = imgs.concat(srcImgs);
                // dedupe
                imgs = imgs.filter((v, i, a) => a.indexOf(v) === i);

                imgs.forEach(img => {
                    try {
                        const blot = Quill.find(img);
                        const index = quill.getIndex(blot);
                        quill.deleteText(index, 1, Quill.sources.SILENT);
                    } catch (err) {
                        // fallback DOM removal
                        img.remove();
                    }
                });
            }


            var form = document.querySelector('form');
            form.addEventListener('submit', function() {
                document.getElementById('contentInput').value = quill.root.innerHTML;
            });

            function normalizeEditorImages() {
                // run in a small timeout to allow editor DOM to settle
                setTimeout(function() {
                    var imgs = document.querySelectorAll('#editor-container .ql-editor img');
                    imgs.forEach(function(img) {
                        // remove hard-coded width/height attributes
                        if (img.hasAttribute('width')) img.removeAttribute('width');
                        if (img.hasAttribute('height')) img.removeAttribute('height');

                        // remove inline style width/height if they exist
                        if (img.style) {
                            img.style.width = ''; // clear width
                            img.style.height = ''; // clear height
                            img.style.maxWidth = '100%';
                            img.style.height = 'auto';
                            img.style.display = 'block';
                        }

                        // optionally add class for further styling
                        img.classList.add('ql-editor-img-responsive');
                    });
                }, 50);
            }

            var editorRoot = document.querySelector('#editor-container .ql-editor');
            if (editorRoot) {
                var mo = new MutationObserver(function(mutations) {
                    var shouldNormalize = false;
                    for (var m of mutations) {
                        if (m.addedNodes && m.addedNodes.length) {
                            shouldNormalize = true;
                            break;
                        }
                    }
                    if (shouldNormalize) normalizeEditorImages();
                });
                mo.observe(editorRoot, {
                    childList: true,
                    subtree: true
                });
            }

        });
    </script>
@endsection