<?php
$page_title = 'اختبار التحسينات';
$breadcrumb = [
    ['title' => 'الرئيسية', 'url' => 'dashboard.php'],
    ['title' => 'اختبار التحسينات']
];
include 'includes/header.php';
?>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Toast Notifications -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Toast Notifications</h3>
        </div>
        <div class="card-body">
            <div class="flex flex-col gap-3">
                <button onclick="showSuccess('تم الحفظ بنجاح!')" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 btn-ripple">
                    <i class="fas fa-check ml-2"></i> Success Toast
                </button>
                <button onclick="showError('حدث خطأ ما!')" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 btn-ripple">
                    <i class="fas fa-times ml-2"></i> Error Toast
                </button>
                <button onclick="showWarning('تحذير: تأكد من البيانات')" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 btn-ripple">
                    <i class="fas fa-exclamation-triangle ml-2"></i> Warning Toast
                </button>
                <button onclick="showInfo('معلومة مفيدة')" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 btn-ripple">
                    <i class="fas fa-info-circle ml-2"></i> Info Toast
                </button>
            </div>
        </div>
    </div>

    <!-- Loading States -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Loading States</h3>
        </div>
        <div class="card-body">
            <div class="flex flex-col gap-3">
                <button onclick="loading.show('جاري التحميل...'); setTimeout(() => loading.hide(), 2000)" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 btn-ripple">
                    <i class="fas fa-spinner ml-2"></i> Show Loading
                </button>
                <button onclick="const btn = this; setButtonLoading(btn); setTimeout(() => setButtonLoading(btn, false), 2000)" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 btn-ripple">
                    <i class="fas fa-save ml-2"></i> Button Loading
                </button>
                <button onclick="showAutoSaveIndicator('saving'); setTimeout(() => showAutoSaveIndicator('saved'), 1500)" class="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 btn-ripple">
                    <i class="fas fa-cloud ml-2"></i> Auto Save
                </button>
            </div>
        </div>
    </div>

    <!-- Animations -->
    <div class="card card-hover">
        <div class="card-header">
            <h3 class="card-title">Animations</h3>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-2 gap-4">
                <div class="p-4 bg-blue-50 rounded-lg text-center slide-in-right">
                    <i class="fas fa-rocket text-3xl text-blue-600 float"></i>
                    <p class="text-sm mt-2">Floating</p>
                </div>
                <div class="p-4 bg-green-50 rounded-lg text-center zoom-in">
                    <i class="fas fa-star text-3xl text-green-600"></i>
                    <p class="text-sm mt-2">Zoom In</p>
                </div>
                <div class="p-4 bg-purple-50 rounded-lg text-center">
                    <div class="spinner mx-auto"></div>
                    <p class="text-sm mt-2">Spinner</p>
                </div>
                <div class="p-4 bg-orange-50 rounded-lg text-center">
                    <div class="loading-dots mx-auto">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <p class="text-sm mt-2">Loading Dots</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Skeleton Loading -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Skeleton Loading</h3>
        </div>
        <div class="card-body">
            <div class="flex items-center gap-4 mb-4">
                <div class="skeleton skeleton-avatar"></div>
                <div class="flex-1">
                    <div class="skeleton skeleton-title"></div>
                    <div class="skeleton skeleton-text"></div>
                </div>
            </div>
            <div class="skeleton skeleton-text"></div>
            <div class="skeleton skeleton-text"></div>
            <div class="skeleton skeleton-text" style="width: 70%;"></div>
        </div>
    </div>

    <!-- Tooltips -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Tooltips</h3>
        </div>
        <div class="card-body">
            <div class="flex gap-4 flex-wrap">
                <button class="px-4 py-2 bg-gray-600 text-white rounded-lg" data-tooltip="هذا زر">
                    Hover Me
                </button>
                <button class="px-4 py-2 bg-gray-600 text-white rounded-lg" data-tooltip="معلومات إضافية">
                    Info Button
                </button>
                <button class="px-4 py-2 bg-gray-600 text-white rounded-lg" data-tooltip="اضغط للحفظ">
                    Save Button
                </button>
            </div>
        </div>
    </div>

    <!-- Confirm Dialog -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Confirm Dialog</h3>
        </div>
        <div class="card-body">
            <button onclick="confirmDialog('هل أنت متأكد من الحذف؟', () => showSuccess('تم الحذف'), () => showInfo('تم الإلغاء'))" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 btn-ripple">
                <i class="fas fa-trash ml-2"></i> Delete with Confirm
            </button>
        </div>
    </div>

    <!-- Gradient Text -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Gradient Text</h3>
        </div>
        <div class="card-body">
            <h1 class="text-4xl font-bold gradient-text mb-4">Roz Skin</h1>
            <p class="text-2xl font-semibold gradient-text">Premium Beauty Products</p>
        </div>
    </div>

    <!-- Progress Bars -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Progress Bars</h3>
        </div>
        <div class="card-body">
            <div class="space-y-4">
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="text-sm">المبيعات</span>
                        <span class="text-sm font-semibold">75%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill progress-bar-animated" style="width: 75%;"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="text-sm">المخزون</span>
                        <span class="text-sm font-semibold">45%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill warning progress-bar-animated" style="width: 45%;"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="text-sm">الإنتاج</span>
                        <span class="text-sm font-semibold">20%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill danger progress-bar-animated" style="width: 20%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Badges -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Badges</h3>
        </div>
        <div class="card-body">
            <div class="flex gap-3 flex-wrap">
                <span class="badge badge-blue badge-pulse">جديد</span>
                <span class="badge badge-orange">تحذير</span>
                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-semibold">نشط</span>
                <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-semibold">ملغي</span>
            </div>
        </div>
    </div>

    <!-- Copy to Clipboard -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Copy to Clipboard</h3>
        </div>
        <div class="card-body">
            <div class="flex gap-2">
                <input type="text" value="https://rozskin.com/product/123" class="flex-1 px-3 py-2 border rounded-lg" readonly>
                <button onclick="copyToClipboard('https://rozskin.com/product/123')" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 btn-ripple">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.progress-fill.warning {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.progress-fill.danger {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}
</style>

<?php include 'includes/footer.php'; ?>
