@extends('layouts.store-dashboard')

@section('content')
<div>
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">تخصيص التصميم</h1>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">قم بتخصيص مظهر متجرك واختيار الألوان والخطوط المناسبة</p>
    </div>
    
    <!-- Customization Form -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <div class="flex flex-col md:flex-row gap-8">
            <!-- Form Column -->
            <div class="w-full md:w-2/3">
                <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-6">خيارات التخصيص</h2>
                
                <form method="POST" action="{{ route('store-dashboard.save-theme-customization', $store) }}" class="space-y-8">
                    @csrf
                    
                    <!-- Color Schemes -->
                    <div>
                        <h3 class="text-md font-medium text-gray-900 dark:text-white mb-4">نظام الألوان</h3>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="colors[primary]" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">اللون الرئيسي</label>
                                <div class="flex items-center">
                                    <input type="color" id="colors[primary]" name="colors[primary]" value="{{ $themeSettings['colors']['primary'] ?? $theme->colors->primary ?? '#3B82F6' }}" class="w-10 h-10 border-0 p-0 rounded">
                                    <input type="text" value="{{ $themeSettings['colors']['primary'] ?? $theme->colors->primary ?? '#3B82F6' }}" class="mr-2 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" disabled>
                                </div>
                            </div>
                            
                            <div>
                                <label for="colors[secondary]" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">اللون الثانوي</label>
                                <div class="flex items-center">
                                    <input type="color" id="colors[secondary]" name="colors[secondary]" value="{{ $themeSettings['colors']['secondary'] ?? $theme->colors->secondary ?? '#6B7280' }}" class="w-10 h-10 border-0 p-0 rounded">
                                    <input type="text" value="{{ $themeSettings['colors']['secondary'] ?? $theme->colors->secondary ?? '#6B7280' }}" class="mr-2 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" disabled>
                                </div>
                            </div>
                            
                            <div>
                                <label for="colors[accent]" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">لون التأكيد</label>
                                <div class="flex items-center">
                                    <input type="color" id="colors[accent]" name="colors[accent]" value="{{ $themeSettings['colors']['accent'] ?? $theme->colors->accent ?? '#EC4899' }}" class="w-10 h-10 border-0 p-0 rounded">
                                    <input type="text" value="{{ $themeSettings['colors']['accent'] ?? $theme->colors->accent ?? '#EC4899' }}" class="mr-2 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" disabled>
                                </div>
                            </div>
                            
                            <div>
                                <label for="colors[background]" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">لون الخلفية</label>
                                <div class="flex items-center">
                                    <input type="color" id="colors[background]" name="colors[background]" value="{{ $themeSettings['colors']['background'] ?? $theme->colors->background ?? '#F9FAFB' }}" class="w-10 h-10 border-0 p-0 rounded">
                                    <input type="text" value="{{ $themeSettings['colors']['background'] ?? $theme->colors->background ?? '#F9FAFB' }}" class="mr-2 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" disabled>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Typography -->
                    <div>
                        <h3 class="text-md font-medium text-gray-900 dark:text-white mb-4">الخطوط</h3>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="fonts[heading]" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">خط العناوين</label>
                                <select id="fonts[heading]" name="fonts[heading]" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    <option value="Tajawal" {{ ($themeSettings['fonts']['heading'] ?? $theme->fonts->heading ?? '') == 'Tajawal' ? 'selected' : '' }}>Tajawal</option>
                                    <option value="Cairo" {{ ($themeSettings['fonts']['heading'] ?? $theme->fonts->heading ?? '') == 'Cairo' ? 'selected' : '' }}>Cairo</option>
                                    <option value="Almarai" {{ ($themeSettings['fonts']['heading'] ?? $theme->fonts->heading ?? '') == 'Almarai' ? 'selected' : '' }}>Almarai</option>
                                    <option value="Changa" {{ ($themeSettings['fonts']['heading'] ?? $theme->fonts->heading ?? '') == 'Changa' ? 'selected' : '' }}>Changa</option>
                                    <option value="El Messiri" {{ ($themeSettings['fonts']['heading'] ?? $theme->fonts->heading ?? '') == 'El Messiri' ? 'selected' : '' }}>El Messiri</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="fonts[body]" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">خط النصوص</label>
                                <select id="fonts[body]" name="fonts[body]" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    <option value="Tajawal" {{ ($themeSettings['fonts']['body'] ?? $theme->fonts->body ?? '') == 'Tajawal' ? 'selected' : '' }}>Tajawal</option>
                                    <option value="Cairo" {{ ($themeSettings['fonts']['body'] ?? $theme->fonts->body ?? '') == 'Cairo' ? 'selected' : '' }}>Cairo</option>
                                    <option value="Almarai" {{ ($themeSettings['fonts']['body'] ?? $theme->fonts->body ?? '') == 'Almarai' ? 'selected' : '' }}>Almarai</option>
                                    <option value="Changa" {{ ($themeSettings['fonts']['body'] ?? $theme->fonts->body ?? '') == 'Changa' ? 'selected' : '' }}>Changa</option>
                                    <option value="El Messiri" {{ ($themeSettings['fonts']['body'] ?? $theme->fonts->body ?? '') == 'El Messiri' ? 'selected' : '' }}>El Messiri</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Layout Options -->
                    <div>
                        <h3 class="text-md font-medium text-gray-900 dark:text-white mb-4">خيارات التخطيط</h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label for="layout_options[header_style]" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نمط الهيدر</label>
                                <select id="layout_options[header_style]" name="layout_options[header_style]" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    <option value="default" {{ ($themeSettings['layout_options']['header_style'] ?? $theme->layout_options->header_style ?? '') == 'default' ? 'selected' : '' }}>افتراضي</option>
                                    <option value="centered" {{ ($themeSettings['layout_options']['header_style'] ?? $theme->layout_options->header_style ?? '') == 'centered' ? 'selected' : '' }}>متوسط</option>
                                    <option value="expanded" {{ ($themeSettings['layout_options']['header_style'] ?? $theme->layout_options->header_style ?? '') == 'expanded' ? 'selected' : '' }}>موسع</option>
                                    <option value="minimal" {{ ($themeSettings['layout_options']['header_style'] ?? $theme->layout_options->header_style ?? '') == 'minimal' ? 'selected' : '' }}>مبسط</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="layout_options[footer_columns]" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">أعمدة الفوتر</label>
                                <select id="layout_options[footer_columns]" name="layout_options[footer_columns]" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    <option value="2" {{ ($themeSettings['layout_options']['footer_columns'] ?? $theme->layout_options->footer_columns ?? '') == '2' ? 'selected' : '' }}>2 أعمدة</option>
                                    <option value="3" {{ ($themeSettings['layout_options']['footer_columns'] ?? $theme->layout_options->footer_columns ?? '') == '3' ? 'selected' : '' }}>3 أعمدة</option>
                                    <option value="4" {{ ($themeSettings['layout_options']['footer_columns'] ?? $theme->layout_options->footer_columns ?? '') == '4' ? 'selected' : '' }}>4 أعمدة</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="layout_options[product_layout]" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">تخطيط صفحة المنتج</label>
                                <select id="layout_options[product_layout]" name="layout_options[product_layout]" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    <option value="standard" {{ ($themeSettings['layout_options']['product_layout'] ?? $theme->layout_options->product_layout ?? '') == 'standard' ? 'selected' : '' }}>قياسي</option>
                                    <option value="gallery" {{ ($themeSettings['layout_options']['product_layout'] ?? $theme->layout_options->product_layout ?? '') == 'gallery' ? 'selected' : '' }}>معرض</option>
                                    <option value="minimalist" {{ ($themeSettings['layout_options']['product_layout'] ?? $theme->layout_options->product_layout ?? '') == 'minimalist' ? 'selected' : '' }}>مبسط</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Submit Buttons -->
                    <div class="flex flex-wrap gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            حفظ التخصيصات
                        </button>
                        
                        <a href="{{ route('store-dashboard.preview-theme', ['store' => $store, 'customize' => true]) }}" target="_blank" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                            معاينة
                        </a>
                        
                        <a href="{{ route('store-dashboard.themes', $store) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                            إلغاء
                        </a>
                    </div>
                </form>
            </div>
            
            <!-- Preview Column -->
            <div class="w-full md:w-1/3 relative">
                <div class="sticky top-20">
                    <h3 class="text-md font-medium text-gray-900 dark:text-white mb-4">معاينة</h3>
                    
                    <div class="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden shadow-sm">
                        <div class="aspect-[3/5] bg-gray-100 dark:bg-gray-800 overflow-hidden">
                            @if($theme->thumbnail)
                                <img src="{{ asset($theme->thumbnail) }}" alt="{{ $theme->name }}" class="w-full h-full object-cover">
                            @else
                                <div class="w-full h-full flex items-center justify-center text-gray-400 dark:text-gray-500">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </div>
                            @endif
                            <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex flex-col justify-end p-4">
                                <h4 class="text-white text-lg font-bold">{{ $theme->name }}</h4>
                                <p class="text-white/80 text-sm">سيتم تطبيق التغييرات على متجرك فوراً</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400 text-sm rounded-lg border border-yellow-100 dark:border-yellow-900/30">
                        <div class="flex">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-shrink-0 ml-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <p>تأكد من معاينة المتجر بعد حفظ التغييرات للتأكد من مظهره المناسب.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection