أداة لصناعة ملفات PDF الاحترافية مجاناً وبضغطة زر!

<div id="vika-pdf-pro" style="direction: rtl; font-family: 'Cairo', sans-serif; max-width: 800px; margin: 20px auto; background: #ffffff; border-radius: 25px; border: 1px solid #e2e8f0; box-shadow: 0 20px 40px rgba(0,0,0,0.1); overflow: hidden;">
    
    <!-- رأس الأداة -->
    <div style="background: linear-gradient(135deg, #1e293b 0%, #2563eb 100%); color: white; padding: 30px; text-align: center;">
        <h2 style="margin: 0; font-size: 22px;">🚀 مولد ملفات PDF الاحترافي</h2>
        <p style="margin: 5px 0 0; opacity: 0.8; font-size: 14px;">اصنع مستندك الخاص مع شعارك بضغطة زر</p>
    </div>

    <div style="padding: 30px;">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
            <!-- رفع الصورة -->
            <div>
                <label style="display: block; margin-bottom: 10px; font-weight: bold; color: #475569;">1. اختر شعار أو صورة:</label>
                <div style="position: relative; height: 50px; background: #f1f5f9; border: 2px dashed #cbd5e1; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer;">
                    <input type="file" id="user-image" accept="image/*" onchange="previewImage(event)" style="position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer;">
                    <span id="upload-text" style="color: #64748b; font-size: 13px;">اضغط لرفع صورة 🖼️</span>
                </div>
            </div>
            <!-- العنوان -->
            <div>
                <label style="display: block; margin-bottom: 10px; font-weight: bold; color: #475569;">2. عنوان المستند:</label>
                <input type="text" id="pdf-title" placeholder="عنوان الملف..." style="width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #cbd5e1; outline: none; focus: border-color: #2563eb;">
            </div>
        </div>

        <!-- المحتوى -->
        <label style="display: block; margin-bottom: 10px; font-weight: bold; color: #475569;">3. محتوى التدوينة أو التقرير:</label>
        <textarea id="pdf-content" placeholder="اكتب النص هنا..." style="width: 100%; height: 180px; padding: 15px; border-radius: 12px; border: 1px solid #cbd5e1; margin-bottom: 20px; font-family: 'Cairo'; outline: none;"></textarea>

        <!-- زر التحميل المباشر -->
        <button onclick="downloadVikaPDF()" style="width: 100%; background: #10b981; color: white; border: none; padding: 18px; border-radius: 15px; font-weight: 900; font-size: 18px; cursor: pointer; transition: 0.3s; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);">
            تحميل الملف PDF مباشرة 📥
        </button>
    </div>

    <!-- قالب المعاينة المخفي -->
    <div id="hidden-template" style="display: none;">
        <div id="final-pdf" style="padding: 50px; direction: rtl; font-family: Arial, sans-serif; background: #fff;">
            <div style="display: flex; align-items: center; justify-content: space-between; border-bottom: 4px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px;">
                <div style="max-width: 70%;">
                    <h1 id="out-title" style="margin: 0; color: #1e293b; font-size: 28pt;"></h1>
                    <p style="color: #64748b; margin: 5px 0 0;">مستند صادر عن فيكا للمعلومات</p>
                </div>
                <img id="out-img" src="" style="max-width: 120px; max-height: 120px; border-radius: 10px; display: none;">
            </div>
            <div id="out-content" style="line-height: 1.8; font-size: 14pt; color: #334155; text-align: justify; white-space: pre-wrap;"></div>
            <div style="margin-top: 100px; text-align: center; color: #94a3b8; font-size: 10pt; border-top: 1px solid #e2e8f0; padding-top: 20px;">
                حقوق الطبع محفوظة لمدونة فيكا للمعلومات © www.salimvika.net
            </div>
        </div>
    </div>
</div>

<script>
let imageData = "";

function previewImage(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function() {
        imageData = reader.result;
        document.getElementById('upload-text').innerText = "تم اختيار الصورة ✅";
        document.getElementById('upload-text').style.color = "#10b981";
    }
    reader.readAsDataURL(file);
}

function downloadVikaPDF() {
    const title = document.getElementById('pdf-title').value;
    const content = document.getElementById('pdf-content').value;

    if(!title || !content) {
        alert("يا صديقي، فضلاً املأ العنوان والمحتوى أولاً! 😊");
        return;
    }

    // تعبئة القالب
    document.getElementById('out-title').innerText = title;
    document.getElementById('out-content').innerText = content;
    const imgTag = document.getElementById('out-img');
    
    if(imageData) {
        imgTag.src = imageData;
        imgTag.style.display = "block";
    } else {
        imgTag.style.display = "none";
    }

    // فتح نافذة الطباعة (محرك الـ PDF المتصفح)
    const printWindow = window.open('', '_blank');
    printWindow.document.write('<html><head><title>' + title + '</title>');
    printWindow.document.write('<style>@page { margin: 0; } body { padding: 0; margin: 0; font-family: Arial; }</style>');
    printWindow.document.write('</head><body>');
    printWindow.document.write(document.getElementById('hidden-template').innerHTML);
    printWindow.document.write('</body></html>');
    printWindow.document.close();

    // تشغيل أمر التحميل/الطباعة تلقائياً
    setTimeout(() => {
        printWindow.print();
        printWindow.close();
    }, 500);
}
</script>