@extends('layouts.app')
@section('title', 'Römische Zahlen Konverter – Arabisch ↔ Römisch | kotsch.tech')
@section('meta_description', 'Römische Zahlen online umwandeln: Arabisch in Römisch und zurück, Tabelle 1–100, Jahreszahlen, Schreibregeln. Kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Römische Zahlen, römische Zahlen Konverter, arabisch zu römisch, Zahlensystem römisch, MMXXVI">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.roman-display { font-family:'JetBrains Mono',monospace; font-size:2.5rem; font-weight:900; color:var(--accent); letter-spacing:2px; text-align:center; padding:20px; background:var(--bg); border:2px solid var(--line); border-radius:var(--radius-sm); min-height:90px; display:flex; align-items:center; justify-content:center; }
.roman-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.roman-table th { text-align:left; padding:8px 10px; border-bottom:2px solid var(--line); font-weight:700; color:var(--muted); font-size:0.72rem; text-transform:uppercase; }
.roman-table td { padding:7px 10px; border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace; }
.roman-table tr:hover { background:var(--accent-soft); cursor:pointer; }
.breakdown-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:4px; margin:3px; font-family:'JetBrains Mono',monospace; font-weight:700; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-landmark"></i> Konverter</span>
        <h1 class="tool-h1">Römische<span>zahlen.</span></h1>
        <p class="tool-sub">Arabisch ↔ Römisch, Zerlegung in Teile, Jahrestabelle und Schreibregeln.</p>
    </div>

    <div class="t-panel">
        <div class="t-grid-2" style="gap:20px">
            <div>
                <div class="t-field">
                    <label class="t-label">Arabische Zahl (1–3999)</label>
                    <input type="number" class="t-input" id="arabic" min="1" max="3999" value="2026" oninput="fromArabic()">
                </div>
                <div class="roman-display" id="roman-out">MMXXVI</div>
                <div style="margin-top:10px;font-size:0.82rem;color:var(--muted)">Zerlegung:</div>
                <div id="breakdown" style="margin-top:6px;flex-wrap:wrap;display:flex"></div>
            </div>
            <div>
                <div class="t-field">
                    <label class="t-label">Römische Zahl</label>
                    <input type="text" class="t-input" id="roman-in" value="MMXXVI" placeholder="z.B. XIV" oninput="fromRoman()" style="font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.2rem;letter-spacing:2px">
                </div>
                <div class="roman-display" id="arabic-out" style="color:var(--ink);font-size:3rem">2026</div>
                <div id="roman-err" style="display:none;color:#ef4444;font-size:0.82rem;margin-top:6px"><i class="fas fa-exclamation-circle"></i> Ungültige römische Zahl</div>
            </div>
        </div>

        <div style="margin-top:16px;display:flex;gap:8px;flex-wrap:wrap">
            <button class="t-btn ghost sm" onclick="setVal(new Date().getFullYear())"><i class="fas fa-calendar"></i> Aktuelles Jahr</button>
            <button class="t-btn ghost sm" onclick="setVal(Math.floor(Math.random()*3999)+1)"><i class="fas fa-random"></i> Zufällig</button>
            <button class="t-btn ghost sm" onclick="navigator.clipboard.writeText(document.getElementById('roman-out').textContent)"><i class="fas fa-copy"></i> Kopieren</button>
        </div>
    </div>

    <div class="t-panel">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:6px">
            <div class="t-panel-title" style="margin:0"><i class="fas fa-table"></i> Tabelle</div>
            <div style="display:flex;gap:6px">
                <button class="t-btn ghost sm" onclick="showTable(1,50)">1–50</button>
                <button class="t-btn ghost sm" onclick="showTable(51,100)">51–100</button>
                <button class="t-btn ghost sm" onclick="showTable(1900,2030)">1900–2030</button>
            </div>
        </div>
        <div style="overflow-x:auto">
            <table class="roman-table">
                <thead><tr><th>Arabisch</th><th>Römisch</th><th>Symbol</th></tr></thead>
                <tbody id="roman-tbody"></tbody>
            </table>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-book"></i> Grundsymbole</div>
        <div class="t-grid-4" style="gap:10px">
            <div class="t-stat-card"><div class="t-stat-val" style="font-family:'JetBrains Mono',monospace">I</div><div class="t-stat-label">1</div></div>
            <div class="t-stat-card"><div class="t-stat-val" style="font-family:'JetBrains Mono',monospace">V</div><div class="t-stat-label">5</div></div>
            <div class="t-stat-card"><div class="t-stat-val" style="font-family:'JetBrains Mono',monospace">X</div><div class="t-stat-label">10</div></div>
            <div class="t-stat-card"><div class="t-stat-val" style="font-family:'JetBrains Mono',monospace">L</div><div class="t-stat-label">50</div></div>
            <div class="t-stat-card"><div class="t-stat-val" style="font-family:'JetBrains Mono',monospace">C</div><div class="t-stat-label">100</div></div>
            <div class="t-stat-card"><div class="t-stat-val" style="font-family:'JetBrains Mono',monospace">D</div><div class="t-stat-label">500</div></div>
            <div class="t-stat-card"><div class="t-stat-val" style="font-family:'JetBrains Mono',monospace">M</div><div class="t-stat-label">1000</div></div>
            <div class="t-stat-card"><div class="t-stat-val" style="font-family:'JetBrains Mono',monospace">MV̄</div><div class="t-stat-label">4000+</div></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const MAP = [['M',1000],['CM',900],['D',500],['CD',400],['C',100],['XC',90],['L',50],['XL',40],['X',10],['IX',9],['V',5],['IV',4],['I',1]];
const COLORS = ['#dbeafe','#dcfce7','#fce7f3','#fef9c3','#ede9fe','#fee2e2','#e0f2fe'];

function toRoman(n) {
    if (n < 1 || n > 3999) return '';
    let s = '';
    MAP.forEach(([r,v]) => { while(n>=v){s+=r;n-=v;} });
    return s;
}

function fromRomanStr(s) {
    s = s.toUpperCase().trim();
    let n = 0;
    MAP.forEach(([r,v]) => { while(s.startsWith(r)){n+=v;s=s.slice(r.length);} });
    return s.length ? null : n;
}

function getBreakdown(n) {
    const parts = [];
    let tmp = n;
    MAP.forEach(([r,v]) => { let c=0; while(tmp>=v){c++;tmp-=v;} if(c) parts.push({r,v,c}); });
    return parts;
}

function fromArabic() {
    const n = parseInt(document.getElementById('arabic').value)||0;
    const roman = toRoman(n);
    document.getElementById('roman-out').textContent = roman || '–';
    document.getElementById('roman-in').value = roman;
    document.getElementById('roman-err').style.display = 'none';

    const parts = getBreakdown(n);
    document.getElementById('breakdown').innerHTML = parts.map((p,i) =>
        `<span class="breakdown-chip" style="background:${COLORS[i%7]}">${p.r}=${p.v}×${p.c}</span>`
    ).join('');
}

function fromRoman() {
    const s = document.getElementById('roman-in').value;
    const n = fromRomanStr(s);
    if (n === null || n < 1) {
        document.getElementById('arabic-out').textContent = '?';
        document.getElementById('roman-err').style.display = '';
        return;
    }
    document.getElementById('roman-err').style.display = 'none';
    document.getElementById('arabic-out').textContent = n.toLocaleString('de-DE');
    document.getElementById('arabic').value = n;
    const parts = getBreakdown(n);
    document.getElementById('breakdown').innerHTML = parts.map((p,i) =>
        `<span class="breakdown-chip" style="background:${COLORS[i%7]}">${p.r}=${p.v}×${p.c}</span>`
    ).join('');
    document.getElementById('roman-out').textContent = toRoman(n);
}

function setVal(n) {
    document.getElementById('arabic').value = n;
    fromArabic();
}

function showTable(from, to) {
    const tbody = document.getElementById('roman-tbody');
    const symbols = MAP.map(([r,v]) => v <= 1000 ? r : '');
    tbody.innerHTML = '';
    for (let i=from; i<=Math.min(to,3999); i++) {
        const r = toRoman(i);
        const symParts = getBreakdown(i);
        const sym = symParts.map(p=>p.r).join('+');
        const tr = document.createElement('tr');
        tr.onclick = () => setVal(i);
        tr.innerHTML = `<td style="font-weight:700">${i}</td><td style="font-weight:700;color:var(--accent)">${r}</td><td style="color:var(--muted)">${sym}</td>`;
        tbody.appendChild(tr);
    }
}

showTable(1, 50);
fromArabic();
</script>

@include('tools._seo_content', ['toolSlug' => 'roemische-zahlen', 'toolName' => 'Römische Zahlen'])

@endsection