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

@section('title', 'Prüfmittel Manager | kotsch.tech')
@section('meta_description', 'Prüfmittel Manager – die Enterprise-Software für die Verwaltung und Kalibrierung von Prüfmitteln. Fristenüberwachung, lückenlose Kalibrierhistorie und ISO-9001-konforme QS-Dokumentation.')

@section('bg-color', '#f8fafc')

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

    <!-- SIDEBAR -->
    <div class="pm-sidebar">
        <div class="pm-brand"><i class="fas fa-ruler-combined"></i> Prüfmittel</div>
        <nav class="pm-nav">
            <div class="pm-nav-item active"><i class="fas fa-list-check"></i> Bestand</div>
            <div class="pm-nav-item"><i class="fas fa-calendar-day"></i> Fristen</div>
            <div class="pm-nav-item"><i class="fas fa-clock-rotate-left"></i> Historie</div>
            <div class="pm-nav-item"><i class="fas fa-file-shield"></i> Zertifikate</div>
            <div class="pm-nav-item"><i class="fas fa-chart-line"></i> Berichte</div>
        </nav>
        <div class="pm-iso"><i class="fas fa-certificate"></i> ISO 9001 konform</div>
    </div>

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

        <!-- TOPBAR -->
        <div class="pm-topbar">
            <h2>Prüfmittel-Bestand</h2>
            <div class="pm-search"><i class="fas fa-search"></i><input type="text" placeholder="Inventar-Nr. suchen …" readonly></div>
        </div>

        <!-- KPI ROW -->
        <div class="pm-kpis">
            <div class="pm-kpi"><div class="pm-kpi-val">1.284</div><div class="pm-kpi-lbl">Prüfmittel gesamt</div></div>
            <div class="pm-kpi"><div class="pm-kpi-val green">1.197</div><div class="pm-kpi-lbl">Gültig kalibriert</div></div>
            <div class="pm-kpi"><div class="pm-kpi-val amber">63</div><div class="pm-kpi-lbl">Frist &lt; 30 Tage</div></div>
            <div class="pm-kpi"><div class="pm-kpi-val red">24</div><div class="pm-kpi-lbl">Überfällig / gesperrt</div></div>
        </div>

        <!-- TABLE -->
        <div class="pm-table">
            <div class="pm-th">
                <span style="flex:1.4;">Inventar-Nr.</span>
                <span style="flex:2;">Prüfmittel</span>
                <span style="flex:1.2;">Nächste Kalibrierung</span>
                <span style="flex:1;">Status</span>
            </div>
            <div class="pm-tr">
                <span style="flex:1.4;" class="mono">PM-00412</span>
                <span style="flex:2;">Bügelmessschraube 0–25 mm</span>
                <span style="flex:1.2;" class="mono">14.09.2026</span>
                <span style="flex:1;"><em class="badge ok">Gültig</em></span>
            </div>
            <div class="pm-tr">
                <span style="flex:1.4;" class="mono">PM-00731</span>
                <span style="flex:2;">Drehmomentschlüssel 40–200 Nm</span>
                <span style="flex:1.2;" class="mono">02.07.2026</span>
                <span style="flex:1;"><em class="badge soon">28 Tage</em></span>
            </div>
            <div class="pm-tr">
                <span style="flex:1.4;" class="mono">PM-01098</span>
                <span style="flex:2;">Messschieber digital 150 mm</span>
                <span style="flex:1.2;" class="mono">11.06.2026</span>
                <span style="flex:1;"><em class="badge over">Überfällig</em></span>
            </div>
            <div class="pm-tr">
                <span style="flex:1.4;" class="mono">PM-00256</span>
                <span style="flex:2;">Höhenmessgerät 600 mm</span>
                <span style="flex:1.2;" class="mono">30.11.2026</span>
                <span style="flex:1;"><em class="badge ok">Gültig</em></span>
            </div>
            <div class="pm-tr">
                <span style="flex:1.4;" class="mono">PM-00873</span>
                <span style="flex:2;">Endmaßsatz Güteklasse 1</span>
                <span style="flex:1.2;" class="mono">19.08.2026</span>
                <span style="flex:1;"><em class="badge ok">Gültig</em></span>
            </div>
        </div>
    </div>
</div>

<style>
    .pm-app {
        width: 100vw; height: 100vh; display: flex; background: #f1f5f9;
        font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
        font-size: 0.85rem; color: #1e293b; overflow: hidden;
    }

    /* SIDEBAR */
    .pm-sidebar { width: 230px; flex-shrink: 0; background: #0f172a; color: #cbd5e1; display: flex; flex-direction: column; padding: 24px 0; }
    .pm-brand { display: flex; align-items: center; gap: 11px; padding: 0 22px 22px; font-weight: 900; font-size: 1.05rem; color: #fff; border-bottom: 1px solid #1e293b; }
    .pm-brand i { color: #3b82f6; }
    .pm-nav { flex: 1; padding: 16px 12px; }
    .pm-nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px; color: #94a3b8; font-weight: 600; margin-bottom: 4px; }
    .pm-nav-item i { width: 18px; text-align: center; }
    .pm-nav-item.active { background: rgba(59,130,246,0.16); color: #60a5fa; }
    .pm-iso { margin: 0 18px; padding: 12px 14px; border-radius: 10px; background: rgba(16,185,129,0.12); color: #34d399; font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; gap: 9px; }

    /* MAIN */
    .pm-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .pm-topbar { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 18px 30px; display: flex; align-items: center; justify-content: space-between; }
    .pm-topbar h2 { margin: 0; font-size: 1.05rem; font-weight: 900; color: #0f172a; }
    .pm-search { display: flex; align-items: center; gap: 10px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 15px; color: #94a3b8; }
    .pm-search input { border: none; background: transparent; outline: none; font-size: 0.78rem; width: 150px; color: #334155; }

    /* KPI */
    .pm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 24px 30px; }
    .pm-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px 22px; animation: pmFade 0.6s ease both; }
    .pm-kpi:nth-child(2){animation-delay:.1s} .pm-kpi:nth-child(3){animation-delay:.2s} .pm-kpi:nth-child(4){animation-delay:.3s}
    .pm-kpi-val { font-size: 1.9rem; font-weight: 900; color: #0f172a; line-height: 1; }
    .pm-kpi-val.green { color: #059669; } .pm-kpi-val.amber { color: #d97706; } .pm-kpi-val.red { color: #dc2626; }
    .pm-kpi-lbl { font-size: 0.74rem; color: #64748b; font-weight: 600; margin-top: 8px; }

    /* TABLE */
    .pm-table { flex: 1; margin: 0 30px 30px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
    .pm-th { display: flex; gap: 18px; padding: 14px 24px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; }
    .pm-tr { display: flex; gap: 18px; padding: 15px 24px; border-bottom: 1px solid #f1f5f9; align-items: center; animation: pmRow 0.5s ease both; }
    .pm-tr:last-child { border-bottom: none; }
    .pm-tr:nth-child(2){animation-delay:.1s} .pm-tr:nth-child(3){animation-delay:.2s} .pm-tr:nth-child(4){animation-delay:.3s} .pm-tr:nth-child(5){animation-delay:.4s}
    .mono { font-family: monospace; color: #475569; }
    .badge { font-style: normal; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 800; }
    .badge.ok { background: #dcfce7; color: #166534; }
    .badge.soon { background: #fef3c7; color: #92400e; animation: badgePulse 2s ease-in-out infinite; }
    .badge.over { background: #fee2e2; color: #991b1b; animation: badgePulse 1.4s ease-in-out infinite; }

    @keyframes pmFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes pmRow { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes badgePulse { 0%,100% { box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 0 4px rgba(220,38,38,0.08); } }

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

@section('app-description')
    <span style="color: var(--primary, #2563eb); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem;">B2B Enterprise Software</span>
    <h1 style="margin-top: 10px;">Prüfmittel<span style="color: var(--primary, #2563eb);"> Manager</span></h1>
    <p>Die Enterprise-Lösung für die Verwaltung und Kalibrierung von Prüfmitteln. Lückenlose Fristenüberwachung, vollständige Kalibrierhistorie und ISO-9001-konforme QS-Dokumentation – damit kein überfälliges Messmittel je in die Produktion gelangt.</p>
@endsection

@section('app-specs')
    <li><span>Version</span><span>7.3.0</span></li>
    <li><span>Plattform</span><span>Windows 10/11 / Server</span></li>
    <li><span>Norm</span><span>ISO 9001 / IATF 16949</span></li>
    <li><span>Datenbank</span><span>SQL Server / PostgreSQL</span></li>
    <li><span>Lizenz</span><span>Floating / On-Premise</span></li>
    <li><span>Größe</span><span>42 MB</span></li>
@endsection