@extends('layouts.app')

@section('title', 'Edit Tema - ' . $theme->display_name)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="corporate-header">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="h3 mb-0 text-gray-800">
                            <i class="fas fa-edit text-primary me-2"></i>
                            Edit Tema: {{ $theme->display_name }}
                        </h1>
                        <p class="text-muted small mb-0">Sesuaikan warna, font, ukuran, dan berbagai aspek visual tema</p>
                    </div>
                    <div class="col-md-4 text-end">
                        <a href="{{ route('themes.index') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-arrow-left me-1"></i>
                            Kembali
                        </a>
                    </div>
                </div>
            </div>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <form method="POST" action="{{ route('themes.update', $theme) }}" id="themeEditForm">
                @csrf
                @method('PUT')
                
                <div class="row">
                    <!-- Live Preview -->
                    <div class="col-lg-5">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-eye me-2"></i>
                                    Live Preview
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="livePreview" class="theme-preview-container" style="height: 400px; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid #e5e7eb;">
                                    <!-- Preview content will be generated by JavaScript -->
                                </div>
                                
                                <div class="mt-3">
                                    <small class="text-muted">Preview akan diperbarui secara real-time saat Anda mengubah pengaturan</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Edit -->
                    <div class="col-lg-7">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-palette me-2"></i>
                                    Pengaturan Tema
                                </h5>
                            </div>
                            <div class="card-body">
                                <!-- Basic Info -->
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Nama Tampilan</label>
                                        <input type="text" name="display_name" class="form-control @error('display_name') is-invalid @enderror" 
                                               value="{{ old('display_name', $theme->display_name) }}" required>
                                        @error('display_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Font Family</label>
                                        <select name="font_family" class="form-select" onchange="updatePreview()">
                                            <option value="system-ui, sans-serif" {{ (old('font_family', $theme->css_variables['--font-family'] ?? '') == 'system-ui, sans-serif') ? 'selected' : '' }}>System UI</option>
                                            <option value="-apple-system, BlinkMacSystemFont, sans-serif" {{ (old('font_family', $theme->css_variables['--font-family'] ?? '') == '-apple-system, BlinkMacSystemFont, sans-serif') ? 'selected' : '' }}>Apple System</option>
                                            <option value='"Inter", sans-serif' {{ (str_contains(old('font_family', $theme->css_variables['--font-family'] ?? ''), 'Inter')) ? 'selected' : '' }}>Inter</option>
                                            <option value='"Roboto", sans-serif' {{ (str_contains(old('font_family', $theme->css_variables['--font-family'] ?? ''), 'Roboto')) ? 'selected' : '' }}>Roboto</option>
                                            <option value='"JetBrains Mono", monospace' {{ (str_contains(old('font_family', $theme->css_variables['--font-family'] ?? ''), 'JetBrains Mono')) ? 'selected' : '' }}>JetBrains Mono</option>
                                            <option value='"Fira Code", monospace' {{ (str_contains(old('font_family', $theme->css_variables['--font-family'] ?? ''), 'Fira Code')) ? 'selected' : '' }}>Fira Code</option>
                                            <option value='"Source Sans Pro", sans-serif' {{ (str_contains(old('font_family', $theme->css_variables['--font-family'] ?? ''), 'Source Sans Pro')) ? 'selected' : '' }}>Source Sans Pro</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-4">
                                    <div class="col-md-12">
                                        <label class="form-label fw-bold">Deskripsi</label>
                                        <textarea name="description" class="form-control @error('description') is-invalid @enderror" rows="2">{{ old('description', $theme->description) }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Layout Settings -->
                                <div class="row mb-4">
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold">Font Size</label>
                                        <div class="input-group">
                                            <input type="number" name="font_size" class="form-control @error('font_size') is-invalid @enderror" 
                                                   value="{{ old('font_size', (int)str_replace('px', '', $theme->css_variables['--font-size-base'] ?? '14')) }}" 
                                                   min="10" max="20" onchange="updatePreview()">
                                            <span class="input-group-text">px</span>
                                        </div>
                                        @error('font_size')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold">Border Radius</label>
                                        <div class="input-group">
                                            <input type="number" name="border_radius" class="form-control @error('border_radius') is-invalid @enderror" 
                                                   value="{{ old('border_radius', (int)str_replace('px', '', $theme->css_variables['--border-radius'] ?? '8')) }}" 
                                                   min="0" max="20" onchange="updatePreview()">
                                            <span class="input-group-text">px</span>
                                        </div>
                                        @error('border_radius')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold">Sidebar Width</label>
                                        <div class="input-group">
                                            <input type="number" name="sidebar_width" class="form-control @error('sidebar_width') is-invalid @enderror" 
                                                   value="{{ old('sidebar_width', (int)str_replace('px', '', $theme->css_variables['--sidebar-width'] ?? '260')) }}" 
                                                   min="180" max="300" onchange="updatePreview()">
                                            <span class="input-group-text">px</span>
                                        </div>
                                        @error('sidebar_width')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Color Settings -->
                                <h6 class="fw-bold mb-3">
                                    <i class="fas fa-palette me-2"></i>
                                    Pengaturan Warna
                                </h6>
                                
                                <div class="row g-3">
                                    <!-- Primary Colors -->
                                    <div class="col-md-6">
                                        <label class="form-label">Primary Color</label>
                                        <div class="input-group">
                                            <input type="color" name="colors[primary]" class="form-control form-control-color @error('colors.primary') is-invalid @enderror" 
                                                   value="{{ old('colors.primary', $theme->colors['primary']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.primary', $theme->colors['primary']) }}" readonly>
                                        </div>
                                        @error('colors.primary')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Primary Dark</label>
                                        <div class="input-group">
                                            <input type="color" name="colors[primary_dark]" class="form-control form-control-color @error('colors.primary_dark') is-invalid @enderror" 
                                                   value="{{ old('colors.primary_dark', $theme->colors['primary_dark']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.primary_dark', $theme->colors['primary_dark']) }}" readonly>
                                        </div>
                                        @error('colors.primary_dark')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Secondary Colors -->
                                    <div class="col-md-6">
                                        <label class="form-label">Secondary Color</label>
                                        <div class="input-group">
                                            <input type="color" name="colors[secondary]" class="form-control form-control-color @error('colors.secondary') is-invalid @enderror" 
                                                   value="{{ old('colors.secondary', $theme->colors['secondary']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.secondary', $theme->colors['secondary']) }}" readonly>
                                        </div>
                                        @error('colors.secondary')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Accent Color</label>
                                        <div class="input-group">
                                            <input type="color" name="colors[accent]" class="form-control form-control-color @error('colors.accent') is-invalid @enderror" 
                                                   value="{{ old('colors.accent', $theme->colors['accent']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.accent', $theme->colors['accent']) }}" readonly>
                                        </div>
                                        @error('colors.accent')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Status Colors -->
                                    <div class="col-md-6">
                                        <label class="form-label">Success Color</label>
                                        <div class="input-group">
                                            <input type="color" name="colors[success]" class="form-control form-control-color @error('colors.success') is-invalid @enderror" 
                                                   value="{{ old('colors.success', $theme->colors['success']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.success', $theme->colors['success']) }}" readonly>
                                        </div>
                                        @error('colors.success')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Warning Color</label>
                                        <div class="input-group">
                                            <input type="color" name="colors[warning]" class="form-control form-control-color @error('colors.warning') is-invalid @enderror" 
                                                   value="{{ old('colors.warning', $theme->colors['warning']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.warning', $theme->colors['warning']) }}" readonly>
                                        </div>
                                        @error('colors.warning')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Danger Color</label>
                                        <div class="input-group">
                                            <input type="color" name="colors[danger]" class="form-control form-control-color @error('colors.danger') is-invalid @enderror" 
                                                   value="{{ old('colors.danger', $theme->colors['danger']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.danger', $theme->colors['danger']) }}" readonly>
                                        </div>
                                        @error('colors.danger')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Info Color</label>
                                        <div class="input-group">
                                            <input type="color" name="colors[info]" class="form-control form-control-color @error('colors.info') is-invalid @enderror" 
                                                   value="{{ old('colors.info', $theme->colors['info']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.info', $theme->colors['info']) }}" readonly>
                                        </div>
                                        @error('colors.info')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Background Color -->
                                    <div class="col-md-6">
                                        <label class="form-label">Background Color</label>
                                        <div class="input-group">
                                            <input type="color" name="colors[light_bg]" class="form-control form-control-color @error('colors.light_bg') is-invalid @enderror" 
                                                   value="{{ old('colors.light_bg', $theme->colors['light_bg']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.light_bg', $theme->colors['light_bg']) }}" readonly>
                                        </div>
                                        @error('colors.light_bg')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <hr>
                                        
                                        <!-- Advanced Settings Tabs -->
                                        <div class="mb-4">
                                            <h6 class="fw-bold mb-3">
                                                <i class="fas fa-cogs me-2"></i>
                                                Pengaturan Lanjutan
                                            </h6>
                                            
                                            <ul class="nav nav-tabs" id="advancedTabs" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link active" id="border-tab" data-bs-toggle="tab" data-bs-target="#border" type="button" role="tab">
                                                        <i class="fas fa-border-style me-1"></i>Border
                                                    </button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="card-tab" data-bs-toggle="tab" data-bs-target="#card" type="button" role="tab">
                                                        <i class="fas fa-square me-1"></i>Card
                                                    </button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="component-tab" data-bs-toggle="tab" data-bs-target="#component" type="button" role="tab">
                                                        <i class="fas fa-puzzle-piece me-1"></i>Component
                                                    </button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="typography-tab" data-bs-toggle="tab" data-bs-target="#typography" type="button" role="tab">
                                                        <i class="fas fa-font me-1"></i>Typography
                                                    </button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="layout-tab" data-bs-toggle="tab" data-bs-target="#layout" type="button" role="tab">
                                                        <i class="fas fa-th-large me-1"></i>Layout
                                                    </button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="animation-tab" data-bs-toggle="tab" data-bs-target="#animation" type="button" role="tab">
                                                        <i class="fas fa-magic me-1"></i>Animation
                                                    </button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="custom-tab" data-bs-toggle="tab" data-bs-target="#custom" type="button" role="tab">
                                                        <i class="fas fa-code me-1"></i>Custom CSS
                                                    </button>
                                                </li>
                                            </ul>
                                            
                                            <div class="tab-content mt-3" id="advancedTabsContent">
                                                <!-- Border Settings -->
                                                <div class="tab-pane fade show active" id="border" role="tabpanel">
                                                    <div class="row g-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label">Card Border Width</label>
                                                            <div class="input-group">
                                                                <input type="number" name="border_settings[card_border_width]" class="form-control" 
                                                                       value="{{ old('border_settings.card_border_width', $theme->border_settings['card_border_width'] ?? 1) }}" 
                                                                       min="0" max="10" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Card Border Color</label>
                                                            <input type="color" name="border_settings[card_border_color]" class="form-control form-control-color" 
                                                                   value="{{ old('border_settings.card_border_color', $theme->border_settings['card_border_color'] ?? '#e5e7eb') }}" 
                                                                   onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Card Border Radius</label>
                                                            <div class="input-group">
                                                                <input type="number" name="border_settings[card_border_radius]" class="form-control" 
                                                                       value="{{ old('border_settings.card_border_radius', $theme->border_settings['card_border_radius'] ?? 8) }}" 
                                                                       min="0" max="50" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Button Border Radius</label>
                                                            <div class="input-group">
                                                                <input type="number" name="border_settings[button_border_radius]" class="form-control" 
                                                                       value="{{ old('border_settings.button_border_radius', $theme->border_settings['button_border_radius'] ?? 6) }}" 
                                                                       min="0" max="50" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Input Border Color</label>
                                                            <input type="color" name="border_settings[input_border_color]" class="form-control form-control-color" 
                                                                   value="{{ old('border_settings.input_border_color', $theme->border_settings['input_border_color'] ?? '#d1d5db') }}" 
                                                                   onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Input Border Radius</label>
                                                            <div class="input-group">
                                                                <input type="number" name="border_settings[input_border_radius]" class="form-control" 
                                                                       value="{{ old('border_settings.input_border_radius', $theme->border_settings['input_border_radius'] ?? 6) }}" 
                                                                       min="0" max="50" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Card Settings -->
                                                <div class="tab-pane fade" id="card" role="tabpanel">
                                                    <div class="row g-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label">Card Background</label>
                                                            <input type="color" name="card_settings[card_background]" class="form-control form-control-color" 
                                                                   value="{{ old('card_settings.card_background', $theme->card_settings['card_background'] ?? '#ffffff') }}" 
                                                                   onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Header Background</label>
                                                            <input type="color" name="card_settings[header_background]" class="form-control form-control-color" 
                                                                   value="{{ old('card_settings.header_background', $theme->card_settings['header_background'] ?? '#f8fafc') }}" 
                                                                   onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Card Padding</label>
                                                            <div class="input-group">
                                                                <input type="number" name="card_settings[card_padding]" class="form-control" 
                                                                       value="{{ old('card_settings.card_padding', $theme->card_settings['card_padding'] ?? 16) }}" 
                                                                       min="0" max="50" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Card Margin</label>
                                                            <div class="input-group">
                                                                <input type="number" name="card_settings[card_margin]" class="form-control" 
                                                                       value="{{ old('card_settings.card_margin', $theme->card_settings['card_margin'] ?? 12) }}" 
                                                                       min="0" max="50" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <label class="form-label">Card Shadow</label>
                                                            <input type="text" name="card_settings[card_shadow]" class="form-control" 
                                                                   value="{{ old('card_settings.card_shadow', $theme->card_settings['card_shadow'] ?? '0 1px 3px rgba(0, 0, 0, 0.1)') }}" 
                                                                   placeholder="0 1px 3px rgba(0, 0, 0, 0.1)" onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-12">
                                                            <label class="form-label">Card Hover Shadow</label>
                                                            <input type="text" name="card_settings[card_hover_shadow]" class="form-control" 
                                                                   value="{{ old('card_settings.card_hover_shadow', $theme->card_settings['card_hover_shadow'] ?? '0 4px 6px rgba(0, 0, 0, 0.1)') }}" 
                                                                   placeholder="0 4px 6px rgba(0, 0, 0, 0.1)" onchange="updatePreview()">
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Component Settings -->
                                                <div class="tab-pane fade" id="component" role="tabpanel">
                                                    <div class="row g-3">
                                                        <div class="col-md-12">
                                                            <label class="form-label">Component Style</label>
                                                            <select name="component_style" class="form-select" onchange="updatePreview()">
                                                                <option value="modern" {{ old('component_style', $theme->component_style ?? 'modern') == 'modern' ? 'selected' : '' }}>Modern</option>
                                                                <option value="classic" {{ old('component_style', $theme->component_style ?? 'modern') == 'classic' ? 'selected' : '' }}>Classic</option>
                                                                <option value="minimal" {{ old('component_style', $theme->component_style ?? 'modern') == 'minimal' ? 'selected' : '' }}>Minimal</option>
                                                                <option value="rounded" {{ old('component_style', $theme->component_style ?? 'modern') == 'rounded' ? 'selected' : '' }}>Rounded</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Button Padding Y</label>
                                                            <div class="input-group">
                                                                <input type="number" name="component_settings[button_padding_y]" class="form-control" 
                                                                       value="{{ old('component_settings.button_padding_y', $theme->component_settings['button_padding_y'] ?? 8) }}" 
                                                                       min="0" max="30" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Button Padding X</label>
                                                            <div class="input-group">
                                                                <input type="number" name="component_settings[button_padding_x]" class="form-control" 
                                                                       value="{{ old('component_settings.button_padding_x', $theme->component_settings['button_padding_x'] ?? 16) }}" 
                                                                       min="0" max="50" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Input Padding Y</label>
                                                            <div class="input-group">
                                                                <input type="number" name="component_settings[input_padding_y]" class="form-control" 
                                                                       value="{{ old('component_settings.input_padding_y', $theme->component_settings['input_padding_y'] ?? 8) }}" 
                                                                       min="0" max="30" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Input Padding X</label>
                                                            <div class="input-group">
                                                                <input type="number" name="component_settings[input_padding_x]" class="form-control" 
                                                                       value="{{ old('component_settings.input_padding_x', $theme->component_settings['input_padding_x'] ?? 12) }}" 
                                                                       min="0" max="50" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-check form-switch">
                                                                <input class="form-check-input" type="checkbox" name="component_settings[table_striped]" 
                                                                       value="1" {{ old('component_settings.table_striped', $theme->component_settings['table_striped'] ?? true) ? 'checked' : '' }}>
                                                                <label class="form-check-label">Table Striped</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-check form-switch">
                                                                <input class="form-check-input" type="checkbox" name="component_settings[table_hover]" 
                                                                       value="1" {{ old('component_settings.table_hover', $theme->component_settings['table_hover'] ?? true) ? 'checked' : '' }}>
                                                                <label class="form-check-label">Table Hover</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Typography Settings -->
                                                <div class="tab-pane fade" id="typography" role="tabpanel">
                                                    <div class="row g-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label">Font Size XS</label>
                                                            <div class="input-group">
                                                                <input type="number" name="typography_settings[font_size_xs]" class="form-control" 
                                                                       value="{{ old('typography_settings.font_size_xs', $theme->typography_settings['font_size_xs'] ?? 12) }}" 
                                                                       min="8" max="20" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Font Size SM</label>
                                                            <div class="input-group">
                                                                <input type="number" name="typography_settings[font_size_sm]" class="form-control" 
                                                                       value="{{ old('typography_settings.font_size_sm', $theme->typography_settings['font_size_sm'] ?? 14) }}" 
                                                                       min="10" max="24" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Font Size LG</label>
                                                            <div class="input-group">
                                                                <input type="number" name="typography_settings[font_size_lg]" class="form-control" 
                                                                       value="{{ old('typography_settings.font_size_lg', $theme->typography_settings['font_size_lg'] ?? 18) }}" 
                                                                       min="14" max="32" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Font Size XL</label>
                                                            <div class="input-group">
                                                                <input type="number" name="typography_settings[font_size_xl]" class="form-control" 
                                                                       value="{{ old('typography_settings.font_size_xl', $theme->typography_settings['font_size_xl'] ?? 20) }}" 
                                                                       min="16" max="40" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Font Weight Normal</label>
                                                            <select name="typography_settings[font_weight_normal]" class="form-select" onchange="updatePreview()">
                                                                <option value="300" {{ old('typography_settings.font_weight_normal', $theme->typography_settings['font_weight_normal'] ?? 400) == 300 ? 'selected' : '' }}>Light (300)</option>
                                                                <option value="400" {{ old('typography_settings.font_weight_normal', $theme->typography_settings['font_weight_normal'] ?? 400) == 400 ? 'selected' : '' }}>Normal (400)</option>
                                                                <option value="500" {{ old('typography_settings.font_weight_normal', $theme->typography_settings['font_weight_normal'] ?? 400) == 500 ? 'selected' : '' }}>Medium (500)</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Font Weight Bold</label>
                                                            <select name="typography_settings[font_weight_bold]" class="form-select" onchange="updatePreview()">
                                                                <option value="600" {{ old('typography_settings.font_weight_bold', $theme->typography_settings['font_weight_bold'] ?? 700) == 600 ? 'selected' : '' }}>Semibold (600)</option>
                                                                <option value="700" {{ old('typography_settings.font_weight_bold', $theme->typography_settings['font_weight_bold'] ?? 700) == 700 ? 'selected' : '' }}>Bold (700)</option>
                                                                <option value="800" {{ old('typography_settings.font_weight_bold', $theme->typography_settings['font_weight_bold'] ?? 700) == 800 ? 'selected' : '' }}>Extra Bold (800)</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Line Height Normal</label>
                                                            <select name="typography_settings[line_height_normal]" class="form-select" onchange="updatePreview()">
                                                                <option value="1.25" {{ old('typography_settings.line_height_normal', $theme->typography_settings['line_height_normal'] ?? 1.5) == 1.25 ? 'selected' : '' }}>Tight (1.25)</option>
                                                                <option value="1.5" {{ old('typography_settings.line_height_normal', $theme->typography_settings['line_height_normal'] ?? 1.5) == 1.5 ? 'selected' : '' }}>Normal (1.5)</option>
                                                                <option value="1.75" {{ old('typography_settings.line_height_normal', $theme->typography_settings['line_height_normal'] ?? 1.5) == 1.75 ? 'selected' : '' }}>Relaxed (1.75)</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Letter Spacing</label>
                                                            <select name="typography_settings[letter_spacing_normal]" class="form-select" onchange="updatePreview()">
                                                                <option value="-0.025em" {{ old('typography_settings.letter_spacing_normal', $theme->typography_settings['letter_spacing_normal'] ?? '0em') == '-0.025em' ? 'selected' : '' }}>Tight (-0.025em)</option>
                                                                <option value="0em" {{ old('typography_settings.letter_spacing_normal', $theme->typography_settings['letter_spacing_normal'] ?? '0em') == '0em' ? 'selected' : '' }}>Normal (0em)</option>
                                                                <option value="0.025em" {{ old('typography_settings.letter_spacing_normal', $theme->typography_settings['letter_spacing_normal'] ?? '0em') == '0.025em' ? 'selected' : '' }}>Wide (0.025em)</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Layout Settings -->
                                                <div class="tab-pane fade" id="layout" role="tabpanel">
                                                    <div class="row g-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label">Container Max Width</label>
                                                            <input type="text" name="layout_settings[container_max_width]" class="form-control" 
                                                                   value="{{ old('layout_settings.container_max_width', $theme->layout_settings['container_max_width'] ?? '1200px') }}" 
                                                                   placeholder="1200px" onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Header Height</label>
                                                            <div class="input-group">
                                                                <input type="number" name="layout_settings[header_height]" class="form-control" 
                                                                       value="{{ old('layout_settings.header_height', $theme->layout_settings['header_height'] ?? 64) }}" 
                                                                       min="50" max="100" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Sidebar Collapsed Width</label>
                                                            <div class="input-group">
                                                                <input type="number" name="layout_settings[sidebar_collapsed_width]" class="form-control" 
                                                                       value="{{ old('layout_settings.sidebar_collapsed_width', $theme->layout_settings['sidebar_collapsed_width'] ?? 64) }}" 
                                                                       min="50" max="100" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Content Padding</label>
                                                            <div class="input-group">
                                                                <input type="number" name="layout_settings[content_padding]" class="form-control" 
                                                                       value="{{ old('layout_settings.content_padding', $theme->layout_settings['content_padding'] ?? 20) }}" 
                                                                       min="0" max="50" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Grid Gap</label>
                                                            <div class="input-group">
                                                                <input type="number" name="layout_settings[grid_gap]" class="form-control" 
                                                                       value="{{ old('layout_settings.grid_gap', $theme->layout_settings['grid_gap'] ?? 20) }}" 
                                                                       min="0" max="50" onchange="updatePreview()">
                                                                <span class="input-group-text">px</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Animation Settings -->
                                                <div class="tab-pane fade" id="animation" role="tabpanel">
                                                    <div class="row g-3">
                                                        <div class="col-md-4">
                                                            <label class="form-label">Transition Fast</label>
                                                            <input type="text" name="animation_settings[transition_fast]" class="form-control" 
                                                                   value="{{ old('animation_settings.transition_fast', $theme->animation_settings['transition_fast'] ?? '0.1s') }}" 
                                                                   placeholder="0.1s" onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label">Transition Normal</label>
                                                            <input type="text" name="animation_settings[transition_normal]" class="form-control" 
                                                                   value="{{ old('animation_settings.transition_normal', $theme->animation_settings['transition_normal'] ?? '0.2s') }}" 
                                                                   placeholder="0.2s" onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label">Transition Slow</label>
                                                            <input type="text" name="animation_settings[transition_slow]" class="form-control" 
                                                                   value="{{ old('animation_settings.transition_slow', $theme->animation_settings['transition_slow'] ?? '0.3s') }}" 
                                                                   placeholder="0.3s" onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Hover Scale</label>
                                                            <input type="number" name="animation_settings[hover_scale]" class="form-control" 
                                                                   value="{{ old('animation_settings.hover_scale', $theme->animation_settings['hover_scale'] ?? 1.02) }}" 
                                                                   step="0.01" min="1" max="1.2" onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Hover Opacity</label>
                                                            <input type="number" name="animation_settings[hover_opacity]" class="form-control" 
                                                                   value="{{ old('animation_settings.hover_opacity', $theme->animation_settings['hover_opacity'] ?? 0.9) }}" 
                                                                   step="0.1" min="0.1" max="1" onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Button Hover Transform</label>
                                                            <input type="text" name="animation_settings[button_hover_transform]" class="form-control" 
                                                                   value="{{ old('animation_settings.button_hover_transform', $theme->animation_settings['button_hover_transform'] ?? 'translateY(-1px)') }}" 
                                                                   placeholder="translateY(-1px)" onchange="updatePreview()">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Card Hover Transform</label>
                                                            <input type="text" name="animation_settings[card_hover_transform]" class="form-control" 
                                                                   value="{{ old('animation_settings.card_hover_transform', $theme->animation_settings['card_hover_transform'] ?? 'translateY(-2px)') }}" 
                                                                   placeholder="translateY(-2px)" onchange="updatePreview()">
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Custom CSS -->
                                                <div class="tab-pane fade" id="custom" role="tabpanel">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <label class="form-label">Custom CSS Code</label>
                                                            <textarea name="custom_css" class="form-control" rows="10" 
                                                                      placeholder="/* Tambahkan CSS custom di sini */&#10;.custom-class {&#10;    color: #333;&#10;    background: #fff;&#10;}"
                                                                      onchange="updatePreview()">{{ old('custom_css', $theme->custom_css) }}</textarea>
                                                            <small class="text-muted">CSS akan diterapkan setelah CSS tema default. Gunakan !important jika diperlukan.</small>
                                                        </div>
                                                        <div class="col-12 mt-3">
                                                            <div class="form-check form-switch">
                                                                <input class="form-check-input" type="checkbox" name="use_custom_sidebar" 
                                                                       value="1" {{ old('use_custom_sidebar', $theme->use_custom_sidebar) ? 'checked' : '' }}>
                                                                <label class="form-check-label">Gunakan Custom Sidebar Menu</label>
                                                            </div>
                                                            <small class="text-muted">Jika diaktifkan, akan menggunakan menu sidebar yang dapat dikustomisasi.</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <button type="button" class="btn btn-outline-secondary" onclick="resetColors()">
                                                    <i class="fas fa-undo me-1"></i>
                                                    Reset Warna
                                                </button>
                                            </div>
                                            <div>
                                                <a href="{{ route('themes.index') }}" class="btn btn-outline-secondary me-2">
                                                    <i class="fas fa-times me-1"></i>
                                                    Batal
                                                </a>
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-save me-1"></i>
                                                    Simpan Perubahan
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.form-control-color {
    width: 60px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem 0 0 0.375rem;
}

.theme-preview-container {
    background: var(--light-bg, #f8fafc);
    position: relative;
}

.color-input-group .form-control:last-child {
    border-left: 0;
}

.color-preview-swatch {
    width: 40px;
    height: 38px;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    display: inline-block;
    margin-right: 10px;
}
</style>

<script>
// Initialize preview on page load
document.addEventListener('DOMContentLoaded', function() {
    updatePreview();
    
    // Update text inputs when color inputs change
    document.querySelectorAll('input[type="color"]').forEach(colorInput => {
        colorInput.addEventListener('change', function() {
            this.nextElementSibling.value = this.value;
        });
    });
});

function updatePreview() {
    const preview = document.getElementById('livePreview');
    const colors = getFormColors();
    const settings = getFormSettings();
    
    const sidebarWidth = parseInt(settings.sidebar_width) || 260;
    const contentWidth = 100 - (sidebarWidth / 4); // Proportional
    
    preview.innerHTML = `
        <div style="width: 100%; height: 100%; background: ${colors.light_bg}; font-family: ${settings.font_family}; font-size: ${settings.font_size}px; position: relative;">
            <!-- Sidebar -->
            <div style="width: 30%; height: 100%; background: ${colors.accent}; position: absolute; left: 0; top: 0; padding: 15px; border-radius: ${settings.border_radius}px 0 0 ${settings.border_radius}px;">
                <!-- User Info -->
                <div style="background: rgba(255,255,255,0.1); padding: 10px; border-radius: ${settings.border_radius}px; margin-bottom: 15px; text-align: center;">
                    <div style="width: 30px; height: 30px; background: rgba(255,255,255,0.3); border-radius: 50%; margin: 0 auto 5px;"></div>
                    <div style="height: 8px; background: rgba(255,255,255,0.5); border-radius: 2px; margin-bottom: 3px;"></div>
                    <div style="height: 6px; background: rgba(255,255,255,0.3); border-radius: 2px; width: 70%; margin: 0 auto;"></div>
                </div>
                <!-- Nav Items -->
                <div style="background: ${colors.primary}; height: 10px; border-radius: ${settings.border_radius}px; margin-bottom: 6px;"></div>
                <div style="background: rgba(255,255,255,0.2); height: 10px; border-radius: ${settings.border_radius}px; margin-bottom: 6px;"></div>
                <div style="background: rgba(255,255,255,0.2); height: 10px; border-radius: ${settings.border_radius}px; margin-bottom: 6px;"></div>
                <div style="background: rgba(255,255,255,0.2); height: 10px; border-radius: ${settings.border_radius}px;"></div>
            </div>
            
            <!-- Main Content -->
            <div style="position: absolute; left: 32%; right: 0; top: 0; bottom: 0; padding: 15px;">
                <!-- Header -->
                <div style="height: 40px; background: white; border-radius: ${settings.border_radius}px; margin-bottom: 15px; padding: 10px;">
                    <div style="height: 12px; background: ${colors.secondary}; border-radius: 2px; width: 40%;"></div>
                </div>
                
                <!-- Cards Grid -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: calc(100% - 70px);">
                    <!-- Card 1 -->
                    <div style="background: white; border-radius: ${settings.border_radius}px; padding: 12px; border: 1px solid #e5e7eb;">
                        <div style="display: flex; align-items: center; margin-bottom: 8px;">
                            <div style="width: 20px; height: 20px; background: ${colors.success}; border-radius: ${settings.border_radius}px; margin-right: 8px;"></div>
                            <div style="height: 8px; background: ${colors.secondary}; border-radius: 2px; width: 60%;"></div>
                        </div>
                        <div style="height: 24px; background: rgba(${hexToRgb(colors.success)}, 0.1); border-radius: ${settings.border_radius}px;"></div>
                    </div>
                    
                    <!-- Card 2 -->
                    <div style="background: white; border-radius: ${settings.border_radius}px; padding: 12px; border: 1px solid #e5e7eb;">
                        <div style="display: flex; align-items: center; margin-bottom: 8px;">
                            <div style="width: 20px; height: 20px; background: ${colors.warning}; border-radius: ${settings.border_radius}px; margin-right: 8px;"></div>
                            <div style="height: 8px; background: ${colors.secondary}; border-radius: 2px; width: 50%;"></div>
                        </div>
                        <div style="height: 24px; background: rgba(${hexToRgb(colors.warning)}, 0.1); border-radius: ${settings.border_radius}px;"></div>
                    </div>
                    
                    <!-- Card 3 -->
                    <div style="background: white; border-radius: ${settings.border_radius}px; padding: 12px; border: 1px solid #e5e7eb;">
                        <div style="display: flex; align-items: center; margin-bottom: 8px;">
                            <div style="width: 20px; height: 20px; background: ${colors.info}; border-radius: ${settings.border_radius}px; margin-right: 8px;"></div>
                            <div style="height: 8px; background: ${colors.secondary}; border-radius: 2px; width: 70%;"></div>
                        </div>
                        <div style="height: 24px; background: rgba(${hexToRgb(colors.info)}, 0.1); border-radius: ${settings.border_radius}px;"></div>
                    </div>
                    
                    <!-- Card 4 -->
                    <div style="background: white; border-radius: ${settings.border_radius}px; padding: 12px; border: 1px solid #e5e7eb;">
                        <div style="display: flex; align-items: center; margin-bottom: 8px;">
                            <div style="width: 20px; height: 20px; background: ${colors.danger}; border-radius: ${settings.border_radius}px; margin-right: 8px;"></div>
                            <div style="height: 8px; background: ${colors.secondary}; border-radius: 2px; width: 45%;"></div>
                        </div>
                        <div style="height: 24px; background: rgba(${hexToRgb(colors.danger)}, 0.1); border-radius: ${settings.border_radius}px;"></div>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function getFormColors() {
    return {
        primary: document.querySelector('input[name="colors[primary]"]').value,
        primary_dark: document.querySelector('input[name="colors[primary_dark]"]').value,
        secondary: document.querySelector('input[name="colors[secondary]"]').value,
        accent: document.querySelector('input[name="colors[accent]"]').value,
        success: document.querySelector('input[name="colors[success]"]').value,
        warning: document.querySelector('input[name="colors[warning]"]').value,
        danger: document.querySelector('input[name="colors[danger]"]').value,
        info: document.querySelector('input[name="colors[info]"]').value,
        light_bg: document.querySelector('input[name="colors[light_bg]"]').value
    };
}

function getFormSettings() {
    return {
        font_family: document.querySelector('select[name="font_family"]').value,
        font_size: document.querySelector('input[name="font_size"]').value + 'px',
        border_radius: document.querySelector('input[name="border_radius"]').value + 'px',
        sidebar_width: document.querySelector('input[name="sidebar_width"]').value
    };
}

function hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? 
        parseInt(result[1], 16) + ',' + parseInt(result[2], 16) + ',' + parseInt(result[3], 16) : 
        '0,0,0';
}

function resetColors() {
    if (confirm('Apakah Anda yakin ingin mereset semua warna ke nilai default?')) {
        // Reset to original theme colors
        const originalColors = @json($theme->colors);
        
        Object.keys(originalColors).forEach(key => {
            const colorInput = document.querySelector(`input[name="colors[${key}]"]`);
            const textInput = colorInput.nextElementSibling;
            
            colorInput.value = originalColors[key];
            textInput.value = originalColors[key];
        });
        
        updatePreview();
    }
}
</script>
@endsection