/**
 * Publieke AI Icon Generator – itlive.nl/ai-icon-generator
 * Vernieuwde view + advanced: provider-keuze, verbeter met feedback, varianten, PDF-link.
 */
if (!ob_get_level()) ob_start();
header('Cache-Control: no-cache, no-store, must-revalidate');
$base = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . '://' . ($_SERVER['HTTP_HOST'] ?? 'itlive.nl');
?>    <meta name="description" content="Genereer professionele iconen en pictogrammen met AI. Kies stijl en kleur, download als PNG of open als PDF-pagina.">    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', system-ui, sans-serif; background: linear-gradient(180deg, #1e1b4b 0%, #312e81 40%, #4c1d95 100%); min-height: 100vh; color: #e2e8f0; }
        .topbar { background: rgba(30, 27, 75, 0.95); color: #fff; padding: 12px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid rgba(167,139,250,0.2); }
        .topbar a { color: #c4b5fd; text-decoration: none; font-weight: 500; }
        .topbar a:hover { color: #fff; }
        .container { max-width: 640px; margin: 0 auto; padding: 1.5rem 20px; }
        .hero { background: rgba(55, 48, 163, 0.35); border: 1px solid rgba(167,139,250,0.3); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem; }
        .hero h1 { font-size: 1.6rem; margin-bottom: 0.5rem; }
        .hero p { color: #c4b5fd; font-size: 1rem; line-height: 1.55; }
        .card { background: rgba(30, 27, 75, 0.6); border: 1px solid rgba(167,139,250,0.25); border-radius: 14px; padding: 1.25rem; margin-bottom: 1rem; }
        .card label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.95rem; }
        .card input[type="text"], .card select { width: 100%; padding: 10px 12px; border: 2px solid rgba(167,139,250,0.3); border-radius: 10px; background: rgba(30,27,75,0.9); color: #fff; font-size: 1rem; }
        .card input:focus, .card select:focus { outline: none; border-color: #a78bfa; }
        .style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
        .style-opt { padding: 12px; border: 2px solid rgba(167,139,250,0.3); border-radius: 10px; cursor: pointer; text-align: center; font-size: 0.9rem; background: rgba(30,27,75,0.8); color: #e2e8f0; transition: all 0.2s; }
        .style-opt:hover { border-color: #a78bfa; background: rgba(167,139,250,0.15); }
        .style-opt.selected { border-color: #a78bfa; background: rgba(167,139,250,0.3); color: #fff; }
        .row { margin-bottom: 1rem; }
        .row:last-of-type { margin-bottom: 0; }
        .btn-primary { padding: 12px 24px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 1rem; }
        .btn-primary:hover { opacity: 0.95; }
        .btn-primary:disabled { opacity: 0.6; cursor: wait; }
        .btn-secondary { padding: 8px 14px; background: rgba(167,139,250,0.25); color: #e2e8f0; border: 1px solid rgba(167,139,250,0.4); border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
        .btn-secondary:hover { background: rgba(167,139,250,0.4); color: #fff; }
        .result-card { margin-top: 1rem; padding: 1rem; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(167,139,250,0.3); border-radius: 14px; }
        .result-card img { max-width: 100%; max-height: 280px; border-radius: 10px; display: block; margin: 12px 0; background: #1e1b4b; }
        .result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
        .result-actions a, .result-actions button { padding: 8px 14px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; }
        .result-actions .btn-dl { background: #0d9488; color: #fff; }
        .result-actions .btn-dl:hover { background: #0f766e; }
        .result-actions .btn-pdf { background: #475569; color: #fff; }
        .result-actions .btn-pdf:hover { background: #64748b; }
        .refine-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(167,139,250,0.2); display: none; }
        .refine-wrap.visible { display: block; }
        .refine-wrap input { width: 100%; max-width: 320px; padding: 8px 12px; border: 2px solid rgba(167,139,250,0.3); border-radius: 8px; background: rgba(30,27,75,0.9); color: #fff; margin-bottom: 8px; }
        .error-box { background: rgba(220, 38, 38, 0.2); border: 1px solid rgba(220, 38, 38, 0.5); color: #fecaca; padding: 12px; border-radius: 10px; margin-top: 1rem; }
        .advanced { font-size: 0.85rem; color: #94a3b8; margin-top: 8px; }
        .links-row { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(167,139,250,0.2); display: flex; flex-wrap: wrap; gap: 12px; }
        .links-row a { color: #c4b5fd; text-decoration: none; font-weight: 500; }
        .links-row a:hover { text-decoration: underline; }
        .color-blocks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
        .color-block { width: 36px; height: 36px; border-radius: 10px; border: 2px solid rgba(167,139,250,0.4); cursor: pointer; padding: 0; transition: transform 0.15s, box-shadow 0.15s; }
        .color-block:hover { transform: scale(1.1); box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
        .color-block.selected { border-color: #fff; box-shadow: 0 0 0 3px #a78bfa; }
        .color-block[data-hex=""] { background: linear-gradient(135deg, #64748b 50%, #94a3b8 50%); }
        .advanced-details { margin-bottom: 1rem; }
        .advanced-summary { cursor: pointer; font-size: 0.9rem; color: #94a3b8; padding: 0.5rem 0; }
        .advanced-summary:hover { color: #c4b5fd; }
        .advanced-body { padding-top: 0.5rem; padding-left: 0.5rem; border-left: 2px solid rgba(167,139,250,0.3); margin-top: 0.5rem; }
        .chat-hulp-wrap { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; }
        .chat-hulp-toggle { padding: 0.75rem 1.25rem; border-radius: 14px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: #fff; border: none; font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px rgba(139,92,246,0.4); }
        .chat-hulp-toggle:hover { opacity: 0.95; }
        .chat-hulp-panel { display: none; position: absolute; bottom: 100%; right: 0; margin-bottom: 8px; width: 320px; max-width: calc(100vw - 2rem); background: rgba(30,27,75,0.98); border: 1px solid rgba(167,139,250,0.4); border-radius: 16px; padding: 1rem; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
        .chat-hulp-panel.open { display: block; }
        .chat-hulp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
        .chat-hulp-header strong { font-size: 0.95rem; }
        .chat-hulp-close { background: none; border: none; color: #94a3b8; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 4px; }
        .chat-hulp-close:hover { color: #fff; }
        .chat-hulp-intro { font-size: 0.85rem; color: #c4b5fd; margin-bottom: 0.75rem; line-height: 1.45; }
        .chat-hulp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.75rem; }
        .chat-chip { padding: 0.5rem 0.75rem; border-radius: 10px; border: 1px solid rgba(167,139,250,0.4); background: rgba(167,139,250,0.15); color: #e2e8f0; font-size: 0.8rem; cursor: pointer; }
        .chat-chip:hover { background: rgba(167,139,250,0.3); color: #fff; }
        .chat-hulp-link { display: block; padding: 0.65rem 1rem; border-radius: 10px; background: rgba(13,148,136,0.25); color: #5eead4; text-decoration: none; font-size: 0.9rem; font-weight: 600; text-align: center; }
        .chat-hulp-link:hover { background: rgba(13,148,136,0.4); color: #fff; }
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
        @media (max-width: 560px) { .style-grid { grid-template-columns: 1fr; } .chat-hulp-wrap { bottom: 1rem; right: 1rem; } }
    </style>
<nav class="topbar">
    <a href="https://itlive.nl/">IT Live</a>
    <a href="/ai-visuals">AI Visuals</a>
    <a href="/visuals">Visuals &amp; Logo (alles-in-één)</a>
    <span style="margin-left:auto;">🔷 AI Icon Generator</span>
</nav>
<div class="container">
    <div class="hero">
        <h1>🔷 AI Icon Generator</h1>
        <p>Maak in een paar klikken professionele iconen en pictogrammen voor je website, webapp of presentatie. Kies onderwerp, stijl en optioneel kleur – genereer, download als PNG of open als PDF-pagina. Gebruik <strong>Verbeter met feedback</strong> om het icoon aan te passen.</p>
    </div>

    <div class="card">
        <div class="row">
            <label for="icon-subject">Onderwerp van het icoon</label>
            <input type="text" id="icon-subject" placeholder="bijv. contact, klantenservice, brood, zoeken" aria-label="Onderwerp icoon">
        </div>
        <div class="row">
            <label>Stijl</label>
            <div class="style-grid" id="icon-style-grid">
                <div class="style-opt selected" data-style="flat">Flat line-art</div>
                <div class="style-opt" data-style="minimal">Minimal filled</div>
                <div class="style-opt" data-style="outline">Outline</div>
            </div>
        </div>
        <div class="row">
            <label>Kleur (optioneel)</label>
            <div class="color-blocks" id="icon-color-blocks" role="group" aria-label="Kies een kleur">
                <button type="button" class="color-block" data-hex="0d9488" style="background:#0d9488" title="Teal"><span class="sr-only">Teal</span></button>
                <button type="button" class="color-block" data-hex="8b5cf6" style="background:#8b5cf6" title="Paars"><span class="sr-only">Paars</span></button>
                <button type="button" class="color-block" data-hex="3b82f6" style="background:#3b82f6" title="Blauw"><span class="sr-only">Blauw</span></button>
                <button type="button" class="color-block" data-hex="ef4444" style="background:#ef4444" title="Rood"><span class="sr-only">Rood</span></button>
                <button type="button" class="color-block" data-hex="22c55e" style="background:#22c55e" title="Groen"><span class="sr-only">Groen</span></button>
                <button type="button" class="color-block" data-hex="f59e0b" style="background:#f59e0b" title="Oranje"><span class="sr-only">Oranje</span></button>
                <button type="button" class="color-block" data-hex="1e293b" style="background:#1e293b" title="Donkergrijs"><span class="sr-only">Donker</span></button>
                <button type="button" class="color-block" data-hex="" title="Geen vaste kleur"><span class="sr-only">Geen</span></button>
            </div>
            <input type="text" id="icon-color" placeholder="of vul hex in (bijv. 0d9488)" style="max-width:160px; margin-top:8px;" aria-label="Kleur hex optioneel">
        </div>
        <details class="row advanced-details">
            <summary class="advanced-summary">Extra opties (provider, formaat)</summary>
            <div class="advanced-body">
        <div class="row advanced">
            <label for="icon-provider">Provider</label>
            <select id="icon-provider">
                <option value="auto" selected>Automatisch (aanbevolen)</option>
                <option value="openai">OpenAI (DALL·E 3)</option>
                <option value="fal">fal.ai</option>
                <option value="replicate">Replicate</option>
            </select>
        </div>
        <div class="row advanced">
            <label for="icon-size">Formaat</label>
            <select id="icon-size">
                <option value="1024x1024" selected>1024×1024</option>
                <option value="512x512">512×512</option>
            </select>
        </div>
            </div>
        </details>
        <div class="row">
            <button type="button" id="icon-generate-btn" class="btn-primary">🔷 Genereer icoon</button>
        </div>
    </div>
    
    <div class="chat-hulp-wrap">
        <button type="button" class="chat-hulp-toggle" id="icon-chat-toggle" aria-label="Open hulp en chat">💬 Hulp &amp; tips</button>
        <div class="chat-hulp-panel" id="icon-chat-panel">
            <div class="chat-hulp-header">
                <strong>💬 AI-assistent voor iconen</strong>
                <button type="button" class="chat-hulp-close" id="icon-chat-close" aria-label="Sluiten">&times;</button>
            </div>
            <p class="chat-hulp-intro">Vraag tips voor je icoon-prompt of ga naar de volledige Visuals-chat om te tekenen en genereren.</p>
            <div class="chat-hulp-chips">
                <button type="button" class="chat-chip" data-tip="flat line-art icoon, minimalist, transparante achtergrond">Tip: flat icoon</button>
                <button type="button" class="chat-chip" data-tip="outline icon, dunne lijnen, transparant">Tip: outline</button>
                <button type="button" class="chat-chip" data-tip="minimalist filled icon, egale vlakken">Tip: filled</button>
            </div>
            <a href="/visuals" class="chat-hulp-link">🎨 Open Visuals &amp; Logo (chat + genereren)</a>
        </div>
    </div>

    <div id="icon-result" class="result-card" style="display:none;"></div>
    <div id="icon-error" class="error-box" style="display:none;"></div>

    <div class="links-row">
        <a href="/visuals">🎨 Visuals &amp; Logo (flyer, social, logo in één flow)</a>
        <a href="/social-media-banner-ai">📱 Social Media Banner AI</a>
        <a href="/ai-logo-maker">🖼️ AI Logo Maker</a>
        <a href="/ai-visuals">Overzicht AI Visuals</a>
        <a href="/admin_portal/ai-visuals-dashboard.php" style="opacity:0.85;">⚙️ Beheerders: Dashboard</a>
    </div>
</div>
<script>
(function(){
    var subjectEl = document.getElementById('icon-subject');
    var colorEl = document.getElementById('icon-color');
    var providerEl = document.getElementById('icon-provider');
    var styleGrid = document.getElementById('icon-style-grid');
    var btn = document.getElementById('icon-generate-btn');
    var resultDiv = document.getElementById('icon-result');
    var errorDiv = document.getElementById('icon-error');
    var proxyUrl = '/api/ai-visuals-proxy.php?e=image-generate';
    var lastImageUrl = '';
    var lastPromptUsed = '';

    var params = new URLSearchParams(window.location.search);
    var promptParam = params.get('prompt');
    if (promptParam && subjectEl) subjectEl.value = decodeURIComponent(promptParam);

    var selectedStyle = 'flat';
    styleGrid.querySelectorAll('.style-opt').forEach(function(el){
        el.addEventListener('click', function(){
            styleGrid.querySelectorAll('.style-opt').forEach(function(o){ o.classList.remove('selected'); });
            el.classList.add('selected');
            selectedStyle = el.getAttribute('data-style') || 'flat';
        });
    });

    var colorBlocks = document.getElementById('icon-color-blocks');
    if (colorBlocks) {
        colorBlocks.querySelectorAll('.color-block').forEach(function(btn){
            btn.addEventListener('click', function(){
                colorBlocks.querySelectorAll('.color-block').forEach(function(b){ b.classList.remove('selected'); });
                btn.classList.add('selected');
                var hex = (btn.getAttribute('data-hex') || '').trim();
                colorEl.value = hex ? '#' + hex.replace(/^#/, '') : '';
            });
        });
    }

    var chatToggle = document.getElementById('icon-chat-toggle');
    var chatPanel = document.getElementById('icon-chat-panel');
    var chatClose = document.getElementById('icon-chat-close');
    if (chatToggle && chatPanel) {
        chatToggle.addEventListener('click', function(){ chatPanel.classList.toggle('open'); });
        if (chatClose) chatClose.addEventListener('click', function(){ chatPanel.classList.remove('open'); });
    }
    document.querySelectorAll('.chat-chip').forEach(function(chip){
        chip.addEventListener('click', function(){
            var tip = chip.getAttribute('data-tip');
            if (tip && subjectEl) { subjectEl.value = tip; subjectEl.focus(); }
            if (chatPanel) chatPanel.classList.remove('open');
        });
    });

    function buildPrompt(){
        var subject = (subjectEl.value || '').trim();
        if (!subject) return '';
        var color = (colorEl.value || '').trim().replace(/^#/, '');
        var colorPart = color ? ', single color #' + color : '';
        var templates = {
            flat: 'Flat line-art icon of ' + subject + ', minimalist, transparent background, vector style' + colorPart + ', clean edges, no shadows',
            minimal: 'Minimalist filled icon of ' + subject + ', solid simple shapes, transparent background' + colorPart + ', clean design',
            outline: 'Outline icon of ' + subject + ', thin lines only, transparent background' + colorPart + ', simple and clear'
        };
        return templates[selectedStyle] || templates.flat;
    }

    function renderResult(imageUrl, promptUsed){
        lastImageUrl = imageUrl;
        lastPromptUsed = promptUsed || buildPrompt();
        var printUrl = (typeof window !== 'undefined' ? window.location.origin : '') + '/visuals/flyer-print.php?image_url=' + encodeURIComponent(imageUrl);
        var subject = (subjectEl.value || '').trim().replace(/\s+/g, '-').substring(0, 24);
        var html = '<strong>✅ Icoon gegenereerd</strong><br><img src="' + imageUrl.replace(/"/g, '&quot;') + '" alt="Icon"><div class="result-actions"><a href="' + imageUrl.replace(/"/g, '&quot;') + '" download="icon-' + subject + '.png" class="btn-dl">📥 Download PNG</a><a href="' + printUrl.replace(/"/g, '&quot;') + '" target="_blank" rel="noopener" class="btn-pdf">📄 Open als PDF-pagina</a><button type="button" class="btn-secondary" id="icon-verbeter-btn">✨ Verbeter met feedback</button></div><div class="refine-wrap" id="icon-refine-wrap"><input type="text" id="icon-refine-input" placeholder="Bijv. dikkere lijnen, andere kleur, ronder"><button type="button" class="btn-primary" id="icon-refine-do">Opnieuw genereren</button></div>';
        resultDiv.innerHTML = html;
        resultDiv.style.display = 'block';
        errorDiv.style.display = 'none';
        document.getElementById('icon-verbeter-btn').addEventListener('click', function(){
            document.getElementById('icon-refine-wrap').classList.add('visible');
        });
        document.getElementById('icon-refine-do').addEventListener('click', function(){
            var feedback = (document.getElementById('icon-refine-input').value || '').trim();
            if (!feedback) { alert('Vul in wat je wilt aanpassen.'); return; }
            var newPrompt = lastPromptUsed + '. Aanpassing: ' + feedback;
            resultDiv.innerHTML = '⏳ Bezig met verbeteren…';
            fetch(proxyUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ provider: (providerEl && providerEl.value) || 'auto', prompt: newPrompt, size: (sizeEl && sizeEl.value) ? sizeEl.value : '1024x1024', quality: 'standard', enhance_prompt: false }) })
            .then(function(r){ return r.json(); })
            .then(function(d){
                if (d.success && d.image_url) { renderResult(d.image_url, d.prompt_used || newPrompt); }
                else {
                    var msg = d.error || 'Verbeteren mislukt.';
                    if (!/Admin|Image providers|fal\.ai|Replicate|DALL·E|API-key/i.test(msg)) { msg += ' Controleer Admin → AI Providers → Image generators: fal.ai of Replicate (kosteloos/goedkoop), OpenAI DALL·E (betaald).'; }
                    errorDiv.textContent = msg;
                    errorDiv.style.display = 'block';
                    resultDiv.style.display = 'none';
                }
            })
            .catch(function(e){ errorDiv.textContent = 'Fout: ' + (e.message || 'Netwerk') + '. Tip: Admin → AI Providers → Image generators (fal.ai, Replicate, OpenAI).'; errorDiv.style.display = 'block'; resultDiv.style.display = 'none'; });
        });
    }

    var sizeEl = document.getElementById('icon-size');

    btn.addEventListener('click', function(){
        var subject = (subjectEl.value || '').trim();
        if (!subject){ errorDiv.textContent = 'Vul een onderwerp in voor het icoon.'; errorDiv.style.display = 'block'; resultDiv.style.display = 'none'; return; }
        var prompt = buildPrompt();
        var reqSize = sizeEl ? (sizeEl.value || '1024x1024') : '1024x1024';
        resultDiv.style.display = 'none';
        errorDiv.style.display = 'none';
        btn.disabled = true;
        btn.textContent = '⏳ Genereren…';

        fetch(proxyUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                provider: (providerEl && providerEl.value) || 'auto',
                prompt: prompt,
                size: reqSize,
                quality: 'standard',
                enhance_prompt: false
            })
        })
        .then(function(r){ return r.json(); })
        .then(function(d){
            btn.disabled = false;
            btn.textContent = '🔷 Genereer icoon';
            if (d.success && d.image_url) {
                renderResult(d.image_url, d.prompt_used || prompt);
            } else {
                var msg = d.error || 'Genereren mislukt. Neem contact op met ons of probeer het later opnieuw.';
                if (!/Admin|Image providers|fal\.ai|Replicate|DALL·E|API-key/i.test(msg)) {
                    msg += ' Controleer in het adminportaal onder Image providers of de API-key geldig is. Controleer Admin → AI Providers → Image generators: fal.ai en Replicate zijn vaak kosteloos/goedkoop; OpenAI DALL·E is betaald.';
                }
                errorDiv.innerHTML = msg.replace(/</g, '&lt;');
                errorDiv.style.display = 'block';
            }
        })
        .catch(function(e){
            btn.disabled = false;
            btn.textContent = '🔷 Genereer icoon';
            var msg = 'Fout: ' + (e.message || 'Netwerk') + '. Controleer Admin → AI Providers → Image generators: fal.ai en Replicate zijn vaak kosteloos/goedkoop; OpenAI DALL·E is betaald.';
            errorDiv.textContent = msg;
            errorDiv.style.display = 'block';
        });
    });
})();
</script>
</body>
</html>