@extends('layouts.app')
@section('title', 'Text Tools – Groß/Klein, umkehren, camelCase & mehr | kotsch.tech')
@section('meta_description', 'Text online transformieren: Groß-/Kleinbuchstaben, umkehren, camelCase, PascalCase, Slug, sortieren und mehr. Live und kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Text Tools, Großbuchstaben, Kleinbuchstaben, Text umkehren, camelCase, PascalCase, snake_case, Slug, Text Werkzeuge">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.tf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:18px; }
.tf-btn { padding:9px 12px; border-radius:var(--radius-sm); border:2px solid var(--line); background:var(--card); font:inherit; font-size:0.8rem; font-weight:700; cursor:pointer; color:var(--muted); transition:all 0.15s; text-align:left; }
.tf-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.stat-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.stat-chip { padding:3px 10px; border-radius:999px; background:var(--accent-soft); color:#065f46; font-size:0.76rem; font-weight:900; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-font"></i> Textwerkzeuge</span>
        <h1 class="tool-h1">Text<span> Tools.</span></h1>
        <p class="tool-sub">Text transformieren, analysieren und bearbeiten – live und direkt im Browser.</p>
    </div>

    <div class="t-panel">
        <div class="tf-grid">
            <button class="tf-btn" onclick="apply('upper')">GROSSBUCHSTABEN</button>
            <button class="tf-btn" onclick="apply('lower')">kleinbuchstaben</button>
            <button class="tf-btn" onclick="apply('title')">Erster Groß</button>
            <button class="tf-btn" onclick="apply('sentence')">Satzfall</button>
            <button class="tf-btn" onclick="apply('camel')">camelCase</button>
            <button class="tf-btn" onclick="apply('pascal')">PascalCase</button>
            <button class="tf-btn" onclick="apply('snake')">snake_case</button>
            <button class="tf-btn" onclick="apply('slug')">url-slug</button>
            <button class="tf-btn" onclick="apply('reverse')">Zeichen umkehren</button>
            <button class="tf-btn" onclick="apply('reverseWords')">Wörter umkehren</button>
            <button class="tf-btn" onclick="apply('trimLines')">Zeilen trimmen</button>
            <button class="tf-btn" onclick="apply('removeDuplicates')">Leerzeilen entfernen</button>
            <button class="tf-btn" onclick="apply('sortAsc')">Zeilen ↑ sortieren</button>
            <button class="tf-btn" onclick="apply('sortDesc')">Zeilen ↓ sortieren</button>
            <button class="tf-btn" onclick="apply('numberedLines')">Zeilen nummerieren</button>
            <button class="tf-btn" onclick="apply('removeSpaces')">Extra-Leerzeichen weg</button>
        </div>

        <div class="t-grid-2">
            <div class="t-field">
                <label class="t-label">Eingabe</label>
                <textarea class="t-textarea" id="inp" placeholder="Text hier eingeben…" oninput="updateStats()" style="min-height:180px"></textarea>
                <div class="stat-chips" id="in-stats"></div>
            </div>
            <div class="t-field">
                <label class="t-label">Ausgabe</label>
                <div class="t-copy-wrap">
                    <textarea class="t-textarea" id="out" style="min-height:180px" readonly></textarea>
                    <button class="t-copy-btn" id="copy-btn" onclick="copyOut()" title="Kopieren"><i class="fas fa-copy"></i></button>
                </div>
                <div class="stat-chips" id="out-stats"></div>
            </div>
        </div>

        <div style="display:flex;gap:8px;margin-top:10px">
            <button class="t-btn sm ghost" onclick="swapTexts()"><i class="fas fa-exchange-alt"></i> Tauschen</button>
            <button class="t-btn sm ghost" onclick="clearAll()"><i class="fas fa-trash"></i> Leeren</button>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
function makeStats(text){
    const words=text.trim()?text.trim().split(/\s+/).length:0;
    return [`${text.length} Zeichen`,`${words} Wörter`,`${text.split('\n').length} Zeilen`];
}
function renderStats(id,text){
    document.getElementById(id).innerHTML=makeStats(text).map(s=>`<span class="stat-chip">${s}</span>`).join('');
}
function updateStats(){ renderStats('in-stats',document.getElementById('inp').value); }

function apply(t){
    const v=document.getElementById('inp').value;
    let out=v;
    switch(t){
        case 'upper': out=v.toUpperCase(); break;
        case 'lower': out=v.toLowerCase(); break;
        case 'title': out=v.toLowerCase().replace(/\b\w/g,c=>c.toUpperCase()); break;
        case 'sentence': out=v.toLowerCase().replace(/(^\s*\w|[.!?]\s+\w)/g,c=>c.toUpperCase()); break;
        case 'camel': out=v.toLowerCase().replace(/[^a-z0-9]+(.)/g,(_,c)=>c.toUpperCase()); break;
        case 'pascal': out=v.toLowerCase().replace(/(^|[^a-z0-9]+)(.)/g,(_,_2,c)=>c.toUpperCase()); break;
        case 'snake': out=v.toLowerCase().replace(/\s+/g,'_').replace(/[^a-z0-9_]/g,''); break;
        case 'slug': out=v.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g,'').replace(/[^a-z0-9\s-]/g,'').trim().replace(/\s+/g,'-'); break;
        case 'reverse': out=v.split('').reverse().join(''); break;
        case 'reverseWords': out=v.split(/\s+/).reverse().join(' '); break;
        case 'trimLines': out=v.split('\n').map(l=>l.trim()).join('\n'); break;
        case 'removeDuplicates': out=v.split('\n').filter(l=>l.trim()).join('\n'); break;
        case 'sortAsc': out=v.split('\n').sort((a,b)=>a.localeCompare(b,'de')).join('\n'); break;
        case 'sortDesc': out=v.split('\n').sort((a,b)=>b.localeCompare(a,'de')).join('\n'); break;
        case 'numberedLines': out=v.split('\n').map((l,i)=>`${i+1}. ${l}`).join('\n'); break;
        case 'removeSpaces': out=v.replace(/\s+/g,' ').trim(); break;
    }
    document.getElementById('out').value=out;
    renderStats('out-stats',out);
}
function copyOut(){
    const val=document.getElementById('out').value;
    if(!val)return;
    navigator.clipboard.writeText(val).then(()=>{
        const btn=document.getElementById('copy-btn');
        btn.innerHTML='<i class="fas fa-check"></i>';
        setTimeout(()=>btn.innerHTML='<i class="fas fa-copy"></i>',2000);
    });
}
function swapTexts(){
    const inp=document.getElementById('inp'),out=document.getElementById('out');
    inp.value=out.value; out.value='';
    updateStats(); renderStats('out-stats','');
}
function clearAll(){
    document.getElementById('inp').value='';
    document.getElementById('out').value='';
    document.getElementById('in-stats').innerHTML='';
    document.getElementById('out-stats').innerHTML='';
}
</script>

@include('tools._seo_content', ['toolSlug' => 'text-tools', 'toolName' => 'Text Werkzeuge'])

@endsection