<?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: 10,  label: 'تحضير البيانات...' },
    { pct: 25,  label: 'تجميع شروحات العضوية...' },
    { pct: 40,  label: 'تجميع شروحات الأنشطة الرياضية...' },
    { pct: 55,  label: 'تجميع شروحات الخزنة...' },
    { pct: 65,  label: 'تجميع باقي الأقسام...' },
    { pct: 75,  label: 'تضمين لقطات الشاشة...' },
    { pct: 85,  label: 'توليد ملف PDF...' },
    { pct: 92,  label: 'تجهيز التحميل...' },
];
var pollTimer = null;
var stepTimer = 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, 4000);
        }
    }
    animateStep();

    fetch('/tutorials/export-start', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'started' || data.status === 'processing') {
            pollStatus();
        } else {
            showError('فشل بدء التصدير');
        }
    })
    .catch(function(err) {
        showError('فشل الاتصال: ' + err.message);
    });
}

function pollStatus() {
    pollTimer = setInterval(function() {
        fetch('/tutorials/export-status')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.status === 'done') {
                    clearInterval(pollTimer);
                    clearTimeout(stepTimer);
                    document.getElementById('progressBar').style.width = '100%';
                    document.getElementById('progressLabel').textContent = '100%';
                    document.getElementById('progressStep').textContent = 'اكتمل! جاري التحميل...';
                    downloadFile();
                } else if (data.status === 'error') {
                    clearInterval(pollTimer);
                    clearTimeout(stepTimer);
                    showError(data.message || 'فشل التصدير');
                }
            })
            .catch(function() {});
    }, 3000);
}

function downloadFile() {
    fetch('/tutorials/export-download')
        .then(function(response) {
            if (!response.ok) throw new Error('HTTP ' + response.status);
            return response.blob();
        })
        .then(function(blob) {
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = 'Book-of-the-ERP.pdf';
            document.body.appendChild(a);
            a.click();
            setTimeout(function() {
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            }, 100);
            setTimeout(function() { finishExport(true); }, 600);
        })
        .catch(function(err) {
            showError('فشل التحميل: ' + err.message);
        });
}

function showError(msg) {
    clearInterval(pollTimer);
    clearTimeout(stepTimer);
    document.getElementById('errorMessage').textContent = msg;
    finishExport(false);
}

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%';
}

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