@extends('layouts.app')

@section('page_title', 'Kaffeeliste SaaS - Ledger')

@section('content')
    <section class="hero">
        <div>
            <p class="hero__kicker">Accounting flow</p>
            <h2 class="hero__title">Ledger fuer Buchungen, Verbrauch und Korrekturen.</h2>
            <p class="hero__lead">
                Die fachliche Kernlogik der alten Kaffeeliste bleibt erhalten: Einzahlungen, Striche und Saldo
                werden in einer nachvollziehbaren Buchungsspur zusammengefuehrt.
            </p>
        </div>
        <div class="toolbar">
            <span class="badge">Saldo: 7,50 EUR</span>
            <span class="badge">Korrekturen: 2</span>
            <span class="badge badge--solid">Buchungsspur geordnet</span>
        </div>
    </section>

    <section class="grid grid--3">
        <article class="card metric">
            <p class="metric__label">Offener Saldo</p>
            <div class="metric__value">7,50 EUR</div>
            <p class="muted">Positiv, daher kein Handlungsdruck.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Verbrauchsumfang</p>
            <div class="metric__value">5 Striche</div>
            <p class="muted">Aktueller Buchungsumfang im laufenden Zeitraum.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Letzte Korrektur</p>
            <div class="metric__value">Heute</div>
            <p class="muted">Sichtbar fuer Admins und Audit.</p>
        </article>
    </section>

    <section class="table-card" style="margin-top: 18px;">
        <div class="table-card__header">
            <div>
                <p class="card__eyebrow">Buchungen</p>
                <h3>Ledger-Eintraege</h3>
            </div>
            <span class="pill">Audit trail</span>
        </div>
        <div class="table-card__body">
            <table>
                <thead>
                    <tr>
                        <th>Datum</th>
                        <th>Beschreibung</th>
                        <th>Typ</th>
                        <th>Betrag</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>21.03.2026</td>
                        <td>Einzahlung Demo-Workspace</td>
                        <td>Payment</td>
                        <td>+10,00 EUR</td>
                    </tr>
                    <tr>
                        <td>21.03.2026</td>
                        <td>2 Striche Kaffee</td>
                        <td>Consumption</td>
                        <td>-2,50 EUR</td>
                    </tr>
                    <tr>
                        <td>20.03.2026</td>
                        <td>Manuelle Korrektur</td>
                        <td>Adjustment</td>
                        <td>+0,50 EUR</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
@endsection
