@extends('layouts.app')

@section('content')
<div class="bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 min-h-screen pb-12">
    <div class="max-w-7xl mx-auto pt-6 px-4 sm:px-6 lg:px-8">
        <!-- Header Section -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 mb-8 overflow-hidden">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center p-6 md:p-8">
                <div class="flex items-center">
                    <div class="h-12 w-12 bg-indigo-600 rounded-lg flex items-center justify-center text-white mr-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                        </svg>
                    </div>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-800 dark:text-white">تخصيص الثيم</h1>
                        <p class="text-gray-500 dark:text-gray-400 mt-1">
                            <span>{{ $store->name }}</span>
                            <span class="mx-2">•</span>
                            <span>{{ $theme->name }}</span>
                        </p>
                    </div>
                </div>
                <div class="flex flex-wrap gap-2 mt-4 md:mt-0">
                    <a href="{{ route('stores.themes.index', $store) }}" class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg font-medium text-sm text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none transition ease-in-out duration-150">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                        العودة لقائمة الثيمات
                    </a>
                    <a href="{{ route('stores.themes.preview', $store) }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-lg font-medium text-sm text-white shadow-sm hover:bg-indigo-700 focus:outline-none transition ease-in-out duration-150">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" 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>
                </div>
            </div>
        </div>
        
        <!-- Customization Form -->
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <div class="col-span-1 lg:col-span-3">
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                    <form method="POST" action="{{ route('stores.themes.save-customize', $store) }}">
                        @csrf
                        
                        <!-- Color Settings -->
                        <div class="mb-8">
                            <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500 dark:text-indigo-400 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                                </svg>
                                الألوان الرئيسية
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                @php
                                    $themeColors = json_decode($theme->colors, true);
                                    $customColors = isset($themeSettings['colors']) ? $themeSettings['colors'] : [];
                                @endphp
                                
                                @foreach(['primary', 'secondary', 'accent', 'background', 'card', 'text'] as $colorKey)
                                <div class="flex items-center">
                                    <label class="w-1/3 text-sm font-medium text-gray-700 dark:text-gray-300">{{ $colorKey }}</label>
                                    <div class="w-2/3 flex items-center">
                                        <input type="color" name="colors[{{ $colorKey }}]" value="{{ $customColors[$colorKey] ?? $themeColors[$colorKey] ?? '#FFFFFF' }}" class="h-10 w-10 rounded-md border border-gray-300 dark:border-gray-600">
                                        <input type="text" name="colors[{{ $colorKey }}_hex]" value="{{ $customColors[$colorKey] ?? $themeColors[$colorKey] ?? '#FFFFFF' }}" class="mr-2 py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm dark:bg-gray-700 dark:text-gray-300">
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        
                        <!-- Font Settings -->
                        <div class="mb-8">
                            <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500 dark:text-indigo-400 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                                </svg>
                                الخطوط
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                @php
                                    $themeFonts = json_decode($theme->fonts, true);
                                    $customFonts = isset($themeSettings['fonts']) ? $themeSettings['fonts'] : [];
                                @endphp
                                
                                <div class="flex items-center">
                                    <label class="w-1/3 text-sm font-medium text-gray-700 dark:text-gray-300">الخط الرئيسي</label>
                                    <div class="w-2/3">
                                        <select name="fonts[primary]" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm dark:bg-gray-700 dark:text-gray-300 w-full">
                                            <option value="Tajawal, sans-serif" {{ ($customFonts['primary'] ?? $themeFonts['primary'] ?? '') == 'Tajawal, sans-serif' ? 'selected' : '' }}>Tajawal</option>
                                            <option value="Cairo, sans-serif" {{ ($customFonts['primary'] ?? $themeFonts['primary'] ?? '') == 'Cairo, sans-serif' ? 'selected' : '' }}>Cairo</option>
                                            <option value="Almarai, sans-serif" {{ ($customFonts['primary'] ?? $themeFonts['primary'] ?? '') == 'Almarai, sans-serif' ? 'selected' : '' }}>Almarai</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <label class="w-1/3 text-sm font-medium text-gray-700 dark:text-gray-300">حجم العناوين</label>
                                    <div class="w-2/3">
                                        <select name="fonts[heading_size]" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm dark:bg-gray-700 dark:text-gray-300 w-full">
                                            <option value="1.125rem" {{ ($customFonts['heading_size'] ?? $themeFonts['heading_size'] ?? '') == '1.125rem' ? 'selected' : '' }}>صغير (1.125rem)</option>
                                            <option value="1.25rem" {{ ($customFonts['heading_size'] ?? $themeFonts['heading_size'] ?? '') == '1.25rem' ? 'selected' : '' }}>متوسط (1.25rem)</option>
                                            <option value="1.5rem" {{ ($customFonts['heading_size'] ?? $themeFonts['heading_size'] ?? '') == '1.5rem' ? 'selected' : '' }}>كبير (1.5rem)</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <label class="w-1/3 text-sm font-medium text-gray-700 dark:text-gray-300">حجم النص</label>
                                    <div class="w-2/3">
                                        <select name="fonts[body_size]" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm dark:bg-gray-700 dark:text-gray-300 w-full">
                                            <option value="0.875rem" {{ ($customFonts['body_size'] ?? $themeFonts['body_size'] ?? '') == '0.875rem' ? 'selected' : '' }}>صغير (0.875rem)</option>
                                            <option value="1rem" {{ ($customFonts['body_size'] ?? $themeFonts['body_size'] ?? '') == '1rem' ? 'selected' : '' }}>متوسط (1rem)</option>
                                            <option value="1.125rem" {{ ($customFonts['body_size'] ?? $themeFonts['body_size'] ?? '') == '1.125rem' ? 'selected' : '' }}>كبير (1.125rem)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Layout Settings -->
                        <div class="mb-8">
                            <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500 dark:text-indigo-400 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                                </svg>
                                إعدادات التخطيط
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                @php
                                    $themeLayout = json_decode($theme->layout_options, true);
                                    $customLayout = isset($themeSettings['layout_options']) ? $themeSettings['layout_options'] : [];
                                @endphp
                                
                                <div class="flex items-center">
                                    <label class="w-1/3 text-sm font-medium text-gray-700 dark:text-gray-300">موضع القائمة الجانبية</label>
                                    <div class="w-2/3">
                                        <select name="layout_options[sidebar_position]" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm dark:bg-gray-700 dark:text-gray-300 w-full">
                                            <option value="right" {{ ($customLayout['sidebar_position'] ?? $themeLayout['sidebar_position'] ?? '') == 'right' ? 'selected' : '' }}>يمين</option>
                                            <option value="left" {{ ($customLayout['sidebar_position'] ?? $themeLayout['sidebar_position'] ?? '') == 'left' ? 'selected' : '' }}>يسار</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <label class="w-1/3 text-sm font-medium text-gray-700 dark:text-gray-300">عرض المحتوى</label>
                                    <div class="w-2/3">
                                        <select name="layout_options[content_width]" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm dark:bg-gray-700 dark:text-gray-300 w-full">
                                            <option value="standard" {{ ($customLayout['content_width'] ?? $themeLayout['content_width'] ?? '') == 'standard' ? 'selected' : '' }}>قياسي</option>
                                            <option value="wide" {{ ($customLayout['content_width'] ?? $themeLayout['content_width'] ?? '') == 'wide' ? 'selected' : '' }}>واسع</option>
                                            <option value="narrow" {{ ($customLayout['content_width'] ?? $themeLayout['content_width'] ?? '') == 'narrow' ? 'selected' : '' }}>ضيق</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <label class="w-1/3 text-sm font-medium text-gray-700 dark:text-gray-300">نمط البطاقات</label>
                                    <div class="w-2/3">
                                        <select name="layout_options[card_style]" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm dark:bg-gray-700 dark:text-gray-300 w-full">
                                            <option value="flat" {{ ($customLayout['card_style'] ?? $themeLayout['card_style'] ?? '') == 'flat' ? 'selected' : '' }}>مسطح</option>
                                            <option value="shadow" {{ ($customLayout['card_style'] ?? $themeLayout['card_style'] ?? '') == 'shadow' ? 'selected' : '' }}>ظل</option>
                                            <option value="bordered" {{ ($customLayout['card_style'] ?? $themeLayout['card_style'] ?? '') == 'bordered' ? 'selected' : '' }}>إطار</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <label class="w-1/3 text-sm font-medium text-gray-700 dark:text-gray-300">استدارة الحواف</label>
                                    <div class="w-2/3">
                                        <select name="layout_options[border_radius]" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm dark:bg-gray-700 dark:text-gray-300 w-full">
                                            <option value="rounded-none" {{ ($customLayout['border_radius'] ?? $themeLayout['border_radius'] ?? '') == 'rounded-none' ? 'selected' : '' }}>بدون استدارة</option>
                                            <option value="rounded" {{ ($customLayout['border_radius'] ?? $themeLayout['border_radius'] ?? '') == 'rounded' ? 'selected' : '' }}>استدارة بسيطة</option>
                                            <option value="rounded-md" {{ ($customLayout['border_radius'] ?? $themeLayout['border_radius'] ?? '') == 'rounded-md' ? 'selected' : '' }}>استدارة متوسطة</option>
                                            <option value="rounded-lg" {{ ($customLayout['border_radius'] ?? $themeLayout['border_radius'] ?? '') == 'rounded-lg' ? 'selected' : '' }}>استدارة كبيرة</option>
                                            <option value="rounded-xl" {{ ($customLayout['border_radius'] ?? $themeLayout['border_radius'] ?? '') == 'rounded-xl' ? 'selected' : '' }}>استدارة كبيرة جدًا</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-end">
                            <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-lg font-medium text-sm text-white shadow-sm 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-2" 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>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Preview Panel -->
            <div class="col-span-1">
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 sticky top-6">
                    <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">معاينة</h2>
                    
                    <div class="aspect-video bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden mb-4">
                        @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-12 w-12" 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>
                    
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
                        قم بتخصيص الألوان والخطوط وإعدادات التخطيط لتناسب هوية متجرك. ستظهر التغييرات في واجهة المتجر.
                    </p>
                    
                    <a href="{{ route('stores.themes.preview', $store) }}" target="_blank" class="w-full inline-flex justify-center items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-lg font-medium text-sm text-white shadow-sm hover:bg-indigo-700 focus:outline-none transition ease-in-out duration-150">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" 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>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection