@extends('layouts.app')

@section('title', 'Pengaturan Tema')

@section('content')
<div class="container-fluid">
    <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-paint-brush text-primary me-2"></i>
                    Pengaturan Tema
                </h1>
                <p class="text-muted small mb-0">Kelola dan ubah tampilan dashboard sesuai preferensi Anda</p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ route('themes.create') }}" class="btn btn-primary btn-sm me-2">
                    <i class="fas fa-plus me-1"></i>
                    Buat Tema Baru
                </a>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="resetToDefault()">
                    <i class="fas fa-undo me-1"></i>
                    Reset ke Default
                </button>
            </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

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

    <div class="row">
        @foreach($themes as $theme)
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card theme-card h-100 {{ $theme->is_active ? 'active-theme' : '' }}" 
                 data-theme-id="{{ $theme->id }}" data-theme-name="{{ $theme->name }}">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        {{ $theme->display_name }}
                        @if($theme->is_active)
                            <span class="badge bg-success ms-2">
                                <i class="fas fa-check me-1"></i>Aktif
                            </span>
                        @endif
                        @if($theme->is_default)
                            <span class="badge bg-primary ms-2">Default</span>
                        @endif
                    </h5>
                    
                    <!-- Dropdown menu untuk aksi tema -->
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-cog"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <a class="dropdown-item" href="{{ route('themes.edit', $theme) }}">
                                    <i class="fas fa-edit me-2"></i>Edit Tema
                                </a>
                            </li>
                            <li>
                                <form method="POST" action="{{ route('themes.duplicate', $theme) }}" style="display: inline;">
                                    @csrf
                                    <button type="submit" class="dropdown-item">
                                        <i class="fas fa-copy me-2"></i>Duplikasi
                                    </button>
                                </form>
                            </li>
                            @if(!$theme->is_default && !$theme->is_active)
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form method="POST" action="{{ route('themes.destroy', $theme) }}" style="display: inline;" 
                                      onsubmit="return confirm('Apakah Anda yakin ingin menghapus tema {{ $theme->display_name }}?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="dropdown-item text-danger">
                                        <i class="fas fa-trash me-2"></i>Hapus Tema
                                    </button>
                                </form>
                            </li>
                            @endif
                        </ul>
                    </div>
                </div>
                
                <div class="card-body">
                    <p class="text-muted mb-3">{{ $theme->description }}</p>
                    
                    <!-- Color Preview -->
                    <div class="color-preview mb-3">
                        <div class="row g-2">
                            <div class="col-3">
                                <div class="color-swatch" 
                                     style="background-color: {{ $theme->colors['primary'] }}"
                                     title="Primary Color"></div>
                                <small class="text-muted">Primary</small>
                            </div>
                            <div class="col-3">
                                <div class="color-swatch" 
                                     style="background-color: {{ $theme->colors['secondary'] }}"
                                     title="Secondary Color"></div>
                                <small class="text-muted">Secondary</small>
                            </div>
                            <div class="col-3">
                                <div class="color-swatch" 
                                     style="background-color: {{ $theme->colors['success'] }}"
                                     title="Success Color"></div>
                                <small class="text-muted">Success</small>
                            </div>
                            <div class="col-3">
                                <div class="color-swatch" 
                                     style="background-color: {{ $theme->colors['warning'] }}"
                                     title="Warning Color"></div>
                                <small class="text-muted">Warning</small>
                            </div>
                        </div>
                    </div>

                    <!-- Theme Preview -->
                    <div class="theme-preview mb-3" style="background: {{ $theme->css_variables['--light-bg'] ?? '#f8fafc' }}">
                        <div class="mini-sidebar" style="background: {{ $theme->css_variables['--sidebar-gradient'] }}">
                            <div class="mini-nav-item" style="background-color: {{ $theme->colors['primary'] }}"></div>
                            <div class="mini-nav-item"></div>
                            <div class="mini-nav-item"></div>
                        </div>
                        <div class="mini-content">
                            <div class="mini-card" style="background: {{ $theme->css_variables['--card-bg'] ?? '#ffffff' }}">
                                <div class="mini-stat" style="color: {{ $theme->colors['primary'] }}"></div>
                                <div class="mini-stat" style="color: {{ $theme->colors['success'] }}"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <div class="d-grid gap-2">
                        @if(!$theme->is_active)
                            <button type="button" class="btn btn-primary btn-sm" onclick="setTheme({{ $theme->id }})">
                                <i class="fas fa-palette me-1"></i>
                                Gunakan Tema
                            </button>
                        @else
                            <button type="button" class="btn btn-success btn-sm" disabled>
                                <i class="fas fa-check me-1"></i>
                                Tema Aktif
                            </button>
                        @endif
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="previewTheme({{ $theme->id }})">
                            <i class="fas fa-eye me-1"></i>
                            Preview
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Info Cards -->
    <div class="row mt-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-palette fa-2x text-primary mb-3"></i>
                    <h5>Tema Responsif</h5>
                    <p class="text-muted small mb-0">Semua tema dioptimalkan untuk berbagai ukuran layar</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-eye fa-2x text-success mb-3"></i>
                    <h5>Preview Real-time</h5>
                    <p class="text-muted small mb-0">Lihat pratinjau tema sebelum mengaktifkannya</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-save fa-2x text-info mb-3"></i>
                    <h5>Auto Save</h5>
                    <p class="text-muted small mb-0">Preferensi tema tersimpan otomatis untuk setiap user</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.theme-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.theme-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.theme-card.active-theme {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.color-swatch {
    width: 100%;
    height: 30px;
    border-radius: 6px;
    margin-bottom: 4px;
    border: 1px solid #e5e7eb;
}

.theme-preview {
    height: 80px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    position: relative;
    overflow: hidden;
}

.mini-sidebar {
    width: 25%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 8px 4px;
}

.mini-nav-item {
    height: 6px;
    background-color: rgba(255,255,255,0.3);
    margin-bottom: 4px;
    border-radius: 2px;
}

.mini-content {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 65%;
    height: calc(100% - 16px);
}

.mini-card {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    padding: 8px;
    display: flex;
    gap: 4px;
}

.mini-stat {
    flex: 1;
    height: 20px;
    background-color: currentColor;
    opacity: 0.2;
    border-radius: 2px;
}

.corporate-header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 20px 0;
    margin-bottom: 24px;
}

/* LaraAdmin Theme Preview Enhancements */
.theme-card[data-theme-name="lara-admin"] .theme-preview {
    background: #f1f5f9 !important;
}

.theme-card[data-theme-name="lara-admin"] .mini-sidebar {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.theme-card[data-theme-name="lara-admin"] .mini-nav-item:first-child {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

.theme-card[data-theme-name="lara-admin"] .mini-card {
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-card[data-theme-name="lara-admin"] .color-swatch {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.theme-card[data-theme-name="lara-admin"] .color-swatch:hover {
    transform: scale(1.05);
}

.theme-card[data-theme-name="lara-admin"]:hover {
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.15) !important;
    border-color: #f97316 !important;
}

.theme-card[data-theme-name="lara-admin"].active-theme {
    border-color: #f97316 !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3) !important;
}

/* Minimalist Mono Theme Preview */
.theme-card[data-theme-name="minimalist-mono"] .theme-preview {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
}

.theme-card[data-theme-name="minimalist-mono"] .mini-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e0e0e0 !important;
}

.theme-card[data-theme-name="minimalist-mono"] .mini-nav-item:first-child {
    background: #000000 !important;
}

.theme-card[data-theme-name="minimalist-mono"] .mini-nav-item {
    background: #f5f5f5 !important;
    border-radius: 0 !important;
}

.theme-card[data-theme-name="minimalist-mono"] .mini-card {
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

/* Material Glass Theme Preview */
.theme-card[data-theme-name="material-glass"] .theme-preview {
    background: #fafafa !important;
}

.theme-card[data-theme-name="material-glass"] .mini-sidebar {
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.8) 100%) !important;
    backdrop-filter: blur(5px);
    border-right: 1px solid rgba(0,0,0,0.12) !important;
}

.theme-card[data-theme-name="material-glass"] .mini-nav-item:first-child {
    background: #1976d2 !important;
    box-shadow: 0 1px 3px rgba(25, 118, 210, 0.3);
}

.theme-card[data-theme-name="material-glass"] .mini-card {
    background: rgba(255,255,255,0.7) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0,0,0,0.12) !important;
    border-radius: 8px !important;
}

/* Nordic Clean Theme Preview */
.theme-card[data-theme-name="nordic-clean"] .theme-preview {
    background: #eceff4 !important;
}

.theme-card[data-theme-name="nordic-clean"] .mini-sidebar {
    background: #e5e9f0 !important;
    border-right: 1px solid #d8dee9 !important;
}

.theme-card[data-theme-name="nordic-clean"] .mini-nav-item:first-child {
    background: #5e81ac !important;
}

.theme-card[data-theme-name="nordic-clean"] .mini-nav-item {
    background: rgba(76, 86, 106, 0.3) !important;
    border-radius: 6px !important;
}

.theme-card[data-theme-name="nordic-clean"] .mini-card {
    background: #ffffff !important;
    border: 1px solid #d8dee9 !important;
    border-radius: 6px !important;
}

/* Terminal Dark Theme Preview */
.theme-card[data-theme-name="terminal-dark"] .theme-preview {
    background: #161b22 !important;
    color: #c9d1d9;
}

.theme-card[data-theme-name="terminal-dark"] .mini-sidebar {
    background: #0d1117 !important;
    border-right: 1px solid #30363d !important;
}

.theme-card[data-theme-name="terminal-dark"] .mini-nav-item:first-child {
    background: #00ff00 !important;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.theme-card[data-theme-name="terminal-dark"] .mini-nav-item {
    background: rgba(125, 133, 144, 0.3) !important;
    border-radius: 3px !important;
}

.theme-card[data-theme-name="terminal-dark"] .mini-card {
    background: #21262d !important;
    border: 1px solid #30363d !important;
    border-radius: 3px !important;
}

.theme-card[data-theme-name="terminal-dark"] .color-swatch {
    border: 1px solid #30363d;
}

.theme-card[data-theme-name="terminal-dark"]:hover {
    box-shadow: 0 8px 25px rgba(0, 255, 0, 0.15) !important;
    border-color: #00ff00 !important;
}

/* Additional hover effects for new themes */
.theme-card[data-theme-name="minimalist-mono"]:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    border-color: #000000 !important;
}

.theme-card[data-theme-name="material-glass"]:hover {
    box-shadow: 0 8px 25px rgba(25, 118, 210, 0.15) !important;
    border-color: #1976d2 !important;
}

.theme-card[data-theme-name="nordic-clean"]:hover {
    box-shadow: 0 8px 25px rgba(94, 129, 172, 0.15) !important;
    border-color: #5e81ac !important;
}
</style>

<script>
function setTheme(themeId) {
    if (confirm('Apakah Anda yakin ingin mengubah tema?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("themes.set") }}';
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        
        const themeInput = document.createElement('input');
        themeInput.type = 'hidden';
        themeInput.name = 'theme_id';
        themeInput.value = themeId;
        
        form.appendChild(csrfToken);
        form.appendChild(themeInput);
        document.body.appendChild(form);
        form.submit();
    }
}

function previewTheme(themeId) {
    fetch(`{{ url('/themes/preview') }}/${themeId}`)
        .then(response => response.json())
        .then(data => {
            // Implementasi preview tema
            showThemePreview(data);
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Gagal memuat preview tema');
        });
}

function showThemePreview(themeData) {
    const modal = `
        <div class="modal fade" id="themePreviewModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Preview: ${themeData.theme.display_name}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted">${themeData.theme.description}</p>
                        <div class="theme-preview-large" style="height: 300px; background: ${themeData.css_variables['--light-bg']}; border-radius: 8px; position: relative; overflow: hidden;">
                            <div style="width: 30%; height: 100%; background: ${themeData.css_variables['--sidebar-gradient']}; position: absolute; left: 0; top: 0; padding: 20px;">
                                <div style="background: rgba(255,255,255,0.1); height: 40px; border-radius: 6px; margin-bottom: 15px;"></div>
                                <div style="background: ${themeData.colors.primary}; height: 12px; border-radius: 4px; margin-bottom: 8px;"></div>
                                <div style="background: rgba(255,255,255,0.3); height: 12px; border-radius: 4px; margin-bottom: 8px;"></div>
                                <div style="background: rgba(255,255,255,0.3); height: 12px; border-radius: 4px; margin-bottom: 8px;"></div>
                            </div>
                            <div style="position: absolute; right: 20px; top: 20px; left: 35%; bottom: 20px;">
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; height: 100%;">
                                    <div style="background: ${themeData.css_variables['--card-bg'] || '#ffffff'}; border-radius: 8px; padding: 20px; border: 1px solid ${themeData.css_variables['--border-color'] || '#e5e7eb'};">
                                        <div style="background: ${themeData.colors.primary}; height: 20px; width: 80%; border-radius: 4px; margin-bottom: 10px; opacity: 0.3;"></div>
                                        <div style="background: ${themeData.colors.success}; height: 40px; width: 100%; border-radius: 6px; opacity: 0.2;"></div>
                                    </div>
                                    <div style="background: ${themeData.css_variables['--card-bg'] || '#ffffff'}; border-radius: 8px; padding: 20px; border: 1px solid ${themeData.css_variables['--border-color'] || '#e5e7eb'};">
                                        <div style="background: ${themeData.colors.warning}; height: 20px; width: 60%; border-radius: 4px; margin-bottom: 10px; opacity: 0.3;"></div>
                                        <div style="background: ${themeData.colors.info}; height: 40px; width: 100%; border-radius: 6px; opacity: 0.2;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="button" class="btn btn-primary" onclick="setTheme(${themeData.theme.id})">Gunakan Tema</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal
    const existingModal = document.getElementById('themePreviewModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add new modal
    document.body.insertAdjacentHTML('beforeend', modal);
    const modalElement = new bootstrap.Modal(document.getElementById('themePreviewModal'));
    modalElement.show();
}

function resetToDefault() {
    if (confirm('Apakah Anda yakin ingin mereset tema ke default?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("themes.reset") }}';
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        
        form.appendChild(csrfToken);
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection