@extends('layouts.app')
@section('title', 'UUID Generator – UUIDs v1, v4, v7 & ULID erstellen | kotsch.tech')
@section('meta_description', 'UUID Generator online: UUID v4, v7, Nil-UUID und ULID im Browser erstellen. Bulk-Generierung, Format-Optionen, Zeitstempel-Analyse – kostenlos und lokal.')
@section('meta_extra')
<meta name="keywords" content="UUID Generator, UUID v4, UUID v7, ULID, UUID erstellen, UUID online, UUID Bulk, UUID Format">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.uuid-list { display:grid; gap:8px; }
.uuid-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); font-family:'JetBrains Mono',monospace; font-size:0.88rem; font-weight:700; }
.uuid-val { flex:1; color:var(--ink); word-break:break-all; cursor:pointer; }
.uuid-val:hover { color:var(--accent); }
.uuid-type-badge { font-size:0.68rem; font-weight:900; padding:2px 7px; border-radius:999px; flex-shrink:0; }
.badge-v4  { background:#dcfce7; color:#15803d; }
.badge-v7  { background:#dbeafe; color:#1e40af; }
.badge-nil { background:#f1f5f9; color:var(--muted); }
.badge-ulid{ background:#fce7f3; color:#9d174d; }
.fmt-chip { padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:0.78rem; font-weight:700; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.fmt-chip.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.type-tab { padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.type-tab.active { border-color:var(--accent); background:var(--accent); color:#fff; }
.info-box { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; font-size:0.82rem; line-height:1.7; }
.info-row { display:flex; gap:10px; border-bottom:1px solid var(--line); padding:6px 0; font-size:0.82rem; }
.info-row:last-child { border-bottom:none; }
.info-key { font-weight:700; color:var(--muted); min-width:110px; flex-shrink:0; }
.info-val { font-family:'JetBrains Mono',monospace; color:var(--ink); word-break:break-all; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-fingerprint"></i> Developer</span>
        <h1 class="tool-h1">UUID<span> Generator.</span></h1>
        <p class="tool-sub">UUID v4, v7, Nil-UUID und ULID – Bulk-Generierung, Format-Optionen und UUID-Analyse.</p>
    </div>

    <div class="t-panel">
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px">
            <button class="type-tab active" onclick="setType('v4',this)">UUID v4</button>
            <button class="type-tab" onclick="setType('v7',this)">UUID v7</button>
            <button class="type-tab" onclick="setType('nil',this)">Nil UUID</button>
            <button class="type-tab" onclick="setType('ulid',this)">ULID</button>
        </div>

        <div class="t-toggle-row" style="border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px">
            <div>
                <span style="font-weight:700">Anzahl</span>
                <span id="count-val" style="margin-left:10px;color:var(--accent);font-weight:900;font-size:1.1rem">5</span>
            </div>
            <input type="range" class="t-range" id="count-slider" min="1" max="100" value="5" oninput="document.getElementById('count-val').textContent=this.value">
        </div>

        <div style="margin-bottom:14px">
            <div class="t-label" style="margin-bottom:8px">Format</div>
            <div style="display:flex;gap:6px;flex-wrap:wrap" id="fmt-chips">
                <button class="fmt-chip active" data-fmt="standard" onclick="setFmt('standard',this)">Standard</button>
                <button class="fmt-chip" data-fmt="nodash" onclick="setFmt('nodash',this)">Ohne Bindestriche</button>
                <button class="fmt-chip" data-fmt="braces" onclick="setFmt('braces',this)">{Geschwungen}</button>
                <button class="fmt-chip" data-fmt="upper" onclick="setFmt('upper',this)">GROSSBUCHSTABEN</button>
            </div>
        </div>

        <div style="display:flex;gap:10px;flex-wrap:wrap">
            <button class="t-btn full" onclick="generate()"><i class="fas fa-rotate-right"></i> Generieren</button>
            <button class="t-btn ghost" onclick="copyAll()"><i class="fas fa-copy"></i> Alle kopieren</button>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-list"></i> Ergebnisse</div>
        <div class="uuid-list" id="uuid-list"></div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-search"></i> UUID analysieren</div>
        <div class="t-field">
            <label class="t-label">UUID oder ULID einfügen</label>
            <div class="t-copy-wrap">
                <input type="text" class="t-input" id="analyze-inp" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" oninput="analyzeUUID()" style="font-family:'JetBrains Mono',monospace;font-size:0.85rem">
            </div>
        </div>
        <div id="analyze-out" style="display:none">
            <div id="analyze-rows"></div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-grid-3" style="gap:10px">
            <div class="t-stat-card"><div class="t-stat-val" id="stat-type">v4</div><div class="t-stat-label">Typ</div></div>
            <div class="t-stat-card"><div class="t-stat-val" id="stat-bits">122</div><div class="t-stat-label">Zufallsbits</div></div>
            <div class="t-stat-card"><div class="t-stat-val">5,3×10³⁶</div><div class="t-stat-label">Mögliche UUIDs</div></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let currentType = 'v4';
let currentFmt  = 'standard';
let generated   = [];

function setType(t, btn) {
    currentType = t;
    document.querySelectorAll('.type-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const fmtChips = document.getElementById('fmt-chips');
    fmtChips.style.display = t === 'ulid' ? 'none' : '';
    const stats = { v4:{type:'UUID v4',bits:'122'}, v7:{type:'UUID v7',bits:'74'}, nil:{type:'Nil UUID',bits:'0'}, ulid:{type:'ULID',bits:'80'} };
    document.getElementById('stat-type').textContent = stats[t].type;
    document.getElementById('stat-bits').textContent = stats[t].bits;
    generate();
}

function setFmt(fmt, btn) {
    currentFmt = fmt;
    document.querySelectorAll('.fmt-chip').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    renderList();
}

function uuidV4() {
    return crypto.randomUUID ? crypto.randomUUID() :
        'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
            const r = Math.random()*16|0;
            return (c==='x' ? r : (r&3|8)).toString(16);
        });
}

function uuidV7() {
    const now = Date.now();
    const ms  = now.toString(16).padStart(12,'0');
    const rand = crypto.getRandomValues(new Uint8Array(10));
    const hex  = Array.from(rand).map(b=>b.toString(16).padStart(2,'0')).join('');
    const v7 = ms + '7' + hex.slice(1,4) + (((parseInt(hex[4],16)&3)|8).toString(16)) + hex.slice(5);
    return [v7.slice(0,8), v7.slice(8,12), v7.slice(12,16), v7.slice(16,20), v7.slice(20)].join('-');
}

function nilUUID() { return '00000000-0000-0000-0000-000000000000'; }

const ULID_CHARS = '0123456789ABCDEFGHJKMNPQRSTVWXYZ';
function ulid() {
    const now = Date.now();
    let t = now, ts = '';
    for (let i=9;i>=0;i--) { ts = ULID_CHARS[t%32] + ts; t = Math.floor(t/32); }
    let rand = '';
    const bytes = crypto.getRandomValues(new Uint8Array(16));
    for (let i=0;i<16;i++) rand += ULID_CHARS[bytes[i] % 32];
    return ts + rand;
}

function applyFmt(uuid) {
    if (currentType === 'ulid') return uuid;
    switch(currentFmt) {
        case 'nodash': return uuid.replace(/-/g,'');
        case 'braces': return '{' + uuid + '}';
        case 'upper':  return uuid.toUpperCase();
        default:       return uuid;
    }
}

function generate() {
    const count = parseInt(document.getElementById('count-slider').value);
    generated = [];
    for (let i=0;i<count;i++) {
        let raw;
        if      (currentType==='v4')   raw = uuidV4();
        else if (currentType==='v7')   raw = uuidV7();
        else if (currentType==='nil')  raw = nilUUID();
        else                           raw = ulid();
        generated.push(raw);
    }
    renderList();
}

function renderList() {
    const el = document.getElementById('uuid-list');
    const badges = { v4:'badge-v4', v7:'badge-v7', nil:'badge-nil', ulid:'badge-ulid' };
    const labels = { v4:'v4', v7:'v7', nil:'nil', ulid:'ULID' };
    el.innerHTML = generated.map((u,i) => {
        const display = applyFmt(u);
        return `<div class="uuid-row">
            <span class="uuid-type-badge ${badges[currentType]}">${labels[currentType]}</span>
            <span class="uuid-val" onclick="navigator.clipboard.writeText('${display}')" title="Klicken zum Kopieren">${display}</span>
            <button class="t-copy-btn" style="position:static;flex-shrink:0" onclick="copySingle('${display}',this)"><i class="fas fa-copy"></i></button>
        </div>`;
    }).join('');
}

function copySingle(val, btn) {
    navigator.clipboard.writeText(val);
    const orig = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check"></i>';
    setTimeout(() => btn.innerHTML = orig, 1500);
}

function copyAll() {
    navigator.clipboard.writeText(generated.map(u => applyFmt(u)).join('\n'));
    const btn = event.target.closest('button');
    const orig = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check"></i> Kopiert!';
    setTimeout(() => btn.innerHTML = orig, 1800);
}

function analyzeUUID() {
    const val = document.getElementById('analyze-inp').value.trim();
    const out = document.getElementById('analyze-out');
    const rows = document.getElementById('analyze-rows');
    if (!val) { out.style.display='none'; return; }
    out.style.display = '';
    const info = [];
    const clean = val.replace(/[{}]/g,'').toLowerCase();
    const uuidRx = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
    const ulidRx = /^[0-9A-Z]{26}$/i;

    if (uuidRx.test(clean)) {
        const parts = clean.split('-');
        const ver = parseInt(parts[2][0], 16);
        const variant = parseInt(parts[3][0], 16);
        info.push({ k: 'Format', v: 'UUID' });
        info.push({ k: 'Version', v: 'v' + ver });
        info.push({ k: 'Variante', v: variant >= 8 && variant <= 11 ? 'RFC 4122' : variant >= 12 && variant <= 13 ? 'Microsoft' : 'Unbekannt' });
        if (ver === 7) {
            const tsHex = parts[0] + parts[1];
            const ts = parseInt(tsHex, 16);
            info.push({ k: 'Zeitstempel', v: new Date(ts).toLocaleString('de-DE') + ' (' + ts + ' ms)' });
        }
        info.push({ k: 'Ohne Striche', v: clean.replace(/-/g,'') });
        info.push({ k: 'Großbuchstaben', v: clean.toUpperCase() });
    } else if (ulidRx.test(val)) {
        info.push({ k: 'Format', v: 'ULID' });
        const b32map = '0123456789ABCDEFGHJKMNPQRSTVWXYZ';
        let ts = 0;
        for (let i=0;i<10;i++) ts = ts*32 + b32map.indexOf(val[i].toUpperCase());
        info.push({ k: 'Zeitstempel', v: new Date(ts).toLocaleString('de-DE') + ' (' + ts + ' ms)' });
        info.push({ k: 'Zufallsteil', v: val.slice(10) });
    } else {
        info.push({ k: 'Fehler', v: 'Kein gültiges UUID oder ULID-Format' });
    }

    rows.innerHTML = `<div class="info-box">${info.map(r=>`<div class="info-row"><div class="info-key">${r.k}</div><div class="info-val">${escH(r.v)}</div></div>`).join('')}</div>`;
}

function escH(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

generate();
</script>

@include('tools._seo_content', ['toolSlug' => 'uuid-generator', 'toolName' => 'UUID Generator'])

@endsection