@extends('admin.layout')

@section('title', 'Theme Settings')

@section('content')

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-3xl font-bold" style="color: var(--color-primary)">Theme Settings</h1>
        <p class="text-gray-500 mt-1">Customize website appearance</p>
    </div>
</div>

<form method="POST" action="{{ route('admin.theme.store') }}">
    @csrf

    {{-- Brand Colors --}}
    <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-bold flex items-center gap-2" style="color: var(--color-primary)">
                <svg class="w-5 h-5" style="color: var(--color-accent)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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>
                Brand Colors
            </h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Primary Color</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="primary_color_preview" value="{{ $themeSettings['primary_color'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="primary_color" id="primary_color" value="{{ $themeSettings['primary_color'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#1a3a5c">
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Main brand color</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Primary Light Color</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="primary_color_light_preview" value="{{ $themeSettings['primary_color_light'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="primary_color_light" id="primary_color_light" value="{{ $themeSettings['primary_color_light'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#2c5282">
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Secondary navy blue</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Accent Color</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="accent_color_preview" value="{{ $themeSettings['accent_color'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="accent_color" id="accent_color" value="{{ $themeSettings['accent_color'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#ed8936">
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Highlight/CTA color</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Accent Dark Color</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="accent_color_dark_preview" value="{{ $themeSettings['accent_color_dark'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="accent_color_dark" id="accent_color_dark" value="{{ $themeSettings['accent_color_dark'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#dd6b20">
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Accent hover color</p>
                </div>
            </div>

            <div class="mt-6 p-4 bg-gray-50 rounded-lg">
                <p class="text-sm font-semibold text-gray-600 mb-3">Preview</p>
                <div class="flex items-center gap-4 flex-wrap">
                    <div id="preview_primary" class="px-4 py-2 rounded-lg text-white text-sm font-medium" style="background-color: {{ $themeSettings['primary_color'] }}">Primary</div>
                    <div id="preview_secondary" class="px-4 py-2 rounded-lg text-white text-sm font-medium" style="background-color: {{ $themeSettings['primary_color_light'] }}">Secondary</div>
                    <div id="preview_accent" class="px-4 py-2 rounded-lg text-white text-sm font-medium" style="background-color: {{ $themeSettings['accent_color'] }}">Accent</div>
                    <div id="preview_accent_dark" class="px-4 py-2 rounded-lg text-white text-sm font-medium" style="background-color: {{ $themeSettings['accent_color_dark'] }}">Accent Dark</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Text Colors --}}
    <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-bold flex items-center gap-2" style="color: var(--color-primary)">
                <svg class="w-5 h-5" style="color: var(--color-accent)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
                </svg>
                Text Colors
            </h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Primary Text</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="text_primary_preview" value="{{ $themeSettings['text_primary'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="text_primary" id="text_primary" value="{{ $themeSettings['text_primary'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#1f2937">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Secondary Text</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="text_secondary_preview" value="{{ $themeSettings['text_secondary'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="text_secondary" id="text_secondary" value="{{ $themeSettings['text_secondary'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#6b7280">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Tertiary Text</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="text_tertiary_preview" value="{{ $themeSettings['text_tertiary'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="text_tertiary" id="text_tertiary" value="{{ $themeSettings['text_tertiary'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#9ca3af">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Inverse Text</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="text_inverse_preview" value="{{ $themeSettings['text_inverse'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="text_inverse" id="text_inverse" value="{{ $themeSettings['text_inverse'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#ffffff">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Link Color</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="text_link_preview" value="{{ $themeSettings['text_link'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="text_link" id="text_link" value="{{ $themeSettings['text_link'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#2c5282">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Link Hover</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="text_link_hover_preview" value="{{ $themeSettings['text_link_hover'] }}"
                               class="w-12 h-12 rounded-lg cursor-pointer border-2 border-gray-200 p-1">
                        <input type="text" name="text_link_hover" id="text_link_hover" value="{{ $themeSettings['text_link_hover'] }}"
                               class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors font-mono text-sm"
                               placeholder="#1a3a5c">
                    </div>
                </div>
            </div>

            <div class="mt-6 p-4 bg-gray-50 rounded-lg">
                <p class="text-sm font-semibold text-gray-600 mb-3">Text Preview</p>
                <div class="space-y-2 border-l-4 pl-4" style="border-color: {{ $themeSettings['primary_color'] }}">
                    <p id="preview_text_primary" style="color: {{ $themeSettings['text_primary'] }}">Primary text - Main body text</p>
                    <p id="preview_text_secondary" style="color: {{ $themeSettings['text_secondary'] }}">Secondary text - Captions</p>
                    <p id="preview_text_tertiary" style="color: {{ $themeSettings['text_tertiary'] }}">Tertiary text - Placeholders</p>
                    <a href="#" id="preview_text_link" style="color: {{ $themeSettings['text_link'] }}">Link text - Click here</a>
                </div>
            </div>
        </div>
    </div>

    {{-- Typography --}}
    <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-bold flex items-center gap-2" style="color: var(--color-primary)">
                <svg class="w-5 h-5" style="color: var(--color-accent)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/>
                </svg>
                Typography
            </h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Font Family</label>
                    <select name="font_family" id="font_family"
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                        <option value="Inter" {{ $themeSettings['font_family'] == 'Inter' ? 'selected' : '' }}>Inter (Default)</option>
                        <option value="Poppins" {{ $themeSettings['font_family'] == 'Poppins' ? 'selected' : '' }}>Poppins</option>
                        <option value="Roboto" {{ $themeSettings['font_family'] == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                        <option value="Open Sans" {{ $themeSettings['font_family'] == 'Open Sans' ? 'selected' : '' }}>Open Sans</option>
                        <option value="Montserrat" {{ $themeSettings['font_family'] == 'Montserrat' ? 'selected' : '' }}>Montserrat</option>
                        <option value="Nunito" {{ $themeSettings['font_family'] == 'Nunito' ? 'selected' : '' }}>Nunito</option>
                        <option value="Source Sans Pro" {{ $themeSettings['font_family'] == 'Source Sans Pro' ? 'selected' : '' }}>Source Sans Pro</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Base Font Size (px)</label>
                    <input type="number" name="font_base_size" id="font_base_size"
                           value="{{ $themeSettings['font_base_size'] }}"
                           min="12" max="24"
                           class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                    <p class="text-xs text-gray-500 mt-1">12-24px</p>
                </div>
            </div>

            <div class="mt-6 p-4 bg-gray-50 rounded-lg">
                <p class="text-sm font-semibold text-gray-600 mb-3">Typography Preview</p>
                <div class="space-y-2">
                    <p id="preview_heading" class="text-2xl font-bold" style="color: {{ $themeSettings['primary_color'] }}">Heading Text</p>
                    <p id="preview_body" style="font-size: {{ $themeSettings['font_base_size'] }}px; color: {{ $themeSettings['text_primary'] }}">Body text content goes here.</p>
                    <p id="preview_accent_text" class="font-semibold" style="color: {{ $themeSettings['accent_color'] }}">Accent color text</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Layout --}}
    <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-bold flex items-center gap-2" style="color: var(--color-primary)">
                <svg class="w-5 h-5" style="color: var(--color-accent)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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>
                Layout
            </h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Section Spacing (px)</label>
                    <input type="number" name="section_spacing" id="section_spacing"
                           value="{{ $themeSettings['section_spacing'] }}"
                           min="32" max="128"
                           class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                    <p class="text-xs text-gray-500 mt-1">32-128px</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Container Max Width (px)</label>
                    <input type="number" name="container_max_width" id="container_max_width"
                           value="{{ $themeSettings['container_max_width'] }}"
                           min="768" max="1920"
                           class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                    <p class="text-xs text-gray-500 mt-1">768-1920px</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Effects --}}
    <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-bold flex items-center gap-2" style="color: var(--color-primary)">
                <svg class="w-5 h-5" style="color: var(--color-accent)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                Effects
            </h2>
        </div>
        <div class="p-6">
            <div class="space-y-4">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="enable_shadows" id="enable_shadows" value="true"
                           {{ $themeSettings['enable_shadows'] === 'true' ? 'checked' : '' }}
                           class="w-5 h-5 rounded border-gray-300 focus:ring-accent">
                    <div>
                        <span class="font-medium text-gray-700">Enable Shadows</span>
                        <p class="text-xs text-gray-500">Show card shadows</p>
                    </div>
                </label>

                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="enable_animations" id="enable_animations" value="true"
                           {{ $themeSettings['enable_animations'] === 'true' ? 'checked' : '' }}
                           class="w-5 h-5 rounded border-gray-300 focus:ring-accent">
                    <div>
                        <span class="font-medium text-gray-700">Enable Animations</span>
                        <p class="text-xs text-gray-500">Enable hover effects</p>
                    </div>
                </label>
            </div>
        </div>
    </div>

    {{-- Action Buttons --}}
    <div class="flex items-center justify-between">
        <form method="POST" action="{{ route('admin.theme.reset') }}" onsubmit="return confirm('Reset to defaults?')">
            @csrf
            <button type="submit" class="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium transition-colors">
                Reset to Defaults
            </button>
        </form>

        <button type="submit" class="text-white font-semibold px-6 py-3 rounded-lg transition-colors flex items-center gap-2 shadow-lg"
                style="background-color: var(--color-accent)"
                onmouseover="this.style.backgroundColor='var(--color-accent-dark)'"
                onmouseout="this.style.backgroundColor='var(--color-accent)'">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Save Changes
        </button>
    </div>
</form>

@endsection

@push('scripts')
<script>
    function syncColorInputs(colorInput, textInput, previewId) {
        const colorPicker = document.getElementById(colorInput + '_preview');
        const textField = document.getElementById(textInput);
        const preview = document.getElementById(previewId);

        if (colorPicker && textField) {
            colorPicker.addEventListener('input', function() {
                textField.value = this.value;
                if (preview) {
                    preview.style[previewId.includes('text_') ? 'color' : 'backgroundColor'] = this.value;
                }
            });

            textField.addEventListener('input', function() {
                if (/^#[0-9A-Fa-f]{6}$/.test(this.value)) {
                    colorPicker.value = this.value;
                    if (preview) {
                        preview.style[previewId.includes('text_') ? 'color' : 'backgroundColor'] = this.value;
                    }
                }
            });
        }
    }

    syncColorInputs('primary_color', 'primary_color', 'preview_primary');
    syncColorInputs('primary_color_light', 'primary_color_light', 'preview_secondary');
    syncColorInputs('accent_color', 'accent_color', 'preview_accent');
    syncColorInputs('accent_color_dark', 'accent_color_dark', 'preview_accent_dark');
    syncColorInputs('text_primary', 'text_primary', 'preview_text_primary');
    syncColorInputs('text_secondary', 'text_secondary', 'preview_text_secondary');
    syncColorInputs('text_tertiary', 'text_tertiary', 'preview_text_tertiary');
    syncColorInputs('text_inverse', 'text_inverse', 'preview_text_inverse');
    syncColorInputs('text_link', 'text_link', 'preview_text_link');
    syncColorInputs('text_link_hover', 'text_link_hover', 'preview_text_link_hover');

    document.getElementById('font_base_size').addEventListener('input', function() {
        document.getElementById('preview_body').style.fontSize = this.value + 'px';
    });

    document.getElementById('font_family').addEventListener('change', function() {
        document.getElementById('preview_heading').style.fontFamily = this.value;
        document.getElementById('preview_body').style.fontFamily = this.value;
    });
</script>
@endpush