@extends('layouts.app')

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

@section('content')
    <section class="hero">
        <div>
            <p class="hero__kicker">Payments</p>
            <h2 class="hero__title">Einzahlungen und Zahlungswege werden zu einem eigenen SaaS-Modul.</h2>
            <p class="hero__lead">
                Die fruehere Sammelerfassung bleibt als Kernfunktion erhalten, wird aber um
                Status, Referenzen und tenantbezogene Bezahlwege erweitert. So passen
                manuelle Buchung, PayPal und spaetere Automatisierungen in denselben Ablauf.
            </p>
        </div>
        <div class="toolbar">
            <span class="badge">PayPal optional</span>
            <span class="badge">Finance workflow</span>
            <span class="badge badge--solid">Saldo-relevant</span>
        </div>
    </section>

    <section class="grid grid--3">
        <article class="card metric">
            <p class="metric__label">Offene Zahlungen</p>
            <div class="metric__value">6</div>
            <p class="muted">Noch zu bestaetigende oder abzugleichende Vorgaege.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Monatssumme</p>
            <div class="metric__value">245 EUR</div>
            <p class="muted">Gebuchte Einzahlungen im aktuellen Abrechnungszeitraum.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Schnellwege</p>
            <div class="metric__value">3</div>
            <p class="muted">Bar, PayPal und spaetere Referenzimporte aus Drittsystemen.</p>
        </article>
    </section>

    <section class="split" style="margin-top: 18px;">
        <article class="table-card">
            <div class="table-card__header">
                <div>
                    <p class="card__eyebrow">Zahlungsjournal</p>
                    <h3>Letzte Zahlungseintraege</h3>
                </div>
                <span class="pill">Finance Sicht</span>
            </div>
            <div class="table-card__body">
                <table>
                    <thead>
                        <tr>
                            <th>Mitglied</th>
                            <th>Methode</th>
                            <th>Betrag</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Max Beispiel</td>
                            <td>PayPal</td>
                            <td>10,00 EUR</td>
                            <td><span class="status">Gebucht</span></td>
                        </tr>
                        <tr>
                            <td>Julia Betrieb</td>
                            <td>Bar</td>
                            <td>5,00 EUR</td>
                            <td><span class="status">Bestaetigt</span></td>
                        </tr>
                        <tr>
                            <td>Rene Muster</td>
                            <td>SEPA Import</td>
                            <td>15,00 EUR</td>
                            <td><span class="status status--warning">Pruefen</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>

        <article class="panel">
            <h3>Was aus dem Legacy-System bleibt</h3>
            <ul class="list-reset">
                <li><span class="status">Sammelerfassung</span> Admins buchen mehrere Einzahlungen in einem Schritt.</li>
                <li><span class="status">Dashboard-Link</span> Direkte Einzahlung oder Schuldenausgleich bleibt moeglich.</li>
                <li><span class="status">Ledger Sync</span> Jede Einzahlung wirkt unmittelbar auf den Kontostand.</li>
            </ul>
            <div class="note" style="margin-top: 18px;">
                Das Payments-Modul ersetzt keine Funktionalitaet, sondern gibt ihr eine saubere Prozessstruktur.
            </div>
        </article>
    </section>
@endsection
