@props(['session','tags'])
<div id="modalT" data-modal-backdrop="static" tabindex="-1" aria-hidden="true"
     class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-4 w-full max-w-2xl max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Add note
                </h3>
                <button type="button"
                        id="close-modal"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                        data-modal-hide="modalT">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                         viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
{{--            TODO hier wordt deze endpoint schijnbaar gebruikt--}}
            <form id="add-note" action="/notes/{{$session}}" method="POST">
                @csrf
                <div class="p-4 md:p-5 space-y-4">
                    <div class="sm:col-span-6 mb-4">

                        <label for="note_tag_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Tag
                        </label>

                        <select id="note_tag_id" name="note_tag_id"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
                   focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
                   dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
                   dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">

                            @foreach($tags as $tag)
                                <option value="{{ $tag->id }}">
                                    {{ $tag->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="sm:col-span-6 mb-4">
                        <label for="note" class="block text-sm font-medium leading-6 text-gray-900">Note</label>
                        <div class="mt-2">
                            <div id="quill-editor"></div>
                            <input type="hidden" name="content" id="content-input">
                        </div>
                    </div>
                </div>
            </form>
            <script>
                const quill = new Quill('#quill-editor', {
                    theme: 'snow',
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline'],
                            [{ 'color': [] }],
                            ['image']
                        ]
                    }
                });
                function buildItemsFromEditor() {
                    const form = document.getElementById('add-note');

                    // Remove old hidden inputs
                    form.querySelectorAll('.dynamic-item').forEach(el => el.remove());
                    const html = quill.root.innerHTML;

                    const container = document.createElement('div');
                    container.innerHTML = html;

                    const items = [];
                    extractItems(container,items);

                    // Convert items into form fields
                    items.forEach((item, index) => {
                        if (item.type === 'text') {
                            const typeInput = document.createElement('input');
                            typeInput.type = 'hidden';
                            typeInput.name = `items[${index}][type]`;
                            typeInput.value = 'text';
                            typeInput.classList.add('dynamic-item');
                            form.appendChild(typeInput);

                            const valueInput = document.createElement('input');
                            valueInput.type = 'hidden';
                            valueInput.name = `items[${index}][value]`;
                            valueInput.value = item.value; // full HTML safely assigned
                            valueInput.classList.add('dynamic-item');
                            form.appendChild(valueInput);
                        }
                        if (item.type === 'image') {
                            // Convert dataURL to file
                            const file = dataURLtoFile(item.dataUrl, `pasted_${index}.png`);
                            const dt = new DataTransfer();
                            dt.items.add(file);

                            const input = document.createElement('input');
                            input.type = 'file';
                            input.name = `items[${index}][file]`;
                            input.classList.add('dynamic-item');
                            input.files = dt.files;

                            form.appendChild(input);

                            form.insertAdjacentHTML('beforeend', `
                <input class="dynamic-item" type="hidden" name="items[${index}][type]" value="image">
            `);
                        }
                    });
                }

                function extractItems(node, items) {
                    let buffer = '';

                    node.childNodes.forEach(child => {

                        // IMAGE → flush buffer, then push image
                        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === 'IMG') {
                            const html = buffer.trim();
                            if (html.length > 0) {
                                items.push({ type: 'text', value: html });
                            }
                            buffer = '';

                            items.push({ type: 'image', dataUrl: child.src });
                            return;
                        }

                        // ELEMENT WITH IMAGES → flush buffer first, then recurse
                        if (child.nodeType === Node.ELEMENT_NODE && child.querySelector('img')) {
                            const html = buffer.trim();
                            if (html.length > 0) {
                                items.push({ type: 'text', value: html });
                            }
                            buffer = '';

                            extractItems(child, items);
                            return;
                        }

                        // ELEMENT WITHOUT IMAGES → append its HTML to buffer
                        if (child.nodeType === Node.ELEMENT_NODE && !child.querySelector('img')) {
                            buffer += child.outerHTML;
                            return;
                        }

                        // TEXT NODE → append plain text to buffer
                        if (child.nodeType === Node.TEXT_NODE) {
                            buffer += child.textContent;
                        }
                    });

                    // flush remaining buffer
                    const html = buffer.trim();
                    if (html.length > 0) {
                        items.push({ type: 'text', value: html });
                    }
                }

                // Helper: convert base64 → File
                function dataURLtoFile(dataurl, filename) {
                    const arr = dataurl.split(',');
                    const mime = arr[0].match(/:(.*?);/)[1];
                    const bstr = atob(arr[1]);
                    let n = bstr.length;
                    const u8arr = new Uint8Array(n);
                    while (n--) u8arr[n] = bstr.charCodeAt(n);
                    return new File([u8arr], filename, { type: mime });
                }
            </script>
            <script>
                async function addTimestamp (id){
                    // todo om de een of andere reden wordt dezelfde timestamp doorgegeven
                    const timestamp = Date.now()
                    let form = new FormData(document.getElementById('add-note'))
                    form.append('timestamp',timestamp)
                    form.append('recId',window.recId) // als dit leeg is geeft dit de stringwaardfe 'null' op de server
                    document.getElementById('close-modal').click()
                    //document.getElementById('note').value = ''
                    //window.timestamps.push(form)
                    for (let pair of form.entries()) { console.log(pair[0], pair[1]); }

                    fetch('/notes/{{$session}}',
                        {
                            method: 'POST',
                            headers: {
                                'Accept':'application/json, text-plain, *!/!*',
                                "X-Requested-With": "XMLHttpRequest",
                                'url':'/notes/{{$session}}',
                                'X-CSRF-TOKEN': form.get('_token')
                            },
                            credentials: 'same-origin',
                            body:form
                        }).then(res=>{
                        if(res.status===419){
                            // todo ?
                        }
                        //console.log(res)
                        res.json().then((data) => {
                            //console.log(data)
                            // todo enkel indien er een recording loopt dit uitvoeren anders gewoon een reload doen
                            // todo de delete button moet ontoegankelijk zijn en het form zelf laat je weg
                            if(window.recId){
                                // todo aanpassen naar content ipv text
                                document.getElementById('notes')
                                    .insertAdjacentHTML('beforeend',`
                                    <li class="gap-x-6 py-5 bg-gray-200">
                                        <div class="flex min-w-0 justify-between items-center pl-2 pr-2">
                                             <div class="min-w-0 flex-auto"><p class="max-w-2xl text-sm leading-6 text-gray-900">`+data['text']+`</p>
                                                </div>
                            <div class="">
                                <p class="text-sm leading-6 text-gray-600">`+data['timestamp']+`</p>
                            </div>
                        <div class="ml-2 flex">
                                <form>
                                <button type="submit" class="dwr text-white focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center me-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
                                    <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"/>
                                    </svg>
                                    <span class="sr-only">Delete note</span>
                                </button>
                            </form>
                                </div>
                                </div>
                                </li>`)
                                Array.from(document.getElementsByClassName('dwr')).forEach(el=>{
                                    el.setAttribute('disabled','disabled')
                                    el.style.cursor = 'not-allowed'
                                    el.style.userSelect = 'none'
                                })
                            } else window.location.reload()
                        })
                    }).catch(e=>{
                        console.log('e')
                        console.log(e.error)
                    })
                }

                const form  = document.getElementById('add-note')
                form.addEventListener('submit',(e)=>{
                    e.preventDefault()
                    buildItemsFromEditor();
                    addTimestamp({{$session}})
                },true)

            </script>
            <!-- Modal footer -->
            <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button form="add-note" type="submit"
                        class="text-white bg-indigo-600 hover:bg-indigo-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-600 dark:focus:ring-indigo-600">
                    Add
                </button>
                <button data-modal-hide="modalT" type="button"
                        class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>