<?php
// هذا الملف سيتم تضمينه في الصفحات الأمامية (index.php, det.php)

// جلب إعدادات التصميم
try {
    // إعدادات التصميم العامة
    $design_settings = [];
    $stmt = $pdo->query("SELECT setting_key, setting_value FROM design_settings");
    while ($row = $stmt->fetch()) {
        $design_settings[$row['setting_key']] = $row['setting_value'];
    }
    
    // إعدادات الأزرار
    $button_settings = [];
    $stmt = $pdo->query("SELECT * FROM button_settings");
    while ($row = $stmt->fetch()) {
        $button_settings[$row['button_type']] = $row;
    }
    
    // CSS المخصص
    $custom_css_rules = [];
    $stmt = $pdo->query("SELECT * FROM custom_css WHERE is_active = 1 ORDER BY priority DESC, id");
    $custom_css_rules = $stmt->fetchAll();
    
} catch (Exception $e) {
    // إعدادات افتراضية في حالة الخطأ
    $design_settings = [
        'primary_color' => '#1a237e',
        'primary_dark' => '#0d47a1',
        'blue_color' => '#2196F3',
        'blue_dark' => '#1976D2',
        'secondary_color' => '#2C3E50',
        'font_family' => 'Tajawal, sans-serif',
        'border_radius_medium' => '8px',
        'shadow_medium' => '0 5px 15px rgba(0,0,0,0.1)'
    ];
}
?>
<style>
    :root {
        /* الألوان الرئيسية */
        --primary-color: <?= $design_settings['primary_color'] ?? '#1a237e' ?>;
        --primary-dark: <?= $design_settings['primary_dark'] ?? '#0d47a1' ?>;
        --secondary-color: <?= $design_settings['secondary_color'] ?? '#2C3E50' ?>;
        --blue-color: <?= $design_settings['blue_color'] ?? '#2196F3' ?>;
        --blue-dark: <?= $design_settings['blue_dark'] ?? '#1976D2' ?>;
        --success-color: <?= $design_settings['success_color'] ?? '#10b981' ?>;
        --danger-color: <?= $design_settings['danger_color'] ?? '#f72585' ?>;
        --warning-color: <?= $design_settings['warning_color'] ?? '#f8961e' ?>;
        --light-color: <?= $design_settings['light_color'] ?? '#F8F9FA' ?>;
        --dark-color: <?= $design_settings['dark_color'] ?? '#333333' ?>;
        --gray-color: <?= $design_settings['gray_color'] ?? '#6C757D' ?>;
        --border-color: <?= $design_settings['border_color'] ?? '#E0E0E0' ?>;
        
        /* أحجام الحدود */
        --border-radius-sm: <?= $design_settings['border_radius_small'] ?? '4px' ?>;
        --border-radius-md: <?= $design_settings['border_radius_medium'] ?? '8px' ?>;
        --border-radius-lg: <?= $design_settings['border_radius_large'] ?? '12px' ?>;
        --border-radius-xl: <?= $design_settings['border_radius_xl'] ?? '20px' ?>;
        
        /* الظلال */
        --shadow-light: <?= $design_settings['shadow_light'] ?? '0 2px 10px rgba(0,0,0,0.08)' ?>;
        --shadow-medium: <?= $design_settings['shadow_medium'] ?? '0 5px 15px rgba(0,0,0,0.1)' ?>;
        --shadow-heavy: <?= $design_settings['shadow_heavy'] ?? '0 10px 30px rgba(0,0,0,0.15)' ?>;
        
        /* التخطيط */
        --container-width: <?= $design_settings['container_width'] ?? '1200px' ?>;
        --header-sticky: <?= ($design_settings['header_sticky'] ?? 'true') == 'true' ? 'sticky' : 'relative' ?>;
        
        /* الخطوط */
        --font-family: <?= $design_settings['font_family'] ?? 'Tajawal, sans-serif' ?>;
        --base-font-size: <?= $design_settings['base_font_size'] ?? '16px' ?>;
        
        /* الأنيميشن */
        --transition: <?= $design_settings['transition_type'] ?? 'all 0.3s ease' ?>;
        --animation-duration: <?= $design_settings['animation_duration'] ?? '0.3s' ?>;
        --hover-scale: <?= $design_settings['hover_scale'] ?? '1.05' ?>;
    }
    
    /* تطبيق الخط الأساسي */
    * {
        font-family: var(--font-family);
    }
    
    /* تطبيق عرض الحاوية */
    .container {
        max-width: var(--container-width);
    }
    
    /* تخصيص الهيدر */
    .header {
        position: var(--header-sticky);
        background: <?= $design_settings['header_background'] ?? '#ffffff' ?>;
        color: <?= $design_settings['header_text_color'] ?? '#333333' ?>;
    }
    
    /* تخصيص الفوتر */
    .footer {
        background: <?= $design_settings['footer_background'] ?? '#2C3E50' ?>;
        color: <?= $design_settings['footer_text_color'] ?? '#ffffff' ?>;
    }
    
    /* تخصيص بطاقات المنتجات */
    .product-card {
        background: <?= $design_settings['product_card_background'] ?? '#ffffff' ?>;
        border-radius: <?= $design_settings['product_card_border_radius'] ?? '12px' ?>;
        <?php if (($design_settings['product_card_shadow'] ?? 'true') == 'true'): ?>
        box-shadow: var(--shadow-light);
        <?php endif; ?>
        transition: var(--transition);
    }
    
    .product-card:hover {
        transform: scale(var(--hover-scale));
        box-shadow: var(--shadow-heavy);
    }
    
    .product-title {
        color: <?= $design_settings['product_title_color'] ?? '#2C3E50' ?>;
    }
    
    .product-price {
        color: <?= $design_settings['product_price_color'] ?? '#2196F3' ?>;
    }
    
    /* تخصيص الأزرار العامة */
    .btn, button:not(.no-style) {
        border-radius: <?= $design_settings['button_border_radius'] ?? '8px' ?>;
        padding: <?= $design_settings['button_padding'] ?? '12px 20px' ?>;
        font-weight: <?= $design_settings['button_font_weight'] ?? '600' ?>;
        transition: var(--transition);
    }
    
    /* تخصيص الأزرار حسب النوع */
    <?php foreach ($button_settings as $type => $button): ?>
    .btn-<?= $type ?>, .btn.<?= $type ?>, button.<?= $type ?> {
        background: <?= $button['background_color'] ?>;
        color: <?= $button['text_color'] ?>;
        border-radius: <?= $button['border_radius'] ?>;
        padding: <?= $button['padding_vertical'] . ' ' . $button['padding_horizontal'] ?>;
        font-size: <?= $button['font_size'] ?>;
        font-weight: <?= $button['font_weight'] ?>;
        box-shadow: <?= $button['box_shadow'] ?>;
        <?php if ($button['animation_type'] != 'none'): ?>
        animation: <?= $button['animation_type'] ?> <?= $button['animation_duration'] ?> <?= $button['animation_count'] ?>;
        <?php endif; ?>
        <?php if ($button['is_glow_enabled']): ?>
        position: relative;
        overflow: hidden;
        <?php endif; ?>
    }
    
    .btn-<?= $type ?>:hover, .btn.<?= $type ?>:hover, button.<?= $type ?>:hover {
        background: <?= $button['hover_background'] ?>;
        color: <?= $button['hover_text_color'] ?>;
        box-shadow: <?= $button['hover_box_shadow'] ?>;
        transform: translateY(-2px);
    }
    
    <?php if ($button['is_glow_enabled']): ?>
    .btn-<?= $type ?>::after, .btn.<?= $type ?>::after, button.<?= $type ?>::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, <?= $button['glow_color'] ?> 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.5s;
        pointer-events: none;
        animation: glowRotate 4s linear infinite;
    }
    
    .btn-<?= $type ?>:hover::after, .btn.<?= $type ?>:hover::after, button.<?= $type ?>:hover::after {
        opacity: 0.3;
    }
    
    @keyframes glowRotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    <?php endif; ?>
    <?php endforeach; ?>
    
    /* توهج الأزرار */
    <?php if (($design_settings['glow_enabled'] ?? 'false') == 'true'): ?>
    .glow-effect {
        animation: glow <?= $design_settings['animation_duration'] ?? '2s' ?> infinite;
    }
    
    @keyframes glow {
        0% { box-shadow: 0 0 5px <?= $design_settings['glow_color'] ?? '#2196F3' ?>; }
        50% { box-shadow: 0 0 <?= $design_settings['glow_intensity'] ?? '20px' ?> <?= $design_settings['glow_color'] ?? '#2196F3' ?>; }
        100% { box-shadow: 0 0 5px <?= $design_settings['glow_color'] ?? '#2196F3' ?>; }
    }
    <?php endif; ?>
    
    /* تفعيل الأنيميشن */
    <?php if (($design_settings['animation_enabled'] ?? 'true') == 'true'): ?>
    .fade-in {
        animation: fadeIn var(--animation-duration) ease;
    }
    
    .slide-up {
        animation: slideUp var(--animation-duration) ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    <?php endif; ?>
    
    /* CSS مخصص من قاعدة البيانات */
    <?php foreach ($custom_css_rules as $rule): ?>
    <?= $rule['css_selector'] ?> {
        <?= $rule['css_property'] ?>: <?= $rule['css_value'] ?>;
    }
    <?php endforeach; ?>
    
    /* CSS مخصص متقدم */
    <?= $design_settings['custom_css'] ?? '' ?>
</style>