@extends('layouts.app')

@section('page_title', 'Die Kaffeeliste - Importe')

@section('content')
    <section class="hero">
        <div>
            <p class="hero__kicker">Importe</p>
            <h2 class="hero__title">Importe</h2>
            <p class="hero__lead">
                CSV-Uploads und Legacy-Datenuebernahmen bleiben moeglich, laufen aber als
                nachvollziehbare Importjobs mit Vorschau, Mapping und Statusmeldungen.
            </p>
        </div>
        <div class="toolbar">
            <span class="badge">CSV optional</span>
            <span class="badge">Cron ready</span>
            <span class="badge badge--solid">Migration friendly</span>
        </div>
    </section>

    <section class="split">
        <article class="panel">
            <h3>Import-Pipeline</h3>
            <div class="timeline">
                <div class="timeline__item">
                    <p class="timeline__title">1. Datei pruefen</p>
                    <p class="timeline__meta">Format, Pflichtspalten und Deduplikation werden vorab validiert.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">2. Mapping anwenden</p>
                    <p class="timeline__meta">Legacy-Zahlungen und Verbrauch werden auf Members, Payments und Ledger abgebildet.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">3. Job ausfuehren</p>
                    <p class="timeline__meta">Verarbeitung laeuft ueber Cron und schreibt einen nachvollziehbaren Status.</p>
                </div>
            </div>
        </article>

        <article class="table-card">
            <div class="table-card__header">
                <div>
                    <p class="card__eyebrow">Queue</p>
                    <h3>Letzte Importjobs</h3>
                </div>
                <span class="pill">Backoffice</span>
            </div>
            <div class="table-card__body">
                <table>
                    <thead>
                        <tr>
                            <th>Job</th>
                            <th>Quelle</th>
                            <th>Ergebnis</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>members-2026-03</td>
                            <td>Legacy Export</td>
                            <td>48 Datensaetze</td>
                            <td><span class="status">Fertig</span></td>
                        </tr>
                        <tr>
                            <td>payments-2026-03</td>
                            <td>CSV PayPal</td>
                            <td>12 Buchungen</td>
                            <td><span class="status">Verarbeitet</span></td>
                        </tr>
                        <tr>
                            <td>ledger-replay</td>
                            <td>Archivbestand</td>
                            <td>3 Warnungen</td>
                            <td><span class="status status--warning">Pruefen</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>
    </section>
@endsection
