@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('front.index') }}">Tableau de bord</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.applications') }}">Applications</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.document-editors.index', $application) }}">Éditeurs de documents</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.document-editors.show', ['application' => $application, 'documentEditor' => $documentTemplate]) }}">{{ $documentTemplate->name ?: 'Document' }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Éditeur</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-4">
        <!-- Header -->
        <div class="row mb-3">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">
                        <i class="fas fa-edit me-2"></i>Éditeur de document
                    </h2>
                    <div class="d-flex gap-2">
                        <select id="orientation" class="form-select form-select-sm" style="width: auto;">
                            <option value="portrait">Portrait</option>
                            <option value="landscape">Paysage</option>
                        </select>
                        <button type="button" id="addPageBtn" class="btn btn-sm btn-primary">
                            <i class="fas fa-plus me-1"></i>Ajouter une page
                        </button>
                        <button type="button" id="generatePdfBtn" class="btn btn-sm btn-success">
                            <i class="fas fa-file-pdf me-1"></i>Générer PDF
                        </button>
                        <a href="{{ route('partner.document-editors.show', ['application' => $application, 'documentEditor' => $documentTemplate]) }}" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-arrow-left me-1"></i>Retour
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <!-- Document Canvas (Left) -->
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-body p-3">
                        <div id="document-canvas-container" style="position: relative; background: #f5f5f5; min-height: 800px; overflow: auto;">
                            <div id="document-canvas" style="position: relative; width: 210mm; height: 297mm; margin: 20px auto; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
                                <!-- Pages will be added here -->
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Modèle PDF (fond multipage)</label>
                            <div class="d-flex gap-2 flex-wrap">
                                <div class="flex-grow-1">
                                    <input type="file" id="pdf-template-file" accept=".pdf" class="form-control form-control-sm">
                                </div>
                                <button type="button" id="apply-pdf-template-btn" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-file-pdf me-1"></i>Appliquer le PDF
                                </button>
                            </div>
                            <small class="text-muted">Chaque page du PDF deviendra un fond de page.</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Block Creator (Right) -->
            <div class="col-lg-4">
                <div class="card shadow-sm">
                    <div class="card-header text-black">
                        <h5 class="mb-0">
                            <i class="fas fa-plus-circle me-2"></i>Créer un bloc
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Contenu du bloc</label>
                            <div id="block-editor" style="min-height: 200px;"></div>
                            <input type="hidden" id="block-content-hidden">
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <label class="form-label fw-bold small">Couleur texte</label>
                                <input type="color" id="block-text-color" class="form-control form-control-color" value="#000000">
                                <div class="d-flex align-items-center mt-1">
                                    <label for="block-text-alpha" class="me-2 small mb-0">Opacité</label>
                                    <input type="range" id="block-text-alpha" class="form-range flex-grow-1" min="0" max="1" step="0.05" value="1">
                                </div>
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-bold small">Couleur fond</label>
                                <input type="color" id="block-bg-color" class="form-control form-control-color" value="#ffffff">
                                <div class="d-flex align-items-center mt-1">
                                    <label for="block-bg-alpha" class="me-2 small mb-0">Opacité</label>
                                    <input type="range" id="block-bg-alpha" class="form-range flex-grow-1" min="0" max="1" step="0.05" value="1">
                                </div>
                            </div>
                        </div>
                        <button type="button" id="create-block-btn" class="btn btn-primary w-100">
                            <i class="fas fa-plus me-2"></i>Créer le bloc
                        </button>
                    </div>
                </div>

                @if(!empty($dataMappings))
                <!-- Ajouter une donnée -->
                <div class="card shadow-sm mt-3">
                    <div class="card-header text-black">
                        <h5 class="mb-0">
                            <i class="fas fa-magic me-2"></i>Ajouter une donnée
                        </h5>
                    </div>
                    <div class="card-body">
                        <label class="form-label fw-bold small mb-1">Donnée dynamique</label>
                        <select id="dynamic-data-select" class="form-select form-select-sm">
                            <option value="">Sélectionnez une donnée</option>
                            @foreach($dataMappings as $group)
                                <optgroup label="{{ $group['group'] }}">
                                    @foreach($group['fields'] as $field)
                                        <option value="{{ $field['key'] }}">{{ $field['label'] }}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                        <small class="text-muted d-block mt-1">Le bloc créé sera automatiquement transparent et alimenté par la donnée choisie.</small>
                        <button type="button" id="insert-dynamic-data-btn" class="btn btn-outline-secondary w-100 mt-2">
                            <i class="fas fa-bolt me-2"></i>Insérer la donnée sélectionnée
                        </button>
                    </div>
                </div>
                @endif

                <!-- Fond de page -->
                <div class="card shadow-sm mt-3">
                    <div class="card-header text-black">
                        <h5 class="mb-0">
                            <i class="fas fa-image me-2"></i>Fond de page
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex gap-2 flex-wrap">
                            <div class="flex-grow-1">
                                <input type="file" id="background-file" accept=".pdf,.jpg,.jpeg,.png,.gif" class="form-control form-control-sm">
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" id="upload-background-btn" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-upload me-1"></i>Ajouter
                                </button>
                                <button type="button" id="remove-background-btn" class="btn btn-sm btn-outline-danger" disabled>
                                    <i class="fas fa-trash-alt me-1"></i>Supprimer
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Image à insérer -->
                <div class="card shadow-sm mt-3">
                    <div class="card-header text-black">
                        <h5 class="mb-0">
                            <i class="fas fa-image me-2"></i>Image à insérer
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex gap-2 flex-wrap">
                            <div class="flex-grow-1">
                                <input type="file" id="block-image-file" accept=".jpg,.jpeg,.png,.gif,.svg" class="form-control form-control-sm">
                            </div>
                            <button type="button" id="add-image-block-btn" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-image me-1"></i>Ajouter l'image
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Blocks Z-Index Manager (Bottom) -->
        <div class="offcanvas-trigger position-fixed" style="bottom: 30px; right: 30px; z-index: 1050;">
            <button type="button" class="btn btn-primary shadow" id="open-block-order-modal">
                <i class="fas fa-layer-group me-2"></i>Ordre des blocs
            </button>
        </div>
    </div>

    @include('modals.missing-program-data', [
        'missingDataUrl' => $manageDataUrl ?? null,
        'missingDataEntityLabel' => $manageDataEntityLabel ?? null
    ])

    <!-- Hidden inputs for current page and document template -->
    <input type="hidden" id="current-page" value="1">
    <input type="hidden" id="document-template-id" value="{{ $documentTemplate->id }}">
    <input type="hidden" id="application-id" value="{{ $application->id }}">

    <style>
        .document-block {
            position: absolute;
            cursor: move;
            border: 2px dashed #007bff;
            padding: 10px;
            min-width: 100px;
            min-height: 50px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        document.addEventListener('hidden.bs.offcanvas', function(event) {
            if (event.target.id === 'documentBlockOrderOffcanvas') {
                updateZIndexList();
            }
        });
        .document-block:hover {
            border-color: #0056b3;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        .document-block:hover .block-delete-btn {
            opacity: 1;
        }
        .document-block.selected {
            border-color: #28a745;
            border-style: solid;
        }
        .block-delete-btn {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #dc3545;
            color: white;
            border: 2px solid white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 1000;
        }
        .block-delete-btn:hover {
            background: #c82333;
        }
        .document-block.image-block {
            padding: 0;
            border: 2px solid rgba(0, 123, 255, 0.5);
            background: transparent;
        }
        .document-block.image-block img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }
        .resize-handle {
            position: absolute;
            width: 14px;
            height: 14px;
            background: #0d6efd;
            border: 2px solid #fff;
            border-radius: 50%;
            bottom: -8px;
            right: -8px;
            cursor: se-resize;
            z-index: 1001;
        }
        .document-page {
            position: relative;
            margin-bottom: 20px;
            border: 1px solid #ddd;
        }
        .document-page.active-page {
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35);
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const documentCanvas = document.getElementById('document-canvas');
        const blockEditor = document.getElementById('block-editor');
        const createBlockBtn = document.getElementById('create-block-btn');
        const blocksZIndexList = document.getElementById('blocks-z-index-list');
        const orientationSelect = document.getElementById('orientation');
        const currentPageInput = document.getElementById('current-page');
        const documentTemplateId = document.getElementById('document-template-id').value;
        const applicationId = document.getElementById('application-id').value;
        const removeBackgroundBtn = document.getElementById('remove-background-btn');
        const backgroundFileInput = document.getElementById('background-file');
        const blockImageInput = document.getElementById('block-image-file');
        const addImageBlockBtn = document.getElementById('add-image-block-btn');
        const pdfTemplateInput = document.getElementById('pdf-template-file');
        const applyPdfTemplateBtn = document.getElementById('apply-pdf-template-btn');
        const initialBackgrounds = @json($documentTemplate->backgrounds ?? []);
        const dataMappings = @json($dataMappings ?? []);
        let pageBackgrounds = initialBackgrounds && typeof initialBackgrounds === 'object'
            ? JSON.parse(JSON.stringify(initialBackgrounds))
            : {};
        const blockOrderOffcanvas = document.getElementById('documentBlockOrderOffcanvas');
        const blockOrderOffcanvasInstance = blockOrderOffcanvas ? new bootstrap.Offcanvas(blockOrderOffcanvas) : null;
        const dynamicDataSelect = document.getElementById('dynamic-data-select');
        const insertDynamicDataBtn = document.getElementById('insert-dynamic-data-btn');
        const dynamicMappingDictionary = {};
        dataMappings.forEach(group => {
            (group.fields || []).forEach(field => {
                dynamicMappingDictionary[field.key] = field;
            });
        });
        const missingDataModalElement = document.getElementById('missingDynamicDataModal');
        const missingDataModal = missingDataModalElement ? new bootstrap.Modal(missingDataModalElement) : null;
        const missingDataNameElement = document.getElementById('missing-dynamic-data-name');
        
        let quillEditor = null;
        let blocks = [];
        let selectedBlock = null;
        let currentPage = 1;
        let pages = [];
        let zIndexCounter = 1;
        let blockToDelete = null; // Block to delete after confirmation
        let isResizing = false;
        let resizeContext = null;

        function hexToRgba(hex, alpha = 1) {
            if (!hex) {
                return `rgba(0, 0, 0, ${alpha})`;
            }
            if (hex === 'transparent') {
                return 'transparent';
            }
            let normalized = hex.replace('#', '');
            if (normalized.length === 3) {
                normalized = normalized.split('').map(ch => ch + ch).join('');
            }
            const bigint = parseInt(normalized, 16);
            const r = (bigint >> 16) & 255;
            const g = (bigint >> 8) & 255;
            const b = bigint & 255;
            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        }

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text ?? '';
            return div.innerHTML;
        }

        function getPageBackground(pageNum) {
            return pageBackgrounds[String(pageNum)] ?? null;
        }

        function setPageBackgroundEntry(pageNum, data) {
            pageBackgrounds[String(pageNum)] = data;
        }

        function removePageBackgroundEntry(pageNum) {
            delete pageBackgrounds[String(pageNum)];
        }

        function ensurePageExists(pageNum) {
            pageNum = parseInt(pageNum, 10) || 1;
            if (!pages.includes(pageNum)) {
                pages.push(pageNum);
                pages.sort((a, b) => a - b);
            }
            if (!document.getElementById(`page-${pageNum}`)) {
                createPageElement(pageNum);
            } else {
                applyPageBackground(pageNum);
            }
        }

        function setCurrentPage(pageNum) {
            currentPage = pageNum;
            currentPageInput.value = pageNum;
            document.querySelectorAll('.document-page').forEach(page => {
                page.classList.toggle('active-page', page.id === `page-${pageNum}`);
            });
            updateBackgroundControls();
        }

        function applyPageBackground(pageNum) {
            const pageElement = document.getElementById(`page-${pageNum}`);
            if (!pageElement) return;
            const background = getPageBackground(pageNum);
            if (background && background.url) {
                pageElement.style.backgroundImage = `url(${background.url})`;
                pageElement.style.backgroundSize = 'cover';
                pageElement.style.backgroundPosition = 'center';
            } else {
                pageElement.style.backgroundImage = '';
            }
        }

        function updateBackgroundControls() {
            if (removeBackgroundBtn) {
                removeBackgroundBtn.disabled = !getPageBackground(currentPage);
            }
        }

        function deleteBackgroundFile(pageNum, path) {
            if (!path) {
                return Promise.resolve();
            }

            return fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/background`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ path, page: pageNum })
            }).then(response => {
                if (!response.ok) {
                    throw new Error('Erreur lors de la suppression du fond');
                }
                return response.json();
            });
        }

        // Initialize Quill editor
        quillEditor = new Quill('#block-editor', {
            theme: 'snow',
            placeholder: 'Saisissez le contenu du bloc...',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link'],
                    ['clean']
                ]
            }
        });

        // Update canvas orientation
        orientationSelect.addEventListener('change', function() {
            const isLandscape = this.value === 'landscape';
            documentCanvas.style.width = isLandscape ? '297mm' : '210mm';
            documentCanvas.style.height = isLandscape ? '210mm' : '297mm';
        });

        if (addImageBlockBtn) {
            addImageBlockBtn.addEventListener('click', function() {
                if (!blockImageInput || !blockImageInput.files.length) {
                    alert('Veuillez sélectionner une image.');
                    return;
                }

                const file = blockImageInput.files[0];
                const formData = new FormData();
                formData.append('file', file);
                formData.append('type', 'image');
                formData.append('page', currentPage);

                addImageBlockBtn.disabled = true;
                addImageBlockBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Chargement...';

                fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/upload`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        createBlock(
                            `<img src="${data.url}" alt="Bloc image">`,
                            '#000000',
                            'transparent',
                            1,
                            0,
                            100,
                            100,
                            zIndexCounter++,
                            {
                                isImage: true,
                                imageUrl: data.url,
                                imagePath: data.path,
                                width: 200,
                                height: 150
                            }
                        );
                        blockImageInput.value = '';
                    } else {
                        alert('Erreur lors de l\'upload de l\'image.');
                    }
                })
                .catch(error => {
                    console.error('Error uploading image:', error);
                    alert('Erreur lors de l\'upload de l\'image.');
                })
                .finally(() => {
                    addImageBlockBtn.disabled = false;
                    addImageBlockBtn.innerHTML = '<i class="fas fa-image me-1"></i>Ajouter l\'image';
                });
            });
        }

        if (applyPdfTemplateBtn) {
            applyPdfTemplateBtn.addEventListener('click', function() {
                if (!pdfTemplateInput || !pdfTemplateInput.files.length) {
                    alert('Veuillez sélectionner un fichier PDF.');
                    return;
                }

                const file = pdfTemplateInput.files[0];
                const formData = new FormData();
                formData.append('file', file);
                formData.append('type', 'pdf');

                applyPdfTemplateBtn.disabled = true;
                const originalLabel = applyPdfTemplateBtn.innerHTML;
                applyPdfTemplateBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Conversion...';

                fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/upload`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.backgrounds) {
                        pageBackgrounds = data.backgrounds;
                        const pageNumbers = Object.keys(pageBackgrounds)
                            .map(num => parseInt(num, 10))
                            .filter(num => !Number.isNaN(num))
                            .sort((a, b) => a - b);

                        if (!pageNumbers.length) {
                            pageNumbers.push(1);
                        }

                        pageNumbers.forEach(page => {
                            ensurePageExists(page);
                            applyPageBackground(page);
                        });

                        setCurrentPage(pageNumbers[0]);
                        updateBackgroundControls();
                        pdfTemplateInput.value = '';
                    } else {
                        alert(data.error || 'Erreur lors de l\'application du PDF.');
                    }
                })
                .catch(error => {
                    console.error('Error processing PDF:', error);
                    alert('Erreur lors du traitement du PDF.');
                })
                .finally(() => {
                    applyPdfTemplateBtn.disabled = false;
                    applyPdfTemplateBtn.innerHTML = originalLabel;
                });
            });
        }

        document.getElementById('open-block-order-modal').addEventListener('click', function() {
            if (blockOrderOffcanvasInstance) {
                blockOrderOffcanvasInstance.show();
                updateZIndexList();
            }
        });

        // Add page
        document.getElementById('addPageBtn').addEventListener('click', function() {
            const newPage = (pages.length ? Math.max(...pages) : 0) + 1;
            ensurePageExists(newPage);
            setCurrentPage(newPage);
        });

        function createPageElement(pageNum) {
            const pageDiv = document.createElement('div');
            pageDiv.className = 'document-page';
            pageDiv.id = `page-${pageNum}`;
            pageDiv.style.width = documentCanvas.style.width || '210mm';
            pageDiv.style.height = documentCanvas.style.height || '297mm';
            pageDiv.style.marginBottom = '20px';
            pageDiv.style.position = 'relative';
            pageDiv.style.background = 'white';
            pageDiv.style.border = '1px solid #ddd';
            
            const pageLabel = document.createElement('div');
            pageLabel.className = 'text-center p-2 bg-light';
            pageLabel.textContent = `Page ${pageNum}`;
            pageLabel.style.cursor = 'pointer';
            pageDiv.appendChild(pageLabel);

            pageDiv.addEventListener('click', function(e) {
                if (e.target.closest('.document-block')) return;
                setCurrentPage(pageNum);
            });

            pageLabel.addEventListener('click', function(e) {
                e.stopPropagation();
                setCurrentPage(pageNum);
            });
            
            documentCanvas.appendChild(pageDiv);
            applyPageBackground(pageNum);
        }

        const initialPageNumbers = (() => {
            const bgPages = Object.keys(pageBackgrounds).map(key => parseInt(key, 10)).filter(num => !Number.isNaN(num));
            return bgPages.length ? bgPages : [1];
        })();

        initialPageNumbers.forEach(page => ensurePageExists(page));
        setCurrentPage(initialPageNumbers[0] || 1);
        updateBackgroundControls();

        if (dynamicDataSelect && insertDynamicDataBtn) {
            insertDynamicDataBtn.addEventListener('click', function() {
                const selectedKey = dynamicDataSelect.value;
                if (!selectedKey) {
                    alert('Veuillez sélectionner une donnée à insérer.');
                    return;
                }

                const mapping = dynamicMappingDictionary[selectedKey];
                if (!mapping) {
                    alert('Donnée introuvable.');
                    return;
                }

                const value = (mapping.value ?? '').trim();
                if (!value) {
                    if (missingDataNameElement) {
                        missingDataNameElement.textContent = mapping.label || 'cette donnée';
                    }
                    if (missingDataModal) {
                        missingDataModal.show();
                    } else {
                        alert('Aucune valeur n\'est disponible pour ce champ.');
                    }
                    return;
                }

                const safeValue = escapeHtml(mapping.value);
                const formattedValue = safeValue.replace(/\r?\n/g, '<br>');

                createBlock(
                    `<p>${formattedValue}</p>`,
                    '#000000',
                    '#ffffff',
                    1,
                    0,
                    50,
                    50,
                    zIndexCounter++
                );
            });
        }

        // Create block
        createBlockBtn.addEventListener('click', function() {
            const content = quillEditor.root.innerHTML;
            const textColor = document.getElementById('block-text-color').value;
            const bgColor = document.getElementById('block-bg-color').value;
            const textAlpha = parseFloat(document.getElementById('block-text-alpha').value || '1');
            const bgAlpha = parseFloat(document.getElementById('block-bg-alpha').value || '1');
            
            if (!content || content.trim() === '<p><br></p>') {
                alert('Veuillez saisir un contenu pour le bloc');
                return;
            }

            createBlock(content, textColor, bgColor, textAlpha, bgAlpha, 50, 50, zIndexCounter++);
        });

        function createBlock(content, textColor, bgColor, textAlpha, bgAlpha, x, y, zIndex, options = {}) {
            const blockId = 'block-' + Date.now();
            ensurePageExists(currentPage);
            const pageElement = document.getElementById(`page-${currentPage}`);
            if (!pageElement) {
                console.error('Impossible de trouver la page courante pour ajouter le bloc.');
                return;
            }
            
            const blockDiv = document.createElement('div');
            blockDiv.className = 'document-block';
            blockDiv.id = blockId;
            blockDiv.style.left = x + 'px';
            blockDiv.style.top = y + 'px';
            blockDiv.style.color = hexToRgba(textColor, textAlpha);
            blockDiv.style.backgroundColor = hexToRgba(bgColor, bgAlpha);
            blockDiv.style.zIndex = zIndex;
            blockDiv.dataset.textHex = textColor;
            blockDiv.dataset.bgHex = bgColor;
            blockDiv.dataset.textAlpha = textAlpha;
            blockDiv.dataset.bgAlpha = bgAlpha;
            blockDiv.dataset.isImage = options.isImage ? '1' : '0';
            blockDiv.dataset.imageUrl = options.imageUrl || '';
            blockDiv.dataset.imagePath = options.imagePath || '';
            
            // Create content wrapper
            const contentDiv = document.createElement('div');
            if (options.isImage && options.imageUrl) {
                blockDiv.classList.add('image-block');
                const imgElement = document.createElement('img');
                imgElement.src = options.imageUrl;
                imgElement.alt = 'Bloc image';
                contentDiv.appendChild(imgElement);

                blockDiv.style.width = (options.width || 200) + 'px';
                blockDiv.style.height = (options.height || 150) + 'px';

                const resizeHandle = document.createElement('div');
                resizeHandle.className = 'resize-handle';
                resizeHandle.addEventListener('mousedown', function(e) {
                    e.stopPropagation();
                    startResizing(blockDiv, e);
                });
                blockDiv.appendChild(resizeHandle);
            } else {
                contentDiv.innerHTML = content;
            }
            blockDiv.appendChild(contentDiv);
            
            // Create delete button
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'block-delete-btn';
            deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
            deleteBtn.type = 'button';
            deleteBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                blockToDelete = blockDiv;
                const deleteModal = new bootstrap.Modal(document.getElementById('deleteDocumentBlockModal'));
                deleteModal.show();
            });
            blockDiv.appendChild(deleteBtn);
            
            // Make block draggable
            makeBlockDraggable(blockDiv);
            
            // Add click handler
            blockDiv.addEventListener('click', function(e) {
                if (e.target.closest('.block-delete-btn')) return;
                e.stopPropagation();
                selectBlock(blockDiv);
            });
            
            pageElement.appendChild(blockDiv);
            
            // Add block to array immediately (with temporary ID)
            const tempId = 'temp-' + Date.now();
            blockDiv.dataset.dataId = tempId;
            const blockObj = {
                id: tempId,
                element: blockDiv,
                blockId: blockId
            };
            blocks.push(blockObj);
            updateZIndexList();
            
            const blockWidth = blockDiv.offsetWidth;
            const blockHeight = blockDiv.offsetHeight;
            
            // Save to server
            saveBlock(
                blockId,
                content,
                textColor,
                bgColor,
                textAlpha,
                bgAlpha,
                x,
                y,
                zIndex,
                currentPage,
                blockWidth,
                blockHeight,
                options.isImage || false,
                options.imageUrl || null,
                options.imagePath || null
            ).then(data => {
                // Update with real ID from server
                blockDiv.dataset.dataId = data.id;
                blockObj.id = data.id;
                updateZIndexList();
            }).catch(error => {
                console.error('Error saving block:', error);
                // Remove block if save failed
                const index = blocks.findIndex(b => b.id === tempId);
                if (index > -1) {
                    blocks.splice(index, 1);
                    blockDiv.remove();
                    updateZIndexList();
                }
            });
        }

        function makeBlockDraggable(blockElement) {
            let isDragging = false;
            let currentX = 0;
            let currentY = 0;
            let pointerOffsetX = 0;
            let pointerOffsetY = 0;

            blockElement.addEventListener('mousedown', function(e) {
                if (e.target.closest('.ql-toolbar') || e.target.closest('.block-delete-btn') || e.target.closest('.resize-handle')) return;

                const pageContainer = blockElement.parentElement;
                if (!pageContainer) return;

                const blockRect = blockElement.getBoundingClientRect();

                pointerOffsetX = e.clientX - blockRect.left;
                pointerOffsetY = e.clientY - blockRect.top;

                isDragging = true;
                blockElement.style.cursor = 'grabbing';
            });

            document.addEventListener('mousemove', function(e) {
                if (!isDragging) return;

                e.preventDefault();

                const pageContainer = blockElement.parentElement;
                if (!pageContainer) return;

                const pageRect = pageContainer.getBoundingClientRect();

                currentX = e.clientX - pageRect.left - pointerOffsetX;
                currentY = e.clientY - pageRect.top - pointerOffsetY;

                const blockRect = blockElement.getBoundingClientRect();
                const maxX = pageRect.width - blockRect.width;
                const maxY = pageRect.height - blockRect.height;

                currentX = Math.max(0, Math.min(currentX, maxX));
                currentY = Math.max(0, Math.min(currentY, maxY));

                blockElement.style.left = currentX + 'px';
                blockElement.style.top = currentY + 'px';
            });

            document.addEventListener('mouseup', function() {
                if (!isDragging) return;

                isDragging = false;
                blockElement.style.cursor = 'move';

                const dataId = blockElement.dataset.dataId;
                if (dataId && !dataId.startsWith('temp-')) {
                    updateBlockPosition(
                        dataId,
                        currentX,
                        currentY,
                        blockElement.offsetWidth,
                        blockElement.offsetHeight
                    );
                }
            });
        }

        function startResizing(blockElement, event) {
            isResizing = true;
            resizeContext = {
                blockElement,
                startX: event.clientX,
                startY: event.clientY,
                startWidth: blockElement.offsetWidth,
                startHeight: blockElement.offsetHeight,
                pageRect: blockElement.parentElement ? blockElement.parentElement.getBoundingClientRect() : null,
            };
            document.body.style.userSelect = 'none';
        }

        document.addEventListener('mousemove', function(e) {
            if (!isResizing || !resizeContext) return;
            e.preventDefault();

            const deltaX = e.clientX - resizeContext.startX;
            const deltaY = e.clientY - resizeContext.startY;

            let newWidth = resizeContext.startWidth + deltaX;
            let newHeight = resizeContext.startHeight + deltaY;

            const minSize = 40;

            if (resizeContext.pageRect) {
                const blockRect = resizeContext.blockElement.getBoundingClientRect();
                const maxWidth = resizeContext.pageRect.width - (blockRect.left - resizeContext.pageRect.left);
                const maxHeight = resizeContext.pageRect.height - (blockRect.top - resizeContext.pageRect.top);
                newWidth = Math.min(newWidth, maxWidth);
                newHeight = Math.min(newHeight, maxHeight);
            }

            resizeContext.blockElement.style.width = Math.max(minSize, newWidth) + 'px';
            resizeContext.blockElement.style.height = Math.max(minSize, newHeight) + 'px';
        });

        document.addEventListener('mouseup', function() {
            if (!isResizing || !resizeContext) return;

            isResizing = false;
            document.body.style.userSelect = '';

            const blockElement = resizeContext.blockElement;
            const dataId = blockElement.dataset.dataId;
            resizeContext = null;

            if (dataId && !dataId.startsWith('temp-')) {
                updateBlockSize(
                    dataId,
                    blockElement.offsetWidth,
                    blockElement.offsetHeight
                );
            }
        });

        function selectBlock(blockElement) {
            // Deselect all
            document.querySelectorAll('.document-block').forEach(b => b.classList.remove('selected'));
            
            // Select this block
            blockElement.classList.add('selected');
            selectedBlock = blockElement;
            
            // Load block content in editor
            const dataId = blockElement.dataset.dataId;
            if (dataId) {
                loadBlockInEditor(dataId);
            }
        }

        function loadBlockInEditor(dataId) {
            const block = blocks.find(b => b.id == dataId);
            if (block) {
                if (block.element.dataset.isImage === '1') {
                    quillEditor.root.innerHTML = '';
                } else {
                    quillEditor.root.innerHTML = block.element.innerHTML;
                }
                document.getElementById('block-text-color').value = block.element.dataset.textHex || '#000000';
                document.getElementById('block-bg-color').value = block.element.dataset.bgHex || '#ffffff';
                document.getElementById('block-text-alpha').value = block.element.dataset.textAlpha || 1;
                document.getElementById('block-bg-alpha').value = block.element.dataset.bgAlpha || 1;
            }
        }

        function saveBlock(blockId, content, textColor, bgColor, textAlpha, bgAlpha, x, y, zIndex, page, width, height, isImage = false, imageUrl = null, imagePath = null) {
            return fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/blocks`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    content: content,
                    x: x,
                    y: y,
                    z_index: zIndex,
                    width: width,
                    height: height,
                    text_color: textColor,
                    background_color: bgColor,
                    text_alpha: textAlpha,
                    background_alpha: bgAlpha,
                    is_image: isImage,
                    image_url: imageUrl,
                    image_path: imagePath,
                    page: page
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    return data.data;
                }
                throw new Error('Failed to save block');
            });
        }

        function updateBlockPosition(dataId, x, y, width, height) {
            fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/blocks/${dataId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    x: x,
                    y: y,
                    width: width,
                    height: height
                })
            })
            .then(response => response.json())
            .catch(error => console.error('Error updating position:', error));
        }

        function updateBlockSize(dataId, width, height) {
            fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/blocks/${dataId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    width: width,
                    height: height
                })
            })
            .then(response => response.json())
            .catch(error => console.error('Error updating size:', error));
        }

        function updateZIndexList() {
            if (!blocksZIndexList) return;
            blocksZIndexList.innerHTML = '';
            const sortedBlocks = [...blocks].sort((a, b) => {
                const zA = parseInt(a.element.style.zIndex) || 0;
                const zB = parseInt(b.element.style.zIndex) || 0;
                return zB - zA;
            });
            
            sortedBlocks.forEach(block => {
                const item = document.createElement('div');
                item.className = 'block-z-item list-group-item';
                item.textContent = `Bloc #${block.id} (z: ${block.element.style.zIndex})`;
                item.dataset.blockId = block.id;
                blocksZIndexList.appendChild(item);
            });
            
            // Make z-index list sortable vertically
            new Sortable(blocksZIndexList, {
                animation: 150,
                direction: 'vertical',
                ghostClass: 'bg-light',
                onEnd: function(evt) {
                    const items = Array.from(blocksZIndexList.children);
                    items.forEach((item, index) => {
                        const blockId = item.dataset.blockId;
                        const block = blocks.find(b => b.id == blockId);
                        if (block) {
                            const newZIndex = items.length - index;
                            block.element.style.zIndex = newZIndex;
                            updateBlockZIndex(blockId, newZIndex);
                        }
                    });
                }
            });
        }

        function updateBlockZIndex(dataId, zIndex) {
            fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/blocks/${dataId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    z_index: zIndex
                })
            })
            .then(response => response.json())
            .catch(error => console.error('Error updating z-index:', error));
        }

        function deleteBlock(blockElement) {
            const dataId = blockElement.dataset.dataId;
            if (!dataId || dataId.startsWith('temp-')) {
                // Block not saved yet, just remove from DOM
                blockElement.remove();
                const index = blocks.findIndex(b => b.element === blockElement);
                if (index > -1) {
                    blocks.splice(index, 1);
                }
                updateZIndexList();
                return;
            }

            fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/blocks/${dataId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Remove from DOM
                    blockElement.remove();
                    // Remove from blocks array
                    const index = blocks.findIndex(b => b.id == dataId);
                    if (index > -1) {
                        blocks.splice(index, 1);
                    }
                    updateZIndexList();
                } else {
                    alert('Erreur lors de la suppression du bloc');
                }
            })
            .catch(error => {
                console.error('Error deleting block:', error);
                alert('Erreur lors de la suppression du bloc');
            });
        }

        if (removeBackgroundBtn) {
            removeBackgroundBtn.addEventListener('click', function() {
                const currentBackground = getPageBackground(currentPage);
                if (!currentBackground) {
                    return;
                }

                removeBackgroundBtn.disabled = true;

                const finalizeRemoval = () => {
                    removePageBackgroundEntry(currentPage);
                    applyPageBackground(currentPage);
                    updateBackgroundControls();
                    if (backgroundFileInput) {
                        backgroundFileInput.value = '';
                    }
                };

                const deletionPromise = currentBackground.path
                    ? deleteBackgroundFile(currentPage, currentBackground.path)
                    : Promise.resolve();

                deletionPromise
                    .catch(error => console.error('Error deleting background:', error))
                    .finally(finalizeRemoval);
            });
        }

        // Upload background
        document.getElementById('upload-background-btn').addEventListener('click', function() {
            if (!backgroundFileInput) {
                return;
            }
            const file = backgroundFileInput.files[0];
            if (!file) {
                alert('Veuillez sélectionner un fichier');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);
            formData.append('type', 'background');
            formData.append('page', currentPage);

            fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/upload`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const finalizeBackground = () => {
                        setPageBackgroundEntry(currentPage, {
                            url: data.url,
                            path: data.path
                        });
                        applyPageBackground(currentPage);
                        updateBackgroundControls();
                        backgroundFileInput.value = '';
                    };

                    const previousBackground = getPageBackground(currentPage);
                    if (previousBackground && previousBackground.path) {
                        deleteBackgroundFile(currentPage, previousBackground.path)
                            .catch(error => console.error('Error deleting previous background:', error))
                            .finally(finalizeBackground);
                    } else {
                        finalizeBackground();
                    }
                }
            })
            .catch(error => console.error('Error uploading file:', error));
        });

        // Generate PDF
        document.getElementById('generatePdfBtn').addEventListener('click', function() {
            const btn = this;
            const originalText = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Génération en cours...';
            
            // Create a form to submit POST request for PDF download
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/partner/${applicationId}/document-editors/${documentTemplateId}/generate-pdf`;
            form.style.display = 'none';
            
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = document.querySelector('meta[name="csrf-token"]').content;
            form.appendChild(csrfInput);
            
            document.body.appendChild(form);
            form.submit();
            
            // Re-enable button after a delay
            setTimeout(() => {
                btn.disabled = false;
                btn.innerHTML = originalText;
                document.body.removeChild(form);
            }, 3000);
        });

        // Load existing blocks
        loadExistingBlocks();
        
        function loadExistingBlocks() {
            fetch(`/partner/${applicationId}/document-editors/${documentTemplateId}/blocks`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.blocks) {
                    data.blocks.forEach(blockData => {
                        const page = blockData.json.page || 1;
                        ensurePageExists(page);
                        
                        const pageElement = document.getElementById(`page-${page}`);
                        if (pageElement) {
                            const blockDiv = document.createElement('div');
                            blockDiv.className = 'document-block';
                            blockDiv.id = 'block-' + blockData.id;
                            blockDiv.dataset.dataId = blockData.id;
                            
                            const position = blockData.position || {};
                            blockDiv.style.left = (position.x || 50) + 'px';
                            blockDiv.style.top = (position.y || 50) + 'px';
                            const storedTextHex = blockData.json.text_color || '#000000';
                            const storedBgHex = blockData.json.background_color || 'transparent';
                            const storedTextAlpha = parseFloat(blockData.json.text_alpha ?? 1);
                            const storedBgAlpha = parseFloat(blockData.json.background_alpha ?? 1);
                            blockDiv.style.color = hexToRgba(storedTextHex, storedTextAlpha);
                            blockDiv.style.backgroundColor = hexToRgba(storedBgHex, storedBgAlpha);
                            blockDiv.dataset.textHex = storedTextHex;
                            blockDiv.dataset.bgHex = storedBgHex;
                            blockDiv.dataset.textAlpha = storedTextAlpha;
                            blockDiv.dataset.bgAlpha = storedBgAlpha;
                            blockDiv.dataset.isImage = blockData.json.is_image ? '1' : '0';
                            blockDiv.dataset.imageUrl = blockData.json.image_url || '';
                            blockDiv.dataset.imagePath = blockData.json.image_path || '';
                            blockDiv.style.zIndex = position.z_index || 1;
                            if (position.width) blockDiv.style.width = position.width + 'px';
                            if (position.height) blockDiv.style.height = position.height + 'px';
                            
                            // Create content wrapper
                            const contentDiv = document.createElement('div');
                            if (blockData.json.is_image && blockData.json.image_url) {
                                blockDiv.classList.add('image-block');
                                const imgElement = document.createElement('img');
                                imgElement.src = blockData.json.image_url;
                                imgElement.alt = 'Bloc image';
                                contentDiv.appendChild(imgElement);

                                const resizeHandle = document.createElement('div');
                                resizeHandle.className = 'resize-handle';
                                resizeHandle.addEventListener('mousedown', function(e) {
                                    e.stopPropagation();
                                    startResizing(blockDiv, e);
                                });
                                blockDiv.appendChild(resizeHandle);
                            } else {
                                contentDiv.innerHTML = blockData.json.content || '';
                            }
                            blockDiv.appendChild(contentDiv);
                            
                            // Create delete button
                            const deleteBtn = document.createElement('button');
                            deleteBtn.className = 'block-delete-btn';
                            deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
                            deleteBtn.type = 'button';
                            deleteBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                blockToDelete = blockDiv;
                                const deleteModal = new bootstrap.Modal(document.getElementById('deleteDocumentBlockModal'));
                                deleteModal.show();
                            });
                            blockDiv.appendChild(deleteBtn);
                            
                            makeBlockDraggable(blockDiv);
                            blockDiv.addEventListener('click', function(e) {
                                if (e.target.closest('.block-delete-btn')) return;
                                e.stopPropagation();
                                selectBlock(blockDiv);
                            });
                            
                            pageElement.appendChild(blockDiv);
                            
                            blocks.push({
                                id: blockData.id,
                                element: blockDiv,
                                blockId: 'block-' + blockData.id
                            });
                            
                            if (position.z_index > zIndexCounter) {
                                zIndexCounter = position.z_index + 1;
                            }
                        }
                    });
                    updateZIndexList();
                }
            })
            .catch(error => console.error('Error loading blocks:', error));
        }

        // Handle delete block confirmation
        document.getElementById('confirmDeleteBlockBtn').addEventListener('click', function() {
            if (blockToDelete) {
                deleteBlock(blockToDelete);
                blockToDelete = null;
                const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteDocumentBlockModal'));
                if (deleteModal) {
                    deleteModal.hide();
                }
            }
        });
    });
    </script>

    @include('modals.document-block-order')
    @include('modals.delete-document-block')
@endsection