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

{% block title %}Tickets kaufen{% endblock %}

{% block body %}
    <div class="min-h-screen bg-white relative overflow-hidden">
        <header class="w-full bg-white/90 backdrop-blur-md shadow-lg fixed top-0 z-50 border-b border-gray-100">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex justify-between items-center">
                <a href="{{ path('app_home') }}" class="flex items-center space-x-2 group">
                    <img src="{{ asset('images/logo.png') }}" alt="Logo" class="w-32 sm:w-36 md:w-40 h-auto group-hover:opacity-90 transition-opacity" />
                </a>
                <a href="{{ path('app_home') }}" class="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white px-6 py-2.5 rounded-full text-sm font-medium shadow-md hover:shadow-lg transition-all duration-300 flex items-center space-x-2">
                    <twig:ux:icon name="line-md:home" class="w-4 h-4" />
                    <span>Zurück zur Startseite</span>
                </a>
            </div>
        </header>

        <main class="container mx-auto px-4 sm:px-6 lg:px-8 pt-24 sm:pt-28 md:pt-32 pb-16 sm:pb-20 flex flex-col items-center justify-center relative z-10">
            <div class="w-full max-w-3xl">
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-8 tracking-tight leading-tight">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-orange-500">Tickets kaufen</span>
                </h1>

                <div class="bg-white/90 backdrop-blur-md shadow-2xl rounded-3xl p-8 md:p-10 mb-12 transform transition-all duration-300 border border-gray-100">
                    <div data-controller="form" class="space-y-8">
                        <div class="hidden" data-form-target="key">{{ env('STRIPE_PUBLIC_KEY')}}</div>

                        <section>
                            <h2 class="text-2xl font-semibold mb-6 flex items-center space-x-3">
                                <twig:ux:icon name="mdi:user-circle" class="w-6 h-6 text-orange-500" />
                                <span>Persönliche Daten</span>
                            </h2>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                <div class="relative">
                                    <twig:ux:icon name="mdi:user-circle" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                                    <input name="firstname" data-form-target="firstname" class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" type="text" placeholder="Vorname*" required>
                                </div>
                                <div class="relative">
                                    <twig:ux:icon name="mdi:user-circle" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                                    <input name="lastname" data-form-target="lastname" class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" type="text" placeholder="Nachname*" required>
                                </div>
                                <div class="relative">
                                    <twig:ux:icon name="mdi:envelope" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                                    <input name="email" data-form-target="email" class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" type="email" placeholder="E-Mail*" required>
                                </div>
                                <div class="relative">
                                    <twig:ux:icon name="ic:baseline-phone" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                                    <input name="phone" data-form-target="phone" class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" type="tel" placeholder="Telefon (optional)">
                                </div>
                            </div>
                        </section>

                        <div class="h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent"></div>

                        <section>
                            <h2 class="text-2xl font-semibold mb-6 flex items-center space-x-3">
                                <twig:ux:icon name="mingcute:ticket-fill" class="w-6 h-6 text-orange-500" />
                                <span>Tickets</span>
                            </h2>

                            <div class="forms space-y-4">
                                {% include 'ticket/_partials/_form.html.twig' %}
                            </div>

                            <div class="flex items-center justify-between mt-6 pt-4">
                                <button data-action="form#addEntry" type="button" class="flex items-center space-x-2 text-orange-500 hover:text-orange-600 transition-colors px-4 py-2 rounded-lg hover:bg-orange-50">
                                    <twig:ux:icon name="line-md:plus-circle-filled" class="w-5 h-5" />
                                    <span>Ticket hinzufügen</span>
                                </button>

                                <button type="submit" data-action="form#submit" data-form-target="submit" class="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white px-8 py-3 rounded-xl text-sm font-medium shadow-md hover:shadow-lg transition-all duration-300 flex items-center space-x-2">
                                    <span>Jetzt bestellen</span>
                                    <twig:ux:icon name="line-md:arrow-right-circle" class="arrow w-4 h-4" />
                                    <twig:ux:icon name="loader" class="loader hidden w-4 h-4 animate-spin" />
                                </button>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </main>
    </div>
{% endblock %}