@extends('layouts.app')

@section('title', 'Buat Tema Baru')

@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-plus text-primary me-2"></i>
                            Buat Tema Baru
                        </h1>
                        <p class="text-muted small mb-0">Buat tema custom dengan warna, font, dan pengaturan visual sesuai keinginan Anda</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.store') }}" id="themeCreateForm">
                @csrf
                
                <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 Create -->
                    <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 Tema <span class="text-danger">*</span></label>
                                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" 
                                               value="{{ old('name') }}" placeholder="my-custom-theme" required>
                                        <small class="text-muted">Nama unik untuk tema (huruf kecil, tanpa spasi)</small>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Nama Tampilan <span class="text-danger">*</span></label>
                                        <input type="text" name="display_name" class="form-control @error('display_name') is-invalid @enderror" 
                                               value="{{ old('display_name') }}" placeholder="My Custom Theme" required>
                                        @error('display_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-4">
                                    <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') == 'system-ui, sans-serif' ? 'selected' : '' }}>System UI</option>
                                            <option value="-apple-system, BlinkMacSystemFont, sans-serif" {{ old('font_family') == '-apple-system, BlinkMacSystemFont, sans-serif' ? 'selected' : '' }}>Apple System</option>
                                            <option value='"Inter", sans-serif' {{ old('font_family') == '"Inter", sans-serif' ? 'selected' : '' }}>Inter</option>
                                            <option value='"Roboto", sans-serif' {{ old('font_family') == '"Roboto", sans-serif' ? 'selected' : '' }}>Roboto</option>
                                            <option value='"JetBrains Mono", monospace' {{ old('font_family') == '"JetBrains Mono", monospace' ? 'selected' : '' }}>JetBrains Mono</option>
                                            <option value='"Fira Code", monospace' {{ old('font_family') == '"Fira Code", monospace' ? 'selected' : '' }}>Fira Code</option>
                                            <option value='"Source Sans Pro", sans-serif' {{ old('font_family') == '"Source Sans Pro", sans-serif' ? 'selected' : '' }}>Source Sans Pro</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Deskripsi</label>
                                        <input type="text" name="description" class="form-control @error('description') is-invalid @enderror" 
                                               value="{{ old('description') }}" placeholder="Deskripsi singkat tema">
                                        @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', 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', 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', 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', $template['colors']['primary']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.primary', $template['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', $template['colors']['primary_dark']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.primary_dark', $template['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', $template['colors']['secondary']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.secondary', $template['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', $template['colors']['accent']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.accent', $template['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', $template['colors']['success']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.success', $template['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', $template['colors']['warning']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.warning', $template['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', $template['colors']['danger']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.danger', $template['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', $template['colors']['info']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.info', $template['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', $template['colors']['light_bg']) }}" onchange="updatePreview()">
                                            <input type="text" class="form-control" value="{{ old('colors.light_bg', $template['colors']['light_bg']) }}" readonly>
                                        </div>
                                        @error('colors.light_bg')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Color Presets -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h6 class="fw-bold mb-3">
                                            <i class="fas fa-swatchbook me-2"></i>
                                            Preset Warna
                                        </h6>
                                        <div class="d-flex flex-wrap gap-2">
                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="applyPreset('blue')">Blue Corporate</button>
                                            <button type="button" class="btn btn-outline-success btn-sm" onclick="applyPreset('green')">Green Nature</button>
                                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="applyPreset('orange')">Orange Warm</button>
                                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="applyPreset('red')">Red Bold</button>
                                            <button type="button" class="btn btn-outline-info btn-sm" onclick="applyPreset('cyan')">Cyan Fresh</button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="applyPreset('gray')">Gray Minimal</button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <hr>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <button type="button" class="btn btn-outline-secondary" onclick="resetToDefaults()">
                                                    <i class="fas fa-undo me-1"></i>
                                                    Reset Default
                                                </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>
                                                    Buat Tema
                                                </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;
}
</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();
    
    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 applyPreset(presetName) {
    const presets = {
        blue: {
            primary: '#2563eb',
            primary_dark: '#1d4ed8',
            secondary: '#64748b',
            accent: '#0f172a',
            success: '#059669',
            warning: '#d97706',
            danger: '#dc2626',
            info: '#0284c7',
            light_bg: '#f8fafc'
        },
        green: {
            primary: '#059669',
            primary_dark: '#047857',
            secondary: '#6b7280',
            accent: '#064e3b',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
            info: '#06b6d4',
            light_bg: '#f0fdf4'
        },
        orange: {
            primary: '#ea580c',
            primary_dark: '#c2410c',
            secondary: '#78716c',
            accent: '#431407',
            success: '#22c55e',
            warning: '#f97316',
            danger: '#ef4444',
            info: '#3b82f6',
            light_bg: '#fff7ed'
        },
        red: {
            primary: '#dc2626',
            primary_dark: '#b91c1c',
            secondary: '#6b7280',
            accent: '#7f1d1d',
            success: '#16a34a',
            warning: '#ca8a04',
            danger: '#ef4444',
            info: '#3b82f6',
            light_bg: '#fef2f2'
        },
        cyan: {
            primary: '#0891b2',
            primary_dark: '#0e7490',
            secondary: '#64748b',
            accent: '#164e63',
            success: '#059669',
            warning: '#d97706',
            danger: '#dc2626',
            info: '#06b6d4',
            light_bg: '#f0fdfa'
        },
        gray: {
            primary: '#4b5563',
            primary_dark: '#374151',
            secondary: '#6b7280',
            accent: '#111827',
            success: '#059669',
            warning: '#d97706',
            danger: '#dc2626',
            info: '#3b82f6',
            light_bg: '#f9fafb'
        }
    };

    if (presets[presetName]) {
        const preset = presets[presetName];
        Object.keys(preset).forEach(key => {
            const colorInput = document.querySelector(`input[name="colors[${key}]"]`);
            const textInput = colorInput.nextElementSibling;
            
            colorInput.value = preset[key];
            textInput.value = preset[key];
        });
        
        updatePreview();
    }
}

function resetToDefaults() {
    if (confirm('Apakah Anda yakin ingin mereset semua pengaturan ke nilai default?')) {
        // Reset to template defaults
        const defaults = @json($template['colors']);
        
        Object.keys(defaults).forEach(key => {
            const colorInput = document.querySelector(`input[name="colors[${key}]"]`);
            const textInput = colorInput.nextElementSibling;
            
            colorInput.value = defaults[key];
            textInput.value = defaults[key];
        });
        
        // Reset other settings
        document.querySelector('input[name="font_size"]').value = 14;
        document.querySelector('input[name="border_radius"]').value = 8;
        document.querySelector('input[name="sidebar_width"]').value = 260;
        document.querySelector('select[name="font_family"]').value = 'system-ui, sans-serif';
        
        updatePreview();
    }
}
</script>
@endsection