<?php
// Store Identity Page - No Authentication Required
// This page displays the store's complete identity and documentation

$page_title = 'هوية المتجر - Roz Skin';
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $page_title; ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body { font-family: 'Tajawal', sans-serif; }
        .gradient-bg { background: linear-gradient(135deg, #E57393 0%, #D1537A 50%, #8B5CF6 100%); }
        .section-card { transition: all 0.3s ease; }
        .section-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .color-box { width: 100px; height: 100px; border-radius: 12px; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
    </style>
</head>
<body class="bg-gray-50">

<!-- Hero Section -->
<div class="gradient-bg text-white py-16">
    <div class="max-w-7xl mx-auto px-4">
        <div class="text-center">
            <div class="inline-block bg-white/20 backdrop-blur-sm rounded-full px-6 py-2 mb-4">
                <span class="text-sm font-medium">🏪 E-Commerce Platform</span>
            </div>
            <h1 class="text-5xl font-bold mb-4">Roz Skin Beauty Store</h1>
            <p class="text-xl text-white/90 mb-8">متجر إلكتروني متخصص في منتجات التجميل وخدمات البيوتي سنتر</p>
            <div class="flex gap-4 justify-center">
                <a href="dashboard.php" class="px-6 py-3 bg-white text-pink-600 rounded-lg font-bold hover:bg-gray-100 transition">
                    <i class="fas fa-tachometer-alt ml-2"></i>
                    لوحة التحكم
                </a>
                <a href="no-auth-dashboard.php" class="px-6 py-3 bg-white/20 backdrop-blur-sm text-white rounded-lg font-bold hover:bg-white/30 transition">
                    <i class="fas fa-unlock ml-2"></i>
                    نسخة التطوير
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Tabs Navigation -->
<div class="bg-white shadow-md sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4">
        <nav class="flex overflow-x-auto">
            <button onclick="switchTab('overview')" class="tab-btn px-6 py-4 text-sm font-medium border-b-2 border-pink-500 text-pink-600 whitespace-nowrap">
                <i class="fas fa-info-circle ml-1"></i> نظرة عامة
            </button>
            <button onclick="switchTab('colors')" class="tab-btn px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 whitespace-nowrap">
                <i class="fas fa-palette ml-1"></i> الهوية البصرية
            </button>
            <button onclick="switchTab('structure')" class="tab-btn px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 whitespace-nowrap">
                <i class="fas fa-sitemap ml-1"></i> الهيكل
            </button>
            <button onclick="switchTab('database')" class="tab-btn px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 whitespace-nowrap">
                <i class="fas fa-database ml-1"></i> قاعدة البيانات
            </button>
            <button onclick="switchTab('features')" class="tab-btn px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 whitespace-nowrap">
                <i class="fas fa-star ml-1"></i> الميزات
            </button>
            <button onclick="switchTab('tech')" class="tab-btn px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 whitespace-nowrap">
                <i class="fas fa-code ml-1"></i> التقنيات
            </button>
        </nav>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 py-8">

    <!-- Overview Tab -->
    <div id="overview-tab" class="tab-content active">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="section-card bg-white rounded-xl shadow-lg p-6 border-t-4 border-pink-500">
                <div class="flex items-center gap-4 mb-4">
                    <div class="bg-pink-100 p-4 rounded-full">
                        <i class="fas fa-store text-pink-600 text-3xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">نوع المشروع</h3>
                        <p class="text-gray-600">متجر إلكتروني</p>
                    </div>
                </div>
                <p class="text-sm text-gray-600">منصة متكاملة للتجارة الإلكترونية متخصصة في منتجات التجميل والعناية بالبشرة</p>
            </div>

            <div class="section-card bg-white rounded-xl shadow-lg p-6 border-t-4 border-blue-500">
                <div class="flex items-center gap-4 mb-4">
                    <div class="bg-blue-100 p-4 rounded-full">
                        <i class="fas fa-calendar text-blue-600 text-3xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">الإصدار</h3>
                        <p class="text-gray-600">1.0.0</p>
                    </div>
                </div>
                <p class="text-sm text-gray-600">آخر تحديث: 19 نوفمبر 2025</p>
            </div>

            <div class="section-card bg-white rounded-xl shadow-lg p-6 border-t-4 border-green-500">
                <div class="flex items-center gap-4 mb-4">
                    <div class="bg-green-100 p-4 rounded-full">
                        <i class="fas fa-check-circle text-green-600 text-3xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">الحالة</h3>
                        <p class="text-gray-600">Production Ready</p>
                    </div>
                </div>
                <p class="text-sm text-gray-600">جاهز للاستخدام في بيئة الإنتاج</p>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h2 class="text-2xl font-bold mb-6">📊 إحصائيات سريعة</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="text-center p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg">
                    <div class="text-3xl font-bold text-blue-600">~200</div>
                    <div class="text-sm text-gray-600">ملف</div>
                </div>
                <div class="text-center p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-lg">
                    <div class="text-3xl font-bold text-green-600">~50K</div>
                    <div class="text-sm text-gray-600">سطر كود</div>
                </div>
                <div class="text-center p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg">
                    <div class="text-3xl font-bold text-purple-600">46</div>
                    <div class="text-sm text-gray-600">جدول</div>
                </div>
                <div class="text-center p-4 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg">
                    <div class="text-3xl font-bold text-orange-600">~15</div>
                    <div class="text-sm text-gray-600">API</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Colors Tab -->
    <div id="colors-tab" class="tab-content">
        <div class="bg-white rounded-xl shadow-lg p-8">
            <h2 class="text-3xl font-bold mb-8">🎨 الهوية البصرية</h2>
            
            <h3 class="text-xl font-bold mb-4">الألوان الرئيسية</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
                <div class="text-center">
                    <div class="color-box mx-auto mb-3" style="background: #E57393;"></div>
                    <div class="font-bold">#E57393</div>
                    <div class="text-sm text-gray-600">وردي رئيسي</div>
                </div>
                <div class="text-center">
                    <div class="color-box mx-auto mb-3" style="background: #D1537A;"></div>
                    <div class="font-bold">#D1537A</div>
                    <div class="text-sm text-gray-600">وردي غامق</div>
                </div>
                <div class="text-center">
                    <div class="color-box mx-auto mb-3" style="background: #fce7f3;"></div>
                    <div class="font-bold">#fce7f3</div>
                    <div class="text-sm text-gray-600">وردي فاتح</div>
                </div>
                <div class="text-center">
                    <div class="color-box mx-auto mb-3" style="background: #8B5CF6;"></div>
                    <div class="font-bold">#8B5CF6</div>
                    <div class="text-sm text-gray-600">بنفسجي</div>
                </div>
            </div>

            <h3 class="text-xl font-bold mb-4">الألوان الثانوية</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="text-center">
                    <div class="color-box mx-auto mb-3" style="background: #10B981;"></div>
                    <div class="font-bold">#10B981</div>
                    <div class="text-sm text-gray-600">أخضر (نجاح)</div>
                </div>
                <div class="text-center">
                    <div class="color-box mx-auto mb-3" style="background: #F59E0B;"></div>
                    <div class="font-bold">#F59E0B</div>
                    <div class="text-sm text-gray-600">برتقالي (تحذير)</div>
                </div>
                <div class="text-center">
                    <div class="color-box mx-auto mb-3" style="background: #EF4444;"></div>
                    <div class="font-bold">#EF4444</div>
                    <div class="text-sm text-gray-600">أحمر (خطر)</div>
                </div>
                <div class="text-center">
                    <div class="color-box mx-auto mb-3" style="background: #3B82F6;"></div>
                    <div class="font-bold">#3B82F6</div>
                    <div class="text-sm text-gray-600">أزرق (معلومات)</div>
                </div>
            </div>

            <div class="mt-8 p-6 bg-gray-50 rounded-lg">
                <h3 class="text-xl font-bold mb-4">الخطوط</h3>
                <div class="space-y-2">
                    <div><strong>العربية:</strong> Tajawal (Google Fonts)</div>
                    <div><strong>الإنجليزية:</strong> System Default</div>
                    <div><strong>الأيقونات:</strong> Font Awesome 6.0.0</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Structure Tab -->
    <div id="structure-tab" class="tab-content">
        <div class="bg-white rounded-xl shadow-lg p-8">
            <h2 class="text-3xl font-bold mb-8">📁 هيكل المشروع</h2>
            
            <div class="bg-gray-900 text-green-400 p-6 rounded-lg font-mono text-sm overflow-x-auto">
<pre>kkl/
├── backend/
│   ├── admin/              # لوحة التحكم
│   │   ├── services/       # إدارة الخدمات
│   │   ├── products/       # إدارة المنتجات
│   │   ├── orders/         # إدارة الطلبات
│   │   ├── bookings/       # إدارة الحجوزات
│   │   ├── users/          # إدارة المستخدمين
│   │   ├── settings/       # الإعدادات
│   │   ├── file-manager/   # مدير الملفات
│   │   └── includes/       # ملفات مشتركة
│   │
│   ├── api/                # REST APIs
│   │   ├── orders/         # APIs الطلبات
│   │   ├── bookings/       # APIs الحجوزات
│   │   └── addresses.php   # APIs العناوين
│   │
│   ├── public/             # الواجهة العامة
│   │   ├── index.php       # الصفحة الرئيسية
│   │   ├── services.php    # صفحة الخدمات
│   │   ├── products.php    # صفحة المنتجات
│   │   ├── cart.php        # السلة
│   │   └── checkout.php    # الدفع
│   │
│   ├── models/             # Models
│   ├── config/             # الإعدادات
│   ├── includes/           # ملفات مشتركة
│   └── uploads/            # الملفات المرفوعة
│
├── install.php             # معالج التنصيب
└── index.php               # نقطة الدخول</pre>
            </div>
        </div>
    </div>

    <!-- Database Tab -->
    <div id="database-tab" class="tab-content">
        <div class="bg-white rounded-xl shadow-lg p-8">
            <h2 class="text-3xl font-bold mb-8">🗄️ قاعدة البيانات (46 جدول)</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="border rounded-lg p-6">
                    <h3 class="text-lg font-bold mb-4 text-blue-600">
                        <i class="fas fa-users ml-2"></i>
                        المستخدمين والصلاحيات
                    </h3>
                    <ul class="space-y-2 text-sm">
                        <li>• users - المستخدمين</li>
                        <li>• addresses - عناوين التوصيل</li>
                    </ul>
                </div>

                <div class="border rounded-lg p-6">
                    <h3 class="text-lg font-bold mb-4 text-green-600">
                        <i class="fas fa-box ml-2"></i>
                        المنتجات والخدمات
                    </h3>
                    <ul class="space-y-2 text-sm">
                        <li>• products - المنتجات</li>
                        <li>• categories - الفئات</li>
                        <li>• beauty_services - خدمات البيوتي</li>
                        <li>• branches - الفروع</li>
                    </ul>
                </div>

                <div class="border rounded-lg p-6">
                    <h3 class="text-lg font-bold mb-4 text-purple-600">
                        <i class="fas fa-shopping-cart ml-2"></i>
                        الطلبات والمبيعات
                    </h3>
                    <ul class="space-y-2 text-sm">
                        <li>• orders - الطلبات</li>
                        <li>• order_items - تفاصيل الطلبات</li>
                        <li>• cart - السلة</li>
                        <li>• beauty_bookings - حجوزات الخدمات</li>
                    </ul>
                </div>

                <div class="border rounded-lg p-6">
                    <h3 class="text-lg font-bold mb-4 text-orange-600">
                        <i class="fas fa-star ml-2"></i>
                        التقييمات والمحتوى
                    </h3>
                    <ul class="space-y-2 text-sm">
                        <li>• reviews - التقييمات</li>
                        <li>• posts - المدونة</li>
                        <li>• stories - الستوريز</li>
                        <li>• announcements - الإعلانات</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Tab -->
    <div id="features-tab" class="tab-content">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white rounded-xl shadow-lg p-8">
                <h2 class="text-2xl font-bold mb-6 text-pink-600">
                    <i class="fas fa-user ml-2"></i>
                    للعملاء
                </h2>
                <ul class="space-y-3">
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>تصفح المنتجات والخدمات</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>إضافة للسلة والشراء</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>حجز خدمات البيوتي</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>تتبع الطلبات</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>التقييمات والمراجعات</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>حساب شخصي</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>عناوين متعددة</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>كوبونات خصم</span>
                    </li>
                </ul>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-8">
                <h2 class="text-2xl font-bold mb-6 text-blue-600">
                    <i class="fas fa-user-shield ml-2"></i>
                    للمدراء
                </h2>
                <ul class="space-y-3">
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>لوحة تحكم شاملة</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>إدارة المنتجات والخدمات</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>إدارة الطلبات والحجوزات</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>إدارة المستخدمين</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>تقارير وإحصائيات</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>مدير ملفات متقدم</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>نسخ احتياطية</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span>أدوات تشخيص ومحلل مشروع</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Tech Tab -->
    <div id="tech-tab" class="tab-content">
        <div class="bg-white rounded-xl shadow-lg p-8">
            <h2 class="text-3xl font-bold mb-8">💻 التقنيات المستخدمة</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="border-2 border-blue-200 rounded-lg p-6 hover:shadow-lg transition">
                    <div class="text-4xl mb-4">🔧</div>
                    <h3 class="text-xl font-bold mb-2">Backend</h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li>• PHP (Native)</li>
                        <li>• MySQL Database</li>
                        <li>• PDO (Prepared Statements)</li>
                        <li>• RESTful APIs</li>
                    </ul>
                </div>

                <div class="border-2 border-green-200 rounded-lg p-6 hover:shadow-lg transition">
                    <div class="text-4xl mb-4">🎨</div>
                    <h3 class="text-xl font-bold mb-2">Frontend</h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li>• HTML5 & CSS3</li>
                        <li>• JavaScript (ES6+)</li>
                        <li>• Tailwind CSS</li>
                        <li>• Font Awesome 6</li>
                    </ul>
                </div>

                <div class="border-2 border-purple-200 rounded-lg p-6 hover:shadow-lg transition">
                    <div class="text-4xl mb-4">📊</div>
                    <h3 class="text-xl font-bold mb-2">Libraries</h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li>• Chart.js</li>
                        <li>• D3.js</li>
                        <li>• Google Fonts</li>
                        <li>• jQuery (optional)</li>
                    </ul>
                </div>
            </div>

            <div class="mt-8 p-6 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg">
                <h3 class="text-xl font-bold mb-4">المتطلبات</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <strong>Server:</strong>
                        <ul class="mt-2 space-y-1 text-sm">
                            <li>• PHP 7.4+</li>
                            <li>• MySQL 5.7+</li>
                            <li>• Apache/Nginx</li>
                        </ul>
                    </div>
                    <div>
                        <strong>Extensions:</strong>
                        <ul class="mt-2 space-y-1 text-sm">
                            <li>• PDO & PDO_MySQL</li>
                            <li>• GD Library</li>
                            <li>• mbstring, JSON, cURL</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Footer -->
<footer class="bg-gray-900 text-white py-8 mt-16">
    <div class="max-w-7xl mx-auto px-4 text-center">
        <p class="text-lg font-bold mb-2">Roz Skin Beauty Store</p>
        <p class="text-gray-400 text-sm">جميع الحقوق محفوظة © 2025</p>
        <p class="text-gray-500 text-xs mt-2">الإصدار 1.0.0 | آخر تحديث: 19 نوفمبر 2025</p>
    </div>
</footer>

<script>
function switchTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    
    // Remove active state from all buttons
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('border-pink-500', 'text-pink-600');
        btn.classList.add('text-gray-500');
    });
    
    // Show selected tab
    document.getElementById(tabName + '-tab').classList.add('active');
    
    // Activate button
    event.target.classList.add('border-pink-500', 'text-pink-600');
    event.target.classList.remove('text-gray-500');
}
</script>

</body>
</html>
