@extends('layouts.app')

@section('content')
<div class="max-w-7xl space-y-8 page-fade-in">
    {{-- Header --}}
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
        <div>
            <h2 class="text-4xl font-black text-slate-800 tracking-tight">Theme <span class="text-brand-primary">Customization</span></h2>
            <p class="text-slate-500 mt-2 font-medium">Personalize your portal's appearance with custom colors and presets.</p>
        </div>
        <div class="flex items-center gap-3">
            <button onclick="resetTheme()" class="btn-secondary flex items-center gap-2">
                <span class="material-icons-round text-lg">restore</span>
                Reset to Default
            </button>
            <button onclick="saveTheme()" class="btn-primary flex items-center gap-2">
                <span class="material-icons-round text-lg">save</span>
                Save Changes
            </button>
        </div>
    </div>

    {{-- Success/Error Messages --}}
    @if(session('success'))
        <div class="glass-panel p-4 bg-green-50 border-green-200">
            <div class="flex items-center gap-3">
                <span class="material-icons-round text-green-600">check_circle</span>
                <p class="text-green-800 font-bold">{{ session('success') }}</p>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="glass-panel p-4 bg-red-50 border-red-200">
            <div class="flex items-center gap-3">
                <span class="material-icons-round text-red-600">error</span>
                <p class="text-red-800 font-bold">{{ session('error') }}</p>
            </div>
        </div>
    @endif

    {{-- Theme Preset Selector --}}
    <div class="glass-panel p-8">
        <h3 class="text-2xl font-black text-slate-800 mb-2">Theme Presets</h3>
        <p class="text-slate-500 mb-6">Choose from our carefully crafted color schemes</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {{-- Default Preset --}}
            <button onclick="selectPreset('default')" class="preset-card group" data-preset="default">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background: #4f46e5;"></div>
                        <div class="w-3 h-3 rounded-full" style="background: #ec4899;"></div>
                    </div>
                    <span class="preset-check hidden group-hover:block">
                        <span class="material-icons-round text-white">check_circle</span>
                    </span>
                </div>
                <h4 class="font-black text-slate-800 mb-1">Default</h4>
                <p class="text-xs text-slate-500">Classic indigo and pink</p>
                <p class="text-[10px] text-slate-400 mt-1 font-bold">Plus Jakarta Sans • 16px</p>
                <div class="mt-3 grid grid-cols-4 gap-2">
                    <div class="h-8 rounded-lg" style="background: #3b82f6;"></div>
                    <div class="h-8 rounded-lg" style="background: #10b981;"></div>
                    <div class="h-8 rounded-lg" style="background: #f97316;"></div>
                    <div class="h-8 rounded-lg" style="background: #ec4899;"></div>
                </div>
            </button>

            {{-- Vibrant Preset --}}
            <button onclick="selectPreset('vibrant')" class="preset-card group" data-preset="vibrant">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background: #10b981;"></div>
                        <div class="w-3 h-3 rounded-full" style="background: #d946ef;"></div>
                    </div>
                    <span class="preset-check hidden group-hover:block">
                        <span class="material-icons-round text-white">check_circle</span>
                    </span>
                </div>
                <h4 class="font-black text-slate-800 mb-1">Vibrant</h4>
                <p class="text-xs text-slate-500">Energetic emerald tones</p>
                <p class="text-[10px] text-slate-400 mt-1 font-bold">Poppins • 16px</p>
                <div class="mt-3 grid grid-cols-4 gap-2">
                    <div class="h-8 rounded-lg" style="background: #06b6d4;"></div>
                    <div class="h-8 rounded-lg" style="background: #84cc16;"></div>
                    <div class="h-8 rounded-lg" style="background: #f59e0b;"></div>
                    <div class="h-8 rounded-lg" style="background: #f472b6;"></div>
                </div>
            </button>

            {{-- Ocean Preset --}}
            <button onclick="selectPreset('ocean')" class="preset-card group" data-preset="ocean">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background: #0891b2;"></div>
                        <div class="w-3 h-3 rounded-full" style="background: #3b82f6;"></div>
                    </div>
                    <span class="preset-check hidden group-hover:block">
                        <span class="material-icons-round text-white">check_circle</span>
                    </span>
                </div>
                <h4 class="font-black text-slate-800 mb-1">Ocean</h4>
                <p class="text-xs text-slate-500">Cool cyan and blue</p>
                <p class="text-[10px] text-slate-400 mt-1 font-bold">Inter • 15.5px</p>
                <div class="mt-3 grid grid-cols-4 gap-2">
                    <div class="h-8 rounded-lg" style="background: #0ea5e9;"></div>
                    <div class="h-8 rounded-lg" style="background: #14b8a6;"></div>
                    <div class="h-8 rounded-lg" style="background: #06b6d4;"></div>
                    <div class="h-8 rounded-lg" style="background: #6366f1;"></div>
                </div>
            </button>

            {{-- Sunset Preset --}}
            <button onclick="selectPreset('sunset')" class="preset-card group" data-preset="sunset">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background: #f97316;"></div>
                        <div class="w-3 h-3 rounded-full" style="background: #ec4899;"></div>
                    </div>
                    <span class="preset-check hidden group-hover:block">
                        <span class="material-icons-round text-white">check_circle</span>
                    </span>
                </div>
                <h4 class="font-black text-slate-800 mb-1">Sunset</h4>
                <p class="text-xs text-slate-500">Warm orange gradient</p>
                <p class="text-[10px] text-slate-400 mt-1 font-bold">Nunito • 16.5px</p>
                <div class="mt-3 grid grid-cols-4 gap-2">
                    <div class="h-8 rounded-lg" style="background: #f59e0b;"></div>
                    <div class="h-8 rounded-lg" style="background: #fb923c;"></div>
                    <div class="h-8 rounded-lg" style="background: #f97316;"></div>
                    <div class="h-8 rounded-lg" style="background: #f43f5e;"></div>
                </div>
            </button>

            {{-- Forest Preset --}}
            <button onclick="selectPreset('forest')" class="preset-card group" data-preset="forest">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background: #059669;"></div>
                        <div class="w-3 h-3 rounded-full" style="background: #84cc16;"></div>
                    </div>
                    <span class="preset-check hidden group-hover:block">
                        <span class="material-icons-round text-white">check_circle</span>
                    </span>
                </div>
                <h4 class="font-black text-slate-800 mb-1">Forest</h4>
                <p class="text-xs text-slate-500">Natural green tones</p>
                <p class="text-[10px] text-slate-400 mt-1 font-bold">Outfit • 16px</p>
                <div class="mt-3 grid grid-cols-4 gap-2">
                    <div class="h-8 rounded-lg" style="background: #14b8a6;"></div>
                    <div class="h-8 rounded-lg" style="background: #10b981;"></div>
                    <div class="h-8 rounded-lg" style="background: #eab308;"></div>
                    <div class="h-8 rounded-lg" style="background: #84cc16;"></div>
                </div>
            </button>

            {{-- Medical Preset --}}
            <button onclick="selectPreset('medical')" class="preset-card group" data-preset="medical">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background: #0ea5e9;"></div>
                        <div class="w-3 h-3 rounded-full" style="background: #14b8a6;"></div>
                    </div>
                    <span class="preset-check hidden group-hover:block">
                        <span class="material-icons-round text-white">check_circle</span>
                    </span>
                </div>
                <h4 class="font-black text-slate-800 mb-1">Medical</h4>
                <p class="text-xs text-slate-500">Clinical sky theme</p>
                <p class="text-[10px] text-slate-400 mt-1 font-bold">Lexend • 15.5px</p>
                <div class="mt-3 grid grid-cols-4 gap-2">
                    <div class="h-8 rounded-lg" style="background: #0ea5e9;"></div>
                    <div class="h-8 rounded-lg" style="background: #14b8a6;"></div>
                    <div class="h-8 rounded-lg" style="background: #06b6d4;"></div>
                    <div class="h-8 rounded-lg" style="background: #6366f1;"></div>
                </div>
            </button>

            {{-- Corporate Preset --}}
            <button onclick="selectPreset('corporate')" class="preset-card group" data-preset="corporate">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background: #6366f1;"></div>
                        <div class="w-3 h-3 rounded-full" style="background: #8b5cf6;"></div>
                    </div>
                    <span class="preset-check hidden group-hover:block">
                        <span class="material-icons-round text-white">check_circle</span>
                    </span>
                </div>
                <h4 class="font-black text-slate-800 mb-1">Corporate</h4>
                <p class="text-xs text-slate-500">Professional indigo</p>
                <p class="text-[10px] text-slate-400 mt-1 font-bold">Manrope • 15.5px</p>
                <div class="mt-3 grid grid-cols-4 gap-2">
                    <div class="h-8 rounded-lg" style="background: #6366f1;"></div>
                    <div class="h-8 rounded-lg" style="background: #8b5cf6;"></div>
                    <div class="h-8 rounded-lg" style="background: #a855f7;"></div>
                    <div class="h-8 rounded-lg" style="background: #d946ef;"></div>
                </div>
            </button>

            {{-- Premium Purple-Pink-Blue (New Landing Page Theme) --}}
            <button onclick="selectPreset('premium')" class="preset-card group" data-preset="premium">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background: #9333ea;"></div>
                        <div class="w-3 h-3 rounded-full" style="background: #ec4899;"></div>
                        <div class="w-3 h-3 rounded-full" style="background: #3b82f6;"></div>
                    </div>
                    <span class="preset-check hidden group-hover:block">
                        <span class="material-icons-round text-white">check_circle</span>
                    </span>
                </div>
                <h4 class="font-black text-slate-800 mb-1">Premium ⭐</h4>
                <p class="text-xs text-slate-500">Vibrant gradient theme</p>
                <p class="text-[10px] text-slate-400 mt-1 font-bold">Space Grotesk • 16.5px</p>
                <div class="mt-3 grid grid-cols-4 gap-2">
                    <div class="h-8 rounded-lg" style="background: #9333ea;"></div>
                    <div class="h-8 rounded-lg" style="background: #ec4899;"></div>
                    <div class="h-8 rounded-lg" style="background: #3b82f6;"></div>
                    <div class="h-8 rounded-lg" style="background: #06b6d4;"></div>
                </div>
            </button>

            {{-- Custom Option --}}
            <button onclick="toggleCustomColors()" class="preset-card group border-dashed" id="custom-preset">
                <div class="flex items-center justify-between mb-4">
                    <span class="material-icons-round text-slate-400 text-3xl">palette</span>
                </div>
                <h4 class="font-black text-slate-800 mb-1">Custom</h4>
                <p class="text-xs text-slate-500">Create your own</p>
                <div class="mt-3 text-center">
                    <span class="text-xs font-bold text-brand-primary">Customize →</span>
                </div>
            </button>
        </div>
    </div>

    {{-- Font Customization Section (NEW) --}}
    <div class="glass-panel p-8">
        <h3 class="text-2xl font-black text-slate-800 mb-2">Typography Settings</h3>
        <p class="text-slate-500 mb-6">Customize fonts, sizes, and weights for your portal</p>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {{-- Font Family Selection --}}
            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Primary Font Family</label>
                <select id="font-family" class="form-select w-full" onchange="updateFontPreview()">
                    <option value="Plus Jakarta Sans" {{ $fontFamily == 'Plus Jakarta Sans' ? 'selected' : '' }}>Plus Jakarta Sans (Default)</option>
                    <option value="Inter" {{ $fontFamily == 'Inter' ? 'selected' : '' }}>Inter - Modern & Clean</option>
                    <option value="Poppins" {{ $fontFamily == 'Poppins' ? 'selected' : '' }}>Poppins - Friendly & Geometric</option>
                    <option value="Outfit" {{ $fontFamily == 'Outfit' ? 'selected' : '' }}>Outfit - Contemporary</option>
                    <option value="Space Grotesk" {{ $fontFamily == 'Space Grotesk' ? 'selected' : '' }}>Space Grotesk - Tech-Forward</option>
                    <option value="Manrope" {{ $fontFamily == 'Manrope' ? 'selected' : '' }}>Manrope - Professional</option>
                    <option value="DM Sans" {{ $fontFamily == 'DM Sans' ? 'selected' : '' }}>DM Sans - Minimalist</option>
                    <option value="Sora" {{ $fontFamily == 'Sora' ? 'selected' : '' }}>Sora - Futuristic</option>
                    <option value="Lexend" {{ $fontFamily == 'Lexend' ? 'selected' : '' }}>Lexend - High Readability</option>
                    <option value="Nunito" {{ $fontFamily == 'Nunito' ? 'selected' : '' }}>Nunito - Rounded & Warm</option>
                </select>
                <p class="text-xs text-slate-500 mt-2">Choose the primary typeface for your portal</p>
            </div>

            {{-- Heading Font Weight --}}
            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Heading Font Weight</label>
                <select id="heading-weight" class="form-select w-full" onchange="updateFontPreview()">
                    <option value="600" {{ $headingWeight == '600' ? 'selected' : '' }}>Semi-Bold (600)</option>
                    <option value="700" {{ $headingWeight == '700' ? 'selected' : '' }}>Bold (700)</option>
                    <option value="800" {{ $headingWeight == '800' ? 'selected' : '' }}>Extra Bold (800)</option>
                    <option value="900" {{ $headingWeight == '900' ? 'selected' : '' }}>Black (900)</option>
                </select>
                <p class="text-xs text-slate-500 mt-2">Weight for headings and titles</p>
            </div>

            {{-- Base Font Size --}}
            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Base Font Size</label>
                <div class="flex items-center gap-4">
                    <input type="range" id="font-size" min="14" max="18" value="{{ $fontSize }}" step="0.5" class="flex-1" oninput="updateFontSizeDisplay(); updateFontPreview();">
                    <span id="font-size-display" class="text-sm font-bold text-slate-700 w-16 text-right">{{ $fontSize }}px</span>
                </div>
                <p class="text-xs text-slate-500 mt-2">Affects body text and overall scale</p>
            </div>

            {{-- Line Height --}}
            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Line Height</label>
                <div class="flex items-center gap-4">
                    <input type="range" id="line-height" min="1.4" max="1.8" value="{{ $lineHeight }}" step="0.1" class="flex-1" oninput="updateLineHeightDisplay(); updateFontPreview();">
                    <span id="line-height-display" class="text-sm font-bold text-slate-700 w-16 text-right">{{ $lineHeight }}</span>
                </div>
                <p class="text-xs text-slate-500 mt-2">Spacing between lines of text</p>
            </div>
        </div>

        {{-- Font Preview --}}
        <div class="mt-8 p-8 bg-gradient-to-br from-slate-50 to-white border-2 border-slate-200 rounded-2xl" id="font-preview">
            <h1 class="text-4xl mb-4" style="font-weight: 800;">The Quick Brown Fox</h1>
            <h2 class="text-2xl mb-4" style="font-weight: 700;">Jumps Over The Lazy Dog</h2>
            <p class="text-base mb-2">This is how your body text will appear throughout the portal. Make sure it's comfortable to read and matches your institution's brand identity.</p>
            <p class="text-sm text-slate-600">Smaller text for captions and metadata. ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789</p>
        </div>

        <div class="mt-6 flex gap-4">
            <button onclick="applyFontSettings()" class="btn-primary flex items-center gap-2">
                <span class="material-icons-round text-lg">text_fields</span>
                Apply Font Settings
            </button>
            <button onclick="resetFontSettings()" class="btn-secondary">Reset to Default</button>
        </div>
    </div>

    {{-- Custom Color Picker (Hidden by default) --}}
    <div id="custom-colors-panel" class="hidden glass-panel p-8">
        <h3 class="text-2xl font-black text-slate-800 mb-6">Custom Colors</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {{-- Primary Colors --}}
            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Primary Brand Color</label>
                <div class="flex items-center gap-4">
                    <input type="color" id="color-primary" class="color-picker" value="{{ $themePrimary ?? '#4f46e5' }}">
                    <input type="text" id="hex-primary" class="form-input flex-1" placeholder="#4f46e5" value="{{ $themePrimary ?? '#4f46e5' }}">
                </div>
            </div>

            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Secondary Brand Color</label>
                <div class="flex items-center gap-4">
                    <input type="color" id="color-secondary" class="color-picker" value="{{ $themeSecondary ?? '#ec4899' }}">
                    <input type="text" id="hex-secondary" class="form-input flex-1" placeholder="#ec4899" value="{{ $themeSecondary ?? '#ec4899' }}">
                </div>
            </div>

            {{-- Card Colors --}}
            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Card Color - Blue</label>
                <div class="flex items-center gap-4">
                    <input type="color" id="color-card-blue" class="color-picker" value="{{ $cardBlue ?? '#3b82f6' }}">
                    <input type="text" id="hex-card-blue" class="form-input flex-1" placeholder="#3b82f6" value="{{ $cardBlue ?? '#3b82f6' }}">
                </div>
            </div>

            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Card Color - Green</label>
                <div class="flex items-center gap-4">
                    <input type="color" id="color-card-green" class="color-picker" value="{{ $cardGreen ?? '#10b981' }}">
                    <input type="text" id="hex-card-green" class="form-input flex-1" placeholder="#10b981" value="{{ $cardGreen ?? '#10b981' }}">
                </div>
            </div>

            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Card Color - Orange</label>
                <div class="flex items-center gap-4">
                    <input type="color" id="color-card-orange" class="color-picker" value="{{ $cardOrange ?? '#f97316' }}">
                    <input type="text" id="hex-card-orange" class="form-input flex-1" placeholder="#f97316" value="{{ $cardOrange ?? '#f97316' }}">
                </div>
            </div>

            <div>
                <label class="block text-sm font-black text-slate-700 mb-3">Card Color - Pink</label>
                <div class="flex items-center gap-4">
                    <input type="color" id="color-card-pink" class="color-picker" value="{{ $cardPink ?? '#ec4899' }}">
                    <input type="text" id="hex-card-pink" class="form-input flex-1" placeholder="#ec4899" value="{{ $cardPink ?? '#ec4899' }}">
                </div>
            </div>
        </div>

        <div class="mt-6">
            <button onclick="applyCustomColors()" class="btn-primary">Apply Custom Colors</button>
        </div>
    </div>

    {{-- Live Preview --}}
    <div class="glass-panel p-8">
        <h3 class="text-2xl font-black text-slate-800 mb-6">Live Preview</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="stat-card-blue p-6 rounded-2xl">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
                    <span class="material-icons-round text-2xl">people</span>
                </div>
                <h4 class="text-3xl font-black mb-2">1,234</h4>
                <p class="text-sm font-bold opacity-90">Sample Metric</p>
            </div>

            <div class="stat-card-green p-6 rounded-2xl">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
                    <span class="material-icons-round text-2xl">school</span>
                </div>
                <h4 class="text-3xl font-black mb-2">5,678</h4>
                <p class="text-sm font-bold opacity-90">Sample Metric</p>
            </div>

            <div class="stat-card-orange p-6 rounded-2xl">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
                    <span class="material-icons-round text-2xl">menu_book</span>
                </div>
                <h4 class="text-3xl font-black mb-2">90</h4>
                <p class="text-sm font-bold opacity-90">Sample Metric</p>
            </div>

            <div class="stat-card-pink p-6 rounded-2xl">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
                    <span class="material-icons-round text-2xl">business</span>
                </div>
                <h4 class="text-3xl font-black mb-2">45</h4>
                <p class="text-sm font-bold opacity-90">Sample Metric</p>
            </div>
        </div>

        <div class="mt-6 flex gap-4">
            <button class="btn-primary">Primary Button</button>
            <button class="btn-secondary">Secondary Button</button>
        </div>
    </div>
</div>

<style>
    .preset-card {
        @apply p-6 bg-white rounded-xl border-2 border-slate-200 hover:border-brand-primary transition-all cursor-pointer relative overflow-hidden;
    }
    
    .preset-card.active {
        @apply border-brand-primary bg-brand-primary/5;
    }
    
    .preset-check {
        @apply absolute top-2 right-2 w-6 h-6 rounded-full bg-brand-primary flex items-center justify-center;
    }
    
    .color-picker {
        @apply w-16 h-12 rounded-lg border-2 border-slate-200 cursor-pointer;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sync color picker with text input
    const colorInputs = document.querySelectorAll('.color-picker');
    colorInputs.forEach(input => {
        const hexInput = document.getElementById(input.id.replace('color-', 'hex-'));
        
        input.addEventListener('input', (e) => {
            hexInput.value = e.target.value;
            updatePreview();
        });
        
        hexInput.addEventListener('input', (e) => {
            if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
                input.value = e.target.value;
                updatePreview();
            }
        });
    });
});

function selectPreset(presetName) {
    // Remove active class from all presets
    document.querySelectorAll('.preset-card').forEach(card => {
        card.classList.remove('active');
    });
    
    // Add active class to selected preset
    const selectedCard = document.querySelector(`[data-preset="${presetName}"]`);
    if (selectedCard) {
        selectedCard.classList.add('active');
    }
    
    // Comprehensive Theme Profiles with Colors, Fonts, and Typography
    const presets = {
        default: { 
            // Colors
            primary: '#4f46e5', 
            secondary: '#ec4899', 
            cardBlue: '#3b82f6', 
            cardGreen: '#10b981', 
            cardOrange: '#f97316', 
            cardPink: '#ec4899',
            // Typography
            fontFamily: 'Plus Jakarta Sans',
            headingWeight: '800',
            fontSize: '16',
            lineHeight: '1.6'
        },
        vibrant: { 
            // Colors - Bright & Energetic
            primary: '#10b981', 
            secondary: '#d946ef', 
            cardBlue: '#06b6d4', 
            cardGreen: '#84cc16', 
            cardOrange: '#f59e0b', 
            cardPink: '#f472b6',
            // Typography - Rounded & Friendly
            fontFamily: 'Poppins',
            headingWeight: '700',
            fontSize: '16',
            lineHeight: '1.7'
        },
        ocean: { 
            // Colors - Cool & Calming
            primary: '#0891b2', 
            secondary: '#3b82f6', 
            cardBlue: '#0ea5e9', 
            cardGreen: '#14b8a6', 
            cardOrange: '#06b6d4', 
            cardPink: '#6366f1',
            // Typography - Clean & Modern
            fontFamily: 'Inter',
            headingWeight: '700',
            fontSize: '15.5',
            lineHeight: '1.6'
        },
        sunset: { 
            // Colors - Warm & Inviting
            primary: '#f97316', 
            secondary: '#ec4899', 
            cardBlue: '#f59e0b', 
            cardGreen: '#fb923c', 
            cardOrange: '#f97316', 
            cardPink: '#f43f5e',
            // Typography - Warm & Approachable
            fontFamily: 'Nunito',
            headingWeight: '800',
            fontSize: '16.5',
            lineHeight: '1.7'
        },
        forest: { 
            // Colors - Natural & Earthy
            primary: '#059669', 
            secondary: '#84cc16', 
            cardBlue: '#14b8a6', 
            cardGreen: '#10b981', 
            cardOrange: '#eab308', 
            cardPink: '#84cc16',
            // Typography - Organic Feel
            fontFamily: 'Outfit',
            headingWeight: '600',
            fontSize: '16',
            lineHeight: '1.65'
        },
        medical: { 
            // Colors - Clinical & Professional
            primary: '#0ea5e9', 
            secondary: '#14b8a6', 
            cardBlue: '#0ea5e9', 
            cardGreen: '#14b8a6', 
            cardOrange: '#06b6d4', 
            cardPink: '#6366f1',
            // Typography - Clean & Readable
            fontFamily: 'Lexend',
            headingWeight: '600',
            fontSize: '15.5',
            lineHeight: '1.7'
        },
        corporate: { 
            // Colors - Professional & Trustworthy
            primary: '#6366f1', 
            secondary: '#8b5cf6', 
            cardBlue: '#6366f1', 
            cardGreen: '#8b5cf6', 
            cardOrange: '#a855f7', 
            cardPink: '#d946ef',
            // Typography - Professional
            fontFamily: 'Manrope',
            headingWeight: '700',
            fontSize: '15.5',
            lineHeight: '1.6'
        },
        premium: { 
            // Colors - Vibrant Gradient Theme
            primary: '#9333ea', 
            secondary: '#ec4899', 
            cardBlue: '#3b82f6', 
            cardGreen: '#10b981', 
            cardOrange: '#f59e0b', 
            cardPink: '#ec4899',
            // Typography - Bold & Modern
            fontFamily: 'Space Grotesk',
            headingWeight: '900',
            fontSize: '16.5',
            lineHeight: '1.5'
        }
    };
    
    const preset = presets[presetName];
    if (preset) {
        // Apply colors
        applyColors(preset);
        
        // Update color pickers
        document.getElementById('color-primary').value = preset.primary;
        document.getElementById('hex-primary').value = preset.primary;
        document.getElementById('color-secondary').value = preset.secondary;
        document.getElementById('hex-secondary').value = preset.secondary;
        document.getElementById('color-card-blue').value = preset.cardBlue;
        document.getElementById('hex-card-blue').value = preset.cardBlue;
        document.getElementById('color-card-green').value = preset.cardGreen;
        document.getElementById('hex-card-green').value = preset.cardGreen;
        document.getElementById('color-card-orange').value = preset.cardOrange;
        document.getElementById('hex-card-orange').value = preset.cardOrange;
        document.getElementById('color-card-pink').value = preset.cardPink;
        document.getElementById('hex-card-pink').value = preset.cardPink;
        
        // Apply and update typography settings
        document.getElementById('font-family').value = preset.fontFamily;
        document.getElementById('heading-weight').value = preset.headingWeight;
        document.getElementById('font-size').value = preset.fontSize;
        document.getElementById('line-height').value = preset.lineHeight;
        
        // Update displays
        updateFontSizeDisplay();
        updateLineHeightDisplay();
        updateFontPreview();
        
        // Apply font settings immediately
        applyFontSettingsWithoutSave();
    }
}

// Font Customization Functions
function updateFontSizeDisplay() {
    const fontSize = document.getElementById('font-size').value;
    document.getElementById('font-size-display').textContent = fontSize + 'px';
}

function updateLineHeightDisplay() {
    const lineHeight = document.getElementById('line-height').value;
    document.getElementById('line-height-display').textContent = lineHeight;
}

function updateFontPreview() {
    const fontFamily = document.getElementById('font-family').value;
    const headingWeight = document.getElementById('heading-weight').value;
    const fontSize = document.getElementById('font-size').value;
    const lineHeight = document.getElementById('line-height').value;
    
    const preview = document.getElementById('font-preview');
    preview.style.fontFamily = `'${fontFamily}', sans-serif`;
    preview.style.fontSize = fontSize + 'px';
    preview.style.lineHeight = lineHeight;
    
    const h1 = preview.querySelector('h1');
    const h2 = preview.querySelector('h2');
    if (h1) h1.style.fontWeight = headingWeight;
    if (h2) h2.style.fontWeight = headingWeight;
    
    // Load the font if not already loaded
    loadGoogleFont(fontFamily);
}

function loadGoogleFont(fontFamily) {
    const fontName = fontFamily.replace(/ /g, '+');
    const linkId = 'google-font-' + fontName;
    
    // Check if font is already loaded
    if (!document.getElementById(linkId)) {
        const link = document.createElement('link');
        link.id = linkId;
        link.rel = 'stylesheet';
        link.href = `https://fonts.googleapis.com/css2?family=${fontName}:wght@300;400;500;600;700;800;900&display=swap`;
        document.head.appendChild(link);
    }
}

function applyFontSettings() {
    const fontFamily = document.getElementById('font-family').value;
    const headingWeight = document.getElementById('heading-weight').value;
    const fontSize = document.getElementById('font-size').value;
    const lineHeight = document.getElementById('line-height').value;
    
    applyFontToDOM(fontFamily, headingWeight, fontSize, lineHeight);
    
    // Save to settings
    saveFontSettings(fontFamily, headingWeight, fontSize, lineHeight);
}

// Apply font settings without saving (used by preset selection)
function applyFontSettingsWithoutSave() {
    const fontFamily = document.getElementById('font-family').value;
    const headingWeight = document.getElementById('heading-weight').value;
    const fontSize = document.getElementById('font-size').value;
    const lineHeight = document.getElementById('line-height').value;
    
    applyFontToDOM(fontFamily, headingWeight, fontSize, lineHeight);
}

// Helper function to apply fonts to DOM
function applyFontToDOM(fontFamily, headingWeight, fontSize, lineHeight) {
    // Apply to root element
    document.documentElement.style.setProperty('--font-family', `'${fontFamily}', sans-serif`);
    document.documentElement.style.setProperty('--heading-weight', headingWeight);
    document.documentElement.style.setProperty('--font-size', fontSize + 'px');
    document.documentElement.style.setProperty('--line-height', lineHeight);
    
    // Apply to body
    document.body.style.fontFamily = `'${fontFamily}', sans-serif`;
    
    // Load the font
    loadGoogleFont(fontFamily);
}

function saveFontSettings(fontFamily, headingWeight, fontSize, lineHeight) {
    const data = {
        font_family: fontFamily,
        heading_weight: headingWeight,
        font_size: fontSize,
        line_height: lineHeight,
        _token: '{{ csrf_token() }}'
    };
    
    fetch('{{ route("admin.settings.themes.update") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify(data)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            showSuccessModal('Font Settings Saved!', 'Your typography settings have been saved successfully.');
        } else {
            showErrorModal('Save Failed', data.message || 'Failed to save font settings');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorModal('Error', 'Failed to save font settings. Please check the console for details.');
    });
}

function resetFontSettings() {
    document.getElementById('font-family').value = 'Plus Jakarta Sans';
    document.getElementById('heading-weight').value = '800';
    document.getElementById('font-size').value = '16';
    document.getElementById('line-height').value = '1.6';
    updateFontSizeDisplay();
    updateLineHeightDisplay();
    updateFontPreview();
}

function toggleCustomColors() {
    const panel = document.getElementById('custom-colors-panel');
    panel.classList.toggle('hidden');
    
    const customCard = document.getElementById('custom-preset');
    customCard.classList.toggle('active');
}

function applyCustomColors() {
    const colors = {
        primary: document.getElementById('hex-primary').value,
        secondary: document.getElementById('hex-secondary').value,
        cardBlue: document.getElementById('hex-card-blue').value,
        cardGreen: document.getElementById('hex-card-green').value,
        cardOrange: document.getElementById('hex-card-orange').value,
        cardPink: document.getElementById('hex-card-pink').value
    };
    
    applyColors(colors);
}

function applyColors(colors) {
    const root = document.documentElement;
    root.style.setProperty('--brand-primary', colors.primary);
    root.style.setProperty('--brand-secondary', colors.secondary);
    root.style.setProperty('--card-blue', colors.cardBlue);
    root.style.setProperty('--card-green', colors.cardGreen);
    root.style.setProperty('--card-orange', colors.cardOrange);
    root.style.setProperty('--card-pink', colors.cardPink);
}

function updatePreview() {
    applyCustomColors();
}

function saveTheme() {
    // Get all color values
    const colors = {
        theme_primary_color: document.getElementById('hex-primary').value,
        theme_secondary_color: document.getElementById('hex-secondary').value,
        card_blue: document.getElementById('hex-card-blue').value,
        card_green: document.getElementById('hex-card-green').value,
        card_orange: document.getElementById('hex-card-orange').value,
        card_pink: document.getElementById('hex-card-pink').value,
        // Include font settings
        font_family: document.getElementById('font-family').value,
        heading_weight: document.getElementById('heading-weight').value,
        font_size: document.getElementById('font-size').value,
        line_height: document.getElementById('line-height').value,
        _token: '{{ csrf_token() }}'
    };
    
    fetch('{{ route("admin.settings.themes.update") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify(colors)
    })
    .then(async response => {
        const text = await response.text();
        console.log('Response status:', response.status);
        console.log('Response text:', text);
        
        if (!response.ok) {
            throw new Error(`Server error: ${response.status} - ${text.substring(0, 200)}`);
        }
        
        try {
            return JSON.parse(text);
        } catch (e) {
            console.error('Failed to parse JSON:', text);
            throw new Error('Server returned invalid JSON. Check console for details.');
        }
    })
    .then(data => {
        if (data.success) {
            showSuccessModal(
                'Theme Saved!',
                'Your theme settings have been saved successfully. The page will reload to apply changes.',
                () => location.reload()
            );
        } else {
            showErrorModal('Save Failed', data.message || 'Failed to save theme settings');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorModal('Error', 'Failed to save theme settings: ' + error.message);
    });
}

function resetTheme() {
    showConfirmModal(
        'Reset to Default Theme?',
        'This will restore all theme settings to their default values. Your current customizations will be lost.',
        () => {
            selectPreset('default');
            setTimeout(() => saveTheme(), 300);
        }
    );
}

// Modal Alert Functions
function showSuccessModal(title, message, callback) {
    console.log('showSuccessModal called', title, message);
    const modal = document.getElementById('alert-modal');
    const icon = document.getElementById('modal-icon');
    const titleEl = document.getElementById('modal-title');
    const messageEl = document.getElementById('modal-message');
    const okBtn = document.getElementById('modal-ok-btn');
    const cancelBtn = document.getElementById('modal-cancel-btn');
    
    console.log('Modal element:', modal);
    console.log('Modal classes before:', modal?.className);
    
    icon.innerHTML = 'check_circle';
    icon.className = 'material-icons-round text-6xl text-green-500 block mb-4';
    titleEl.textContent = title;
    titleEl.className = 'text-2xl font-black text-slate-800 mb-2';
    messageEl.textContent = message;
    cancelBtn.classList.add('hidden');
    okBtn.textContent = 'OK';
    okBtn.className = 'btn-primary flex-1';
    
    modal.classList.remove('hidden');
    console.log('Modal classes after removing hidden:', modal.className);
    
    setTimeout(() => {
        modal.classList.add('show');
        console.log('Modal classes after adding show:', modal.className);
    }, 10);
    
    okBtn.onclick = () => {
        closeModal();
        if (callback) callback();
    };
}

function showErrorModal(title, message) {
    const modal = document.getElementById('alert-modal');
    const icon = document.getElementById('modal-icon');
    const titleEl = document.getElementById('modal-title');
    const messageEl = document.getElementById('modal-message');
    const okBtn = document.getElementById('modal-ok-btn');
    const cancelBtn = document.getElementById('modal-cancel-btn');
    
    icon.innerHTML = 'error';
    icon.className = 'material-icons-round text-6xl text-red-500';
    titleEl.textContent = title;
    titleEl.className = 'text-2xl font-black text-slate-800 mb-2';
    messageEl.textContent = message;
    cancelBtn.classList.add('hidden');
    okBtn.textContent = 'OK';
    okBtn.className = 'btn-primary flex-1';
    
    modal.classList.remove('hidden');
    setTimeout(() => modal.classList.add('show'), 10);
    
    okBtn.onclick = () => closeModal();
}

function showConfirmModal(title, message, onConfirm) {
    const modal = document.getElementById('alert-modal');
    const icon = document.getElementById('modal-icon');
    const titleEl = document.getElementById('modal-title');
    const messageEl = document.getElementById('modal-message');
    const okBtn = document.getElementById('modal-ok-btn');
    const cancelBtn = document.getElementById('modal-cancel-btn');
    
    icon.innerHTML = 'help_outline';
    icon.className = 'material-icons-round text-6xl text-amber-500';
    titleEl.textContent = title;
    titleEl.className = 'text-2xl font-black text-slate-800 mb-2';
    messageEl.textContent = message;
    cancelBtn.classList.remove('hidden');
    okBtn.textContent = 'Confirm';
    okBtn.className = 'btn-primary flex-1';
    
    modal.classList.remove('hidden');
    setTimeout(() => modal.classList.add('show'), 10);
    
    okBtn.onclick = () => {
        closeModal();
        if (onConfirm) onConfirm();
    };
    
    cancelBtn.onclick = () => closeModal();
}

function closeModal() {
    const modal = document.getElementById('alert-modal');
    modal.classList.remove('show');
    setTimeout(() => modal.classList.add('hidden'), 300);
}
</script>

{{-- Modal Alert Component --}}
<div id="alert-modal" class="hidden fixed inset-0 flex items-center justify-center p-4" style="z-index: 99999; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px);">
    <div class="modal-content bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 transform transition-all duration-300">
        <div class="text-center">
            <span id="modal-icon" class="material-icons-round text-6xl text-green-500 block mb-4">check_circle</span>
            <h3 id="modal-title" class="text-2xl font-black text-slate-800 mb-2">Success!</h3>
            <p id="modal-message" class="text-slate-600 mb-6">Your changes have been saved successfully.</p>
        </div>
        <div class="flex gap-3">
            <button id="modal-cancel-btn" class="btn-secondary flex-1 hidden">Cancel</button>
            <button id="modal-ok-btn" class="btn-primary flex-1">OK</button>
        </div>
    </div>
</div>

<style>
#alert-modal {
    transition: opacity 0.3s ease;
}

#alert-modal.show {
    opacity: 1 !important;
}

#alert-modal.show .modal-content {
    transform: scale(1) !important;
    opacity: 1 !important;
}

#alert-modal .modal-content {
    transform: scale(0.9);
    opacity: 0;
}
</style>

@endsection