<?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>
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 progressBar = document.getElementById('progressBar');
    var progressLabel = document.getElementById('progressLabel');
    var progressStep = document.getElementById('progressStep');
    progressBar.style.width = '30%';
    progressLabel.textContent = '30%';
    progressStep.textContent = 'جاري فتح الكتاب...';

    var w = window.open('/tutorials/export-pdf', '_blank');

    setTimeout(function() {
        progressBar.style.width = '100%';
        progressLabel.textContent = '100%';
        progressStep.textContent = 'تم فتح الكتاب ✓';
        setTimeout(function() { finishExport(true); }, 1000);
    }, 2000);
}

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(); ?>
