{% extends 'base.html.twig' %}

{% block title %}Anbieter Registrierung Schritt 3 | Wanted{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}stitch-page{% endblock %}

{% block javascripts %}
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const input = document.getElementById('reg-profile-video-input');
            const nameEl = document.querySelector('[data-reg-profile-video-filename]');
            if (!input || !nameEl) {
                return;
            }
            input.addEventListener('change', () => {
                const f = input.files && input.files[0];
                nameEl.textContent = f ? f.name : '';
            });
        });
    </script>
{% endblock %}

{% block body %}
<section class="bg-[#0e0e0e] text-white min-h-screen pb-32">
    <header class="w-full top-0 sticky z-50 bg-[#0e0e0e]">
        <div class="flex items-center justify-between px-6 py-4 w-full">
            <div class="flex items-center gap-4">
                <a href="{{ path('app_register', {role: 'provider', step: '2'}) }}" class="text-neutral-400 p-2 rounded-full">
                    <span class="material-symbols-outlined">arrow_back</span>
                </a>
                <h1 class="text-lg font-bold tracking-tight text-[#FF5C00]">Als Anbieter registrieren</h1>
            </div>
            <a href="{{ path('app_feed') }}"><img alt="Logo" class="h-6 w-auto" src="{{ asset('assets/img/top_logo.png') }}"/></a>
        </div>
        <div class="bg-[#131313] h-[2px] w-full mt-auto"></div>
    </header>

    <main class="max-w-2xl mx-auto px-6 pt-12">
        <section class="mb-12">
            <span class="text-[#ff9064] text-xs uppercase tracking-[0.2em] font-bold mb-3 block">Schritt 3 von 3</span>
            <h2 class="text-4xl md:text-5xl font-extrabold tracking-tighter mb-4">Finaler <span class="text-[#ff9064] italic">Check.</span></h2>
            <p class="text-[#adaaaa] text-lg max-w-md">Pruefe dein Profil noch einmal, bevor es live geht.</p>
        </section>

        <div class="bg-[#131313] rounded-xl p-8 space-y-4">
            <h3 class="text-3xl font-bold">{{ provider.company_name ?: 'Anbietername' }}</h3>
            <p class="text-[#adaaaa]">{{ providerCategoryLabel ?: 'Kategorie' }}</p>
            <p class="text-[#adaaaa] italic">{{ provider.about ?: 'Bio folgt...' }}</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 pt-4">
                <div class="bg-[#20201f] rounded-xl p-4"><p class="text-xs text-[#adaaaa]">Stadt</p><p>{{ provider.city ?: '-' }}</p></div>
                <div class="bg-[#20201f] rounded-xl p-4"><p class="text-xs text-[#adaaaa]">Adresse</p><p>{{ provider.address ?: '-' }}</p></div>
                <div class="bg-[#20201f] rounded-xl p-4"><p class="text-xs text-[#adaaaa]">Telefon</p><p>{{ provider.phone ?: '-' }}</p></div>
                <div class="bg-[#20201f] rounded-xl p-4"><p class="text-xs text-[#adaaaa]">Webseite</p><p class="break-all">{{ provider.website ?: '-' }}</p></div>
            </div>
        </div>

        {% for message in app.flashes('error') %}
            <p class="mt-6 text-red-400 text-sm">{{ message }}</p>
        {% endfor %}

        <form method="post" action="{{ path('app_register', {role: 'provider', step: '3-1'}) }}" enctype="multipart/form-data" class="mt-10 space-y-6">
            <section>
                <span class="text-xs uppercase tracking-widest text-[#767575] font-bold mb-3 ml-1 block">Profilvideo (optional)</span>
                <label for="reg-profile-video-input" class="relative block cursor-pointer group">
                    <div class="aspect-[4/5] w-full max-w-md mx-auto rounded-xl bg-[#1a1a1a] flex flex-col items-center justify-center overflow-hidden border-2 border-dashed border-[#484847]/30 transition-colors group-hover:border-[#ff9064]/40 group-focus-within:border-[#ff9064]/50">
                        <span class="sr-only">Videodatei auswaehlen</span>
                        <div class="flex flex-col items-center p-8 text-center pointer-events-none">
                            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-[#ff5c00] to-[#ff8a00] flex items-center justify-center shadow-lg mb-4">
                                <span class="material-symbols-outlined text-white text-3xl" style="font-variation-settings: 'FILL' 1;">videocam</span>
                            </div>
                            <h3 class="font-bold text-xl mb-1 text-white">Profilvideo hochladen</h3>
                            <p class="text-[#767575] text-sm px-6 max-w-sm">Zeige deine Energie in 15 Sekunden oder weniger.</p>
                            <p class="text-[#5a5a5a] text-xs px-6 mt-4 max-w-sm leading-relaxed">Erscheint nach Team-Pruefung oeffentlich; dein Account funktioniert sofort.</p>
                        </div>
                    </div>
                    <input
                        id="reg-profile-video-input"
                        type="file"
                        name="profile_video"
                        accept="video/mp4,video/webm,video/quicktime,.mp4,.webm,.mov"
                        class="sr-only"
                    >
                </label>
                <p class="mt-3 text-center text-sm text-[#adaaaa] min-h-[1.25rem]" data-reg-profile-video-filename aria-live="polite"></p>
                {% if hasProfileVideoDraft|default(false) %}
                    <p class="mt-2 text-center text-emerald-400 text-sm font-semibold">Video gespeichert &mdash; wird mit der Registrierung eingereicht. Tippe die Flaeche, um die Datei zu wechseln.</p>
                {% endif %}
            </section>
            <button type="submit" class="w-full bg-gradient-to-r from-[#ff9064] to-[#ff7941] text-black font-extrabold text-lg py-5 rounded-full">Weiter zur Anmeldung (E-Mail)</button>
        </form>
    </main>
</section>
{% endblock %}