@extends('layouts.app')

@section('title', 'Nameplates – Setting')

@push('styles')
@foreach(($installedFonts ?? []) as $font)
    @if($font->source === 'google')
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ rawurlencode($font->family) }}&display=swap">
    @endif
@endforeach
@endpush

@section('content')
<div class="setting-section-page">
    <p class="setting-back">
        <a href="{{ route('setting.index') }}">← Setting</a>
    </p>
    <header class="setting-header">
        <h1>Nameplates</h1>
        <p class="setting-subtitle">
            Google Fonts API key and the typefaces shown in the studio, plus Generate AI.
            This does not change Product AI Import.
        </p>
    </header>

    @if(session('success'))
        <p class="marketing-settings-hint" style="color:#047857; margin:0 0 1rem;">{{ session('success') }}</p>
    @endif
    @if(session('error'))
        <p class="marketing-settings-hint" style="color:#b91c1c; margin:0 0 1rem;">{{ session('error') }}</p>
    @endif

    <section class="setting-section">
        <form action="{{ route('setting.nameplates.update') }}" method="POST">
            @csrf
            <h2 class="setting-section-title">1. Google Fonts API</h2>
            <p class="setting-section-desc">
                Paste the <strong>Web Fonts Developer API</strong> key from Google Cloud.
                The studio only shows typefaces you add below. Leave blank to keep the current key.
            </p>
            <div class="marketing-settings-grid">
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label" for="google_fonts_api_key">Google Fonts API key</label>
                    @if(!empty($hasFontsKey))
                        <span class="marketing-settings-hint">Current key: <code>{{ $maskedFontsKey }}</code>. Leave blank to keep it.</span>
                    @endif
                    <input type="password" name="google_fonts_api_key" id="google_fonts_api_key" class="marketing-settings-input" autocomplete="new-password" placeholder="Paste Google Fonts API key">
                    @error('google_fonts_api_key')
                        <span class="marketing-settings-hint" style="color:#b91c1c;">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <h2 class="setting-section-title" style="margin-top:1.75rem;">2. Jewelry image AI</h2>
            <p class="setting-section-desc">
                Default Generate option in the studio. You can still switch per render:
                OpenAI only, Google only, or Atelier (Google then OpenAI).
                OpenAI uses <code>OPENAI_API_KEY</code>. Google uses <code>GOOGLE_AI_API_KEY</code>.
            </p>
            @php $providerNow = old('image_provider', $settings->provider()); @endphp
            <div class="marketing-settings-grid">
                <div class="marketing-settings-row marketing-settings-row--full">
                    <span class="marketing-settings-label">Default Generate AI</span>
                    <div class="np-set-ais" role="radiogroup" aria-label="Jewelry image AI">
                        <label class="np-set-ai">
                            <input type="radio" name="image_provider" value="openai" @checked($providerNow === 'openai')>
                            <strong>OpenAI</strong>
                            <span>Only OpenAI · uses prompt 1</span>
                        </label>
                        <label class="np-set-ai">
                            <input type="radio" name="image_provider" value="google" @checked($providerNow === 'google')>
                            <strong>Google</strong>
                            <span>Only Google · uses prompt 1</span>
                        </label>
                        <label class="np-set-ai">
                            <input type="radio" name="image_provider" value="google_openai" @checked($providerNow === 'google_openai')>
                            <strong>Atelier</strong>
                            <span>Google designs, then OpenAI refines</span>
                        </label>
                    </div>
                    @error('image_provider')
                        <span class="marketing-settings-hint" style="color:#b91c1c;">{{ $message }}</span>
                    @enderror
                </div>
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label" for="render_prompt">Nameplate 2-layer — design prompt</label>
                    <textarea name="render_prompt" id="render_prompt" class="marketing-settings-input marketing-settings-textarea" rows="18" required>{{ old('render_prompt', $settings->prompt()) }}</textarea>
                    @error('render_prompt')
                        <span class="marketing-settings-hint" style="color:#b91c1c;">{{ $message }}</span>
                    @enderror
                    <span class="marketing-settings-hint">Only for the Nameplate / Stacked 2-layer template. Halo Generate never uses this. 1-layer uses its own built-in prompt. This is the only prompt Google/OpenAI receive for that 2-layer design pass. Nothing else is appended.</span>
                </div>
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label" for="openai_refine_prompt">Nameplate 2-layer — Atelier refine prompt</label>
                    <textarea name="openai_refine_prompt" id="openai_refine_prompt" class="marketing-settings-input marketing-settings-textarea" rows="18" required>{{ old('openai_refine_prompt', $settings->refinePrompt()) }}</textarea>
                    @error('openai_refine_prompt')
                        <span class="marketing-settings-hint" style="color:#b91c1c;">{{ $message }}</span>
                    @enderror
                    <span class="marketing-settings-hint">2-layer Atelier only. Halo has its own refine prompt below. OpenAI receives Google’s image (not the studio preview) and uses this prompt 100%.</span>
                </div>
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label" for="halo_render_prompt">Halo — design prompt</label>
                    <textarea name="halo_render_prompt" id="halo_render_prompt" class="marketing-settings-input marketing-settings-textarea" rows="18" required>{{ old('halo_render_prompt', $settings->haloPrompt()) }}</textarea>
                    @error('halo_render_prompt')
                        <span class="marketing-settings-hint" style="color:#b91c1c;">{{ $message }}</span>
                    @enderror
                    <span class="marketing-settings-hint">Only when the Halo template is selected in Studio. Does not change 2-layer or 1-layer. CAD supplies the silhouette; this text is the stone setting (emerald/baguette flower on rose fill, round pave on the white border and white letter counters).</span>
                </div>
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label" for="halo_openai_refine_prompt">Halo — Atelier refine prompt</label>
                    <textarea name="halo_openai_refine_prompt" id="halo_openai_refine_prompt" class="marketing-settings-input marketing-settings-textarea" rows="18" required>{{ old('halo_openai_refine_prompt', $settings->haloRefinePrompt()) }}</textarea>
                    @error('halo_openai_refine_prompt')
                        <span class="marketing-settings-hint" style="color:#b91c1c;">{{ $message }}</span>
                    @enderror
                    <span class="marketing-settings-hint">Halo Atelier only. Does not run on Nameplate 2-layer or 1-layer.</span>
                </div>
            </div>
            <div class="marketing-settings-actions" style="margin-top: 1.25rem; display:flex; gap:0.6rem; flex-wrap:wrap;">
                <button type="submit" class="btn btn-primary">Save settings</button>
            </div>
        </form>
        <form action="{{ route('setting.nameplates.restore') }}" method="POST" style="margin-top:0.75rem; display:flex; gap:0.6rem; flex-wrap:wrap;">
            @csrf
            <button type="submit" class="btn" style="background:#fff;border:1px solid #d1d5db;">Restore 2-layer design prompt</button>
        </form>
        <form action="{{ route('setting.nameplates.restore-refine') }}" method="POST" style="margin-top:0.5rem;">
            @csrf
            <button type="submit" class="btn" style="background:#fff;border:1px solid #d1d5db;">Restore 2-layer Atelier refine prompt</button>
        </form>
        <form action="{{ route('setting.nameplates.restore-halo') }}" method="POST" style="margin-top:0.5rem;">
            @csrf
            <button type="submit" class="btn" style="background:#fff;border:1px solid #d1d5db;">Restore Halo design prompt</button>
        </form>
        <form action="{{ route('setting.nameplates.restore-halo-refine') }}" method="POST" style="margin-top:0.5rem;">
            @csrf
            <button type="submit" class="btn" style="background:#fff;border:1px solid #d1d5db;">Restore Halo Atelier refine prompt</button>
        </form>
    </section>

    <section class="setting-section np-font-admin" id="np_font_admin"
        data-search-url="{{ route('setting.nameplates.fonts.search') }}"
        data-add-url="{{ route('setting.nameplates.fonts.add') }}"
        data-set-url="{{ route('setting.nameplates.fonts.jewelry-set') }}"
        data-batch-url="{{ route('setting.nameplates.fonts.nameplate-batch') }}"
        data-upload-url="{{ route('setting.nameplates.fonts.upload') }}"
        data-delete-url="{{ url('/setting/nameplates/fonts') }}"
        data-jewelry='@json(config("nameplates.jewelry_fonts", []))'>
        <h2 class="setting-section-title">3. Typefaces</h2>
        <p class="setting-section-desc">
            These are the letters the Nameplates studio can use. Add from Google Fonts or upload a .ttf / .otf.
            For uploads, pick a Category — we also retag known families automatically.
            Remove any you do not want. The studio never shows the full Google catalog — only this list.
        </p>
        <div class="np-font-admin__toolbar">
            <button type="button" class="btn btn-primary" id="np_font_jewelry" @disabled(empty($hasFontsKey))>Install jewelry set</button>
            <button type="button" class="btn" id="np_font_batch" @disabled(empty($hasFontsKey))>Add 20 nameplate fonts</button>
            <label class="np-font-admin__tag">
                Category
                <select id="np_font_upload_cat" class="marketing-settings-input">
                    <option value="script">Script</option>
                    <option value="serif">Serif</option>
                    <option value="engraved">Engraved</option>
                    <option value="sans">Sans</option>
                    <option value="display">Display</option>
                </select>
            </label>
            <label class="np-font-admin__upload">
                Upload .ttf / .otf
                <input type="file" id="np_font_upload" accept=".ttf,.otf,font/ttf,font/otf">
            </label>
        </div>
        <p class="np-font-admin__status" id="np_font_status" hidden></p>
        <div class="np-font-admin__grid" id="np_font_installed">
            @forelse($installedFonts ?? [] as $font)
                <article class="np-font-tile" data-font-id="{{ $font->id }}" data-family="{{ $font->family }}" @if($font->source !== 'google') data-file-url="{{ route('nameplates.fonts.file', $font) }}" @endif>
                    <p class="np-font-tile__preview" style="font-family:'{{ $font->family }}', cursive;">Love</p>
                    <p class="np-font-tile__name">{{ $font->family }}</p>
                    <p class="np-font-tile__meta">{{ $font->categoryLabel() }}@if($font->designer) · {{ $font->designer }}@endif</p>
                    @if($font->is_default)
                        <span class="np-font-tile__keep">Default</span>
                    @else
                        <button type="button" class="np-font-tile__remove" data-font-remove="{{ $font->id }}">Remove</button>
                    @endif
                </article>
            @empty
                <p class="np-font-admin__empty" id="np_font_empty">No typefaces installed yet. Save the API key, then install the jewelry set or search below.</p>
            @endforelse
        </div>

        <h3 class="np-font-admin__sub">Add from Google Fonts</h3>
        <div class="np-font-admin__search">
            <input type="search" id="np_font_q" class="marketing-settings-input" placeholder="Search Great Vibes, Cinzel, script…" @disabled(empty($hasFontsKey))>
            <button type="button" class="btn" id="np_font_search_btn" @disabled(empty($hasFontsKey))>Search</button>
        </div>
        <div class="np-font-admin__grid" id="np_font_hits"></div>
    </section>

    <section class="setting-section np-font-admin" id="np_icon_admin"
        data-search-url="{{ route('setting.nameplates.icons.search') }}"
        data-add-url="{{ route('setting.nameplates.icons.add') }}"
        data-set-url="{{ route('setting.nameplates.icons.jewelry-set') }}"
        data-upload-url="{{ route('setting.nameplates.icons.upload') }}"
        data-delete-url="{{ url('/setting/nameplates/icons') }}">
        <h2 class="setting-section-title">4. Jewelry charms</h2>
        <p class="setting-section-desc">
            Silhouette icons the Nameplates studio can weld next to a name. Install the jewelry set, add more from the catalog, or upload an SVG with one closed path.
            The studio only shows charms on this list — not the full catalog.
        </p>
        <div class="np-font-admin__toolbar">
            <button type="button" class="btn btn-primary" id="np_icon_jewelry">Install jewelry set</button>
            <label class="np-font-admin__tag">
                Category
                <select id="np_icon_upload_cat" class="marketing-settings-input">
                    @foreach($iconCategories ?? [] as $key => $label)
                        <option value="{{ $key }}" @selected($key === 'symbols')>{{ $label }}</option>
                    @endforeach
                </select>
            </label>
            <label class="np-font-admin__upload">
                Upload .svg
                <input type="file" id="np_icon_upload" accept=".svg,image/svg+xml">
            </label>
        </div>
        <p class="np-font-admin__status" id="np_icon_status" hidden></p>
        <div class="np-font-admin__grid np-icon-admin__grid" id="np_icon_installed">
            @forelse($installedIcons ?? [] as $icon)
                <article class="np-font-tile np-icon-tile" data-icon-id="{{ $icon->id }}">
                    <p class="np-font-tile__preview np-icon-tile__preview">
                        <svg viewBox="{{ $icon->view_box ?: '0 0 24 24' }}" width="36" height="36" aria-hidden="true"><path d="{{ $icon->path_d }}" fill="#1c1917" fill-rule="evenodd"></path></svg>
                    </p>
                    <p class="np-font-tile__name">{{ $icon->name }}</p>
                    <p class="np-font-tile__meta">{{ $icon->categoryLabel() }}</p>
                    @if($icon->is_default)
                        <span class="np-font-tile__keep">Default</span>
                    @else
                        <button type="button" class="np-font-tile__remove" data-icon-remove="{{ $icon->id }}">Remove</button>
                    @endif
                </article>
            @empty
                <p class="np-font-admin__empty" id="np_icon_empty">No charms installed yet. Install the jewelry set or add from the catalog below.</p>
            @endforelse
        </div>

        <h3 class="np-font-admin__sub">Add from the jewelry catalog</h3>
        <div class="np-font-admin__search">
            <input type="search" id="np_icon_q" class="marketing-settings-input" placeholder="Search heart, crown, butterfly…">
            <select id="np_icon_cat" class="marketing-settings-input" style="max-width:10rem;">
                <option value="all">All categories</option>
                @foreach($iconCategories ?? [] as $key => $label)
                    <option value="{{ $key }}">{{ $label }}</option>
                @endforeach
            </select>
            <button type="button" class="btn" id="np_icon_search_btn">Show catalog</button>
        </div>
        <div class="np-font-admin__grid np-icon-admin__grid" id="np_icon_hits"></div>
    </section>
</div>

@include('setting.partials.section-styles')
<style>
.np-set-ais { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.75rem; max-width:48rem; }
.np-set-ai { display:flex; flex-direction:column; gap:0.2rem; padding:0.85rem 1rem; border:1px solid #d6d3d1; border-radius:12px; background:#fff; cursor:pointer; }
.np-set-ai:has(input:checked) { border-color:#171717; box-shadow:0 0 0 1px #171717; }
.np-set-ai input { margin:0 0 0.35rem; }
.np-set-ai strong { font-size:0.95rem; }
.np-set-ai span { color:#78716c; font-size:0.8rem; }
@media (max-width: 900px) { .np-set-ais { grid-template-columns:1fr; } }
.np-font-admin { margin-top: 1.5rem; }
.np-font-admin__toolbar { display:flex; gap:0.75rem; flex-wrap:wrap; align-items:flex-end; margin:0 0 1rem; }
.np-font-admin__tag { display:flex; flex-direction:column; gap:0.25rem; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#78716c; }
.np-font-admin__tag select { min-width:8.5rem; text-transform:none; letter-spacing:0; font-weight:600; font-size:0.85rem; }
.np-font-admin__upload {
    display:inline-flex; align-items:center; padding:0.55rem 0.9rem; border:1px solid #d1d5db; border-radius:8px;
    background:#fff; font-weight:600; font-size:0.85rem; cursor:pointer;
}
.np-font-admin__upload input { display:none; }
.np-font-admin__status { margin:0 0 0.85rem; font-size:0.88rem; color:#44403c; }
.np-font-admin__status.is-err { color:#b91c1c; }
.np-font-admin__empty { color:#78716c; }
.np-font-admin__sub { margin:1.5rem 0 0.65rem; font-size:1rem; }
.np-font-admin__search { display:flex; gap:0.55rem; flex-wrap:wrap; margin-bottom:1rem; }
.np-font-admin__search input { flex:1 1 16rem; }
.np-font-admin__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(11.5rem, 1fr)); gap:0.85rem; }
.np-font-tile {
    background:#fff; border:1px solid #e7e5e4; border-radius:14px; padding:0.85rem 0.9rem 0.8rem;
    box-shadow:0 1px 0 rgba(28,25,23,0.03);
}
.np-font-tile__preview {
    margin:0 0 0.55rem; min-height:3.2rem; font-size:1.85rem; line-height:1.15; color:#1c1917;
    background:linear-gradient(180deg, #faf7f2, #f3eee6); border-radius:10px; padding:0.7rem 0.75rem;
}
.np-font-tile__name { margin:0; font-weight:700; font-size:0.9rem; }
.np-font-tile__meta { margin:0.15rem 0 0.55rem; color:#78716c; font-size:0.75rem; }
.np-font-tile__remove, .np-font-tile__add {
    border:1px solid #d6d3d1; background:#fff; border-radius:8px; padding:0.35rem 0.6rem;
    font-size:0.75rem; font-weight:700; cursor:pointer;
}
.np-font-tile__remove { color:#b91c1c; }
.np-font-tile__keep { font-size:0.72rem; font-weight:700; color:#78716c; letter-spacing:0.06em; text-transform:uppercase; }
.np-font-tile.is-on { border-color:#171717; }
.np-icon-tile__preview { display:flex; align-items:center; justify-content:center; min-height:4.2rem; }
.np-icon-tile__preview svg { display:block; }
@media (max-width: 700px) {
    .np-font-admin__grid { grid-template-columns:1fr 1fr; }
    .np-font-tile__preview { font-size:1.45rem; min-height:2.7rem; }
}
</style>
@push('scripts')
<script>
(function () {
    var root = document.getElementById('np_font_admin');
    if (!root) return;
    var csrf = document.querySelector('meta[name="csrf-token"]');
    csrf = csrf ? csrf.getAttribute('content') : '';
    var statusEl = document.getElementById('np_font_status');
    function note(msg, err) {
        if (!statusEl) return;
        statusEl.hidden = !msg;
        statusEl.textContent = msg || '';
        statusEl.classList.toggle('is-err', !!err);
    }
    function post(url, body, isForm) {
        var headers = { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' };
        var opt = { method: 'POST', headers: headers, credentials: 'same-origin' };
        if (isForm) {
            opt.body = body;
        } else {
            headers['Content-Type'] = 'application/json';
            opt.body = JSON.stringify(body || {});
        }
        return fetch(url, opt).then(function (res) {
            return res.json().then(function (data) {
                if (!res.ok || data.ok === false) {
                    throw new Error(data.error || 'Request failed.');
                }
                return data;
            });
        });
    }
    var loadedFaces = {};
    function ensureFace(font) {
        var url = font && font.file_url;
        var family = font && font.family;
        if (!url || !family || loadedFaces[url]) return;
        loadedFaces[url] = true;
        var style = document.createElement('style');
        style.textContent = '@font-face{font-family:"' + family.replace(/"/g, '') + '";src:url("' + url + '");}';
        document.head.appendChild(style);
    }
    function watchTile(art) {
        var url = art.getAttribute('data-file-url');
        var family = art.getAttribute('data-family');
        if (!url || !family) return;
        var run = function () { ensureFace({ file_url: url, family: family }); };
        if (!('IntersectionObserver' in window)) {
            run();
            return;
        }
        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    run();
                    io.disconnect();
                }
            });
        }, { rootMargin: '80px' });
        io.observe(art);
    }
    function tile(font, mode) {
        var art = document.createElement('article');
        art.className = 'np-font-tile';
        art.setAttribute('data-font-id', font.id || font.family);
        if (font.family) art.setAttribute('data-family', font.family);
        if (font.file_url) art.setAttribute('data-file-url', font.file_url);
        var prev = document.createElement('p');
        prev.className = 'np-font-tile__preview';
        prev.style.fontFamily = "'" + font.family + "', cursive";
        prev.textContent = 'Love';
        var name = document.createElement('p');
        name.className = 'np-font-tile__name';
        name.textContent = font.family;
        var meta = document.createElement('p');
        meta.className = 'np-font-tile__meta';
        meta.textContent = (font.category || '') + (font.designer ? ' · ' + font.designer : '');
        art.appendChild(prev);
        art.appendChild(name);
        art.appendChild(meta);
        if (mode === 'hit') {
            if (font.installed) {
                var keep = document.createElement('span');
                keep.className = 'np-font-tile__keep';
                keep.textContent = 'Installed';
                art.appendChild(keep);
            } else {
                var add = document.createElement('button');
                add.type = 'button';
                add.className = 'np-font-tile__add';
                add.textContent = 'Add';
                add.addEventListener('click', function () {
                    add.disabled = true;
                    note('Adding ' + font.family + '…');
                    post(root.getAttribute('data-add-url'), { family: font.family, category: font.category })
                        .then(function () { window.location.reload(); })
                        .catch(function (e) { add.disabled = false; note(e.message, true); });
                });
                art.appendChild(add);
            }
            if (font.preview_css) {
                var link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = font.preview_css;
                document.head.appendChild(link);
            }
        } else if (!font.is_default) {
            var rm = document.createElement('button');
            rm.type = 'button';
            rm.className = 'np-font-tile__remove';
            rm.textContent = 'Remove';
            rm.addEventListener('click', function () {
                if (!window.confirm('Remove ' + font.family + ' from the studio?')) return;
                post(root.getAttribute('data-delete-url') + '/' + font.id + '/delete', {})
                    .then(function () { art.remove(); })
                    .catch(function (e) { note(e.message, true); });
            });
            art.appendChild(rm);
        }
        if (font.file_url) {
            watchTile(art);
        }
        return art;
    }
    document.querySelectorAll('#np_font_installed .np-font-tile').forEach(watchTile);
    document.querySelectorAll('[data-font-remove]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var id = btn.getAttribute('data-font-remove');
            if (!window.confirm('Remove this typeface from the studio?')) return;
            post(root.getAttribute('data-delete-url') + '/' + id + '/delete', {})
                .then(function () {
                    var tileEl = btn.closest('.np-font-tile');
                    if (tileEl) tileEl.remove();
                })
                .catch(function (e) { note(e.message, true); });
        });
    });
    var setBtn = document.getElementById('np_font_jewelry');
    if (setBtn) {
        setBtn.addEventListener('click', function () {
            setBtn.disabled = true;
            note('Installing the jewelry typeface set. This can take a minute…');
            post(root.getAttribute('data-set-url'), {})
                .then(function (data) {
                    var fail = (data.failed || []).length;
                    note((data.installed || []).length + ' typefaces installed' + (fail ? ', ' + fail + ' skipped' : '') + '.');
                    window.location.reload();
                })
                .catch(function (e) { setBtn.disabled = false; note(e.message, true); });
        });
    }
    var batchBtn = document.getElementById('np_font_batch');
    if (batchBtn) {
        batchBtn.addEventListener('click', function () {
            batchBtn.disabled = true;
            note('Finding 20 nameplate typefaces that are not already installed. This can take a minute…');
            post(root.getAttribute('data-batch-url'), {})
                .then(function (data) {
                    var n = (data.installed || []).length;
                    var fail = (data.failed || []).length;
                    var left = data.remaining != null ? data.remaining : 0;
                    if (!n && !fail) {
                        note('No new nameplate typefaces left to add.');
                        batchBtn.disabled = false;
                        return;
                    }
                    note(n + ' typefaces installed' + (fail ? ', ' + fail + ' skipped' : '') + (left ? '. ' + left + ' more available.' : '.'));
                    window.location.reload();
                })
                .catch(function (e) { batchBtn.disabled = false; note(e.message, true); });
        });
    }
    var searchBtn = document.getElementById('np_font_search_btn');
    var qEl = document.getElementById('np_font_q');
    var hits = document.getElementById('np_font_hits');
    function runSearch() {
        if (!hits) return;
        hits.innerHTML = '';
        note('Searching Google Fonts…');
        post(root.getAttribute('data-search-url'), { q: qEl ? qEl.value : '' })
            .then(function (data) {
                note('');
                (data.fonts || []).forEach(function (font) { hits.appendChild(tile(font, 'hit')); });
                if (!(data.fonts || []).length) note('No typefaces matched.');
            })
            .catch(function (e) { note(e.message, true); });
    }
    if (searchBtn) searchBtn.addEventListener('click', runSearch);
    if (qEl) qEl.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); runSearch(); } });
    var jewelry = [];
    try { jewelry = JSON.parse(root.getAttribute('data-jewelry') || '[]'); } catch (e) { jewelry = []; }
    function normFamily(name) {
        return String(name || '').toLowerCase().replace(/[^a-z0-9]/g, '');
    }
    function guessFromFile(name) {
        var base = String(name || '').replace(/\.[^.]+$/, '').replace(/[-_]+/g, ' ');
        base = base.replace(/\b(regular|bold|italic|light|medium|semibold|semi\s*bold|extrabold|extra\s*bold|black|thin|variable(\s*font)?|condensed|extended|oblique|roman|book|heavy|ultra|demi)\b/ig, ' ');
        var key = normFamily(base);
        for (var i = 0; i < jewelry.length; i++) {
            if (normFamily(jewelry[i].family) === key) return jewelry[i];
        }
        return null;
    }
    var up = document.getElementById('np_font_upload');
    var catEl = document.getElementById('np_font_upload_cat');
    if (up) {
        up.addEventListener('change', function () {
            var file = up.files && up.files[0];
            if (!file) return;
            var known = guessFromFile(file.name);
            if (known && catEl && known.category) catEl.value = known.category;
            var fd = new FormData();
            fd.append('font', file);
            if (catEl && catEl.value) fd.append('category', catEl.value);
            note('Uploading ' + file.name + '…');
            post(root.getAttribute('data-upload-url'), fd, true)
                .then(function (data) {
                    var font = data.font || {};
                    note((font.family || file.name) + ' uploaded.');
                    var empty = document.getElementById('np_font_empty');
                    if (empty) empty.remove();
                    var grid = document.getElementById('np_font_installed');
                    if (grid && font.family) {
                        grid.appendChild(tile(font, 'installed'));
                    }
                })
                .catch(function (e) { note(e.message, true); });
            up.value = '';
        });
    }
})();
(function () {
    var root = document.getElementById('np_icon_admin');
    if (!root) return;
    var csrf = document.querySelector('meta[name="csrf-token"]');
    csrf = csrf ? csrf.getAttribute('content') : '';
    var statusEl = document.getElementById('np_icon_status');
    function note(msg, err) {
        if (!statusEl) return;
        statusEl.hidden = !msg;
        statusEl.textContent = msg || '';
        statusEl.classList.toggle('is-err', !!err);
    }
    function post(url, body, isForm) {
        var headers = { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' };
        var opt = { method: 'POST', headers: headers, credentials: 'same-origin' };
        if (isForm) {
            opt.body = body;
        } else {
            headers['Content-Type'] = 'application/json';
            opt.body = JSON.stringify(body || {});
        }
        return fetch(url, opt).then(function (res) {
            return res.json().then(function (data) {
                if (!res.ok || data.ok === false) {
                    throw new Error(data.error || 'Request failed.');
                }
                return data;
            });
        });
    }
    function iconSvg(icon, size) {
        var ns = 'http://www.w3.org/2000/svg';
        var s = document.createElementNS(ns, 'svg');
        s.setAttribute('viewBox', icon.viewBox || '0 0 24 24');
        s.setAttribute('width', String(size || 36));
        s.setAttribute('height', String(size || 36));
        s.setAttribute('aria-hidden', 'true');
        var p = document.createElementNS(ns, 'path');
        p.setAttribute('d', icon.d || '');
        p.setAttribute('fill', '#1c1917');
        p.setAttribute('fill-rule', 'evenodd');
        s.appendChild(p);
        return s;
    }
    function tile(icon, mode) {
        var art = document.createElement('article');
        art.className = 'np-font-tile np-icon-tile';
        if (icon.db_id) art.setAttribute('data-icon-id', icon.db_id);
        var prev = document.createElement('p');
        prev.className = 'np-font-tile__preview np-icon-tile__preview';
        prev.appendChild(iconSvg(icon, 36));
        var name = document.createElement('p');
        name.className = 'np-font-tile__name';
        name.textContent = icon.name || icon.id;
        var meta = document.createElement('p');
        meta.className = 'np-font-tile__meta';
        meta.textContent = icon.cat || icon.category || '';
        art.appendChild(prev);
        art.appendChild(name);
        art.appendChild(meta);
        if (mode === 'hit') {
            if (icon.installed) {
                var keep = document.createElement('span');
                keep.className = 'np-font-tile__keep';
                keep.textContent = 'Installed';
                art.appendChild(keep);
            } else {
                var add = document.createElement('button');
                add.type = 'button';
                add.className = 'np-font-tile__add';
                add.textContent = 'Add';
                add.addEventListener('click', function () {
                    add.disabled = true;
                    note('Adding ' + (icon.name || icon.id) + '…');
                    post(root.getAttribute('data-add-url'), { slug: icon.id })
                        .then(function () { window.location.reload(); })
                        .catch(function (e) { add.disabled = false; note(e.message, true); });
                });
                art.appendChild(add);
            }
        } else if (!icon.is_default) {
            var rm = document.createElement('button');
            rm.type = 'button';
            rm.className = 'np-font-tile__remove';
            rm.textContent = 'Remove';
            rm.addEventListener('click', function () {
                if (!window.confirm('Remove ' + (icon.name || 'this charm') + ' from the studio?')) return;
                post(root.getAttribute('data-delete-url') + '/' + icon.db_id + '/delete', {})
                    .then(function () { art.remove(); })
                    .catch(function (e) { note(e.message, true); });
            });
            art.appendChild(rm);
        }
        return art;
    }
    document.querySelectorAll('[data-icon-remove]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var id = btn.getAttribute('data-icon-remove');
            if (!window.confirm('Remove this charm from the studio?')) return;
            post(root.getAttribute('data-delete-url') + '/' + id + '/delete', {})
                .then(function () {
                    var tileEl = btn.closest('.np-icon-tile');
                    if (tileEl) tileEl.remove();
                })
                .catch(function (e) { note(e.message, true); });
        });
    });
    var setBtn = document.getElementById('np_icon_jewelry');
    if (setBtn) {
        setBtn.addEventListener('click', function () {
            setBtn.disabled = true;
            note('Installing the jewelry charm set…');
            post(root.getAttribute('data-set-url'), {})
                .then(function (data) {
                    var fail = (data.failed || []).length;
                    note((data.installed || []).length + ' charms installed' + (fail ? ', ' + fail + ' skipped' : '') + '.');
                    window.location.reload();
                })
                .catch(function (e) { setBtn.disabled = false; note(e.message, true); });
        });
    }
    var searchBtn = document.getElementById('np_icon_search_btn');
    var qEl = document.getElementById('np_icon_q');
    var catEl = document.getElementById('np_icon_cat');
    var hits = document.getElementById('np_icon_hits');
    function runSearch() {
        if (!hits) return;
        hits.innerHTML = '';
        note('Loading catalog…');
        post(root.getAttribute('data-search-url'), {
            q: qEl ? qEl.value : '',
            category: catEl ? catEl.value : 'all'
        })
            .then(function (data) {
                note('');
                (data.icons || []).forEach(function (icon) { hits.appendChild(tile(icon, 'hit')); });
                if (!(data.icons || []).length) note('No charms matched.');
            })
            .catch(function (e) { note(e.message, true); });
    }
    if (searchBtn) searchBtn.addEventListener('click', runSearch);
    if (qEl) qEl.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); runSearch(); } });
    if (catEl) catEl.addEventListener('change', runSearch);
    var up = document.getElementById('np_icon_upload');
    var upCat = document.getElementById('np_icon_upload_cat');
    if (up) {
        up.addEventListener('change', function () {
            var file = up.files && up.files[0];
            if (!file) return;
            var fd = new FormData();
            fd.append('icon', file);
            if (upCat && upCat.value) fd.append('category', upCat.value);
            note('Uploading ' + file.name + '…');
            post(root.getAttribute('data-upload-url'), fd, true)
                .then(function () { window.location.reload(); })
                .catch(function (e) { note(e.message, true); });
            up.value = '';
        });
    }
    runSearch();
})();
</script>
@endpush

    @php $wiz = $wizardSettings ?? \App\Models\NameplateWizardSetting::get(); @endphp
    <section class="setting-section" style="margin-top:2.5rem;">
        <form action="{{ route('setting.nameplates.wizard.update') }}" method="POST">
            @csrf
            <h2 class="setting-section-title">Quick Wizard (Phase 2)</h2>
            <p class="setting-section-desc">
                Private SMS/email design invitations, the fixed public link
                <code>tools.avijewels.info/nameplate-wizard</code>, three commercial sizes, and the same installed Nameplates fonts used by New Design / Studio.
                Does not change New Design, Studio, AI prompts, icons, or exports.
            </p>
            <div class="marketing-settings-grid">
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label">
                        <input type="checkbox" name="public_wizard_enabled" value="1" @checked(old('public_wizard_enabled', $wiz->public_wizard_enabled))>
                        Public wizard link enabled
                    </label>
                </div>
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label">
                        <input type="checkbox" name="look_limit_enabled" value="1" @checked(old('look_limit_enabled', $wiz->lookLimitEnabled()))>
                        Limit AI previews on the client wizard
                    </label>
                    <span class="marketing-settings-hint">Leave unchecked to allow unlimited generates. If checked, the number below is the maximum per client link/session.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="look_limit">AI preview limit</label>
                    <input type="number" min="1" max="20" name="look_limit" id="look_limit" class="marketing-settings-input" value="{{ old('look_limit', $wiz->lookLimit()) }}">
                </div>
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label">Public link (fixed)</label>
                    <input type="text" class="marketing-settings-input" value="tools.avijewels.info/nameplate-wizard" readonly disabled>
                    <span class="marketing-settings-hint">Not editable in Phase 1. Always <code>https://tools.avijewels.info/nameplate-wizard</code>.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="private_link_expiry_hours">Private link expiry (hours)</label>
                    <input type="number" min="1" max="720" name="private_link_expiry_hours" id="private_link_expiry_hours" class="marketing-settings-input" value="{{ old('private_link_expiry_hours', $wiz->private_link_expiry_hours ?: 72) }}" required>
                </div>
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label" for="sms_template">SMS template</label>
                    <textarea name="sms_template" id="sms_template" class="marketing-settings-input marketing-settings-textarea" rows="5" required>{{ old('sms_template', $wiz->smsTemplate()) }}</textarea>
                    <span class="marketing-settings-hint">Placeholders: <code>{link}</code> <code>{expires}</code>. Keep <code>{link}</code> on its own last line. The studio sends the text first, then the link as its own message so iPhone can show a preview card.</span>
                </div>
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label" for="email_subject">Email subject</label>
                    <input type="text" name="email_subject" id="email_subject" class="marketing-settings-input" value="{{ old('email_subject', $wiz->emailSubject()) }}" required>
                </div>
                <div class="marketing-settings-row marketing-settings-row--full">
                    <label class="marketing-settings-label" for="email_body_html">Email body (HTML)</label>
                    <textarea name="email_body_html" id="email_body_html" class="marketing-settings-input marketing-settings-textarea" rows="10" required>{{ old('email_body_html', $wiz->emailBodyHtml()) }}</textarea>
                </div>
            <div class="marketing-settings-row marketing-settings-row--full">
                <label class="marketing-settings-label" for="share_message_template">WhatsApp / Instagram DM copy template</label>
                <textarea name="share_message_template" id="share_message_template" class="marketing-settings-input marketing-settings-textarea" rows="5" required>{{ old('share_message_template', $wiz->shareMessageTemplate()) }}</textarea>
                <span class="marketing-settings-hint">Same as SMS: keep <code>{link}</code> on its own last line so WhatsApp / iMessage unfurl a branded preview card.</span>
            </div>

            <div class="marketing-settings-row marketing-settings-row--full">
                <h3 class="setting-section-title" style="font-size:1.05rem;margin:1rem 0 .35rem;">Wizard sizes (exactly 3)</h3>
                <p class="marketing-settings-hint">Defaults appear immediately after deploy (Petite $450, Classic $650, Statement $950). Editable anytime — customers choose exactly one.</p>
            </div>
            @php
                $sizes = old('wizard_sizes', $wiz->normalizedSizes());
            @endphp
            @foreach($sizes as $i => $size)
                <div class="marketing-settings-row marketing-settings-row--full" style="border:1px solid #e7e5e4;border-radius:8px;padding:0.85rem;margin-bottom:0.5rem;">
                    <p style="margin:0 0 0.5rem;font-weight:600;">Size {{ $i + 1 }}</p>
                    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:0.6rem;">
                        <label class="marketing-settings-label">Key
                            <input type="text" name="wizard_sizes[{{ $i }}][key]" class="marketing-settings-input" value="{{ $size['key'] ?? '' }}" required pattern="[a-z0-9\-]+">
                        </label>
                        <label class="marketing-settings-label">Label
                            <input type="text" name="wizard_sizes[{{ $i }}][label]" class="marketing-settings-input" value="{{ $size['label'] ?? '' }}" required>
                        </label>
                        <label class="marketing-settings-label">Width
                            <input type="number" step="0.001" min="0.01" name="wizard_sizes[{{ $i }}][width]" class="marketing-settings-input" value="{{ $size['width'] ?? '' }}" required>
                        </label>
                        <label class="marketing-settings-label">Height
                            <input type="number" step="0.001" min="0.01" name="wizard_sizes[{{ $i }}][height]" class="marketing-settings-input" value="{{ $size['height'] ?? '' }}" required>
                        </label>
                        <label class="marketing-settings-label">Unit
                            <select name="wizard_sizes[{{ $i }}][unit]" class="marketing-settings-input" required>
                                <option value="in" @selected(($size['unit'] ?? 'in') === 'in')>in</option>
                                <option value="mm" @selected(($size['unit'] ?? '') === 'mm')>mm</option>
                            </select>
                        </label>
                        <label class="marketing-settings-label">Price (USD)
                            <input type="number" step="0.01" min="0" name="wizard_sizes[{{ $i }}][price]" class="marketing-settings-input" value="{{ $size['price'] ?? '' }}" required>
                        </label>
                    </div>
                </div>
            @endforeach

            <div class="marketing-settings-row marketing-settings-row--full">
                <h3 class="setting-section-title" style="font-size:1.05rem;margin:1rem 0 .35rem;">Wizard fonts</h3>
                <p class="marketing-settings-hint">Uses the same installed Studio typefaces (family and category). All installed fonts are included by default — uncheck only to hide from the customer Wizard. Does not duplicate or change Studio files.</p>
                <div style="display:grid;gap:0.35rem;margin-top:0.5rem;">
                    @forelse(($installedFonts ?? []) as $font)
                        @php
                            $metaBits = array_filter([$font->categoryLabel()]);
                        @endphp
                        <label class="marketing-settings-label" style="display:flex;gap:0.5rem;align-items:center;font-weight:500;">
                            <input type="checkbox" name="wizard_font_ids[]" value="{{ $font->id }}" @checked(old('wizard_font_ids') === null ? (bool) ($font->wizard_enabled ?? true) : in_array($font->id, old('wizard_font_ids', []), false))>
                            <span>{{ $font->family }} <span style="color:#78716c;font-weight:400;">({{ implode(' · ', $metaBits) }})</span></span>
                        </label>
                    @empty
                        <p class="marketing-settings-hint">Install typefaces in the Typefaces section above — they appear in the Wizard automatically.</p>
                    @endforelse
                </div>
            </div>
            </div>
            <div style="margin-top:1rem;">
                <button type="submit" class="btn">Save Quick Wizard settings</button>
            </div>
        </form>
    </section>
@endsection