<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>كتاب النظام<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<div style="max-width:700px;margin:0 auto;padding:40px 0;">

    <!-- Header -->
    <div style="text-align:center;margin-bottom:48px;">
        <div style="width:100px;height:100px;background:linear-gradient(135deg,#1A1A2E,#4C1D95);border-radius:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 32px rgba(76,29,149,0.3);">
            <i data-lucide="book-open" style="width:48px;height:48px;color:#fff;"></i>
        </div>
        <h1 style="font-size:32px;font-weight:900;color:#1A1A2E;margin:0 0 8px;">Book of the ERP</h1>
        <h2 style="font-size:20px;font-weight:600;color:#4C1D95;margin:0 0 12px;">كتاب النظام الشامل</h2>
        <p style="font-size:14px;color:#6B7280;margin:0;line-height:1.8;">
            تصدير جميع الشروحات والخطوات ولقطات الشاشة في ملف PDF واحد<br>
            يمكن طباعته أو مشاركته كدليل تدريبي للموظفين
        </p>
    </div>

    <!-- Stats -->
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:40px;">
        <div class="card" style="padding:20px;text-align:center;">
            <div style="font-size:28px;font-weight:900;color:#4C1D95;"><?= (int) $totalSections ?></div>
            <div style="font-size:12px;color:#6B7280;margin-top:4px;">قسم</div>
        </div>
        <div class="card" style="padding:20px;text-align:center;">
            <div style="font-size:28px;font-weight:900;color:#059669;"><?= (int) $totalTutorials ?></div>
            <div style="font-size:12px;color:#6B7280;margin-top:4px;">شرح</div>
        </div>
        <div class="card" style="padding:20px;text-align:center;">
            <div style="font-size:28px;font-weight:900;color:#3B82F6;">105</div>
            <div style="font-size:12px;color:#6B7280;margin-top:4px;">لقطة شاشة</div>
        </div>
    </div>

    <!-- Export Card -->
    <div class="card" style="padding:32px;" id="exportCard">
        <!-- Before Export -->
        <div id="beforeExport">
            <div style="display:flex;align-items:center;gap:14px;margin-bottom:20px;">
                <div style="width:44px;height:44px;background:#EDE9FE;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="file-down" style="width:22px;height:22px;color:#7C3AED;"></i>
                </div>
                <div>
                    <h3 style="font-size:16px;font-weight:700;color:#1A1A2E;margin:0 0 2px;">تصدير الكتاب كاملاً</h3>
                    <p style="font-size:12px;color:#6B7280;margin:0;">سيتم تجميع كل الشروحات وتحويلها إلى PDF</p>
                </div>
            </div>
            <div style="background:#F9FAFB;border-radius:10px;padding:14px 16px;margin-bottom:20px;">
                <div style="font-size:12px;color:#374151;line-height:2;">
                    <span style="display:inline-flex;align-items:center;gap:4px;"><i data-lucide="check-circle" style="width:12px;height:12px;color:#059669;"></i> غلاف الكتاب</span><br>
                    <span style="display:inline-flex;align-items:center;gap:4px;"><i data-lucide="check-circle" style="width:12px;height:12px;color:#059669;"></i> فهرس المحتويات</span><br>
                    <span style="display:inline-flex;align-items:center;gap:4px;"><i data-lucide="check-circle" style="width:12px;height:12px;color:#059669;"></i> جميع الشروحات مع الخطوات التفصيلية</span><br>
                    <span style="display:inline-flex;align-items:center;gap:4px;"><i data-lucide="check-circle" style="width:12px;height:12px;color:#059669;"></i> لقطات الشاشة المدمجة</span><br>
                    <span style="display:inline-flex;align-items:center;gap:4px;"><i data-lucide="check-circle" style="width:12px;height:12px;color:#059669;"></i> تنسيق A4 جاهز للطباعة</span>
                </div>
            </div>
            <button type="button" id="exportBtn" onclick="startExport()" style="width:100%;padding:14px;background:linear-gradient(135deg,#1A1A2E,#4C1D95);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 12px rgba(76,29,149,0.3);">
                <i data-lucide="download" style="width:18px;height:18px;"></i>
                بدء التصدير
            </button>
        </div>

        <!-- During Export -->
        <div id="duringExport" style="display:none;">
            <div style="text-align:center;margin-bottom:20px;">
                <div style="width:56px;height:56px;margin:0 auto 14px;position:relative;">
                    <svg viewBox="0 0 56 56" style="width:56px;height:56px;animation:spin 1.5s linear infinite;">
                        <circle cx="28" cy="28" r="24" fill="none" stroke="#EDE9FE" stroke-width="4"></circle>
                        <circle cx="28" cy="28" r="24" fill="none" stroke="#7C3AED" stroke-width="4" stroke-dasharray="120 150" stroke-linecap="round"></circle>
                    </svg>
                </div>
                <h3 style="font-size:16px;font-weight:700;color:#1A1A2E;margin:0 0 6px;" id="exportTitle">جاري التصدير...</h3>
                <p style="font-size:12px;color:#6B7280;margin:0;" id="exportSubtitle">يتم الآن تجميع الشروحات ولقطات الشاشة</p>
            </div>

            <!-- Progress Bar -->
            <div style="background:#F3F4F6;border-radius:8px;height:12px;overflow:hidden;margin-bottom:12px;">
                <div id="progressBar" style="height:100%;background:linear-gradient(90deg,#7C3AED,#8B5CF6);border-radius:8px;transition:width 0.4s ease;width:0%;"></div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <span style="font-size:11px;color:#6B7280;" id="progressLabel">0%</span>
                <span style="font-size:11px;color:#6B7280;" id="progressStep">تحضير البيانات...</span>
            </div>
        </div>

        <!-- After Export (Success) -->
        <div id="afterExport" style="display:none;">
            <div style="text-align:center;">
                <div style="width:64px;height:64px;background:#ECFDF5;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                    <i data-lucide="check-circle-2" style="width:32px;height:32px;color:#059669;"></i>
                </div>
                <h3 style="font-size:16px;font-weight:700;color:#059669;margin:0 0 6px;">تم التصدير بنجاح!</h3>
                <p style="font-size:12px;color:#6B7280;margin:0 0 20px;">تم تحميل الملف — تحقق من مجلد التنزيلات</p>
                <button type="button" onclick="resetExport()" style="padding:10px 24px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:10px;font-size:13px;font-weight:600;color:#374151;cursor:pointer;transition:all .15s;" onmouseover="this.style.background='#EDE9FE';this.style.borderColor='#8B5CF6'" onmouseout="this.style.background='#F9FAFB';this.style.borderColor='#E5E7EB'">
                    <i data-lucide="refresh-cw" style="width:13px;height:13px;display:inline;vertical-align:-2px;"></i>
                    تصدير مرة أخرى
                </button>
            </div>
        </div>

        <!-- Error State -->
        <div id="errorExport" style="display:none;">
            <div style="text-align:center;">
                <div style="width:64px;height:64px;background:#FEF2F2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                    <i data-lucide="alert-circle" style="width:32px;height:32px;color:#DC2626;"></i>
                </div>
                <h3 style="font-size:16px;font-weight:700;color:#DC2626;margin:0 0 6px;">حدث خطأ</h3>
                <p style="font-size:12px;color:#6B7280;margin:0 0 20px;" id="errorMessage">فشل التصدير. حاول مرة أخرى.</p>
                <button type="button" onclick="resetExport()" style="padding:10px 24px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:10px;font-size:13px;font-weight:600;color:#374151;cursor:pointer;">
                    إعادة المحاولة
                </button>
            </div>
        </div>
    </div>

    <!-- Info Note -->
    <div style="margin-top:24px;padding:14px 16px;background:#DBEAFE;border:1px solid #3B82F630;border-radius:10px;font-size:12px;color:#1E40AF;line-height:1.8;">
        <strong>ملاحظة:</strong> حجم الملف قد يكون كبيراً بسبب لقطات الشاشة المدمجة. التصدير قد يستغرق بضع ثوانٍ حسب سرعة السيرفر.
    </div>
</div>

<style>
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>

<script>
var exportSteps = [
    { pct: 5,   label: 'تحضير البيانات...' },
    { pct: 12,  label: 'تجميع شروحات العضوية...' },
    { pct: 20,  label: 'تجميع شروحات الأنشطة الرياضية...' },
    { pct: 28,  label: 'تجميع شروحات الخزنة...' },
    { pct: 35,  label: 'تجميع باقي الأقسام...' },
    { pct: 45,  label: 'تضمين لقطات الشاشة...' },
    { pct: 55,  label: 'توليد ملف PDF...' },
    { pct: 65,  label: 'معالجة الصفحات...' },
    { pct: 72,  label: 'تنسيق المحتوى...' },
    { pct: 80,  label: 'ضغط الملف...' },
    { pct: 88,  label: 'المراجعة النهائية...' },
    { pct: 94,  label: 'جاري الانتهاء...' },
];
var stepTimer = null;
var cookieTimer = null;

function startExport() {
    document.getElementById('beforeExport').style.display = 'none';
    document.getElementById('duringExport').style.display = 'block';
    document.getElementById('afterExport').style.display = 'none';
    document.getElementById('errorExport').style.display = 'none';

    var stepIndex = 0;
    var progressBar = document.getElementById('progressBar');
    var progressLabel = document.getElementById('progressLabel');
    var progressStep = document.getElementById('progressStep');

    function animateStep() {
        if (stepIndex >= exportSteps.length) return;
        var step = exportSteps[stepIndex];
        progressBar.style.width = step.pct + '%';
        progressLabel.textContent = step.pct + '%';
        progressStep.textContent = step.label;
        stepIndex++;
        if (stepIndex < exportSteps.length) {
            stepTimer = setTimeout(animateStep, 8000);
        }
    }
    animateStep();

    // Use hidden iframe — browsers don't timeout iframe downloads
    var token = Date.now().toString();
    var iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.setAttribute('id', 'exportFrame');
    iframe.src = '/tutorials/export-pdf?dl=' + token;
    document.body.appendChild(iframe);

    // Poll for download cookie (set by server when response is sent)
    cookieTimer = setInterval(function() {
        if (document.cookie.indexOf('book_download=' + token) !== -1) {
            clearInterval(cookieTimer);
            clearTimeout(stepTimer);
            // Clear the cookie
            document.cookie = 'book_download=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
            progressBar.style.width = '100%';
            progressLabel.textContent = '100%';
            progressStep.textContent = 'اكتمل! تم التحميل ✓';
            setTimeout(function() { finishExport(true); }, 1500);
            // Clean up iframe
            var f = document.getElementById('exportFrame');
            if (f) setTimeout(function() { f.remove(); }, 5000);
        }
    }, 2000);

    // Safety timeout: 5 minutes max
    setTimeout(function() {
        if (document.getElementById('duringExport').style.display !== 'none') {
            clearInterval(cookieTimer);
            clearTimeout(stepTimer);
            document.getElementById('errorMessage').textContent = 'انتهت المهلة. قد يكون الملف قد تم تحميله — تحقق من مجلد التنزيلات.';
            finishExport(false);
            var f = document.getElementById('exportFrame');
            if (f) f.remove();
        }
    }, 300000);
}

function finishExport(success) {
    document.getElementById('duringExport').style.display = 'none';
    if (success) {
        document.getElementById('afterExport').style.display = 'block';
    } else {
        document.getElementById('errorExport').style.display = 'block';
    }
}

function resetExport() {
    document.getElementById('beforeExport').style.display = 'block';
    document.getElementById('duringExport').style.display = 'none';
    document.getElementById('afterExport').style.display = 'none';
    document.getElementById('errorExport').style.display = 'none';
    document.getElementById('progressBar').style.width = '0%';
    clearInterval(cookieTimer);
    clearTimeout(stepTimer);
}

document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>
<?php $__template->endSection(); ?>
