@extends('demos.windows.app_layout', ['fullPage' => true])

@section('title', 'Kotsch.TaskManager | kotsch.tech')
@section('meta_description', 'Kotsch.TaskManager – Echtzeit-Überwachung aller Systemressourcen für Windows. CPU-Graphen, RAM-Analyse und Prozessverwaltung in einer schnellen, nativen Anwendung.')

@section('app-ui')
<div class="tm-app">

    <!-- SIDEBAR -->
    <div class="tm-sidebar">
        <div class="tm-brand"><i class="fas fa-chart-bar"></i> Task Manager</div>
        <nav class="tm-nav">
            <div class="tm-nav-item active"><i class="fas fa-microchip"></i> CPU</div>
            <div class="tm-nav-item"><i class="fas fa-memory"></i> RAM</div>
            <div class="tm-nav-item"><i class="fas fa-hdd"></i> Datenträger</div>
            <div class="tm-nav-item"><i class="fas fa-wifi"></i> Netzwerk</div>
        </nav>
        <div class="tm-sys-info">
            <div class="tm-sys-row"><i class="fas fa-server"></i> Windows 11 Pro</div>
            <div class="tm-sys-row"><i class="fas fa-clock"></i> Uptime: 3d 14h</div>
        </div>
    </div>

    <!-- MAIN -->
    <div class="tm-main">

        <!-- TABS -->
        <div class="tm-topbar">
            <div class="tm-tabs">
                <div class="tm-tab active">Prozesse</div>
                <div class="tm-tab">Leistung</div>
                <div class="tm-tab">Details</div>
                <div class="tm-tab">Dienste</div>
            </div>
            <div class="tm-search-box"><i class="fas fa-search"></i><span style="color:#475569; font-size:0.75rem;">Prozess suchen...</span></div>
        </div>

        <!-- STATS CARDS -->
        <div class="tm-cards-row">
            <!-- CPU CARD -->
            <div class="tm-stat-card">
                <div class="tm-card-header">
                    <div><div class="tm-card-title">CPU</div><div class="tm-card-sub">Intel Core i9-13900K · 24 Kerne</div></div>
                    <div class="tm-big-val cpu-big-val">34<span>%</span></div>
                </div>
                <div class="tm-cpu-graph">
                    <div class="cpu-bar-wrap">
                        <div class="cpu-bar b1"></div><div class="cpu-bar b2"></div><div class="cpu-bar b3"></div>
                        <div class="cpu-bar b4"></div><div class="cpu-bar b5"></div><div class="cpu-bar b6"></div>
                        <div class="cpu-bar b7"></div><div class="cpu-bar b8"></div><div class="cpu-bar b9"></div>
                        <div class="cpu-bar b10"></div><div class="cpu-bar b11"></div><div class="cpu-bar b12"></div>
                        <div class="cpu-bar b13"></div><div class="cpu-bar b14"></div><div class="cpu-bar b15"></div>
                        <div class="cpu-bar b16"></div>
                    </div>
                </div>
                <div class="tm-card-stats">
                    <div><span class="ts-label">Frequenz</span><span class="ts-val">3.2 GHz</span></div>
                    <div><span class="ts-label">Prozesse</span><span class="ts-val">142</span></div>
                    <div><span class="ts-label">Threads</span><span class="ts-val">2.841</span></div>
                </div>
            </div>

            <!-- RAM CARD -->
            <div class="tm-stat-card">
                <div class="tm-card-header">
                    <div><div class="tm-card-title">Arbeitsspeicher</div><div class="tm-card-sub">32 GB DDR5 · 5600 MHz</div></div>
                    <div class="tm-big-val ram-big-val">11.4<span> GB</span></div>
                </div>
                <div class="tm-ram-ring-wrap">
                    <svg class="tm-ring" viewBox="0 0 80 80">
                        <circle cx="40" cy="40" r="34" fill="none" stroke="#1e293b" stroke-width="8"/>
                        <circle class="ring-fill" cx="40" cy="40" r="34" fill="none" stroke="#3b82f6" stroke-width="8"
                            stroke-dasharray="213.6" stroke-dashoffset="147" stroke-linecap="round" transform="rotate(-90 40 40)"/>
                    </svg>
                    <div class="tm-ring-label">36%</div>
                </div>
                <div class="tm-card-stats">
                    <div><span class="ts-label">Verwendet</span><span class="ts-val blue">11.4 GB</span></div>
                    <div><span class="ts-label">Verfügbar</span><span class="ts-val">20.6 GB</span></div>
                    <div><span class="ts-label">Kanäle</span><span class="ts-val">Dual</span></div>
                </div>
            </div>
        </div>

        <!-- PROCESS LIST -->
        <div class="tm-proc-table">
            <div class="tm-proc-header">
                <span style="flex:3">Name</span>
                <span>CPU</span>
                <span>RAM</span>
                <span>Disk</span>
                <span>Netz</span>
            </div>
            <div class="tm-proc-body">
                <div class="tm-proc-row scan-row">
                    <span class="proc-name"><i class="fas fa-terminal" style="color:#3b82f6"></i> Commander.exe</span>
                    <span class="proc-cpu anim-cpu-1">12.4%</span>
                    <span>142 MB</span><span class="green">0.1 MB/s</span><span>—</span>
                </div>
                <div class="tm-proc-row">
                    <span class="proc-name"><i class="fas fa-globe" style="color:#f59e0b"></i> chrome.exe (14)</span>
                    <span class="proc-cpu anim-cpu-2">8.1%</span>
                    <span>1.24 GB</span><span>—</span><span class="blue">1.2 MB/s</span>
                </div>
                <div class="tm-proc-row">
                    <span class="proc-name"><i class="fas fa-code" style="color:#8b5cf6"></i> CodeBench.exe</span>
                    <span class="proc-cpu anim-cpu-3">4.7%</span>
                    <span>312 MB</span><span class="yellow">0.4 MB/s</span><span>—</span>
                </div>
                <div class="tm-proc-row">
                    <span class="proc-name"><i class="fas fa-shield-alt" style="color:#10b981"></i> WinDefender.exe</span>
                    <span class="proc-cpu anim-cpu-4">2.3%</span>
                    <span>89 MB</span><span>—</span><span>—</span>
                </div>
                <div class="tm-proc-row">
                    <span class="proc-name"><i class="fas fa-database" style="color:#ef4444"></i> SQLServer.exe</span>
                    <span class="proc-cpu">1.9%</span>
                    <span>487 MB</span><span class="yellow">2.1 MB/s</span><span>—</span>
                </div>
                <div class="tm-proc-row dim">
                    <span class="proc-name"><i class="fas fa-cog" style="color:#64748b"></i> svchost.exe (22)</span>
                    <span class="proc-cpu">0.4%</span>
                    <span>234 MB</span><span>—</span><span>—</span>
                </div>
            </div>
        </div>

        <!-- STATUS BAR -->
        <div class="tm-statusbar">
            <span>Prozesse: 142</span><span class="sep">|</span>
            <span>CPU: <span class="cpu-status-anim">34%</span></span><span class="sep">|</span>
            <span>RAM: 36%</span><span class="sep">|</span>
            <span style="color:#10b981"><i class="fas fa-circle" style="font-size:0.5rem;"></i> System normal</span>
        </div>

    </div>
</div>

<style>
.tm-app { width:100vw; height:100vh; display:flex; background:#020617; font-family:'Plus Jakarta Sans',-apple-system,sans-serif; font-size:0.82rem; color:#e2e8f0; overflow:hidden; }

/* SIDEBAR */
.tm-sidebar { width:200px; flex-shrink:0; background:#0f172a; border-right:1px solid #1e293b; display:flex; flex-direction:column; }
.tm-brand { display:flex; align-items:center; gap:10px; padding:20px; font-weight:900; color:#3b82f6; border-bottom:1px solid #1e293b; font-size:0.95rem; }
.tm-brand i { font-size:1.2rem; }
.tm-nav { padding:12px 8px; flex:1; }
.tm-nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:#64748b; font-weight:600; cursor:default; margin-bottom:3px; transition:0.2s; }
.tm-nav-item.active { background:rgba(59,130,246,0.12); color:#3b82f6; }
.tm-nav-item i { width:16px; text-align:center; }
.tm-sys-info { border-top:1px solid #1e293b; padding:14px; }
.tm-sys-row { display:flex; align-items:center; gap:8px; color:#334155; font-size:0.72rem; font-weight:600; margin-bottom:6px; }

/* MAIN */
.tm-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.tm-topbar { background:#0d1b2a; border-bottom:1px solid #1e293b; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:44px; }
.tm-tabs { display:flex; gap:0; }
.tm-tab { padding:0 20px; height:44px; display:flex; align-items:center; font-size:0.78rem; font-weight:700; color:#64748b; border-bottom:2px solid transparent; cursor:default; }
.tm-tab.active { color:#3b82f6; border-bottom-color:#3b82f6; }
.tm-search-box { display:flex; align-items:center; gap:8px; background:#1e293b; padding:6px 14px; border-radius:6px; color:#475569; font-size:0.72rem; border:1px solid #334155; }

/* CARDS */
.tm-cards-row { display:grid; grid-template-columns:1fr 1fr; gap:0; border-bottom:1px solid #1e293b; }
.tm-stat-card { padding:18px 22px; border-right:1px solid #1e293b; }
.tm-stat-card:last-child { border-right:none; }
.tm-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.tm-card-title { font-weight:800; color:#e2e8f0; font-size:0.88rem; margin-bottom:3px; }
.tm-card-sub { font-size:0.68rem; color:#475569; font-weight:600; }
.tm-big-val { font-size:1.8rem; font-weight:900; line-height:1; color:#3b82f6; }
.tm-big-val span { font-size:0.9rem; font-weight:700; }

/* CPU GRAPH */
.tm-cpu-graph { height:60px; margin-bottom:12px; }
.cpu-bar-wrap { display:flex; align-items:flex-end; gap:4px; height:100%; }
.cpu-bar { flex:1; background:#3b82f6; border-radius:3px 3px 0 0; min-height:4px; }
.b1  { animation: bar 2.1s ease-in-out infinite; }
.b2  { animation: bar 1.8s ease-in-out infinite 0.1s; }
.b3  { animation: bar 2.4s ease-in-out infinite 0.2s; }
.b4  { animation: bar 1.6s ease-in-out infinite 0.15s; }
.b5  { animation: bar 2.2s ease-in-out infinite 0.3s; }
.b6  { animation: bar 1.9s ease-in-out infinite 0.05s; }
.b7  { animation: bar 2.6s ease-in-out infinite 0.25s; }
.b8  { animation: bar 1.7s ease-in-out infinite 0.35s; }
.b9  { animation: bar 2.0s ease-in-out infinite 0.4s; }
.b10 { animation: bar 2.3s ease-in-out infinite 0.1s; }
.b11 { animation: bar 1.8s ease-in-out infinite 0.2s; }
.b12 { animation: bar 2.5s ease-in-out infinite 0.15s; }
.b13 { animation: bar 1.6s ease-in-out infinite 0.3s; }
.b14 { animation: bar 2.1s ease-in-out infinite 0.45s; }
.b15 { animation: bar 1.9s ease-in-out infinite 0.05s; }
.b16 { animation: bar 2.4s ease-in-out infinite 0.2s; }
@keyframes bar {
    0%,100% { height: 20%; opacity:0.5; }
    25% { height: 80%; opacity:1; }
    50% { height: 35%; opacity:0.7; }
    75% { height: 65%; opacity:0.9; }
}

/* RAM RING */
.tm-ram-ring-wrap { display:flex; align-items:center; justify-content:center; position:relative; height:80px; margin-bottom:12px; }
.tm-ring { width:80px; height:80px; }
.ring-fill { animation:ringAnim 4s ease-in-out infinite; }
@keyframes ringAnim {
    0%,100% { stroke-dashoffset:147; }
    50% { stroke-dashoffset:120; }
}
.tm-ring-label { position:absolute; font-size:0.9rem; font-weight:900; color:#3b82f6; }

/* CARD STATS */
.tm-card-stats { display:flex; gap:20px; }
.ts-label { display:block; font-size:0.65rem; color:#475569; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.ts-val { display:block; font-size:0.82rem; font-weight:800; color:#cbd5e1; margin-top:2px; }
.ts-val.blue { color:#3b82f6; }

/* PROCESS TABLE */
.tm-proc-table { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.tm-proc-header { display:flex; padding:10px 22px; background:#0f172a; border-bottom:1px solid #1e293b; font-size:0.68rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:0.5px; }
.tm-proc-header span { flex:1; }
.tm-proc-header span:first-child { flex:3; }
.tm-proc-body { flex:1; overflow-y:auto; }
.tm-proc-row { display:flex; padding:11px 22px; border-bottom:1px solid rgba(30,41,59,0.5); align-items:center; transition:0.3s; }
.tm-proc-row span { flex:1; }
.tm-proc-row span:first-child { flex:3; }
.tm-proc-row.dim { opacity:0.35; }
.proc-name { display:flex; align-items:center; gap:10px; font-weight:600; color:#e2e8f0; font-size:0.8rem; }
.proc-name i { width:16px; text-align:center; }
.proc-cpu { font-weight:800; font-family:monospace; }
.green { color:#10b981; }
.blue { color:#3b82f6; }
.yellow { color:#f59e0b; }

/* ROW SCAN ANIMATION */
.scan-row { animation:rowHighlight 3s ease-in-out infinite; }
@keyframes rowHighlight {
    0%,100% { background:transparent; }
    30%,70% { background:rgba(59,130,246,0.08); }
}

/* CPU VALUES FLUCTUATION */
.anim-cpu-1 { animation:cpu1 2.8s ease-in-out infinite; color:#3b82f6; }
.anim-cpu-2 { animation:cpu2 3.2s ease-in-out infinite; color:#f59e0b; }
.anim-cpu-3 { animation:cpu3 2.5s ease-in-out infinite; color:#8b5cf6; }
.anim-cpu-4 { animation:cpu4 3.6s ease-in-out infinite; }
@keyframes cpu1 { 0%,100%{content:'12.4%'} 25%{color:#ef4444} 50%{color:#3b82f6} }
@keyframes cpu2 { 0%,100%{opacity:1} 50%{opacity:0.6} }
@keyframes cpu3 { 0%,100%{opacity:1} 40%{opacity:0.5} }
@keyframes cpu4 { 0%,100%{opacity:1} 60%{opacity:0.4} }

.cpu-status-anim { animation:cpuStatus 3s ease-in-out infinite; }
@keyframes cpuStatus { 0%,100%{color:#94a3b8} 50%{color:#3b82f6} }

/* STATUS BAR */
.tm-statusbar { background:#0f172a; border-top:1px solid #1e293b; padding:9px 22px; display:flex; align-items:center; gap:12px; font-size:0.7rem; color:#475569; font-weight:600; }
.sep { color:#1e293b; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#020617; }
::-webkit-scrollbar-thumb { background:#1e293b; border-radius:10px; }
</style>
@endsection

@section('app-description')
    <span style="color:#3b82f6; font-weight:800; text-transform:uppercase; letter-spacing:2px; font-size:0.8rem;">Windows Software</span>
    <h1 style="margin-top:10px;">Kotsch<span style="color:#3b82f6;">.TaskManager</span></h1>
    <p>Echtzeit-Überwachung aller Systemressourcen. CPU-Graphen, RAM-Analyse und Prozessverwaltung in einer schnellen, nativen Windows-Anwendung.</p>
@endsection

@section('app-specs')
    <li><span>Version</span><span>3.1.0</span></li>
    <li><span>Plattform</span><span>Windows 10/11</span></li>
    <li><span>Refresh-Rate</span><span>500 ms</span></li>
    <li><span>Sprache</span><span>C++ / WinAPI</span></li>
    <li><span>Größe</span><span>2.8 MB</span></li>
@endsection