@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ $homeUrl }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.document-editors.index') }}">Éditeurs de documents</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.document-editors.show', ['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', ['documentEditor' => $documentTemplate]) }}" class="btn btn-sm btn-outline-primary">
                            <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-primary">
                                    <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="mb-3">
                            <label class="form-label fw-bold small">Taille de la police</label>
                            <select id="block-font-size" class="form-select form-select-sm">
                                <option value="8">8px - Très petit</option>
                                <option value="10">10px - Petit</option>
                                <option value="12">12px - Normal</option>
                                <option value="14" selected>14px - Moyen</option>
                                <option value="16">16px - Grand</option>
                                <option value="18">18px - Très grand</option>
                                <option value="20">20px</option>
                                <option value="24">24px</option>
                                <option value="28">28px</option>
                                <option value="32">32px</option>
                                <option value="36">36px</option>
                                <option value="48">48px - Titre</option>
                                <option value="60">60px - Très gros titre</option>
                            </select>
                        </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>

                <!-- 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">
                        @if(!empty($dataMappings))
                            <label class="form-label fw-bold small mb-1">Donnée associée au document</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">Insérez la donnée dans l'éditeur ou créez un bloc transparent.</small>
                            <div class="d-grid gap-2 mt-2">
                                <button type="button" id="insert-in-wysiwyg-btn" class="btn btn-primary btn-sm">
                                    <i class="fas fa-edit me-2"></i>Insérer dans l'éditeur
                                </button>
                                <button type="button" id="insert-dynamic-data-btn" class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-bolt me-2"></i>Créer un bloc transparent
                                </button>
                            </div>
                        @else
                            <div class="alert alert-info mb-0">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Info :</strong> Aucune donnée n'est actuellement disponible pour ce document.
                                Vous pouvez utiliser des <strong>variables dynamiques</strong> ci-dessous et renseigner les ID lors de la génération du PDF.
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Ajouter une variable -->
                <div class="card shadow-sm mt-3">
                    <div class="card-header text-black">
                        <h5 class="mb-0">
                            <i class="fas fa-code me-2"></i>Ajouter une variable
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">
                            <i class="fas fa-info-circle me-1"></i>
                            Insérez des variables dynamiques (ex: <code>programme.nom</code>, <code>lot.numero</code>, <code>client.nom</code>) dans vos blocs.
                            Lors de la génération du PDF, vous pourrez renseigner les ID pour obtenir les vraies données.
                        </p>
                        <div class="d-grid gap-2">
                            <button type="button" id="show-variables-list-btn" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-list me-2"></i>Voir toutes les variables disponibles
                            </button>
                            <button type="button" id="generate-dynamic-pdf-btn" class="btn btn-success">
                                <i class="fas fa-file-pdf me-2"></i>Générer un PDF dynamique
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 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>

                <!-- Signature électronique -->
                <div class="card shadow-sm mt-3">
                    <div class="card-header text-black">
                        <h5 class="mb-0">
                            <i class="fas fa-signature me-2"></i>Signature électronique
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">
                            <i class="fas fa-info-circle me-1"></i>
                            Ajoutez un bloc de signature électronique qui sera utilisé pour intégrer YouSign lors de la génération du PDF.
                        </p>
                        <div class="mb-3">
                            <label for="signature-type-select" class="form-label small fw-bold">Type de signature :</label>
                            <select id="signature-type-select" class="form-select form-select-sm">
                                <option value="client">Client</option>
                                <option value="vendeur">Vendeur</option>
                                <option value="conjoint">Conjoint</option>
                            </select>
                        </div>
                        <button type="button" id="add-signature-block-btn" class="btn btn-sm btn-outline-success w-100">
                            <i class="fas fa-signature me-1"></i>Ajouter un bloc de signature
                        </button>
                    </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 }}">

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

        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;
        }
        .document-block p,
        .document-block span,
        .document-block div,
        .document-block li,
        .document-block strong,
        .document-block em,
        .document-block a {
            font-size: inherit !important;
        }

        .block-content-wrapper {
            width: 100%;
            height: auto;
            min-height: inherit;
            display: block;
        }
        .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;
            width: auto;
        }
        .document-block.image-block img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }
        .document-block.signature-block {
            padding: 10px;
            border: 2px dashed rgba(40, 167, 69, 0.6);
            background: rgba(40, 167, 69, 0.05);
            min-width: 200px;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: move;
        }
        .document-block.signature-block .signature-placeholder {
            color: rgba(40, 167, 69, 0.7);
            font-size: 14px;
            text-align: center;
            font-style: italic;
            pointer-events: none;
            user-select: none;
        }
        .document-block.signature-block .block-content-wrapper {
            pointer-events: none;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .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 documentEditorsBaseUrl = '/document-editors/' + documentTemplateId;
        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 addSignatureBlockBtn = document.getElementById('add-signature-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 ?? []);
        // Construire l'URL de base pour servir les fichiers (sans le paramètre path)
        const fileServeBaseUrl = `${documentEditorsBaseUrl}/file/`;
        const s3DirPrefix = @json(\App\S3\Services\S3EncryptionService::getS3DirPrefix());
        let pageBackgrounds = initialBackgrounds && typeof initialBackgrounds === 'object'
            ? JSON.parse(JSON.stringify(initialBackgrounds))
            : {};

        // Fonction pour convertir une URL de storage en URL de route Laravel
        function getFileUrl(storagePath) {
            if (!storagePath) return null;

            // Si c'est déjà une URL HTTP/HTTPS, la retourner telle quelle
            if (storagePath.startsWith('http://') || storagePath.startsWith('https://')) {
                return storagePath;
            }

            // Vérifier si c'est un chemin S3 (commence par DocumentTemplates/ ou contient le préfixe S3)
            const pathParts = storagePath.split('/');

            // Format S3: {s3_dir_prefix}/DocumentTemplates/{id}/backgrounds/{filename}
            // ou: DocumentTemplates/{id}/backgrounds/{filename}
            if (storagePath.includes('DocumentTemplates/')) {
                // Trouver l'index de DocumentTemplates dans le chemin
                const documentTemplatesIndex = pathParts.findIndex(part => part === 'DocumentTemplates');
                if (documentTemplatesIndex !== -1) {
                    // Prendre tout après DocumentTemplates/
                    const relativePath = pathParts.slice(documentTemplatesIndex).join('/');
                    return fileServeBaseUrl.replace(/\/file\/$/, '/file/' + encodeURIComponent(relativePath));
                }
            }

            // Ancien format : documents_editor/{id}/{filename}
            if (pathParts.length >= 3 && pathParts[0] === 'documents_editor') {
                const fileName = pathParts.slice(2).join('/'); // Prendre tout après documents_editor/{id}/
                return fileServeBaseUrl.replace(/\/file\/$/, '/file/' + encodeURIComponent(fileName));
            }

            // Si le chemin commence directement par le préfixe S3, extraire la partie relative
            // Format: {s3_dir_prefix}/DocumentTemplates/{id}/backgrounds/{filename}
            if (s3DirPrefix && storagePath.startsWith(s3DirPrefix + '/')) {
                const relativePath = storagePath.substring(s3DirPrefix.length + 1);
                return fileServeBaseUrl.replace(/\/file\/$/, '/file/' + encodeURIComponent(relativePath));
            }

            return storagePath; // Fallback vers l'URL originale
        }
        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 insertInWysiwygBtn = document.getElementById('insert-in-wysiwyg-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) {
                // Utiliser le chemin (path) pour générer l'URL via la route Laravel
                let imageUrl = null;
                if (background.path) {
                    imageUrl = getFileUrl(background.path);
                } else if (background.url) {
                    // Fallback vers l'URL si le path n'est pas disponible
                    imageUrl = background.url;
                }

                if (imageUrl) {
                    pageElement.style.backgroundImage = `url(${imageUrl})`;
                    pageElement.style.backgroundSize = 'cover';
                    pageElement.style.backgroundPosition = 'center';
                    pageElement.style.backgroundRepeat = 'no-repeat';
                    console.log('Background appliqué pour la page', pageNum, ':', imageUrl);
                } else {
                    pageElement.style.backgroundImage = '';
                    pageElement.style.backgroundSize = '';
                    pageElement.style.backgroundPosition = '';
                    pageElement.style.backgroundRepeat = '';
                }
            } else {
                pageElement.style.backgroundImage = '';
                pageElement.style.backgroundSize = '';
                pageElement.style.backgroundPosition = '';
                pageElement.style.backgroundRepeat = '';
            }
        }

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

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

            return fetch(`${documentEditorsBaseUrl}/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
        if (typeof Quill !== 'undefined' && blockEditor) {
            quillEditor = new Quill('#block-editor', {
                theme: 'snow',
                placeholder: 'Saisissez le contenu du bloc...',
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        ['link'],
                        ['clean']
                    ]
                }
            });
        } else {
            console.error('Quill.js n\'est pas chargé ou l\'élément #block-editor n\'existe pas');
        }

        // Listen for content changes in Quill editor
        let quillUpdateTimeout;
        if (quillEditor) {
            quillEditor.on('text-change', function() {
            if (!selectedBlock) return;

            clearTimeout(quillUpdateTimeout);
            quillUpdateTimeout = setTimeout(function() {
                const dataId = selectedBlock.dataset.dataId;
                if (!dataId || dataId.startsWith('temp-')) return;

                const content = quillEditor.root.innerHTML;
                const contentDiv = selectedBlock.querySelector('.block-content-wrapper');
                if (contentDiv && selectedBlock.dataset.isImage !== '1') {
                    contentDiv.innerHTML = content;
                }

                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');
                const fontSize = document.getElementById('block-font-size').value || '14';

                updateBlockContent(dataId, content, textColor, bgColor, textAlpha, bgAlpha, fontSize);
            }, 500);
        });
        }

        // Listen for style changes
        function applyStyleChangesToSelectedBlock() {
            if (!selectedBlock) return;

            const dataId = selectedBlock.dataset.dataId;
            if (!dataId || dataId.startsWith('temp-')) return;

            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');
            const fontSize = document.getElementById('block-font-size').value || '14';

            // Update block visual style
            selectedBlock.style.color = hexToRgba(textColor, textAlpha);
            selectedBlock.style.backgroundColor = hexToRgba(bgColor, bgAlpha);
            selectedBlock.style.fontSize = fontSize + 'px';
            selectedBlock.dataset.textHex = textColor;
            selectedBlock.dataset.bgHex = bgColor;
            selectedBlock.dataset.textAlpha = textAlpha;
            selectedBlock.dataset.bgAlpha = bgAlpha;
            selectedBlock.dataset.fontSize = fontSize;

            // Update contentDiv fontSize
            const contentDiv = selectedBlock.querySelector('.block-content-wrapper');
            if (contentDiv) {
                contentDiv.style.fontSize = fontSize + 'px';
            }

            // Save to server
            const content = quillEditor.root.innerHTML;
            updateBlockContent(dataId, content, textColor, bgColor, textAlpha, bgAlpha, fontSize);
        }

        document.getElementById('block-text-color').addEventListener('change', applyStyleChangesToSelectedBlock);
        document.getElementById('block-bg-color').addEventListener('change', applyStyleChangesToSelectedBlock);
        document.getElementById('block-text-alpha').addEventListener('input', applyStyleChangesToSelectedBlock);
        document.getElementById('block-bg-alpha').addEventListener('input', applyStyleChangesToSelectedBlock);
        document.getElementById('block-font-size').addEventListener('change', applyStyleChangesToSelectedBlock);

        // 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(`${documentEditorsBaseUrl}/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) {
                        // Utiliser la route Laravel pour servir l'image au lieu de l'URL directe
                        const imageUrl = getFileUrl(data.path) || data.url;
                        createBlock(
                            `<img src="${imageUrl}" alt="Bloc image">`,
                            '#000000',
                            'transparent',
                            1,
                            0,
                            100,
                            100,
                            zIndexCounter++,
                            {
                                isImage: true,
                                imageUrl: imageUrl,
                                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';
                });
            });
        }

        // Add signature block
        if (addSignatureBlockBtn) {
            addSignatureBlockBtn.addEventListener('click', function() {
                // S'assurer qu'une page existe
                ensurePageExists(currentPage);

                // Récupérer le type de signature sélectionné
                const signatureTypeSelect = document.getElementById('signature-type-select');
                const signatureType = signatureTypeSelect ? signatureTypeSelect.value : 'client';

                // Créer un bloc de signature avec une taille par défaut
                const signatureWidth = 200;
                const signatureHeight = 50;
                const signatureTypeLabels = {
                    'client': 'Client',
                    'vendeur': 'Vendeur',
                    'conjoint': 'Conjoint'
                };
                const signatureContent = `<div class="signature-placeholder"><i class="fas fa-signature me-2"></i>Signature ${signatureTypeLabels[signatureType] || 'électronique'}</div>`;

                // Calculer une position centrée sur la page
                const pageElement = document.getElementById(`page-${currentPage}`);
                let x = 50;
                let y = 50;

                if (pageElement) {
                    const pageRect = pageElement.getBoundingClientRect();
                    x = Math.max(50, (pageRect.width / 2) - (signatureWidth / 2));
                    y = Math.max(50, (pageRect.height / 2) - (signatureHeight / 2));
                }

                createBlock(
                    signatureContent,
                    '#28a745',
                    '#f8f9fa',
                    1,
                    0.05,
                    x,
                    y,
                    zIndexCounter++,
                    {
                        isSignature: true,
                        signatureType: signatureType,
                        width: signatureWidth,
                        height: signatureHeight,
                        fontSize: '14'
                    }
                );
            });
        }

        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(`${documentEditorsBaseUrl}/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) {
                        // Convertir les URLs en utilisant la route Laravel si nécessaire
                        pageBackgrounds = {};
                        Object.keys(data.backgrounds).forEach(pageKey => {
                            const bg = data.backgrounds[pageKey];
                            pageBackgrounds[pageKey] = {
                                path: bg.path,
                                url: bg.path ? getFileUrl(bg.path) : (bg.url || '')
                            };
                        });

                        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';
            pageDiv.style.backgroundRepeat = 'no-repeat';
            pageDiv.style.backgroundSize = 'cover';
            pageDiv.style.backgroundPosition = 'center';

            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);
                // Désélectionner le bloc si on clique sur la page
                deselectBlock();
            });

            pageLabel.addEventListener('click', function(e) {
                e.stopPropagation();
                setCurrentPage(pageNum);
                // Désélectionner le bloc si on clique sur le label
                deselectBlock();
            });

            documentCanvas.appendChild(pageDiv);
            // Appliquer le background immédiatement après la création
            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();

        // Réappliquer les backgrounds après un court délai pour s'assurer que les pages sont créées
        setTimeout(() => {
            initialPageNumbers.forEach(page => {
                applyPageBackground(page);
            });
        }, 100);

        // Désélectionner le bloc si on clique sur le canvas (en dehors des blocs)
        documentCanvas.addEventListener('click', function(e) {
            // Si on clique directement sur le canvas (pas sur une page ou un bloc)
            if (e.target === documentCanvas && !e.target.closest('.document-block')) {
                deselectBlock();
            }
        });

        // Désélectionner le bloc si on clique sur le conteneur du canvas
        const canvasContainer = document.getElementById('document-canvas-container');
        if (canvasContainer) {
            canvasContainer.addEventListener('click', function(e) {
                // Si on clique sur le conteneur mais pas sur une page ou un bloc
                if (e.target === this || (e.target !== documentCanvas && !e.target.closest('.document-page') && !e.target.closest('.document-block'))) {
                    deselectBlock();
                }
            });
        }

        // Insert data in WYSIWYG editor
        if (dynamicDataSelect && insertInWysiwygBtn) {
            insertInWysiwygBtn.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;
                }

                // Insert at cursor position in Quill editor
                const selection = quillEditor.getSelection();
                const cursorPosition = selection ? selection.index : quillEditor.getLength();

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

                // Insert HTML content
                quillEditor.clipboard.dangerouslyPasteHTML(cursorPosition, formattedValue);

                // Move cursor after inserted text
                quillEditor.setSelection(cursorPosition + formattedValue.length);
            });
        }

        // Create transparent block with data
        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>');

                // Utiliser les valeurs actuelles du formulaire pour les styles
                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');
                const fontSize = document.getElementById('block-font-size').value || '14';

                createBlock(
                    `<p>${formattedValue}</p>`,
                    textColor,
                    bgColor,
                    textAlpha,
                    bgAlpha,
                    50,
                    50,
                    zIndexCounter++,
                    { fontSize: fontSize }
                );
            });
        }

        // Create block
        createBlockBtn.addEventListener('click', function() {
            if (!quillEditor) {
                console.error('Quill editor n\'est pas initialisé');
                alert('L\'éditeur n\'est pas prêt. Veuillez rafraîchir la page.');
                return;
            }
            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');
            const fontSize = document.getElementById('block-font-size').value || '14';

            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++, { fontSize: fontSize });
        });

        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. currentPage:', currentPage);
                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;

            // Apply font size if provided
            if (options.fontSize) {
                blockDiv.style.fontSize = options.fontSize + 'px';
            }

            blockDiv.dataset.textHex = textColor;
            blockDiv.dataset.bgHex = bgColor;
            blockDiv.dataset.textAlpha = textAlpha;
            blockDiv.dataset.bgAlpha = bgAlpha;
            blockDiv.dataset.fontSize = options.fontSize || '14';
            blockDiv.dataset.isImage = options.isImage ? '1' : '0';
            blockDiv.dataset.isSignature = options.isSignature ? '1' : '0';
            blockDiv.dataset.signatureType = options.signatureType || 'client';
            blockDiv.dataset.imageUrl = options.imageUrl || '';
            blockDiv.dataset.imagePath = options.imagePath || '';

            // Create content wrapper
            const contentDiv = document.createElement('div');
            contentDiv.className = 'block-content-wrapper';

            // Apply font size to content wrapper
            if (options.fontSize) {
                contentDiv.style.fontSize = options.fontSize + 'px';
            }

            if (options.isSignature) {
                blockDiv.classList.add('signature-block');
                contentDiv.innerHTML = content;

                // Définir la taille du bloc de signature
                const sigWidth = options.width || 200;
                const sigHeight = options.height || 50;
                blockDiv.style.width = sigWidth + 'px';
                blockDiv.style.height = sigHeight + 'px';

                // Ajouter un handle de redimensionnement
                const resizeHandle = document.createElement('div');
                resizeHandle.className = 'resize-handle';
                resizeHandle.addEventListener('mousedown', function(e) {
                    e.stopPropagation();
                    startResizing(blockDiv, e);
                });
                blockDiv.appendChild(resizeHandle);
            } else if (options.isImage && (options.imageUrl || options.imagePath)) {
                blockDiv.classList.add('image-block');
                const imgElement = document.createElement('img');
                // Utiliser le path pour générer l'URL via la route Laravel, sinon utiliser l'URL
                const imageUrl = options.imagePath
                    ? getFileUrl(options.imagePath)
                    : (options.imageUrl || '');
                imgElement.src = imageUrl;
                imgElement.alt = 'Bloc image';
                imgElement.style.width = '100%';
                imgElement.style.height = '100%';
                imgElement.style.objectFit = 'contain';
                imgElement.style.display = 'block';

                // Gérer les erreurs de chargement d'image
                imgElement.onerror = function() {
                    console.error('Erreur de chargement de l\'image:', imageUrl);
                    imgElement.alt = 'Image non disponible';
                    imgElement.style.backgroundColor = '#f0f0f0';
                };

                imgElement.onload = function() {
                    console.log('Image chargée avec succès:', imageUrl);
                };

                contentDiv.appendChild(imgElement);

                blockDiv.style.width = (options.width || 200) + 'px';
                blockDiv.style.height = (options.height || 75) + '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();

            // Save dimensions for image blocks and signature blocks (text blocks should auto-size to content)
            const blockWidth = (options.isImage || options.isSignature) ? blockDiv.offsetWidth : null;
            const blockHeight = (options.isImage || options.isSignature) ? blockDiv.offsetHeight : null;

            // 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,
                options.fontSize || '14',
                options.isSignature || false,
                options.signatureType || 'client'
            ).then(data => {
                // Update with real ID from server
                blockDiv.dataset.dataId = data.id;
                blockObj.id = data.id;
                updateZIndexList();

                // Réinitialiser uniquement le contenu de l'éditeur, conserver les valeurs de style
                if (quillEditor) {
                    quillEditor.root.innerHTML = '';
                }
            }).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-')) {
                    // Only save position, not dimensions (dimensions are only saved during explicit resize)
                    updateBlockPositionOnly(dataId, currentX, currentY);
                }
            });
        }

        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 deselectBlock() {
            // Deselect all blocks
            document.querySelectorAll('.document-block').forEach(b => b.classList.remove('selected'));
            selectedBlock = null;

            // Clear the editor only, keep style values
            if (quillEditor) {
                quillEditor.root.innerHTML = '';
            }

            // Ne pas réinitialiser les champs de style pour conserver les valeurs
        }

        function loadBlockInEditor(dataId) {
            const block = blocks.find(b => b.id == dataId);
            if (block) {
                if (block.element.dataset.isImage === '1' || block.element.dataset.isSignature === '1') {
                    quillEditor.root.innerHTML = '';
                } else {
                    const contentDiv = block.element.querySelector('.block-content-wrapper');
                    quillEditor.root.innerHTML = contentDiv ? contentDiv.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;
                document.getElementById('block-font-size').value = block.element.dataset.fontSize || '14';
            }
        }

        function saveBlock(blockId, content, textColor, bgColor, textAlpha, bgAlpha, x, y, zIndex, page, width, height, isImage = false, imageUrl = null, imagePath = null, fontSize = '14', isSignature = false, signatureType = 'client') {
            return fetch(`${documentEditorsBaseUrl}/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,
                    is_signature: isSignature,
                    signature_type: signatureType,
                    image_url: imageUrl,
                    image_path: imagePath,
                    page: page,
                    font_size: fontSize
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    return data.data;
                }
                throw new Error('Failed to save block');
            });
        }

        function updateBlockPositionOnly(dataId, x, y) {
            fetch(`${documentEditorsBaseUrl}/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
                })
            })
            .then(response => response.json())
            .catch(error => console.error('Error updating position:', error));
        }

        function updateBlockPosition(dataId, x, y, width, height) {
            fetch(`${documentEditorsBaseUrl}/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(`${documentEditorsBaseUrl}/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(`${documentEditorsBaseUrl}/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 updateBlockContent(dataId, content, textColor, bgColor, textAlpha, bgAlpha, fontSize) {
            fetch(`${documentEditorsBaseUrl}/blocks/${dataId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    content: content,
                    text_color: textColor,
                    background_color: bgColor,
                    text_alpha: textAlpha,
                    background_alpha: bgAlpha,
                    font_size: fontSize
                })
            })
            .then(response => response.json())
            .catch(error => console.error('Error updating block content:', 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(`${documentEditorsBaseUrl}/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(`${documentEditorsBaseUrl}/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
                        });
                        // Réappliquer le background avec la nouvelle URL
                        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 Dynamic PDF
        const generateDynamicPdfBtn = document.getElementById('generate-dynamic-pdf-btn');
        const generateDynamicPdfModal = document.getElementById('generateDynamicPdfModal');
        const generateDynamicPdfModalInstance = generateDynamicPdfModal ? new bootstrap.Modal(generateDynamicPdfModal) : null;

        if (generateDynamicPdfBtn && generateDynamicPdfModalInstance) {
            generateDynamicPdfBtn.addEventListener('click', function() {
                generateDynamicPdfModalInstance.show();
            });
        }

        const confirmGenerateDynamicPdfBtn = document.getElementById('confirm-generate-dynamic-pdf-btn');
        if (confirmGenerateDynamicPdfBtn) {
            confirmGenerateDynamicPdfBtn.addEventListener('click', function() {
                const programId = document.getElementById('dynamic-program-id').value;
                const productId = document.getElementById('dynamic-product-id').value;
                const clientId = document.getElementById('dynamic-client-id').value;

                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...';

                // Create a form to submit POST request for PDF download with dynamic IDs
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `${documentEditorsBaseUrl}/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);

                // Add dynamic IDs
                if (programId) {
                    const programInput = document.createElement('input');
                    programInput.type = 'hidden';
                    programInput.name = 'program_id';
                    programInput.value = programId;
                    form.appendChild(programInput);
                }

                if (productId) {
                    const productInput = document.createElement('input');
                    productInput.type = 'hidden';
                    productInput.name = 'product_id';
                    productInput.value = productId;
                    form.appendChild(productInput);
                }

                if (clientId) {
                    const clientInput = document.createElement('input');
                    clientInput.type = 'hidden';
                    clientInput.name = 'client_id';
                    clientInput.value = clientId;
                    form.appendChild(clientInput);
                }

                document.body.appendChild(form);
                form.submit();

                // Re-enable button and close modal after a delay
                setTimeout(() => {
                    btn.disabled = false;
                    btn.innerHTML = originalText;
                    document.body.removeChild(form);
                    if (generateDynamicPdfModalInstance) {
                        generateDynamicPdfModalInstance.hide();
                    }
                }, 3000);
            });
        }

        // Show Available Variables Modal
        const showVariablesListBtn = document.getElementById('show-variables-list-btn');
        const availableVariablesModal = document.getElementById('availableVariablesModal');
        const availableVariablesModalInstance = availableVariablesModal ? new bootstrap.Modal(availableVariablesModal) : null;

        if (showVariablesListBtn && availableVariablesModalInstance) {
            showVariablesListBtn.addEventListener('click', function() {
                availableVariablesModalInstance.show();
                loadAvailableVariables();
            });
        }

        function loadAvailableVariables() {
            // Get all mapping data from the current dataMappings
            const programVariablesContainer = document.getElementById('program-variables');
            const lotVariablesContainer = document.getElementById('lot-variables');
            const lotReservationVariablesContainer = document.getElementById('lot-reservation-variables');
            const clientVariablesContainer = document.getElementById('client-variables');
            const coacheteurVariablesContainer = document.getElementById('coacheteur-variables');
            const societeVariablesContainer = document.getElementById('societe-variables');

            if (!programVariablesContainer || !lotVariablesContainer || !lotReservationVariablesContainer || !clientVariablesContainer || !coacheteurVariablesContainer || !societeVariablesContainer) {
                return;
            }

            // Clear containers
            programVariablesContainer.innerHTML = '';
            lotVariablesContainer.innerHTML = '';
            lotReservationVariablesContainer.innerHTML = '';
            clientVariablesContainer.innerHTML = '';
            coacheteurVariablesContainer.innerHTML = '';
            societeVariablesContainer.innerHTML = '';

            // Separate variables by category
            let programVars = [];
            let lotVars = [];
            let clientVars = [];
            let coacheteurVars = [];
            let societeVars = [];

            // If dataMappings exists, use them
            if (dataMappings && dataMappings.length > 0) {
                dataMappings.forEach(group => {
                    (group.fields || []).forEach(field => {
                        if (field.key.startsWith('programme.') || field.key.startsWith('program.')) {
                            programVars.push({ key: field.key, label: field.label });
                        } else if (field.key.startsWith('lot.') || field.key.startsWith('product.')) {
                            lotVars.push({ key: field.key, label: field.label });
                        } else if (field.key.startsWith('client.')) {
                            clientVars.push({ key: field.key, label: field.label });
                        } else if (field.key.startsWith('coacheteur.')) {
                            coacheteurVars.push({ key: field.key, label: field.label });
                        } else if (field.key.startsWith('societe.')) {
                            societeVars.push({ key: field.key, label: field.label });
                        }
                    });
                });
            }

            // Add generic variables if empty (fallback list)
            if (programVars.length === 0) {
                programVars = [
                    { key: 'programme.nom', label: 'Nom du programme' },
                    { key: 'programme.adresse', label: 'Adresse' },
                    { key: 'programme.code_postal', label: 'Code postal' },
                    { key: 'programme.ville', label: 'Ville' },
                    { key: 'programme.departement', label: 'Département' },
                    { key: 'programme.description', label: 'Description' },
                ];
            }

            // Toujours s'assurer que les variables lot de base existent,
            // même si des variables de réservation lot.reservation.* sont présentes
            const defaultLotVars = [
                { key: 'lot.numero', label: 'Numéro du lot' },
                { key: 'lot.type', label: 'Type de lot' },
                { key: 'lot.etage', label: 'Étage' },
                { key: 'lot.surface', label: 'Surface' },
                { key: 'lot.orientation', label: 'Orientation' },
                { key: 'lot.prix.ttc', label: 'Prix TTC' },
                { key: 'lot.tantieme', label: 'Tantième' },
            ];

            defaultLotVars.forEach(defVar => {
                const exists = lotVars.some(v => v.key === defVar.key);
                if (!exists) {
                    lotVars.push(defVar);
                }
            });

            if (clientVars.length === 0) {
                clientVars = [
                    { key: 'client.civility', label: 'Civilité' },
                    { key: 'client.nom', label: 'Nom' },
                    { key: 'client.prenom', label: 'Prénom' },
                    { key: 'client.nom_complet', label: 'Nom complet' },
                    { key: 'client.email', label: 'Email' },
                    { key: 'client.telephone', label: 'Téléphone' },
                    { key: 'client.birthdate', label: 'Date de naissance' },
                    { key: 'client.birthplace', label: 'Lieu de naissance' },
                    { key: 'client.date_mariage_pacs', label: 'Date de mariage ou Pacs' },
                    { key: 'client.lieu_mariage_pacs', label: 'Lieu de mariage ou Pacs' },
                    { key: 'client.adresse', label: 'Adresse' },
                    { key: 'client.code_postal', label: 'Code postal' },
                    { key: 'client.ville', label: 'Ville' },
                    { key: 'client.pays', label: 'Pays' },
                    { key: 'client.societe', label: 'Société' },
                    { key: 'client.profession', label: 'Profession' },
                    { key: 'client.fonction', label: 'Fonction' },
                    { key: 'client.employeur', label: 'Employeur' },
                    { key: 'client.x_is_marie', label: 'Marié(e) (X)' },
                    { key: 'client.x_is_pacs', label: 'Pacsé(e) (X)' },
                    { key: 'client.x_is_divorce', label: 'Divorcé(e) (X)' },
                    { key: 'client.x_is_veuf', label: 'Veuf(ve) (X)' },
                    { key: 'client.x_is_celibataire', label: 'Célibataire (X)' },
                    { key: 'client.x_is_union_libre', label: 'Union libre (X)' },
                ];
            }

            // Générer les variables coacheteur à partir des variables client
            // En remplaçant "client" par "coacheteur"
            coacheteurVars = clientVars.map(variable => ({
                key: variable.key.replace(/^client\./, 'coacheteur.'),
                label: variable.label.replace(/^Client/i, 'Coacheteur').replace(/client/i, 'coacheteur')
            }));

            // Display program variables
            if (programVars.length > 0) {
                programVars.forEach(variable => {
                    const col = document.createElement('div');
                    col.className = 'col-md-6 mb-3';
                    col.innerHTML = `
                        <div class="variable-badge bg-white text-primary border border-2 border-start-primary"
                             style="border-left: 4px solid var(--bs-primary) !important;"
                             data-variable="${variable.key}"
                             data-category="program"
                             onclick="copyVariableToClipboard('${variable.key}')"
                             title="Cliquer pour copier">
                            <i class="fas fa-copy me-1"></i>
                            <code class="text-primary">${variable.key}</code>
                        </div>
                        <small class="text-muted d-block mt-1 ms-2">${variable.label}</small>
                    `;
                    programVariablesContainer.appendChild(col);
                });
            } else {
                programVariablesContainer.innerHTML = '<div class="col-12 text-muted small">Aucune variable programme disponible</div>';
            }

            // Séparer les variables lot "générales" et les variables de réservation
            const lotReservationVars = lotVars.filter(v => v.key.startsWith('lot.reservation.'));
            const baseLotVars = lotVars.filter(v => !v.key.startsWith('lot.reservation.'));

            // Display base lot variables (en vert, sous "Variables Lot")
            if (baseLotVars.length > 0) {
                baseLotVars.forEach(variable => {
                    const col = document.createElement('div');
                    col.className = 'col-md-6 mb-3';
                    col.innerHTML = `
                        <div class="variable-badge bg-white text-success border border-2 border-start-success"
                             style="border-left: 4px solid var(--bs-success) !important;"
                             data-variable="${variable.key}"
                             data-category="lot"
                             onclick="copyVariableToClipboard('${variable.key}')"
                             title="Cliquer pour copier">
                            <i class="fas fa-copy me-1"></i>
                            <code class="text-success">${variable.key}</code>
                        </div>
                        <small class="text-muted d-block mt-1 ms-2">${variable.label}</small>
                    `;
                    lotVariablesContainer.appendChild(col);
                });
            } else {
                lotVariablesContainer.innerHTML = '<div class="col-12 text-muted small">Aucune variable lot disponible</div>';
            }

            // Display lot reservation variables (en pourpre, sous "Variables Réservation du lot")
            if (lotReservationVars.length > 0) {
                lotReservationVars.forEach(variable => {
                    const col = document.createElement('div');
                    col.className = 'col-md-6 mb-3';
                    col.innerHTML = `
                        <div class="variable-badge bg-white text-purple border border-2 border-purple"
                             style="border-left: 4px solid #6f42c1 !important;"
                             data-variable="${variable.key}"
                             data-category="lot-reservation"
                             onclick="copyVariableToClipboard('${variable.key}')"
                             title="Cliquer pour copier">
                            <i class="fas fa-copy me-1"></i>
                            <code class="text-purple">${variable.key}</code>
                        </div>
                        <small class="text-muted d-block mt-1 ms-2">${variable.label}</small>
                    `;
                    lotReservationVariablesContainer.appendChild(col);
                });
            } else {
                lotReservationVariablesContainer.innerHTML = '<div class="col-12 text-muted small">Aucune variable réservation de lot disponible</div>';
            }

            // Display client variables
            if (clientVars.length > 0) {
                clientVars.forEach(variable => {
                    const col = document.createElement('div');
                    col.className = 'col-md-6 mb-3';
                    col.innerHTML = `
                        <div class="variable-badge bg-white text-info border border-2 border-start-info"
                             style="border-left: 4px solid var(--bs-info) !important;"
                             data-variable="${variable.key}"
                             data-category="client"
                             onclick="copyVariableToClipboard('${variable.key}')"
                             title="Cliquer pour copier">
                            <i class="fas fa-copy me-1"></i>
                            <code class="text-info">${variable.key}</code>
                        </div>
                        <small class="text-muted d-block mt-1 ms-2">${variable.label}</small>
                    `;
                    clientVariablesContainer.appendChild(col);
                });
            } else {
                clientVariablesContainer.innerHTML = '<div class="col-12 text-muted small">Aucune variable client disponible</div>';
            }

            // Display coacheteur variables
            if (coacheteurVars.length > 0) {
                coacheteurVars.forEach(variable => {
                    const col = document.createElement('div');
                    col.className = 'col-md-6 mb-3';
                    col.innerHTML = `
                        <div class="variable-badge bg-white text-warning border border-2 border-start-warning"
                             style="border-left: 4px solid var(--bs-warning) !important;"
                             data-variable="${variable.key}"
                             data-category="coacheteur"
                             onclick="copyVariableToClipboard('${variable.key}')"
                             title="Cliquer pour copier">
                            <i class="fas fa-copy me-1"></i>
                            <code class="text-warning">${variable.key}</code>
                        </div>
                        <small class="text-muted d-block mt-1 ms-2">${variable.label}</small>
                    `;
                    coacheteurVariablesContainer.appendChild(col);
                });
            } else {
                coacheteurVariablesContainer.innerHTML = '<div class="col-12 text-muted small">Aucune variable coacheteur disponible</div>';
            }

            // Display societe variables
            if (societeVars.length > 0) {
                societeVars.forEach(variable => {
                    const col = document.createElement('div');
                    col.className = 'col-md-6 mb-3';
                    col.innerHTML = `
                        <div class="variable-badge bg-white text-secondary border border-2 border-start-secondary"
                             style="border-left: 4px solid var(--bs-secondary) !important;"
                             data-variable="${variable.key}"
                             data-category="societe"
                             onclick="copyVariableToClipboard('${variable.key}')"
                             title="Cliquer pour copier">
                            <i class="fas fa-copy me-1"></i>
                            <code class="text-secondary">${variable.key}</code>
                        </div>
                        <small class="text-muted d-block mt-1 ms-2">${variable.label}</small>
                    `;
                    societeVariablesContainer.appendChild(col);
                });
            } else {
                // Fallback list for societe variables
                const defaultSocieteVars = [
                    { key: 'societe.name', label: 'Dénomination de la société' },
                    { key: 'societe.rcs_number', label: 'Numéro RCS' },
                    { key: 'societe.rcs_location', label: 'Lieu RCS' },
                    { key: 'societe.type', label: 'Type de société' },
                    { key: 'societe.capital', label: 'Capital social' },
                    { key: 'societe.mandataire', label: 'Nom et adresse du mandataire social' },
                    { key: 'societe.email', label: 'Email' },
                    { key: 'societe.telephone', label: 'Téléphone' },
                    { key: 'societe.adresse_complete', label: 'Adresse complète' },
                ];
                defaultSocieteVars.forEach(variable => {
                    const col = document.createElement('div');
                    col.className = 'col-md-6 mb-3';
                    col.innerHTML = `
                        <div class="variable-badge bg-white text-secondary border border-2 border-start-secondary"
                             style="border-left: 4px solid var(--bs-secondary) !important;"
                             data-variable="${variable.key}"
                             data-category="societe"
                             onclick="copyVariableToClipboard('${variable.key}')"
                             title="Cliquer pour copier">
                            <i class="fas fa-copy me-1"></i>
                            <code class="text-secondary">${variable.key}</code>
                        </div>
                        <small class="text-muted d-block mt-1 ms-2">${variable.label}</small>
                    `;
                    societeVariablesContainer.appendChild(col);
                });
            }
        }

        // Copy variable to clipboard
        window.copyVariableToClipboard = function(variableKey) {
            navigator.clipboard.writeText(variableKey).then(function() {
                // Show success message
                const badge = document.querySelector(`[data-variable="${variableKey}"]`);
                if (badge) {
                    const originalHtml = badge.innerHTML;
                    const originalClasses = badge.className;

                    badge.innerHTML = '<i class="fas fa-check me-1"></i><span>Copié!</span>';
                    badge.className = 'variable-badge bg-success text-white border border-success';

                    setTimeout(() => {
                        badge.innerHTML = originalHtml;
                        badge.className = originalClasses;
                    }, 1500);
                }
            }).catch(function(err) {
                console.error('Erreur lors de la copie:', err);
                alert('Impossible de copier la variable. Veuillez la copier manuellement.');
            });
        };

        // 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 = `${documentEditorsBaseUrl}/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(`${documentEditorsBaseUrl}/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.isSignature = blockData.json.is_signature ? '1' : '0';
                            blockDiv.dataset.signatureType = blockData.json.signature_type || 'client';
                            blockDiv.dataset.imageUrl = blockData.json.image_url || '';
                            blockDiv.dataset.imagePath = blockData.json.image_path || '';

                            // Apply font size
                            const fontSize = blockData.json.font_size || '14';
                            blockDiv.dataset.fontSize = fontSize;
                            blockDiv.style.fontSize = fontSize + 'px';

                            blockDiv.style.zIndex = position.z_index || 1;
                            // Apply fixed dimensions for image blocks and signature blocks
                            if (blockData.json.is_image || blockData.json.is_signature) {
                                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');
                            contentDiv.className = 'block-content-wrapper';
                            contentDiv.style.fontSize = fontSize + 'px';

                            if (blockData.json.is_signature) {
                                blockDiv.classList.add('signature-block');
                                const signatureType = blockData.json.signature_type || 'client';
                                const signatureTypeLabels = {
                                    'client': 'Client',
                                    'vendeur': 'Vendeur',
                                    'conjoint': 'Conjoint'
                                };
                                const signatureLabel = signatureTypeLabels[signatureType] || 'électronique';
                                contentDiv.innerHTML = blockData.json.content || `<div class="signature-placeholder"><i class="fas fa-signature me-2"></i>Signature ${signatureLabel}</div>`;

                                const resizeHandle = document.createElement('div');
                                resizeHandle.className = 'resize-handle';
                                resizeHandle.addEventListener('mousedown', function(e) {
                                    e.stopPropagation();
                                    startResizing(blockDiv, e);
                                });
                                blockDiv.appendChild(resizeHandle);
                            } else if (blockData.json.is_image && (blockData.json.image_url || blockData.json.image_path)) {
                                blockDiv.classList.add('image-block');
                                const imgElement = document.createElement('img');
                                // Utiliser le path pour générer l'URL via la route Laravel, sinon utiliser l'URL
                                const imageUrl = blockData.json.image_path
                                    ? getFileUrl(blockData.json.image_path)
                                    : (blockData.json.image_url || '');
                                imgElement.src = imageUrl;
                                imgElement.alt = 'Bloc image';
                                imgElement.style.width = '100%';
                                imgElement.style.height = '100%';
                                imgElement.style.objectFit = 'contain';
                                imgElement.style.display = 'block';

                                // Gérer les erreurs de chargement d'image
                                imgElement.onerror = function() {
                                    console.error('Erreur de chargement de l\'image:', imageUrl);
                                    imgElement.alt = 'Image non disponible';
                                    imgElement.style.backgroundColor = '#f0f0f0';
                                };

                                imgElement.onload = function() {
                                    console.log('Image chargée avec succès:', imageUrl);
                                };

                                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')
    @include('modals.generate-dynamic-pdf')
    @include('modals.available-variables')
@endsection