@extends('backoffice.dashboard')

@section('title','إضافة صفحة')

@section('content')
@if ($errors->any())
    <ul class="alert alert-warning">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
@endif

<div class="container-fluid">
    <div class="block-card mb-4">
        <div class="block-card-header">
            <h2 class="widget-title"> إضافة صفحة جديدة</h2>
            <div class="stroke-shape"></div>
        </div>

        <div class="block-card-body">
            <form action="{{ route('builder.store') }}" method="POST" enctype="multipart/form-data" id="pageForm">
                @csrf

                <!-- TITRES -->
                <div class="form-group mb-3">
                    <label>العنوان بالعربية</label>
                    <input type="text" class="form-control" name="titre_ar" maxlength="100" 
                           value="{{ old('titre_ar') }}" id="titre_ar">
                    <span class="field-error text-danger" id="error_titre_ar" style="display: none;"></span>
                </div>

                <div class="form-group mb-3">
                    <label>العنوان بالفرنسية</label>
                    <input type="text" class="form-control" name="titre_fr" maxlength="100"
                           value="{{ old('titre_fr') }}" id="titre_fr">
                    <span class="field-error text-danger" id="error_titre_fr" style="display: none;"></span>
                </div>

                <div class="form-group mb-3">
                    <label>العنوان بالإنجليزية</label>
                    <input type="text" class="form-control" name="titre_en" maxlength="100"
                           value="{{ old('titre_en') }}" id="titre_en">
                    <span class="field-error text-danger" id="error_titre_en" style="display: none;"></span>
                </div>

                <hr>

                <h4 class="mb-3">المحتوى</h4>

                <!-- رسالة خطأ عامة للمحتوى -->
                <div class="alert alert-danger mb-3" id="general-error" style="display: none;">
                    <i class="ri-error-warning-line mr-2"></i>
                    <span id="general-error-message"></span>
                </div>

                <table class="table custom-table text-center" id="contenu-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>العرض (col)</th>
                            <th>النوع</th>
                            <th>المحتوى</th>
                            <th>إجراء</th>
                        </tr>
                    </thead>
                    <tbody id="contenu-body">
                        <!-- lignes dynamiques -->
                    </tbody>
                </table>

                

                <div class="block-card-footer mt-3 mb-3 text-center">
                    <button type="submit" id="submitBtn" class="btn bg-rgb-primary1 font-weight-medium">
                        <i class="ri-save-line mr-1"></i> حفظ
                    </button>
                    <a href="{{ route('builder.index') }}" class="btn bg-rgb-primary1 font-weight-medium">
                        <i class="ri-close-line mr-1"></i> إلغاء
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- TEMPLATE LIGNE -->
<template id="row-template">
    <tr data-index="INDEX">
        <td class="row-number"></td>
        <td>
            <select name="contenus[INDEX][col]" class="form-control col-select">
                <option value="col-xl-12">12</option>
                <option value="col-xl-8">8</option>
                <option value="col-xl-6">6</option>
                <option value="col-xl-4">4</option>
                <option value="col-xl-3">3</option>
                <option value="col-xl-2">2</option>
            </select>
        </td>
        <td>
            <select name="contenus[INDEX][nature]" class="form-control nature-select">
    <option value="">اختيار</option>
    <option value="image">صورة</option>
    <option value="video">فيديو</option>
    <option value="texte">نص</option>
    <option value="file">ملف</option>
</select>
            <span class="field-error text-danger nature-error" style="display:none;"></span>
        </td>
        <td class="contenu-column">
            <!-- سيتم ملؤه ديناميكيًا -->
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-success btn-sm me-1" onclick="addRow()">
                <i class="ri-add-line"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">
                <i class="ri-delete-bin-line"></i>
            </button>
        </td>
    </tr>
</template>

<!-- SCRIPTS: TinyMCE + Mammoth (DOCX) + html2pdf for client PDF export -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js"></script>
<script src="https://unpkg.com/mammoth/mammoth.browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script>

let globalIndex = 0;
const oldData = @json(old('contenus', []));
let isFormSubmitted = false;


let fileInputDocx = null;
function ensureFileInputs() {
    if (!fileInputDocx) {
        fileInputDocx = document.createElement('input');
        fileInputDocx.type = 'file';
        fileInputDocx.accept = '.docx';
        fileInputDocx.style.display = 'none';
        document.body.appendChild(fileInputDocx);
    }
    return { fileInputDocx };
}
const importedDocxStyles = {};
const importedDocxRaw = {};


function isRtlText(text) {
    const matches = text.match(/[\u0590-\u08FF]/g);
    return matches ? matches.length > 2 : false;
}


function extractAndStripStyleBlocks(html) {
    const styleBlocks = [];
    const re = /<style[^>]*>([\s\S]*?)<\/style>/gi;
    let m;
    while ((m = re.exec(html)) !== null) {
        styleBlocks.push(m[1]);
    }
    const cleanedHtml = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
    return { cleanedHtml, styles: styleBlocks.join('\n') };
}


function insertHtmlIntoEditor(editorId, html) {
    if (html && editorId) {
        importedDocxRaw[editorId] = html;
    }

    const ed = tinymce.get(editorId);
    const { cleanedHtml, styles } = extractAndStripStyleBlocks(html || '');

    if (styles && styles.trim()) {
        importedDocxStyles[editorId] = (importedDocxStyles[editorId] || '') + '\n' + styles;
    }

    const ta = document.getElementById(editorId);
    if (ta) {
        const prev = ta.dataset.docxStyles || '';
        ta.dataset.docxStyles = (prev ? prev + '\n' : '') + (styles || '');
    }

    if (!ed) {
        if (ta) ta.value += cleanedHtml;
        return;
    }

    ed.focus();
    ed.selection.collapse(false);
    ed.insertContent(cleanedHtml);
}

/* ----------------- DOCX handling utilities (exactly as in edit) ----------------- */
async function postProcessMammothHtml(rawHtml, baseUrl = window.location.href) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(rawHtml, 'text/html');

    doc.querySelectorAll('table').forEach(table => {
        table.classList.add('imported-table');
        if (!table.style.width && !table.getAttribute('width')) table.style.width = '100%';
        table.style.borderCollapse = 'collapse';
        table.querySelectorAll('th, td').forEach(cell => {
            if (!cell.style.border && !cell.getAttribute('border')) cell.style.border = '1px solid #ddd';
            if (!cell.style.padding) cell.style.padding = '6px';
            if (!cell.style.direction) cell.style.direction = doc.documentElement.dir || 'rtl';
        });
    });

    convertParagraphBulletsToLists(doc);
    await inlineExternalStylesInDoc(doc, baseUrl);
    await inlineImagesInDoc(doc, baseUrl);

    return doc.documentElement.innerHTML;
}

function convertParagraphBulletsToLists(doc) {
    const bodyChildren = Array.from(doc.body.childNodes);
    let i = 0;
    while (i < bodyChildren.length) {
        const node = bodyChildren[i];
        if (node.nodeType !== Node.ELEMENT_NODE || node.tagName.toLowerCase() !== 'p') { i++; continue; }
        const text = node.textContent.trim();

        const isBullet = /^[\u2022\u00B7\-\*\•]\s+/.test(text) || /^•\s+/.test(text);
        const isNumbered = /^\d+[\.\)]\s+/.test(text) || /^[ivx]+\.\s+/i.test(text);

        if (isBullet || isNumbered) {
            const list = doc.createElement(isNumbered ? 'ol' : 'ul');
            let j = i;
            while (j < bodyChildren.length) {
                const p = bodyChildren[j];
                if (!p || p.nodeType !== Node.ELEMENT_NODE || p.tagName.toLowerCase() !== 'p') break;
                const t = p.textContent.trim();
                const thisIsBullet = /^[\u2022\u00B7\-\*\•]\s+/.test(t) || /^•\s+/.test(t);
                const thisIsNumbered = /^\d+[\.\)]\s+/.test(t) || /^[ivx]+\.\s+/i.test(t);
                if ((isBullet && thisIsBullet) || (isNumbered && thisIsNumbered)) {
                    const li = doc.createElement('li');
                    li.innerHTML = p.innerHTML.replace(/^[\u2022\u00B7\-\*\•]\s+|^\d+[\.\)]\s+|^[ivx]+\.\s+/i, '').trim();
                    list.appendChild(li);
                    p.parentNode.removeChild(p);
                    j++;
                } else {
                    break;
                }
            }
            const refNode = bodyChildren[i];
            if (refNode && refNode.parentNode) refNode.parentNode.insertBefore(list, refNode);
            if (refNode && refNode.parentNode) refNode.parentNode.removeChild(refNode);
            bodyChildren.splice(i, 1, list);
            i += 1;
            continue;
        }
        i++;
    }
}

async function inlineExternalStylesInDoc(doc, baseUrl) {
    const linkEls = Array.from(doc.querySelectorAll('link[rel="stylesheet"]'));
    if (linkEls.length === 0) return;
    let accumulatedCss = '';
    for (const linkEl of linkEls) {
        const href = linkEl.getAttribute('href');
        if (!href) continue;
        try {
            const fullUrl = new URL(href, baseUrl).href;
            const cssText = await fetchText(fullUrl);
            accumulatedCss += '\n/* inlined from ' + fullUrl + ' */\n' + cssText;
        } catch (err) {
            console.warn('Could not inline stylesheet', href, err);
        }
        linkEl.remove();
    }
    if (accumulatedCss) {
        const styleEl = doc.createElement('style');
        styleEl.appendChild(doc.createTextNode(accumulatedCss));
        doc.head.appendChild(styleEl);
    }
}

async function fetchText(url) {
    const res = await fetch(url, { cache: 'no-cache' });
    if (!res.ok) throw new Error('Fetch failed: ' + res.status);
    return await res.text();
}

async function inlineImagesInDoc(doc, baseUrl) {
    const imgs = Array.from(doc.querySelectorAll('img'));
    for (const img of imgs) {
        const src = img.getAttribute('src') || '';
        if (!src || src.startsWith('data:')) continue;
        try {
            const fullUrl = new URL(src, baseUrl).href;
            const blob = await fetch(fullUrl, { mode: 'cors' }).then(r => r.blob());
            const dataUrl = await blobToDataURL(blob);
            img.setAttribute('src', dataUrl);
        } catch (err) {
            console.warn('Could not inline image', src, err);
        }
    }
}

function blobToDataURL(blob) {
    return new Promise((resolve, reject) => {
        const fr = new FileReader();
        fr.onload = () => resolve(fr.result);
        fr.onerror = reject;
        fr.readAsDataURL(blob);
    });
}

function runPropsToCss(rPr) {
    const css = [];
    if (!rPr) return css;
    const color = rPr.querySelector('w\\:color, color');
    if (color && color.getAttribute('w:val')) {
        css.push(`color: #${color.getAttribute('w:val')}`);
    } else if (color && color.getAttribute('val')) {
        css.push(`color: #${color.getAttribute('val')}`);
    }
    const sz = rPr.querySelector('w\\:sz, sz');
    if (sz && sz.getAttribute('w:val')) {
        const halfPoints = parseInt(sz.getAttribute('w:val'), 10);
        if (!isNaN(halfPoints)) {
            const pt = halfPoints / 2;
            css.push(`font-size: ${pt}pt`);
        }
    } else if (sz && sz.getAttribute('val')) {
        const halfPoints = parseInt(sz.getAttribute('val'), 10);
        if (!isNaN(halfPoints)) {
            const pt = halfPoints / 2;
            css.push(`font-size: ${pt}pt`);
        }
    }
    if (rPr.querySelector('w\\:b, b')) css.push('font-weight: bold');
    if (rPr.querySelector('w\\:i, i')) css.push('font-style: italic');
    if (rPr.querySelector('w\\:u, u')) css.push('text-decoration: underline');
    if (rPr.querySelector('w\\:strike, strike')) css.push('text-decoration: line-through');

    const shd = rPr.querySelector('w\\:shd, shd');
    if (shd && (shd.getAttribute('w:fill') || shd.getAttribute('fill'))) {
        const fill = shd.getAttribute('w:fill') || shd.getAttribute('fill');
        if (fill && fill !== 'auto') css.push(`background-color: #${fill}`);
    }
    return css.filter(Boolean).join(';');
}

function buildCssFromStylesXml(stylesXmlText) {
    try {
        const parser = new DOMParser();
        const doc = parser.parseFromString(stylesXmlText, 'application/xml');
        const styles = doc.querySelectorAll('w\\:style, style');
        const rules = [];
        styles.forEach(style => {
            const styleId = style.getAttribute('w:styleId') || style.getAttribute('styleId');
            if (!styleId) return;
            const rPr = style.querySelector('w\\:rPr, rPr');
            const pPr = style.querySelector('w\\:pPr, pPr');
            const runCss = runPropsToCss(rPr || document.createElement('div'));
            let pCss = '';
            if (pPr) {
                const jc = pPr.querySelector('w\\:jc, jc');
                if (jc && (jc.getAttribute('w:val') || jc.getAttribute('val'))) {
                    const v = jc.getAttribute('w:val') || jc.getAttribute('val');
                    if (v) pCss += `text-align: ${v};`;
                }
                const ind = pPr.querySelector('w\\:ind, ind');
                if (ind) {
                    const left = ind.getAttribute('w:left') || ind.getAttribute('left');
                    if (left) pCss += `margin-left: ${left}px;`;
                }
            }
            if (runCss || pCss) {
                const selector = `.word-style-${styleId}`;
                rules.push(`${selector} { ${runCss ? runCss + ';' : ''} ${pCss ? pCss : ''} }`);
            }
        });
        return rules.join('\n');
    } catch (err) {
        console.warn('buildCssFromStylesXml failed', err);
        return '';
    }
}

async function extractPageBreakPositionsFromDocx(arrayBuffer) {
    try {
        const zip = await JSZip.loadAsync(arrayBuffer);
        const docXmlFile = zip.file('word/document.xml');
        if (!docXmlFile) return null;
        const docXmlText = await docXmlFile.async('text');
        return docXmlText;
    } catch (err) {
        console.warn('extractPageBreakPositionsFromDocx failed', err);
        return null;
    }
}

function replacePageBreakMarkers(html, docXmlText) {
    html = html.replace(/<br[^>]*class=["']?page-break["']?[^>]*\/?>/gi, '<div class="word-page-break"></div>');
    html = html.replace(/<div[^>]*style=["'][^"']*(page-break-before|page-break-after)[^"']*["'][^>]*><\/div>/gi, '<div class="word-page-break"></div>');
    if (docXmlText) {
        const pageBreakCount = (docXmlText.match(/<w:br[^>]*w:type=["']page["'][^>]*\/?>/gi) || []).length;
        if (pageBreakCount > 0) {
            const append = Array.from({length: pageBreakCount}).map(()=>'<div class="word-page-break"></div>').join('');
            html = html + append;
        }
    }
    return html;
}

async function postProcessDocxHtml(rawHtml, arrayBufferForStyles = null, baseUrl = window.location.href) {
    let generatedCss = '';
    try {
        if (arrayBufferForStyles && typeof JSZip !== 'undefined') {
            const zip = await JSZip.loadAsync(arrayBufferForStyles);
            const stylesFile = zip.file('word/styles.xml');
            if (stylesFile) {
                const stylesText = await stylesFile.async('text');
                generatedCss = buildCssFromStylesXml(stylesText);
            }
        }
    } catch (err) {
        console.warn('Could not extract styles.xml', err);
    }

    let doc = new DOMParser().parseFromString(rawHtml, 'text/html');

    doc.querySelectorAll('table').forEach(table => {
        table.classList.add('imported-table');
        if (!table.style.width && !table.getAttribute('width')) table.style.width = '100%';
        table.style.borderCollapse = 'collapse';
        table.querySelectorAll('td, th').forEach(cell => {
            if (!cell.style.border && !cell.getAttribute('border')) cell.style.border = '1px solid #ddd';
            if (!cell.style.padding) cell.style.padding = '6px';
        });
    });

    convertParagraphBulletsToLists(doc);
    await inlineImagesInDoc(doc, baseUrl);

    if (generatedCss) {
        const styleEl = doc.createElement('style');
        styleEl.appendChild(doc.createTextNode(`/* styles extracted from docx */\n${generatedCss}\n`));
        doc.head.appendChild(styleEl);
    }

    return doc.documentElement.innerHTML;
}

async function extractStylesFromDocx(arrayBuffer) {
    const styles = [];
    try {
        const zip = await JSZip.loadAsync(arrayBuffer);
        const stylesFile = zip.file('word/styles.xml');
        if (!stylesFile) {
            console.warn('No word/styles.xml in docx');
            return styles;
        }
        const xmlText = await stylesFile.async('text');
        const parser = new DOMParser();
        const doc = parser.parseFromString(xmlText, 'application/xml');
        const styleNodes = Array.from(doc.getElementsByTagNameNS('*', 'style'));
        if (styleNodes.length === 0) {
            const plainStyles = Array.from(doc.getElementsByTagName('style'));
            styleNodes.push(...plainStyles);
        }

        styleNodes.forEach(styleNode => {
            const styleId = styleNode.getAttribute('w:styleId') || styleNode.getAttribute('styleId') || styleNode.getAttribute('styleId');
            let nameNode = styleNode.getElementsByTagNameNS('*', 'name')[0] || styleNode.getElementsByTagName('name')[0];
            const name = (nameNode && (nameNode.getAttribute('w:val') || nameNode.getAttribute('val') || nameNode.textContent)) || styleId || null;
            const rPr = styleNode.getElementsByTagNameNS('*', 'rPr')[0] || styleNode.getElementsByTagName('rPr')[0];
            const pPr = styleNode.getElementsByTagNameNS('*', 'pPr')[0] || styleNode.getElementsByTagName('pPr')[0];

            const runCssParts = [];
            if (rPr) {
                const clr = rPr.getElementsByTagNameNS('*', 'color')[0] || rPr.getElementsByTagName('color')[0];
                if (clr) {
                    const val = clr.getAttribute('w:val') || clr.getAttribute('val');
                    if (val) runCssParts.push(`color: #${val}`);
                }
                const sz = rPr.getElementsByTagNameNS('*', 'sz')[0] || rPr.getElementsByTagName('sz')[0];
                if (sz) {
                    const hv = sz.getAttribute('w:val') || sz.getAttribute('val');
                    const half = parseInt(hv, 10);
                    if (!isNaN(half)) runCssParts.push(`font-size: ${half / 2}pt`);
                }
                if (rPr.getElementsByTagNameNS('*', 'b')[0] || rPr.getElementsByTagName('b')[0]) runCssParts.push('font-weight: bold');
                if (rPr.getElementsByTagNameNS('*', 'i')[0] || rPr.getElementsByTagName('i')[0]) runCssParts.push('font-style: italic');
                if (rPr.getElementsByTagNameNS('*', 'u')[0] || rPr.getElementsByTagName('u')[0]) runCssParts.push('text-decoration: underline');
                if (rPr.getElementsByTagNameNS('*', 'strike')[0] || rPr.getElementsByTagName('strike')[0]) runCssParts.push('text-decoration: line-through');
                const shd = rPr.getElementsByTagNameNS('*', 'shd')[0] || rPr.getElementsByTagName('shd')[0];
                if (shd) {
                    const fill = shd.getAttribute('w:fill') || shd.getAttribute('fill');
                    if (fill && fill !== 'auto') runCssParts.push(`background-color: #${fill}`);
                }
                const rFonts = rPr.getElementsByTagNameNS('*', 'rFonts')[0] || rPr.getElementsByTagName('rFonts')[0];
                if (rFonts) {
                    const ascii = rFonts.getAttribute('w:ascii') || rFonts.getAttribute('ascii');
                    if (ascii) runCssParts.push(`font-family: ${ascii}`);
                }
            }

            const paraCssParts = [];
            if (pPr) {
                const jc = pPr.getElementsByTagNameNS('*', 'jc')[0] || pPr.getElementsByTagName('jc')[0];
                if (jc) {
                    const v = jc.getAttribute('w:val') || jc.getAttribute('val');
                    if (v) paraCssParts.push(`text-align: ${v}`);
                }
                const ind = pPr.getElementsByTagNameNS('*', 'ind')[0] || pPr.getElementsByTagName('ind')[0];
                if (ind) {
                    const left = ind.getAttribute('w:left') || ind.getAttribute('left');
                    if (left) paraCssParts.push(`margin-left: ${left}px`);
                }
                const spacing = pPr.getElementsByTagNameNS('*', 'spacing')[0] || pPr.getElementsByTagName('spacing')[0];
                if (spacing) {
                    const before = spacing.getAttribute('w:before') || spacing.getAttribute('before');
                    const after = spacing.getAttribute('w:after') || spacing.getAttribute('after');
                    if (before) paraCssParts.push(`margin-top: ${Math.round(before/20)}px`);
                    if (after) paraCssParts.push(`margin-bottom: ${Math.round(after/20)}px`);
                }
            }

            const runCss = runCssParts.join(';');
            const paraCss = paraCssParts.join(';');

            styles.push({ styleId, name, runCss, paraCss });
        });
    } catch (err) {
        console.warn('extractStylesFromDocx error', err);
    }
    return styles;
}

function buildStyleMapAndCss(styles) {
    const styleMap = [];
    const cssRules = [];
    styles.forEach(s => {
        if (!s.name) return;
        const safeName = s.name.replace(/'/g, "\\'");
        styleMap.push(`p[style-name='${safeName}'] => p.word-style-${s.styleId}`);
        styleMap.push(`r[style-name='${safeName}'] => span.word-style-${s.styleId}`);
        const props = [];
        if (s.runCss) props.push(s.runCss);
        if (s.paraCss) props.push(s.paraCss);
        if (props.length > 0) {
            cssRules.push(`.word-style-${s.styleId} { ${props.join(';')} }`);
        }
    });
    return { styleMap, css: cssRules.join('\n') };
}

async function handleDocxFileArrayBuffer(arrayBuffer) {
    console.info('handleDocxFileArrayBuffer: starting conversion');

    let styles = [];
    try {
        styles = await extractStylesFromDocx(arrayBuffer);
        console.info('Extracted styles count:', styles.length);
    } catch (err) {
        console.warn('styles extraction failed:', err);
    }

    const { styleMap, css } = buildStyleMapAndCss(styles);
    console.info('Generated styleMap entries:', styleMap.length);

    const options = {
        styleMap: styleMap.length > 0 ? styleMap : undefined,
        convertImage: mammoth.images.inline(function(element) {
            return element.read("base64").then(function(imageBuffer) {
                return { src: "data:" + element.contentType + ";base64," + imageBuffer };
            });
        })
    };

    let result;
    try {
        result = await mammoth.convertToHtml({ arrayBuffer }, options);
    } catch (err) {
        console.error('mammoth.convertToHtml failed', err);
        throw err;
    }

    if (result.messages && result.messages.length) {
        console.info('Mammoth messages:', result.messages);
    }

    let rawHtml = result.value || '';
    if (css && css.trim()) {
        rawHtml = `<style>\n/* Injected styles from docx */\n${css}\n</style>\n` + rawHtml;
    }

    try {
        const parser = new DOMParser();
        const tmpDoc = parser.parseFromString(rawHtml, 'text/html');

        convertParagraphBulletsToLists(tmpDoc);
        await inlineExternalStylesInDoc(tmpDoc, window.location.href);
        await inlineImagesInDoc(tmpDoc, window.location.href);

        let processedHtml = tmpDoc.documentElement.innerHTML;
        processedHtml = normalizeTablesInline(processedHtml);

        try {
            const docXmlText = await extractPageBreakPositionsFromDocx(arrayBuffer).catch(()=>null);
            processedHtml = replacePageBreakMarkers(processedHtml, docXmlText);
        } catch (e) {}

        processedHtml = `<style>
            .word-page-break { page-break-after: always; height: 0; margin: 0; padding: 0; }
            @media print { .word-page-break { display: block; } }
        </style>\n` + processedHtml;

        return processedHtml;
    } catch (err) {
        console.warn('post-processing failed, returning raw HTML', err);
        return rawHtml;
    }
}

/* ---------- export helpers ---------- */

function safeFilename(base) {
    const now = new Date();
    const ts = now.toISOString().replace(/[:.]/g,'-');
    return base + '_' + ts;
}

async function exportEditorToPdf(editorId, filenameBase) {
    const editor = tinymce.get(editorId);
    let contentHtml = editor ? editor.getContent({ format: 'html' }) : (document.getElementById(editorId)?.value || '');

    const iframeMatch = contentHtml.match(/<iframe[^>]+src=["']([^"']+)["'][^>]*><\/iframe>/i);
    let finalHtml = contentHtml;

    try {
        if (iframeMatch) {
            const src = iframeMatch[1];
            let fetched = await fetchText(src);
            fetched = await inlineExternalStyles(fetched, src);
            fetched = await inlineImages(fetched, src);
            fetched = normalizeTablesInline(fetched);
            finalHtml = fetched;
        } else {
            finalHtml = await inlineExternalStyles(finalHtml, window.location.href);
            finalHtml = await inlineImages(finalHtml, window.location.href);
            finalHtml = normalizeTablesInline(finalHtml);
            finalHtml = await postProcessMammothHtml(finalHtml, window.location.href);
        }
    } catch (err) {
        console.warn('Export preprocessing failed, continuing with best-effort:', err);
    }

    const wrapper = document.createElement('div');
    wrapper.setAttribute('dir', 'rtl');
    wrapper.style.direction = 'rtl';
    wrapper.style.padding = '12px';
    wrapper.innerHTML = finalHtml.replace(/<body/i, '<body dir="rtl" style="direction:rtl;"');

    const style = document.createElement('style');
    style.textContent = `
        p, h1, h2, h3, h4, h5, h6, li, blockquote, table, tr, td, th, div.row, section {
            page-break-inside: avoid !important;
        }
        thead, tfoot { display: table-header-group; }
        tr { page-break-inside: avoid; }
    `;
    wrapper.insertBefore(style, wrapper.firstChild);
    wrapper.querySelectorAll('iframe').forEach(f => f.remove());

    const opt = {
        margin: 10,
        filename: filenameBase + '.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2, allowTaint: true, useCORS: true },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
        pagebreak: { mode: ['css', 'legacy'] }
    };

    try {
        await html2pdf().set(opt).from(wrapper).save();
    } catch (err) {
        console.error('PDF export failed', err);
        alert('خطأ أثناء تصدير الـ PDF. حاول إعادة المحاولة أو استخدم متصفحًا آخر.');
    }
}

function normalizeTablesInline(html, border = '1px solid #444', padding = '6px') {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    const tables = Array.from(doc.querySelectorAll('table'));
    for (const table of tables) {
        let tableStyle = table.getAttribute('style') || '';
        if (!/border-collapse/i.test(tableStyle)) {
            tableStyle += ';border-collapse:collapse;';
        }
        table.setAttribute('style', tableStyle.trim());
        if (!table.hasAttribute('border')) {
            table.setAttribute('border', '1');
        }
        const cells = Array.from(table.querySelectorAll('td, th'));
        for (const cell of cells) {
            let cellStyle = cell.getAttribute('style') || '';
            if (!/border:/i.test(cellStyle) || /border:\s*(none|0)/i.test(cellStyle)) {
                cellStyle = cellStyle.replace(/border\s*:[^;]+;?/gi, '');
                cellStyle += `;border: ${border};`;
            }
            if (!/padding:/i.test(cellStyle)) {
                cellStyle += `;padding: ${padding};`;
            }
            cell.setAttribute('style', cellStyle.trim());
        }
    }
    return doc.documentElement.outerHTML;
}

function ptToPx(pt) {
  return parseFloat(pt) * (96 / 72);
}

function parseCssLengthToPx(raw) {
  if (!raw) return 0;
  raw = String(raw).trim().toLowerCase();
  const m = raw.match(/^(-?[\d.]+)(px|pt)?$/);
  if (!m) return 0;
  const val = parseFloat(m[1]) || 0;
  const unit = m[2] || 'px';
  if (unit === 'pt') return ptToPx(val);
  return val;
}

function stripEmptyParagraphsAndCollapseBrs(doc) {
  const ps = Array.from(doc.querySelectorAll('p'));
  for (const p of ps) {
    const txt = p.textContent.replace(/\u00a0/g, '').trim();
    const htmlTrim = p.innerHTML.replace(/&nbsp;|\s|<br[^>]*>/gi, '').trim();
    if ((!txt && !p.querySelector('img') && !htmlTrim) || /^<br\s*\/?>$/i.test(p.innerHTML.trim())) {
      p.parentNode.removeChild(p);
    }
  }
  const bodyHTML = doc.body.innerHTML;
  doc.body.innerHTML = bodyHTML.replace(/(<br\s*\/?>\s*){2,}/gi, '<br />');
}

function clampLargeMargins(doc, maxPx = 28) {
  const selector = 'p, h1, h2, h3, h4, h5, h6, div, section, table, ul, ol, li';
  const elems = Array.from(doc.querySelectorAll(selector));
  for (const el of elems) {
    let style = el.getAttribute('style') || '';
    let mtMatch = style.match(/margin-top\s*:\s*([^;]+);?/i);
    let mbMatch = style.match(/margin-bottom\s*:\s*([^;]+);?/i);
    if (!mtMatch && !mbMatch) {
      const shorthand = style.match(/margin\s*:\s*([^;]+);?/i);
      if (shorthand) {
        const parts = shorthand[1].trim().split(/\s+/);
        let top = parts[0], right = parts[1]||parts[0], bottom = parts[2]||parts[0], left = parts[3]||parts[1]||parts[0];
        mtMatch = ['margin-top:' + top];
        mbMatch = ['margin-bottom:' + bottom];
      }
    }
    if (mtMatch) {
      const mtRaw = mtMatch[1] || mtMatch[0].replace(/margin-top\s*:\s*/i,'');
      const mtPx = parseCssLengthToPx(mtRaw);
      if (mtPx > maxPx) {
        style = style.replace(/margin-top\s*:[^;]+;?/i, `margin-top: ${Math.round(maxPx)}px;`);
      }
    }
    if (mbMatch) {
      const mbRaw = mbMatch[1] || mbMatch[0].replace(/margin-bottom\s*:\s*/i,'');
      const mbPx = parseCssLengthToPx(mbRaw);
      if (mbPx > maxPx) {
        style = style.replace(/margin-bottom\s*:[^;]+;?/i, `margin-bottom: ${Math.round(maxPx)}px;`);
      }
    }
    const tag = el.tagName.toLowerCase();
    if (!/margin-(top|bottom)/i.test(style)) {
      if (tag === 'p' || tag === 'li') {
        style += (style ? ';' : '') + 'margin: 0 0 6pt 0; line-height:1.25;';
      } else if (/^h[1-6]$/.test(tag)) {
        style += (style ? ';' : '') + 'margin: 0 0 8pt 0; line-height:1.2;';
      } else if (tag === 'table') {
        style += (style ? ';' : '') + 'margin: 0 0 6pt 0;';
      }
    }
    el.setAttribute('style', style.trim());
  }
}

function normalizeSpacingForWord(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  stripEmptyParagraphsAndCollapseBrs(doc);
  clampLargeMargins(doc, 28);
  const bodyStyle = doc.body.getAttribute('style') || '';
  doc.body.setAttribute('style', (bodyStyle + ';direction: rtl; -webkit-text-size-adjust: none;').trim());
  return doc.body.innerHTML;
}

function exportEditorToWord(editorId, filenameBase) {
    const editor = tinymce.get(editorId);
    const ta = document.getElementById(editorId);
    let sourceHtml = editor ? editor.getContent({ format: 'html' }) : (ta ? ta.value : '');

    let headCss = '';
    let bodyInner = sourceHtml;
    try {
        const parsed = new DOMParser().parseFromString(sourceHtml, 'text/html');
        headCss = Array.from(parsed.querySelectorAll('style')).map(s => s.innerHTML).join('\n');
        bodyInner = parsed.body ? parsed.body.innerHTML : sourceHtml;
    } catch (e) {
        bodyInner = sourceHtml;
    }

    try {
        bodyInner = normalizeSpacingForWord(bodyInner);
    } catch (err) {
        console.warn('normalizeSpacingForWord failed, continuing with raw content', err);
    }

    try {
        if (typeof normalizeTablesInline === 'function') {
            bodyInner = normalizeTablesInline(bodyInner, '1px solid #444', '6px');
        } else {
            bodyInner = bodyInner.replace(/<table/gi, '<table style="border-collapse:collapse;width:100%";');
        }
    } catch (e) {}

    const header = `<!DOCTYPE html>
<html xmlns:o="urn:schemas-microsoft-com:office:office"
      xmlns:w="urn:schemas-microsoft-com:office:word"
      xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Document</title>
<style>
body { margin:6pt; font-family: Arial, Helvetica, sans-serif; }
p { margin: 0 0 6pt 0; line-height: 1.25; }
h1,h2,h3,h4,h5,h6 { margin: 0 0 8pt 0; line-height: 1.2; }
ul,ol { margin: 0 0 6pt 24pt; padding: 0; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid #ddd; padding: 6px; }
.word-page-break { page-break-after: always; height:0; margin:0; padding:0; }
${headCss}
</style>
</head>
<body dir="${isRtlText(bodyInner) ? 'rtl' : 'ltr'}">
`;

    const footer = `</body></html>`;
    const full = header + bodyInner + footer;

    try {
        const blob = new Blob(['\ufeff', full], { type: 'application/msword' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filenameBase + '.doc';
        document.body.appendChild(a);
        a.click();
        setTimeout(() => {
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }, 1500);
    } catch (err) {
        console.error('export to word failed', err);
        alert('خطأ أثناء تصدير الملف إلى Word. تأكد من أن المتصفح يسمح بإنشاء ملفات وتنزيلها.');
    }
}

/* ---------- TinyMCE init (with added image and link buttons) ---------- */
function initTinyForSelector(selector) {
    const ids = selector.split(',').map(s => s.trim().replace(/^#/, ''));
    ids.forEach(id => {
        if (tinymce.get(id)) {
            try { tinymce.get(id).remove(); } catch(e) { console.warn(e); }
        }
    });

    ensureFileInputs();

tinymce.init({
    selector: selector,
    height: 220,
    plugins: 'advlist autolink lists link image preview code table paste imagetools',
  toolbar: 'undo redo | bold italic underline | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright | bullist numlist link image | insertfile | table | importdocx exportpdf exportword | code',
  menubar: false,
    branding: false,
    valid_elements: '*[*]',
    extended_valid_elements: 'a[href|target|rel|data-file-name|data-file-display|data-iframe-width|data-iframe-height|data-file-dataurl],iframe[src|width|height|frameborder|allowfullscreen|data-file-name|data-file-display|data-iframe-width|data-iframe-height|data-file-dataurl],span[*],style[*],table[*],tr[*],td[*],th[*],img[*]',
    paste_as_text: false,

    paste_data_images: true,
    automatic_uploads: true,
    image_title: true,

    file_picker_types: 'image',
    file_picker_callback: function(callback, value, meta) {
        if (meta.filetype === 'image') {
            const input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.style.display = 'none';
            input.onchange = function() {
                const file = this.files[0];
                if (!file) return;

                const reader = new FileReader();
                reader.onload = function(e) {
                    // e.target.result is a data URL (base64)
                    // Insert the image as a data URL directly
                    callback(e.target.result, { title: file.name });
                };
                reader.readAsDataURL(file);
            };
            // trigger file picker
            input.click();
        }
    },



    setup: function(editor) {
        // preserve your existing setup code — copy inside here:
        // (icons, importdocx/export buttons, editor.on('change') handler, etc.)
        // --- BEGIN copied setup code ---
   editor.ui.registry.addIcon('importWordIcon',
`<svg width="24" height="24" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
  <rect x="0.5" y="0.5" width="28" height="25" rx="4" fill="#ffffff" stroke="#6c757d" stroke-width="1"/>
  <text x="5" y="18" fill="#6c757d" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="600">W</text>
  <!-- small downward arrow (stroke) placed at the right -->
  <g stroke="#6c757d" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <path d="M22 9 L22 15"></path>
    <path d="M19 12 L22 15 L25 12"></path>
  </g>
</svg>`);

editor.ui.registry.addIcon('exportWordIcon',
`<svg width="24" height="24" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
  <rect x="0.5" y="0.5" width="28" height="25" rx="4" fill="#ffffff" stroke="#6c757d" stroke-width="1"/>
  <text x="5" y="18" fill="#6c757d" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="600">W</text>
  <!-- small upward arrow (stroke) placed at the right -->
  <g stroke="#6c757d" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <path d="M22 15 L22 9"></path>
    <path d="M19 12 L22 9 L25 12"></path>
  </g>
</svg>`);

editor.ui.registry.addIcon('exportPdfIcon',
`<svg width="29" height="24" viewBox="0 0 34 30" xmlns="http://www.w3.org/2000/svg">
  <rect x="0.5" y="0.5" width="34" height="25" rx="4" fill="#ffffff" stroke="#6c757d" stroke-width="1"/>
  <!-- move text slightly left and a bit smaller to free space on the right -->
  <text x="2" y="18" fill="#6c757d" font-family="Arial, Helvetica, sans-serif" font-size="8" font-weight="700">PDF</text>
  <!-- smaller upward arrow placed near the far-right edge (kept inside viewBox) -->
  <g stroke="#6c757d" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <path d="M27 16 L27 10"></path>
    <path d="M25.5 12 L27 10 L28.5 12"></path>
  </g>
</svg>`);

editor.ui.registry.addIcon('insertFileIcon', `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" fill="#ffffff" stroke="#6c757d" stroke-width="1.5"/>
    <path d="M14 2v6h6" fill="none" stroke="#6c757d" stroke-width="1.5"/>
    <path d="M12 18v-6m-3 3h6" stroke="#6c757d" stroke-width="1.8" stroke-linecap="round"/>
</svg>`);

editor.ui.registry.addButton('insertfile', {
    icon: 'insertFileIcon',
    tooltip: 'إدراج ملف',
    onAction: function () {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,image/*,application/*';
        input.style.display = 'none';
        document.body.appendChild(input);

        input.onchange = function () {
            const file = input.files[0];
            if (!file) {
                document.body.removeChild(input);
                return;
            }

            const reader = new FileReader();
            reader.onload = function (e) {
                const dataUrl = e.target.result;
                const fileName = file.name;

                editor.windowManager.open({
                    title: 'إدراج الملف',
                    body: {
                        type: 'panel',
                        items: [
                            {
                                type: 'selectbox',
                                name: 'displayType',
                                label: 'طريقة العرض',
                                items: [
                                    { value: 'link', text: 'رابط' },
                                    { value: 'iframe', text: 'عرض داخل الصفحة (iframe)' }
                                ]
                            },
                            {
                                type: 'input',
                                name: 'linkText',
                                label: 'نص الرابط (اختياري)',
                                placeholder: 'سيتم استخدام اسم الملف إن لم يُدخل'
                            },
                            {
                                type: 'input',
                                name: 'iframeWidth',
                                label: 'العرض (بكسل)',
                                placeholder: 'مثال: 1000'
                            },
                            {
                                type: 'input',
                                name: 'iframeHeight',
                                label: 'الارتفاع (بكسل)',
                                placeholder: 'مثال: 600'
                            }
                        ]
                    },
                    onSubmit: function (api) {
                        const data = api.getData();
                        const displayType = data.displayType;
                        const linkText = (data.linkText || '').trim() || fileName;

                        let html = '';

                        if (displayType === 'iframe') {
                            const width = (data.iframeWidth || '1000').trim();
                            const height = (data.iframeHeight || '600').trim();

                            html = `
                                <iframe
                                    src="about:blank"
                                    data-file-dataurl="${dataUrl}"
                                    data-file-name="${fileName}"
                                    data-file-display="iframe"
                                    data-iframe-width="${width}"
                                    data-iframe-height="${height}"
                                    width="${width}"
                                    height="${height}"
                                    frameborder="0"
                                    allowfullscreen>
                                </iframe>
                            `;
                        } else {
                            html = `
                                <a
                                    href="#"
                                    data-file-dataurl="${dataUrl}"
                                    data-file-name="${fileName}"
                                    data-file-display="link"
                                    target="_blank"
                                    rel="noopener">
                                    ${linkText}
                                </a>
                            `;
                        }

                        editor.insertContent(html);
                        api.close();
                    },
                    buttons: [
                        { type: 'submit', text: 'إدراج' },
                        { type: 'cancel', text: 'إلغاء' }
                    ]
                });

                document.body.removeChild(input);
            };

            reader.onerror = function () {
                alert('فشل قراءة الملف');
                document.body.removeChild(input);
            };

            reader.readAsDataURL(file);
        };

        input.click();
    }
});
        editor.ui.registry.addButton('importdocx', {
            icon: 'importWordIcon',
            tooltip: 'استيراد من Word (.docx)',
            onAction: function() {
                const input = fileInputDocx;
                input.onchange = async function(ev) {
                    const file = ev.target.files && ev.target.files[0];
                    if (!file) return;
                    try {
                        const buffer = await file.arrayBuffer();
                        const html = await handleDocxFileArrayBuffer(buffer);
                        insertHtmlIntoEditor(editor.id, html);
                    } catch (err) {
                        console.error('Docx import failed', err);
                        alert('فشل استيراد ملف Word. تأكد من الملف وحاول مرة أخرى.');
                    } finally {
                        input.value = '';
                        input.onchange = null;
                    }
                };
                input.click();
            }
        });

        editor.ui.registry.addButton('exportpdf', {
            icon: 'exportPdfIcon',
            tooltip: 'تصدير إلى PDF',
            onAction: function() {
                const filename = safeFilename('document');
                exportEditorToPdf(editor.id, filename);
            }
        });

        editor.ui.registry.addButton('exportword', {
            icon: 'exportWordIcon',
            tooltip: 'تصدير إلى Word',
            onAction: function() {
                const filename = safeFilename('document');
                exportEditorToWord(editor.id, filename);
            }
        });

        editor.on('change', function() {
            if (isFormSubmitted) {
                const ta = document.getElementById(editor.id);
                if (ta) {
                    const row = ta.closest('tr');
                    if (row) {
                        const idx = row.getAttribute('data-index');
                        validateContentField(row, idx);
                    }
                }
            }
        });
      
    }
});
}



function initRow(row, data = null) {
    const index = row.getAttribute('data-index');
    const natureSelect = row.querySelector('.nature-select');
    const colSelect = row.querySelector('.col-select');
    const td = row.querySelector('.contenu-column');
    const natureError = row.querySelector('.nature-error');
    
    if (data) {
        if (data.col) colSelect.value = data.col;
        if (data.nature) {
            natureSelect.value = data.nature;
            updateContentField(td, index, data);
        }
    }
    
    natureSelect.addEventListener('change', function() {
        updateContentField(td, index, data);
        if (isFormSubmitted) {
            validateField(this, index, 'nature');
        }
    });
    
    setTimeout(() => {
        const inputs = td.querySelectorAll('input, textarea');
        inputs.forEach(input => {
            input.addEventListener('input', function() {
                if (isFormSubmitted) validateContentField(row, index);
            });
            input.addEventListener('change', function() {
                if (isFormSubmitted) validateContentField(row, index);
            });
        });
    }, 300);
}

function updateContentField(td, index, oldData = null) {
    const natureSelect = td.closest('tr').querySelector('.nature-select');
    const nature = natureSelect.value;
    td.innerHTML = '';

    if (nature === 'image') {
        // In add mode, only file input (no existing image)
        td.innerHTML = `
            <input type="file" name="contenus[${index}][image]" class="form-control file-input" 
                   accept="image/*">
            <span class="field-error text-danger content-error" id="error_content_${index}" style="display:none;"></span>
        `;
        
        const fileInput = td.querySelector('.file-input');
        fileInput.addEventListener('change', function() {
            if (isFormSubmitted) validateContentField(td.closest('tr'), index);
        });
    }
    else if (nature === 'video') {
        const oldUrl = oldData ? (oldData.url_video || '') : '';
        td.innerHTML = `
            <input type="text" name="contenus[${index}][url_video]" class="form-control video-input" 
                   placeholder="رابط الفيديو (YouTube)" value="${oldUrl}">
            <span class="field-error text-danger content-error" id="error_content_${index}" style="display:none;"></span>
        `;
        
        const videoInput = td.querySelector('.video-input');
        videoInput.addEventListener('input', function() {
            if (isFormSubmitted) validateContentField(td.closest('tr'), index);
        });
    }
    else if (nature === 'texte') {
        const oldTextAr = oldData ? (oldData.text_ar || '') : '';
        const oldTextFr = oldData ? (oldData.text_fr || '') : '';
        const oldTextEn = oldData ? (oldData.text_en || '') : '';
        
        td.innerHTML = `
            <div class="mb-2">
                <small>العربية</small>
                <textarea name="contenus[${index}][text_ar]" rows="3" 
                          class="form-control tinymce-text" id="text_ar_${index}">${oldTextAr}</textarea>
            </div>
            <div class="mb-2">
                <small>الفرنسية</small>
                <textarea name="contenus[${index}][text_fr]" rows="3" 
                          class="form-control tinymce-text" id="text_fr_${index}">${oldTextFr}</textarea>
            </div>
            <div class="mb-2">
                <small>الإنجليزية</small>
                <textarea name="contenus[${index}][text_en]" rows="3" 
                          class="form-control tinymce-text" id="text_en_${index}">${oldTextEn}</textarea>
            </div>
            <span class="field-error text-danger content-error" id="error_content_${index}" style="display:none;"></span>
        `;
        
        // Initialize TinyMCE for these editors
        setTimeout(() => {
            const selector = `#text_ar_${index}, #text_fr_${index}, #text_en_${index}`;
            initTinyForSelector(selector);
        }, 100);
    }else if (nature === 'file') {
    const existingUrl = oldData ? (oldData.file_url || '') : '';
    const existingName = oldData ? (oldData.file_name || '') : '';
    const existingDisplay = oldData ? (oldData.file_display || 'link') : 'link';
    const existingLabel = oldData ? (oldData.file_label || '') : '';
    const existingWidth = oldData ? (oldData.iframe_width || 1000) : 1000;
    const existingHeight = oldData ? (oldData.iframe_height || 600) : 600;

    let previewHtml = '';

    if (existingUrl) {
        if (existingDisplay === 'iframe') {
            previewHtml = `
                <div class="mt-2">
                    <div class="small text-muted mb-1">الملف الحالي:</div>
                    <iframe src="${existingUrl}" width="${existingWidth}" height="${existingHeight}" style="border:1px solid #dee2e6; max-width:100%;"></iframe>
                </div>
            `;
        } else {
            previewHtml = `
                <div class="mt-2">
                    <div class="small text-muted mb-1">الملف الحالي:</div>
                    <a href="${existingUrl}" target="_blank" class="btn btn-sm btn-outline-secondary">
                        <i class="ri-file-line"></i> ${existingLabel || existingName || 'عرض الملف'}
                    </a>
                </div>
            `;
        }
    }

    td.innerHTML = `
        <div class="mb-3">
            <label class="form-label fw-bold">رفع الملف</label>
            <input type="file" name="contenus[${index}][file]" class="form-control file-input" 
                   accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,image/*,application/*">
            <div class="form-text text-muted">الملفات المسموحة: PDF, Word, Excel, PowerPoint, صور، نصوص (حجم يصل إلى 100 ميجابايت)</div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <label class="form-label fw-bold">طريقة العرض</label>
                <select name="contenus[${index}][file_display]" class="form-control file-display-select">
                    <option value="link" ${existingDisplay === 'link' ? 'selected' : ''}>رابط</option>
                    <option value="iframe" ${existingDisplay === 'iframe' ? 'selected' : ''}>عرض داخل الصفحة (iframe)</option>
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold">نص الرابط (اختياري)</label>
                <input type="text" name="contenus[${index}][file_label]" value="${existingLabel}" 
                       class="form-control file-label-input" placeholder="سيتم استخدام اسم الملف إن لم يُدخل">
            </div>
        </div>

        <div class="row g-3 mb-3 iframe-dimensions-container" style="display: ${existingDisplay === 'iframe' ? 'flex' : 'none'};">
            <div class="col-md-6">
                <label class="form-label fw-bold">العرض (بكسل)</label>
                <input type="number" name="contenus[${index}][iframe_width]" value="${existingWidth}" 
                       class="form-control iframe-width-input" min="100" max="3000" step="10">
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold">الارتفاع (بكسل)</label>
                <input type="number" name="contenus[${index}][iframe_height]" value="${existingHeight}" 
                       class="form-control iframe-height-input" min="100" max="3000" step="10">
            </div>
        </div>

        <div class="file-preview-area">
            ${previewHtml}
        </div>

        <span class="field-error text-danger content-error" id="error_content_${index}" style="display:none;"></span>
    `;

    const displaySelect = td.querySelector('.file-display-select');
    const dimensionsContainer = td.querySelector('.iframe-dimensions-container');
    const widthInput = td.querySelector('.iframe-width-input');
    const heightInput = td.querySelector('.iframe-height-input');
    const fileInput = td.querySelector('.file-input');
    const previewArea = td.querySelector('.file-preview-area');

    function toggleIframeFields() {
        const show = displaySelect.value === 'iframe';
        dimensionsContainer.style.display = show ? 'flex' : 'none';
        // إذا تم إظهار الحقول وأظهرنا المعاينة الحالية وكانت iframe، نحدِّث أبعادها تلقائياً
        const existingIframe = previewArea.querySelector('iframe');
        if (existingIframe && show) {
            const newWidth = widthInput.value || 1000;
            const newHeight = heightInput.value || 600;
            existingIframe.width = newWidth;
            existingIframe.height = newHeight;
        }
    }

    displaySelect.addEventListener('change', toggleIframeFields);
    // عند تغيير العرض/الارتفاع، تحديث معاينة iframe إن وجدت
    widthInput.addEventListener('input', () => {
        const existingIframe = previewArea.querySelector('iframe');
        if (existingIframe && displaySelect.value === 'iframe') {
            existingIframe.width = widthInput.value || 1000;
        }
    });
    heightInput.addEventListener('input', () => {
        const existingIframe = previewArea.querySelector('iframe');
        if (existingIframe && displaySelect.value === 'iframe') {
            existingIframe.height = heightInput.value || 600;
        }
    });

    fileInput.addEventListener('change', function() {
        const f = this.files && this.files[0];
        if (f) {
            // عرض معاينة سريعة للملف الجديد (كـ رابط مؤقت)
            const url = URL.createObjectURL(f);
            previewArea.innerHTML = `
                <div class="mt-2">
                    <div class="small text-muted mb-1">معاينة الملف الجديد:</div>
                    <a href="${url}" target="_blank" class="btn btn-sm btn-outline-secondary">
                        <i class="ri-file-line"></i> ${f.name}
                    </a>
                </div>
            `;
        }
        if (isFormSubmitted) validateContentField(td.closest('tr'), index);
    });

    toggleIframeFields(); // التأكد من الحالة الأولية
}
	else {
        td.innerHTML = '';
    }
}

function addRow(data = null) {
    const tpl = document.querySelector('#row-template').innerHTML;
    const newTpl = tpl.replace(/INDEX/g, globalIndex);
    const table = document.querySelector('#contenu-body');
    table.insertAdjacentHTML('beforeend', newTpl);
    
    const newRow = table.lastElementChild;
    initRow(newRow, data);
    renumber();
    globalIndex++;
}

function removeRow(btn) {
    const row = btn.closest('tr');
    if (row) {
        row.querySelectorAll('.tinymce-text').forEach(textarea => {
            const ed = tinymce.get(textarea.id);
            if (ed) try { ed.remove(); } catch(e) {}
        });
    }
    btn.closest('tr').remove();
    renumber();
}

function renumber() {
    document.querySelectorAll('#contenu-body tr').forEach((row, i) => {
        const rn = row.querySelector('.row-number');
        if (rn) rn.innerText = i + 1;
    });
}

function validateField(element, index, fieldType) {
    const errorSpan = fieldType === 'nature' 
        ? element.nextElementSibling 
        : document.querySelector(`#error_${fieldType}_${index}`);
    
    if (errorSpan) {
        let isValid = true;
        let message = '';
        
        if (fieldType === 'nature') {
            if (!element.value) {
                message = 'يرجى اختيار نوع المحتوى';
                isValid = false;
            }
        }
        
        if (!isValid) {
            errorSpan.textContent = message;
            errorSpan.style.display = 'block';
            element.classList.add('is-invalid');
        } else {
            errorSpan.style.display = 'none';
            element.classList.remove('is-invalid');
        }
        
        return isValid;
    }
    return true;
}

function validateContentField(row, index) {
    const natureSelect = row.querySelector('.nature-select');
    const nature = natureSelect.value;
    let isValid = true;
    let message = '';
    const errorSpan = row.querySelector('.content-error');

    if (nature === 'image') {
        const fileInput = row.querySelector('.file-input');
        if (!fileInput || fileInput.files.length === 0) {
            message = 'يرجى اختيار صورة';
            isValid = false;
        }

        if (errorSpan) {
            errorSpan.textContent = message;
            errorSpan.style.display = isValid ? 'none' : 'block';
            if (fileInput) fileInput.classList.toggle('is-invalid', !isValid);
        }
    }
    else if (nature === 'video') {
        const videoInput = row.querySelector('.video-input');

        if (!videoInput || !videoInput.value.trim()) {
            message = 'يرجى إدخال رابط الفيديو';
            isValid = false;
        } else if (!isValidYoutubeUrl(videoInput.value.trim())) {
            message = 'يرجى إدخال رابط YouTube صحيح';
            isValid = false;
        }

        if (errorSpan) {
            errorSpan.textContent = message;
            errorSpan.style.display = isValid ? 'none' : 'block';
            if (videoInput) videoInput.classList.toggle('is-invalid', !isValid);
        }
    }
    else if (nature === 'texte') {
        const textareas = row.querySelectorAll('.tinymce-text');
        let hasEmpty = false;

        // helper: does this HTML contain an <img>, <iframe>, <video>, <embed>, <object>, <svg>, or data/blob src?
        function contentHasMedia(html) {
            if (!html) return false;
            // image tag (any src), figure with img, data: or blob: URLs, svg tag, iframe/video/object/embed
            const mediaRegex = /<(img|iframe|video|embed|object|svg|figure)[\s\S]*?>/i;
            const srcRegex = /<img[\s\S]*?src\s*=\s*['"]?([^'"\s>]+)['"]?/i;
            if (mediaRegex.test(html)) return true;
            const m = html.match(srcRegex);
            if (m && m[1]) {
                const src = m[1].toLowerCase();
                if (src.indexOf('data:') === 0 || src.indexOf('blob:') === 0 || /^https?:\/\//.test(src)) return true;
            }
            return false;
        }

        textareas.forEach(textarea => {
            let contentHtml = '';
            let textOnly = '';

            const editor = tinymce.get(textarea.id);
            if (editor) {
                contentHtml = editor.getContent().trim();
                textOnly = editor.getContent({ format: 'text' }).trim();
            } else {
                contentHtml = textarea.value.trim();
                textOnly = textarea.value.replace(/<[^>]*>/g, '').trim();
            }

            // Accept if there's visible text OR any embedded media (img/iframe/video/embed/object/svg)
            if (!contentHtml) {
                hasEmpty = true;
            } else {
                const hasText = textOnly.length > 0;
                const hasMedia = contentHasMedia(contentHtml);
                if (!hasText && !hasMedia) hasEmpty = true;
            }
        });

        if (hasEmpty) {
            message = 'جميع النصوص مطلوبة (أو ضع iframe/محتوى HTML صالح أو صورة داخل المحتوى)';
            isValid = false;
        }

        if (errorSpan) {
            errorSpan.textContent = message;
            errorSpan.style.display = isValid ? 'none' : 'block';
            textareas.forEach(textarea => textarea.classList.toggle('is-invalid', !isValid));
        }
    }

    return isValid;
}


function isValidYoutubeUrl(url) {
    const regex = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)[\w-]{11}/;
    return regex.test(url);
}

function validateTitles() {
    let isValid = true;
    const titles = ['titre_ar', 'titre_fr', 'titre_en'];
    
    titles.forEach(title => {
        const input = document.getElementById(title);
        const error = document.getElementById(`error_${title}`);
        
        if (!input.value.trim()) {
            error.textContent = 'هذا الحقل مطلوب';
            error.style.display = 'block';
            input.classList.add('is-invalid');
            isValid = false;
        } else if (input.value.length > 100) {
            error.textContent = 'الحد الأقصى 100 حرف';
            error.style.display = 'block';
            input.classList.add('is-invalid');
            isValid = false;
        } else {
            error.style.display = 'none';
            input.classList.remove('is-invalid');
        }
    });
    
    return isValid;
}

function validateAllContents() {
    let isValid = true;
    const rows = document.querySelectorAll('#contenu-body tr');
    const generalError = document.getElementById('general-error');
    const generalErrorMessage = document.getElementById('general-error-message');
    
    generalError.style.display = 'none';
    
    if (rows.length === 0) {
        generalErrorMessage.textContent = 'يجب إضافة محتوى واحد على الأقل';
        generalError.style.display = 'block';
        return false;
    }
    
    rows.forEach((row, index) => {
        const natureSelect = row.querySelector('.nature-select');
        const natureValid = validateField(natureSelect, index, 'nature');
        const contentValid = validateContentField(row, index);
        if (!natureValid || !contentValid) isValid = false;
    });
    
    if (!isValid) {
        generalErrorMessage.textContent = 'يوجد أخطاء في بعض الحقول. الرجاء التحقق من جميع الصفوف.';
        generalError.style.display = 'block';
    }
    return isValid;
}

document.getElementById('pageForm').addEventListener('submit', function(e) {
    e.preventDefault();
    isFormSubmitted = true;
    const titlesValid = validateTitles();
    const contentsValid = validateAllContents();
    if (titlesValid && contentsValid) {
        // Sync TinyMCE content back to textareas before submit
        document.querySelectorAll('.tinymce-text').forEach(ta => {
            const ed = tinymce.get(ta.id);
            if (ed) ta.value = ed.getContent();
        });
        this.submit();
    } else {
        const firstError = document.querySelector('.is-invalid');
        if (firstError) {
            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            firstError.focus();
        }
    }
});

document.querySelectorAll('#titre_ar, #titre_fr, #titre_en').forEach(input => {
    input.addEventListener('input', function() {
        if (isFormSubmitted) validateTitles();
    });
});

document.addEventListener('DOMContentLoaded', () => {
    ensureFileInputs();
    if (oldData && oldData.length > 0) {
        oldData.forEach(data => {
            addRow(data);
        });
    } else {
        addRow();
    }
});
</script>
<!-- STYLES remain unchanged -->


<style>
.is-invalid {
    border: 1px solid #dc3545 !important;
}
.field-error {
    font-size: 13px;
    margin-top: 4px;
    display: none;
}
#general-error {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.custom-table th, .custom-table td {
    vertical-align: middle;
    text-align: center;
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
}
.btn-sm { 
    padding: 6px 12px; 
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
}
.btn-sm i {
    font-size: 16px;
    line-height: 1;
}
.me-1 { 
    margin-right: 8px !important; 
}
.custom-table td.text-center {
    white-space: nowrap;
}
.block-card-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    min-width: 100px;
}
.block-card-footer .btn i {
    font-size: 18px;
}
.tox-tinymce {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem;
}
.tox-tinymce.is-invalid {
    border: 1px solid #dc3545 !important;
}
.nature-error, .content-error {
    display: none;
}
.imported-table td, .imported-table th {
    padding: 6px;
    border: 1px solid #ddd;
}
</style>

@endsection