@props([
    'id' => 'view-graph-export-toolbar',
    'targetSelector' => '#org-tree-root',
    'filenamePrefix' => 'Struktura_organizacyjna',
    'titleDoc' => 'Eksport do DOC',
    'titlePdf' => 'Eksport do PDF',
    'titlePng' => 'Eksport do PNG',
    'titleHtml' => 'Eksport do HTML',
    'titlePrint' => 'Drukuj widok',
])

<div id="{{ $id }}" class="d-inline-flex align-items-center odo-export-toolbar view-graph-export-toolbar">
    <button type="button" class="btn btn-primary btn_table_status btn-outline-secondary js-view-graph-export-btn" data-format="doc" data-toggle="tooltip" title="{{ $titleDoc }}">
        <i class="fas fa-file-word fa-lg"></i>
    </button>
    <button type="button" class="btn btn-danger btn_table_status btn-outline-secondary js-view-graph-export-btn" data-format="pdf" data-toggle="tooltip" title="{{ $titlePdf }}">
        <i class="fas fa-file-pdf fa-lg"></i>
    </button>
    <button type="button" class="btn btn-success btn_table_status btn-outline-secondary js-view-graph-export-btn" data-format="png" data-toggle="tooltip" title="{{ $titlePng }}">
        <i class="fas fa-file-image fa-lg"></i>
    </button>
    <button type="button" class="btn btn-info btn_table_status btn-outline-secondary js-view-graph-export-btn" data-format="html" data-toggle="tooltip" title="{{ $titleHtml }}">
        <i class="fas fa-file-code fa-lg"></i>
    </button>
    <button type="button" class="btn btn-secondary btn_table_status btn-outline-secondary js-view-graph-export-btn" data-format="print" data-toggle="tooltip" title="{{ $titlePrint }}">
        <i class="fas fa-print fa-lg"></i>
    </button>
</div>

<style>
    .view-graph-export-toolbar .btn {
        margin-left: 4px;
    }
</style>

<script>
    (function () {
        var toolbarId = @json($id);
        var targetSelector = @json($targetSelector);
        var filenamePrefix = @json($filenamePrefix);
        var scriptLoaded = window.__viewGraphExportScriptsLoaded || {};

        function nowStamp() {
            var d = new Date();
            var pad = function (v) { return String(v).padStart(2, '0'); };
            return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate())
                + '_' + pad(d.getHours()) + '-' + pad(d.getMinutes()) + '-' + pad(d.getSeconds());
        }

        function safeFilename(ext) {
            return filenamePrefix + '_' + nowStamp() + '.' + ext;
        }

        function downloadBlob(blob, fileName) {
            var link = document.createElement('a');
            var url = URL.createObjectURL(blob);
            link.href = url;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            setTimeout(function () {
                URL.revokeObjectURL(url);
                link.remove();
            }, 300);
        }

        function collectStyles() {
            var css = '';
            document.querySelectorAll('style').forEach(function (styleTag) {
                css += '\n' + (styleTag.textContent || '');
            });
            css += '\n/* Eksport: laczniki zawsze pod kartami */';
            css += '\n.org-tree-root li::before, .org-tree-root li::after, .org-tree-root ul ul::before, .org-tree-root ul.org-leaf-group > li::before { z-index: 0 !important; }';
            css += '\n.org-card-wrap, .org-card { position: relative !important; z-index: 2 !important; }';
            css += '\n/* Eksport: pojedyncze linie lacznikow (bez podwojen) */';
            css += '\n.org-tree-root li::before, .org-tree-root li::after, .org-tree-root ul ul::before, .org-tree-root ul.org-leaf-group > li::before { border-width: 1px !important; }';
            css += '\n.org-tree-root ul.org-leaf-group > li::after { display: none !important; content: none !important; border: 0 !important; }';
            css += '\n.org-tree-root ul.org-leaf-group::before { display: none !important; content: none !important; border: 0 !important; }';
            css += '\n.org-tree-root ul.org-leaf-group > li::before { display: block !important; left: 240px !important; top: -19px !important; width: 20px !important; height: 92px !important; border-right: 1px solid #75a8d3 !important; border-bottom: 1px solid #75a8d3 !important; border-top: 0 !important; border-left: 0 !important; }';
            css += '\n.org-node-actions, .org-node-toggle { display: none !important; }';
            css += '\nbody { background: #ffffff; margin: 0; padding: 16px; }';
            return css;
        }

        function getVisibleSnapshotRoot() {
            var source = document.querySelector(targetSelector);
            if (!source) {
                return null;
            }

            var clone = source.cloneNode(true);
            clone.querySelectorAll('.org-node-actions, .org-node-toggle').forEach(function (item) {
                item.remove();
            });

            clone.querySelectorAll('.org-children.collapsed, .org-children[hidden]').forEach(function (item) {
                item.remove();
            });

            return clone;
        }

        function buildExportHtmlDoc(title, extraCss) {
            var clone = getVisibleSnapshotRoot();
            if (!clone) {
                return null;
            }

            var wrapper = document.createElement('div');
            wrapper.className = 'org-tree-export-document';
            wrapper.appendChild(clone);

            return '<!doctype html><html><head><meta charset="utf-8"><title>' + title + '</title><style>'
                + collectStyles()
                + '\n' + String(extraCss || '')
                + '</style></head><body>'
                + wrapper.innerHTML
                + '</body></html>';
        }

        function ensureScript(url, checkFnName, key) {
            return new Promise(function (resolve, reject) {
                if (checkFnName()) {
                    resolve();
                    return;
                }
                if (scriptLoaded[key]) {
                    scriptLoaded[key].then(resolve).catch(reject);
                    return;
                }

                scriptLoaded[key] = new Promise(function (innerResolve, innerReject) {
                    var s = document.createElement('script');
                    s.src = url;
                    s.async = true;
                    s.onload = function () { innerResolve(); };
                    s.onerror = function () { innerReject(new Error('Nie udało się załadować biblioteki: ' + key)); };
                    document.head.appendChild(s);
                });

                scriptLoaded[key].then(resolve).catch(reject);
            });
        }

        function renderCloneToCanvas(extraCss) {
            var clone = getVisibleSnapshotRoot();
            if (!clone) {
                return Promise.reject(new Error('Nie znaleziono widoku do eksportu.'));
            }

            return ensureScript(
                'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js',
                function () { return typeof window.html2canvas === 'function'; },
                'html2canvas'
            ).then(function () {
                var host = document.createElement('div');
                host.style.position = 'fixed';
                host.style.left = '-100000px';
                host.style.top = '0';
                host.style.background = '#ffffff';
                host.style.padding = '16px';
                host.style.zIndex = '-1';

                var styleTag = document.createElement('style');
                styleTag.textContent = collectStyles() + '\n' + String(extraCss || '');
                host.appendChild(styleTag);
                host.appendChild(clone);
                document.body.appendChild(host);

                return window.html2canvas(host, {
                    backgroundColor: '#ffffff',
                    useCORS: true,
                    scale: 2
                }).then(function (canvas) {
                    host.remove();
                    return canvas;
                }).catch(function (err) {
                    host.remove();
                    throw err;
                });
            });
        }

        function exportDoc() {
            var html = buildExportHtmlDoc(filenamePrefix);
            if (!html) {
                return;
            }
            var blob = new Blob([html], { type: 'application/msword;charset=utf-8' });
            downloadBlob(blob, safeFilename('doc'));
        }

        function exportHtml() {
            var html = buildExportHtmlDoc(filenamePrefix, '.org-tree-root ul.org-leaf-group > li::before { top: -40px !important; }');
            if (!html) {
                return;
            }
            var blob = new Blob([html], { type: 'text/html;charset=utf-8' });
            downloadBlob(blob, safeFilename('html'));
        }

        function exportPng() {
            renderCloneToCanvas('.org-tree-root ul.org-leaf-group > li::before { left: 230px !important; top: -40px !important; }').then(function (canvas) {
                canvas.toBlob(function (blob) {
                    if (!blob) {
                        return;
                    }
                    downloadBlob(blob, safeFilename('png'));
                }, 'image/png');
            }).catch(function (err) {
                console.error(err);
                alert('Nie udało się wygenerować PNG.');
            });
        }

        function exportPdf() {
            Promise.all([
                renderCloneToCanvas('.org-tree-root ul.org-leaf-group > li::before { left: 230px !important; top: -40px !important; }'),
                ensureScript(
                    'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js',
                    function () { return !!(window.jspdf && window.jspdf.jsPDF); },
                    'jspdf'
                )
            ]).then(function (results) {
                var canvas = results[0];
                var imgData = canvas.toDataURL('image/png');
                var jsPDF = window.jspdf.jsPDF;

                var orientation = canvas.width >= canvas.height ? 'landscape' : 'portrait';
                var pdf = new jsPDF({
                    orientation: orientation,
                    unit: 'px',
                    format: [canvas.width, canvas.height]
                });
                pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height, undefined, 'FAST');
                pdf.save(safeFilename('pdf'));
            }).catch(function (err) {
                console.error(err);
                alert('Nie udało się wygenerować PDF.');
            });
        }

        function printCurrentView() {
            var html = buildExportHtmlDoc(filenamePrefix, '.org-tree-root ul.org-leaf-group > li::before { top: -40px !important; }');
            if (!html) {
                return;
            }

            var printWindow = window.open('', '_blank');
            if (!printWindow) {
                alert('Przeglądarka zablokowała okno wydruku.');
                return;
            }

            printWindow.document.open();
            printWindow.document.write(html);
            printWindow.document.close();
            printWindow.focus();
            setTimeout(function () {
                printWindow.print();
            }, 250);
        }

        $(document).on('click', '#' + toolbarId + ' .js-view-graph-export-btn', function () {
            var format = String($(this).data('format') || '').toLowerCase();
            if (!format) {
                return;
            }

            if (format === 'doc') {
                exportDoc();
                return;
            }
            if (format === 'html') {
                exportHtml();
                return;
            }
            if (format === 'png') {
                exportPng();
                return;
            }
            if (format === 'pdf') {
                exportPdf();
                return;
            }
            if (format === 'print') {
                printCurrentView();
            }
        });
    })();
</script>