@extends('layouts.app')
@section('title', 'Meine IP-Adresse – IPv4, Standort & ISP anzeigen | kotsch.tech')
@section('meta_description', 'Deine IP-Adresse sofort anzeigen. IPv4, Standort, ISP, Zeitzone und Netzwerkinfos – kostenlos und ohne Installation.')
@section('meta_extra')
<meta name="keywords" content="IP Adresse anzeigen, meine IP, IPv4, IPv6, IP-Adresse herausfinden, Standort IP, ISP anzeigen, Netzwerk Info">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.ip-big { font-size:clamp(1.8rem,5vw,3rem); font-weight:900; letter-spacing:-2px; color:var(--accent); font-family:'JetBrains Mono','Fira Mono',monospace; word-break:break-all; margin:8px 0; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-network-wired"></i> Netzwerk</span>
        <h1 class="tool-h1">Meine<br><span>IP-Adresse.</span></h1>
        <p class="tool-sub">Deine aktuellen Netzwerkdaten – Adresse, Standort und Anbieter auf einen Blick.</p>
    </div>

    <div class="t-panel" id="main-panel">
        <div style="text-align:center;padding:32px 0" id="loading-state">
            <i class="fas fa-circle-notch fa-spin" style="font-size:2rem;color:var(--accent)"></i>
            <p style="color:var(--muted);margin-top:12px">Lade IP-Daten…</p>
        </div>

        <div id="result-state" style="display:none">
            <div class="t-panel-title"><i class="fas fa-globe"></i> Öffentliche IP-Adresse</div>
            <div class="ip-big" id="ip-display">–</div>
            <div style="display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap">
                <button class="t-btn sm ghost" onclick="copyIP()"><i class="fas fa-copy"></i> Kopieren</button>
                <button class="t-btn sm ghost" onclick="loadData()"><i class="fas fa-sync-alt"></i> Aktualisieren</button>
            </div>
            <div class="t-panel-title"><i class="fas fa-map-marker-alt"></i> Standort & Anbieter</div>
            <div id="info-rows"></div>
        </div>

        <div id="error-state" style="display:none;text-align:center;padding:24px">
            <i class="fas fa-exclamation-triangle" style="font-size:2rem;color:#f59e0b"></i>
            <p style="color:var(--muted);margin-top:12px">Daten konnten nicht geladen werden.</p>
            <button class="t-btn accent" style="margin-top:12px" onclick="loadData()">Nochmals versuchen</button>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-info-circle"></i> Was ist eine IP-Adresse?</div>
        <div class="t-row"><span class="t-row-lbl">IPv4</span><span class="t-row-val">32-bit, z.B. 192.168.1.1</span></div>
        <div class="t-row"><span class="t-row-lbl">IPv6</span><span class="t-row-val">128-bit, z.B. 2001:db8::1</span></div>
        <div class="t-row"><span class="t-row-lbl">Public IP</span><span class="t-row-val">Sichtbar im Internet</span></div>
        <div class="t-row"><span class="t-row-lbl">Private IP</span><span class="t-row-val">Nur im lokalen Netz</span></div>
        <div class="t-row"><span class="t-row-lbl">Datenschutz</span><span class="t-row-val">Deine IP kann deinen ungefähren Standort verraten</span></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const FIELDS=[
    {key:'country_name',label:'Land',icon:'flag'},
    {key:'region',label:'Region',icon:'map'},
    {key:'city',label:'Stadt',icon:'city'},
    {key:'postal',label:'Postleitzahl',icon:'envelope'},
    {key:'org',label:'Anbieter (ISP)',icon:'building'},
    {key:'timezone',label:'Zeitzone',icon:'clock'},
    {key:'latitude',label:'Breitengrad',icon:'crosshairs'},
    {key:'longitude',label:'Längengrad',icon:'crosshairs'},
];

let currentIP='';
function copyIP(){
    navigator.clipboard.writeText(currentIP).then(()=>{
        const btn=document.querySelector('#result-state .t-btn');
        btn.innerHTML='<i class="fas fa-check"></i> Kopiert!';
        setTimeout(()=>btn.innerHTML='<i class="fas fa-copy"></i> Kopieren',2000);
    });
}

async function loadData(){
    document.getElementById('loading-state').style.display='';
    document.getElementById('result-state').style.display='none';
    document.getElementById('error-state').style.display='none';
    try{
        const res=await fetch('https://ipapi.co/json/');
        if(!res.ok) throw new Error();
        const d=await res.json();
        currentIP=d.ip||'–';
        document.getElementById('ip-display').textContent=currentIP;
        const rows=document.getElementById('info-rows');
        rows.innerHTML='';
        FIELDS.forEach(f=>{
            const val=d[f.key]||'–';
            const row=document.createElement('div');
            row.className='t-row';
            row.innerHTML=`<span class="t-row-lbl"><i class="fas fa-${f.icon}" style="width:16px;color:var(--accent);margin-right:4px"></i>${f.label}</span><span class="t-row-val" style="font-family:monospace;font-size:0.9rem">${val}</span>`;
            rows.appendChild(row);
        });
        document.getElementById('loading-state').style.display='none';
        document.getElementById('result-state').style.display='';
    }catch{
        document.getElementById('loading-state').style.display='none';
        document.getElementById('error-state').style.display='';
    }
}
loadData();
</script>

@include('tools._seo_content', ['toolSlug' => 'ip-adresse', 'toolName' => 'IP-Adresse anzeigen'])

@endsection