@extends('layouts.app')

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

@section('content')
    <section class="hero">
        <div>
            <p class="hero__kicker">Notifications</p>
            <h2 class="hero__title">Benachrichtigungen werden planbare Betriebsprozesse.</h2>
            <p class="hero__lead">
                Die alte Sammelmail-Funktion geht in ein Modul ueber, das Versandregeln,
                Cron-Ausfuehrung und Ergebnisprotokolle sauber trennt. Damit werden
                Schuldenhinweise und Service-Meldungen tenantfaehig.
            </p>
        </div>
        <div class="toolbar">
            <span class="badge">Mail templates</span>
            <span class="badge">Cron dispatch</span>
            <span class="badge badge--solid">Audit logs</span>
        </div>
    </section>

    <section class="split">
        <article class="panel">
            <h3>Benachrichtigungsarten</h3>
            <div class="timeline">
                <div class="timeline__item">
                    <p class="timeline__title">Saldo-Erinnerung</p>
                    <p class="timeline__meta">Automatisch bei negativem Kontostand oder Schwellwerten.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">Import- und Exportstatus</p>
                    <p class="timeline__meta">Backoffice meldet Erfolge, Warnungen und Fehler an Admins.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">Service-Kommunikation</p>
                    <p class="timeline__meta">Hinweise zu Preisen, Wartung oder Monatsabschluss zentral ausspielen.</p>
                </div>
            </div>
        </article>

        <article class="table-card">
            <div class="table-card__header">
                <div>
                    <p class="card__eyebrow">Versandprotokoll</p>
                    <h3>Letzte Benachrichtigungen</h3>
                </div>
                <span class="pill">Tenant scoped</span>
            </div>
            <div class="table-card__body">
                <table>
                    <thead>
                        <tr>
                            <th>Typ</th>
                            <th>Empfaenger</th>
                            <th>Ausloeser</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Saldo-Erinnerung</td>
                            <td>6 Mitglieder</td>
                            <td>negativer Kontostand</td>
                            <td><span class="status">Gesendet</span></td>
                        </tr>
                        <tr>
                            <td>Import-Report</td>
                            <td>Tenant Admin</td>
                            <td>Importjob fertig</td>
                            <td><span class="status">Bereitgestellt</span></td>
                        </tr>
                        <tr>
                            <td>Service-Hinweis</td>
                            <td>alle Mitglieder</td>
                            <td>Preisanpassung</td>
                            <td><span class="status status--warning">Eingeplant</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>
    </section>
@endsection
