@page "/verify/{Token:guid}"
@using FoodsharingSiegen.Contracts.Entity
@using System.IO
@layout LoginLayout

<PageTitle>Identitätsprüfung - @AppSettings.Value.Terms.Title</PageTitle>

<div class="row min-vh-100 align-items-center-sm justify-content-center p-0 p-md-5 m-0">
    <div class="col-12 col-md-10 col-lg-8 col-xl-5 login-form p-2">
        <div class="card shadow-sm border-0">
            <div class="card-body p-3 p-md-5">
                <div class="text-center mb-4">

                    <h5 class="mb-0 text-success d-block d-sm-none"><i
                        class="fa-solid fa-address-card me-2"></i><br>Identitätsprüfung</h5>
                        <h4 class="mb-0 text-success d-none d-sm-block"><i
                            class="fa-solid fa-address-card me-2"></i>Identitätsprüfung</h4>

                            <p class="text-muted mt-2">@(AppSettings.Value.Terms.Title)</p>
                        </div>

                        @if (_isLoading)
                        {
                            <div class="text-center my-5">
                                <div class="spinner-border text-success" role="status">
                                    <span class="visually-hidden">Laden...</span>
                                </div>
                                <p class="mt-3 text-muted">Lade Daten...</p>
                            </div>
                        }
                        else if (_prospect == null)
                        {
                            <div class="alert alert-danger" role="alert">
                                <i class="fa-solid fa-triangle-exclamation me-2"></i> @(_message ?? "Der Link ist ungültig oder abgelaufen. Bitte fordere einen neuen Link an.")
                            </div>
                        }
                        else
                        {
                            <div class="alert alert-info mb-4">
                                <strong>Hinweis:</strong> Dies ist die Upload-Seite für Foodsaver <b>@_prospect.FsId</b>.
                            </div>

                            <div class="mb-3 text-center">
                        
                                @if (_uploadedCount >= 5)
                                {
                                    <div class="alert alert-warning py-2 mb-0">Du hast die maximale Anzahl von 5 Bildern erreicht.</div>
                                }
                                else
                                {
                                    <InputFile id="fileInput" OnChange="OnInputFileChange" class="d-none" accept="image/*" />
                                    <label for="fileInput" class="btn btn-outline-success w-100" style="height: 5rem;">
                                        <i class="fa-solid fa-images me-2"></i>Bild auswählen
                                    </label>
                                }
                            </div>

                            @if (!string.IsNullOrEmpty(_message))
                            {
                                <div class="alert alert-@(_isSuccess ? "success" : "danger") alert-dismissible fade show" role="alert">
                                    @_message
                                    <button type="button" class="btn-close" @onclick="() => _message = null"></button>
                                </div>
                            }
                    
                            @if (_isSuccess)
                            {
                                <div class="alert alert-success text-center">
                                    <i class="fa-solid fa-check-circle fa-2x mb-2"></i><br />
                                    Vielen Dank für den Upload. Wenn du alle benötigten Bilder hochgeladen hast, kannst du die Seite
                                    schließen. Du musst nichts weiter tun.
                                </div>
                            }

                            @if (_uploadedCount < 5)
                            {
                                <div class="text-center mb-3">
                                    <span class="badge bg-secondary text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder
                                        hochgeladen werden</span>
                                    </div>
                                }

                                <div class="mb-1 text-muted">
                                    Um dich auf der Foodsharing-Plattform als Foodsaver freischalten zu können, muss ein*e
                                    Botschafter*in Name, Adresse und Geburtsdatum im Profil des Foodsavers auf Korrektheit durch
                                    Vergleich mit einem Ausweisdokument prüfen. Das ist wichtig, damit die <a
                                    href="https://wiki.foodsharing.network/wiki/Rechtsvereinbarung"
                                    target="_blank">Rechtsvereinbarung</a> Bestand hat und wir die Zusagen erfüllen, die wir den
                                    Spenderbetrieben geben.<br>
                                </div>

                                <div class="mb-3 text-muted">
                                    <a class="mt-3"
                                       href="https://wiki.foodsharing.network/wiki/Foodsaver#3.4_Verifizierung_(der_Daten),_Foodsaver-Ausweis_und_Freischaltung"
                                       target="_blank">Mehr dazu im Wiki</a>.
                                </div>

                                <div class="mb-4">
                                    <h5 class="fw-bold">Anleitung:</h5>
                                    <ul class="text-muted">
                                        <li>Lade hier die Vorder- und Rückseite deines Personalausweises oder Reisepasses hoch</li>
                                        <li>Dein Name und Adresse müssen gut und lesbar erkennbar sein</li>
                                        <li>Wir nutzen diese Bilder ausschließlich zur Identitätsprüfung</li>
                                        <li>Ausschließlich die Botschafter haben Zugriff auf diese Bilder</li>
                                        <li>Die Bilder werden nach der Überprüfung sofort und unwiderruflich von uns gelöscht</li>
                                        <li>Bereits hochgeladene Bilder werden hier hier aus Datenschutzgründen nicht angezeigt</li>
                                    </ul>
                                </div>

                                @if (_isUploading)
                                {
                                    <div class="text-center my-3">
                                        <div class="spinner-border text-primary spinner-border-sm" role="status">
                                            <span class="visually-hidden">Laden...</span>
                                        </div>
                                        <span class="ms-2">Bilder werden hochgeladen und verarbeitet...</span>
                                    </div>
                                }
                            }
                        </div>
                    </div>
                </div>
            </div>