@extends('layouts.app')

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

@section('content')
<div class="row g-4">
    <div class="col-lg-2 d-none d-lg-block">
        @include('admin.partials.sidebar')
    </div>

    <div class="col-lg-7 col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2 class="fw-bold mb-0">Website Theme Engine</h2>
                <p class="text-muted small mb-0">Yahan se color change karo — poora project update ho jayega</p>
            </div>
            <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-arrow-left me-1"></i> Back
            </a>
        </div>

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

        <form action="{{ route('admin.settings.theme.update') }}" method="POST" id="themeForm">
            @csrf

            @foreach($colorGroups as $groupKey => $group)
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="fw-bold mb-0 text-dark">
                        <i class="bi {{ $group['icon'] }} me-2"></i>{{ $group['title'] }}
                    </h5>
                    <p class="text-muted small mb-0 mt-1">{{ $group['description'] }}</p>
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">
                        @foreach($group['fields'] as $field => $meta)
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-uppercase text-muted">{{ $meta['label'] }}</label>
                            <div class="d-flex gap-3 align-items-center">
                                <input type="color"
                                       name="{{ $field }}"
                                       class="form-control form-control-color border-0 shadow-sm theme-color-input"
                                       data-field="{{ $field }}"
                                       value="{{ $settings->{$field} ?? \App\Models\SiteSetting::defaults()[$field] }}"
                                       title="{{ $meta['label'] }}">
                                <input type="text"
                                       class="form-control font-monospace theme-color-text"
                                       data-field="{{ $field }}"
                                       value="{{ $settings->{$field} ?? \App\Models\SiteSetting::defaults()[$field] }}"
                                       placeholder="#000000"
                                       maxlength="7"
                                       spellcheck="false"
                                       autocomplete="off">
                            </div>
                            <small class="text-muted d-block mt-1">{{ $meta['hint'] }}</small>
                            @error($field)
                            <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endforeach

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-stars me-2"></i>Quick Presets</h5>
                </div>
                <div class="card-body p-4">
                    <p class="text-muted small mb-3">Ek click mein poora color scheme apply karo:</p>
                    <div class="d-flex flex-wrap gap-2">
                        <button type="button" class="btn btn-outline-primary preset-btn" data-preset="default">Default Indigo</button>
                        <button type="button" class="btn btn-outline-success preset-btn" data-preset="emerald">Emerald Nature</button>
                        <button type="button" class="btn btn-outline-danger preset-btn" data-preset="royal">Royal Red</button>
                        <button type="button" class="btn btn-outline-info preset-btn" data-preset="sky">Sky Blue</button>
                        <button type="button" class="btn btn-outline-dark preset-btn" data-preset="dark">Modern Dark</button>
                        <button type="button" class="btn btn-outline-warning preset-btn" data-preset="gletra">Gletra Brand</button>
                    </div>
                </div>
            </div>

            <div class="d-grid gap-2 mb-4">
                <button type="submit" class="btn btn-primary btn-lg fw-bold py-3 shadow-sm">
                    <i class="bi bi-check-circle me-2"></i> Save Theme — Apply to Entire Project
                </button>
            </div>
        </form>
    </div>

    <div class="col-lg-3 col-12">
        <div class="theme-live-preview sticky-top" style="top: 1.5rem;">
            <p class="theme-live-preview__label mb-3">Live Preview</p>

            <div class="card border-0 shadow-sm overflow-hidden mb-3">
                <div class="card-header py-2 border-0 text-center text-white theme-preview-header">
                    <span class="theme-preview-header__title"><i class="bi bi-phone me-1"></i> Mobile</span>
                </div>
                <div class="card-body p-0 d-flex justify-content-center py-3 theme-preview-surface">
                    <div class="theme-phone-mockup">
                        <div class="theme-phone-mockup__status"></div>
                        <div class="theme-phone-mockup__header">
                            <i class="bi bi-list"></i>
                            <span>Gletra</span>
                            <i class="bi bi-search"></i>
                        </div>
                        <div class="theme-phone-mockup__body">
                            <div class="theme-phone-mockup__card">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <div class="theme-phone-mockup__avatar"></div>
                                    <div class="theme-phone-mockup__line theme-phone-mockup__line--short"></div>
                                </div>
                                <div class="theme-phone-mockup__line"></div>
                                <div class="theme-phone-mockup__line theme-phone-mockup__line--mid"></div>
                            </div>
                            <button type="button" class="theme-phone-mockup__btn">Checkout Now</button>
                            <div class="d-flex gap-1 flex-wrap mb-2">
                                <span class="theme-phone-mockup__badge theme-phone-mockup__badge--secondary">Offer</span>
                                <span class="theme-phone-mockup__badge theme-phone-mockup__badge--success">New</span>
                                <span class="theme-phone-mockup__badge theme-phone-mockup__badge--danger">Sale</span>
                            </div>
                            <p class="theme-phone-mockup__text">Main text sample</p>
                            <p class="theme-phone-mockup__text theme-phone-mockup__text--muted">Muted text sample</p>
                            <a href="#" class="theme-phone-mockup__link" onclick="return false;">Sample link</a>
                        </div>
                        <div class="theme-phone-mockup__nav">
                            <i class="bi bi-house-door-fill theme-phone-mockup__nav-active"></i>
                            <i class="bi bi-heart"></i>
                            <i class="bi bi-bag"></i>
                            <i class="bi bi-person"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header py-2 border-0 text-center text-white theme-preview-header">
                    <span class="theme-preview-header__title"><i class="bi bi-display me-1"></i> Desktop</span>
                </div>
                <div class="card-body p-3 theme-preview-surface">
                    <div class="theme-desktop-mockup">
                        <div class="theme-desktop-mockup__nav">
                            <span class="theme-desktop-mockup__logo">G</span>
                            <span class="theme-desktop-mockup__nav-link">Home</span>
                            <span class="theme-desktop-mockup__nav-link theme-desktop-mockup__nav-link--active">Shop</span>
                            <span class="theme-desktop-mockup__nav-link">Cart</span>
                        </div>
                        <div class="theme-desktop-mockup__hero"></div>
                        <div class="d-flex gap-2">
                            <div class="theme-desktop-mockup__card flex-fill"></div>
                            <div class="theme-desktop-mockup__card flex-fill"></div>
                        </div>
                        <button type="button" class="theme-desktop-mockup__btn w-100 mt-2">Add to Cart</button>
                    </div>
                </div>
                <div class="theme-desktop-mockup__footer text-center py-2">
                    <small>Footer preview</small>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-body p-3">
                    <p class="theme-live-preview__label mb-2" style="font-size: 0.7rem;">Active Colors</p>
                    <div class="theme-swatch-grid" id="colorSwatches"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    :root {
        --mock-primary: {{ $settings->primary_color }};
        --mock-secondary: {{ $settings->secondary_color }};
        --mock-accent: {{ $settings->accent_color ?? '#fb641b' }};
        --mock-bg: {{ $settings->app_bg_color }};
        --mock-header-bg: {{ $settings->header_bg ?? $settings->primary_color }};
        --mock-card-bg: {{ $settings->card_bg ?? '#ffffff' }};
        --mock-border: {{ $settings->border_color ?? '#e2e8f0' }};
        --mock-text: {{ $settings->text_color ?? '#1e293b' }};
        --mock-text-muted: {{ $settings->text_muted ?? '#64748b' }};
        --mock-link: {{ $settings->link_color ?? $settings->primary_color }};
        --mock-success: {{ $settings->success_color ?? '#10b981' }};
        --mock-warning: {{ $settings->warning_color ?? '#f59e0b' }};
        --mock-danger: {{ $settings->danger_color ?? '#ef4444' }};
        --mock-info: {{ $settings->info_color ?? '#3b82f6' }};
        --mock-footer-bg: {{ $settings->footer_bg ?? '#0f172a' }};
        --mock-gradient-end: {{ $settings->gradient_end_color ?? '#7c3aed' }};
    }

    .form-control-color { width: 56px; height: 56px; border-radius: 12px; cursor: pointer; padding: 4px; }
    .theme-color-text { text-transform: uppercase; letter-spacing: 0.03em; }
    .theme-color-text.is-invalid { border-color: #ef4444; background: #fef2f2; }
    .theme-color-text.is-valid-hex { border-color: #10b981; }
    .preset-btn { font-size: 0.85rem; padding: 0.5rem 1rem; border-radius: 8px; }
    .preset-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

    /* Live Preview panel */
    .theme-live-preview__label {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #94a3b8;
        margin: 0;
        padding-left: 2px;
    }

    .theme-preview-header {
        background: var(--mock-header-bg) !important;
    }
    .theme-preview-header__title {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
    .theme-preview-surface {
        background: var(--mock-bg) !important;
    }

    /* Phone mockup */
    .theme-phone-mockup {
        width: 200px;
        height: 360px;
        background: var(--mock-card-bg);
        border: 5px solid #1e293b;
        border-radius: 22px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    }
    .theme-phone-mockup__status {
        height: 14px;
        background: var(--mock-header-bg);
    }
    .theme-phone-mockup__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 10px;
        background: var(--mock-header-bg);
        color: #fff;
        font-size: 0.62rem;
        font-weight: 700;
    }
    .theme-phone-mockup__body {
        padding: 8px;
        background: var(--mock-bg);
        height: calc(100% - 88px);
        overflow: hidden;
    }
    .theme-phone-mockup__card {
        background: var(--mock-card-bg);
        border: 1px solid var(--mock-border);
        border-radius: 8px;
        padding: 8px;
        margin-bottom: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .theme-phone-mockup__avatar {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--mock-secondary);
        flex-shrink: 0;
    }
    .theme-phone-mockup__line {
        height: 6px;
        background: #f1f5f9;
        border-radius: 3px;
        margin-bottom: 5px;
    }
    .theme-phone-mockup__line--short { width: 55px; margin-bottom: 0; }
    .theme-phone-mockup__line--mid { width: 65%; }
    .theme-phone-mockup__btn {
        display: block;
        width: 100%;
        border: none;
        background: linear-gradient(135deg, var(--mock-primary), var(--mock-gradient-end));
        color: #fff;
        font-size: 0.6rem;
        font-weight: 700;
        padding: 7px;
        border-radius: 8px;
        margin-bottom: 8px;
    }
    .theme-phone-mockup__badge {
        font-size: 0.5rem;
        padding: 2px 6px;
        border-radius: 4px;
        color: #fff;
        font-weight: 600;
    }
    .theme-phone-mockup__badge--secondary { background: var(--mock-secondary); }
    .theme-phone-mockup__badge--success { background: var(--mock-success); }
    .theme-phone-mockup__badge--danger { background: var(--mock-danger); }
    .theme-phone-mockup__text {
        font-size: 0.58rem;
        color: var(--mock-text);
        margin: 0 0 2px;
        font-weight: 600;
    }
    .theme-phone-mockup__text--muted {
        color: var(--mock-text-muted);
        font-weight: 400;
    }
    .theme-phone-mockup__link {
        font-size: 0.55rem;
        color: var(--mock-link);
        text-decoration: underline;
    }
    .theme-phone-mockup__nav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        padding: 8px 0;
        background: var(--mock-card-bg);
        border-top: 1px solid var(--mock-border);
        font-size: 0.85rem;
        color: var(--mock-text-muted);
    }
    .theme-phone-mockup__nav-active { color: var(--mock-primary) !important; }

    /* Desktop mockup */
    .theme-desktop-mockup {
        border: 1px solid var(--mock-border);
        border-radius: 8px;
        overflow: hidden;
        background: var(--mock-card-bg);
    }
    .theme-desktop-mockup__nav {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: var(--mock-card-bg);
        border-bottom: 1px solid var(--mock-border);
        font-size: 0.65rem;
    }
    .theme-desktop-mockup__logo {
        width: 22px;
        height: 22px;
        background: var(--mock-primary);
        color: #fff;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.7rem;
        flex-shrink: 0;
    }
    .theme-desktop-mockup__nav-link {
        color: var(--mock-text-muted);
        font-weight: 600;
    }
    .theme-desktop-mockup__nav-link--active {
        color: var(--mock-primary);
        border-bottom: 2px solid var(--mock-primary);
        padding-bottom: 2px;
    }
    .theme-desktop-mockup__hero {
        height: 36px;
        margin: 8px;
        border-radius: 6px;
        background: linear-gradient(135deg, var(--mock-primary), var(--mock-gradient-end));
    }
    .theme-desktop-mockup__card {
        height: 28px;
        margin: 0 8px;
        border-radius: 5px;
        background: var(--mock-bg);
        border: 1px solid var(--mock-border);
    }
    .theme-desktop-mockup__btn {
        margin: 8px;
        border: none;
        background: var(--mock-accent);
        color: #fff;
        font-size: 0.62rem;
        font-weight: 700;
        padding: 6px;
        border-radius: 6px;
    }
    .theme-desktop-mockup__footer {
        background: var(--mock-footer-bg);
        color: rgba(255,255,255,0.7);
        font-size: 0.6rem;
    }

    /* Color swatches */
    .theme-swatch-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .theme-swatch {
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }
    .theme-swatch__color {
        height: 22px;
    }
    .theme-swatch__label {
        font-size: 0.55rem;
        padding: 2px 4px;
        background: #f8fafc;
        color: #64748b;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (max-width: 991.98px) {
        .theme-live-preview { position: static !important; }
        .theme-phone-mockup { margin: 0 auto; }
    }
</style>
@endpush

@push('scripts')
<script>
const presets = {
    default: {
        primary_color: '#4f46e5', secondary_color: '#ec4899', app_bg_color: '#f8f9fa',
        primary_dark: '#1e1b4b', primary_hover: '#4338ca', accent_color: '#fb641b',
        gradient_end_color: '#7c3aed', text_color: '#1e293b', text_muted: '#64748b',
        link_color: '#4f46e5', card_bg: '#ffffff', border_color: '#e2e8f0',
        header_bg: '#4f46e5', footer_bg: '#0f172a', success_color: '#10b981',
        warning_color: '#f59e0b', danger_color: '#ef4444', info_color: '#3b82f6', theme_color: '#4f46e5'
    },
    emerald: {
        primary_color: '#10b981', secondary_color: '#f59e0b', app_bg_color: '#f0fdf4',
        primary_dark: '#065f46', primary_hover: '#059669', accent_color: '#84cc16',
        gradient_end_color: '#14b8a6', text_color: '#14532d', text_muted: '#6b7280',
        link_color: '#10b981', card_bg: '#ffffff', border_color: '#d1fae5',
        header_bg: '#10b981', footer_bg: '#064e3b', success_color: '#22c55e',
        warning_color: '#eab308', danger_color: '#ef4444', info_color: '#0ea5e9', theme_color: '#10b981'
    },
    royal: {
        primary_color: '#ef4444', secondary_color: '#6366f1', app_bg_color: '#fef2f2',
        primary_dark: '#991b1b', primary_hover: '#dc2626', accent_color: '#f97316',
        gradient_end_color: '#a855f7', text_color: '#1e293b', text_muted: '#64748b',
        link_color: '#ef4444', card_bg: '#ffffff', border_color: '#fecaca',
        header_bg: '#ef4444', footer_bg: '#450a0a', success_color: '#10b981',
        warning_color: '#f59e0b', danger_color: '#b91c1c', info_color: '#3b82f6', theme_color: '#ef4444'
    },
    sky: {
        primary_color: '#0ea5e9', secondary_color: '#8b5cf6', app_bg_color: '#f0f9ff',
        primary_dark: '#0369a1', primary_hover: '#0284c7', accent_color: '#06b6d4',
        gradient_end_color: '#6366f1', text_color: '#0c4a6e', text_muted: '#64748b',
        link_color: '#0ea5e9', card_bg: '#ffffff', border_color: '#bae6fd',
        header_bg: '#0ea5e9', footer_bg: '#0c4a6e', success_color: '#10b981',
        warning_color: '#f59e0b', danger_color: '#ef4444', info_color: '#3b82f6', theme_color: '#0ea5e9'
    },
    dark: {
        primary_color: '#111827', secondary_color: '#6b7280', app_bg_color: '#f3f4f6',
        primary_dark: '#030712', primary_hover: '#374151', accent_color: '#9ca3af',
        gradient_end_color: '#374151', text_color: '#111827', text_muted: '#6b7280',
        link_color: '#111827', card_bg: '#ffffff', border_color: '#e5e7eb',
        header_bg: '#111827', footer_bg: '#030712', success_color: '#10b981',
        warning_color: '#f59e0b', danger_color: '#ef4444', info_color: '#3b82f6', theme_color: '#111827'
    },
    gletra: {
        primary_color: '#50113c', secondary_color: '#cc7700', app_bg_color: '#f8f9fa',
        primary_dark: '#2d0a22', primary_hover: '#6b1a52', accent_color: '#fb641b',
        gradient_end_color: '#7c2d6a', text_color: '#1e293b', text_muted: '#64748b',
        link_color: '#50113c', card_bg: '#ffffff', border_color: '#e2e8f0',
        header_bg: '#50113c', footer_bg: '#0f172a', success_color: '#10b981',
        warning_color: '#f59e0b', danger_color: '#ef4444', info_color: '#3b82f6', theme_color: '#50113c'
    }
};

function normalizeHex(value) {
    let hex = (value || '').trim();
    if (!hex) return null;
    if (!hex.startsWith('#')) hex = '#' + hex;
    if (/^#([A-Fa-f0-9]{6})$/.test(hex)) return hex.toUpperCase();
    if (/^#([A-Fa-f0-9]{3})$/.test(hex)) {
        const c = hex.slice(1);
        return ('#' + c[0] + c[0] + c[1] + c[1] + c[2] + c[2]).toUpperCase();
    }
    return null;
}

function getFieldValue(field) {
    const colorInput = document.querySelector(`.theme-color-input[data-field="${field}"]`);
    return colorInput ? colorInput.value : '';
}

function syncTextToColor(textInput) {
    const field = textInput.dataset.field;
    const colorInput = document.querySelector(`.theme-color-input[data-field="${field}"]`);
    const normalized = normalizeHex(textInput.value);

    if (normalized && colorInput) {
        colorInput.value = normalized;
        textInput.value = normalized;
        textInput.classList.remove('is-invalid');
        textInput.classList.add('is-valid-hex');
        updatePreview();
        return true;
    }

    if (textInput.value.trim() !== '') {
        textInput.classList.add('is-invalid');
        textInput.classList.remove('is-valid-hex');
    } else {
        textInput.classList.remove('is-invalid', 'is-valid-hex');
    }
    return false;
}

function updatePreview() {
    const root = document.documentElement;
    const fields = {
        '--mock-primary': 'primary_color',
        '--mock-secondary': 'secondary_color',
        '--mock-accent': 'accent_color',
        '--mock-bg': 'app_bg_color',
        '--mock-header-bg': 'header_bg',
        '--mock-card-bg': 'card_bg',
        '--mock-border': 'border_color',
        '--mock-text': 'text_color',
        '--mock-text-muted': 'text_muted',
        '--mock-link': 'link_color',
        '--mock-success': 'success_color',
        '--mock-warning': 'warning_color',
        '--mock-danger': 'danger_color',
        '--mock-info': 'info_color',
        '--mock-footer-bg': 'footer_bg',
        '--mock-gradient-end': 'gradient_end_color',
    };

    Object.entries(fields).forEach(([cssVar, field]) => {
        const val = getFieldValue(field);
        if (val) root.style.setProperty(cssVar, val);
    });

    renderSwatches();
}

function renderSwatches() {
    const swatches = [
        { field: 'primary_color', label: 'Primary' },
        { field: 'secondary_color', label: 'Secondary' },
        { field: 'accent_color', label: 'Accent' },
        { field: 'app_bg_color', label: 'Background' },
        { field: 'header_bg', label: 'Header' },
        { field: 'footer_bg', label: 'Footer' },
        { field: 'text_color', label: 'Text' },
        { field: 'success_color', label: 'Success' },
        { field: 'danger_color', label: 'Danger' },
    ];
    const grid = document.getElementById('colorSwatches');
    if (!grid) return;

    grid.innerHTML = swatches.map(s => {
        const color = getFieldValue(s.field) || '#ccc';
        return `<div class="theme-swatch" title="${s.label}: ${color}">
            <div class="theme-swatch__color" style="background:${color}"></div>
            <div class="theme-swatch__label">${s.label}</div>
        </div>`;
    }).join('');
}

document.querySelectorAll('.theme-color-input').forEach(input => {
    input.addEventListener('input', function() {
        const field = this.dataset.field;
        const text = document.querySelector(`.theme-color-text[data-field="${field}"]`);
        if (text) {
            text.value = this.value.toUpperCase();
            text.classList.remove('is-invalid');
            text.classList.add('is-valid-hex');
        }
        updatePreview();
    });
});

document.querySelectorAll('.theme-color-text').forEach(text => {
    text.addEventListener('input', function() {
        this.value = this.value.toUpperCase();
        syncTextToColor(this);
    });

    text.addEventListener('blur', function() {
        syncTextToColor(this);
    });

    text.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            if (syncTextToColor(this)) this.blur();
        }
    });
});

document.getElementById('themeForm').addEventListener('submit', function(e) {
    let hasError = false;

    document.querySelectorAll('.theme-color-text').forEach(text => {
        if (!syncTextToColor(text)) {
            hasError = true;
            text.classList.add('is-invalid');
        }
    });

    if (hasError) {
        e.preventDefault();
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'error',
                title: 'Invalid Color',
                text: 'Please enter valid hex colors (e.g. #4F46E5 or #FFF).',
                confirmButtonColor: '#4f46e5'
            });
        } else {
            alert('Please enter valid hex colors (e.g. #4F46E5 or #FFF).');
        }
    }
});

document.querySelectorAll('.preset-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const preset = presets[this.dataset.preset];
        if (!preset) return;

        Object.entries(preset).forEach(([field, value]) => {
            const colorInput = document.querySelector(`.theme-color-input[data-field="${field}"]`);
            const textInput = document.querySelector(`.theme-color-text[data-field="${field}"]`);
            if (colorInput) colorInput.value = value;
            if (textInput) textInput.value = value.toUpperCase();
        });

        updatePreview();

        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'success',
                title: 'Preset Applied!',
                text: 'Preview updated. Save karo to apply across project.',
                showConfirmButton: false,
                timer: 1500,
                toast: true,
                position: 'top-end'
            });
        }
    });
});

updatePreview();
</script>
@endpush
@endsection