<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Registrieren - {{ config('app.name', 'Veranstaltungen') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 py-12">
    <div class="w-full max-w-md">
        <!-- Logo / Header -->
        <div class="text-center mb-8">
            <a href="{{ url('/') }}" class="inline-flex items-center gap-2">
                <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center">
                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
            </a>
            <h1 class="mt-6 text-3xl font-bold text-gray-900 dark:text-white">Registrieren</h1>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                Erstellen Sie ein neues Konto, um zu beginnen
            </p>
        </div>

        <!-- Form -->
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8">
            <form id="registerForm" class="space-y-6" @submit.prevent="handleRegister">
                <!-- Name Field -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Vollständiger Name
                    </label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        placeholder="Max Mustermann"
                        required
                        autocomplete="name"
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition"
                    />
                    <span class="error-message text-red-600 dark:text-red-400 text-sm mt-1 hidden"></span>
                </div>

                <!-- Email Field -->
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        E-Mail Adresse
                    </label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        placeholder="name@example.com"
                        required
                        autocomplete="email"
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition"
                    />
                    <span class="error-message text-red-600 dark:text-red-400 text-sm mt-1 hidden"></span>
                </div>

                <!-- Password Field -->
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Passwort
                    </label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        placeholder="Mindestens 8 Zeichen"
                        required
                        autocomplete="new-password"
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition"
                    />
                    <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        Mindestens 8 Zeichen erforderlich
                    </div>
                    <span class="error-message text-red-600 dark:text-red-400 text-sm mt-1 hidden"></span>
                </div>

                <!-- Password Confirmation Field -->
                <div>
                    <label for="password_confirmation" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Passwort bestätigen
                    </label>
                    <input
                        type="password"
                        id="password_confirmation"
                        name="password_confirmation"
                        placeholder="Passwort wiederholen"
                        required
                        autocomplete="new-password"
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition"
                    />
                    <span class="error-message text-red-600 dark:text-red-400 text-sm mt-1 hidden"></span>
                </div>

                <!-- Terms -->
                <label class="flex items-start gap-2">
                    <input type="checkbox" name="agree_terms" required class="w-4 h-4 border border-gray-300 dark:border-gray-600 rounded accent-blue-600 mt-1">
                    <span class="text-sm text-gray-600 dark:text-gray-400">
                        Ich stimme den <a href="#" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Nutzungsbedingungen</a> zu
                    </span>
                </label>

                <!-- Submit Button -->
                <button
                    type="submit"
                    class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center gap-2"
                >
                    <span class="loading hidden">
                        <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </span>
                    <span class="text">Registrieren</span>
                </button>

                <!-- Success/Error Message -->
                <div id="messageContainer"></div>
            </form>

            <!-- Divider -->
            <div class="mt-8 border-t border-gray-300 dark:border-gray-700"></div>

            <!-- Login Link -->
            <div class="mt-6 text-center">
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Bereits registriert?
                    <a href="{{ url('/login') }}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-semibold">
                        Jetzt anmelden
                    </a>
                </p>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('registerForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const passwordConfirmation = document.getElementById('password_confirmation').value;
            const btn = e.target.querySelector('button[type="submit"]');
            const loadingSpan = btn.querySelector('.loading');
            const textSpan = btn.querySelector('.text');

            // Clear previous errors
            document.querySelectorAll('.error-message').forEach(el => {
                el.classList.add('hidden');
                el.textContent = '';
            });

            // Validate
            if (password !== passwordConfirmation) {
                document.querySelector('input[name="password_confirmation"]').parentElement.querySelector('.error-message').textContent = 'Passwörter stimmen nicht überein';
                document.querySelector('input[name="password_confirmation"]').parentElement.querySelector('.error-message').classList.remove('hidden');
                return;
            }

            // Show loading state
            loadingSpan.classList.remove('hidden');
            textSpan.textContent = 'Wird registriert...';
            btn.disabled = true;

            try {
                const response = await fetch('/api/auth/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({
                        name,
                        email,
                        password,
                        password_confirmation: passwordConfirmation,
                    }),
                });

                const data = await response.json();

                if (response.ok && data.success) {
                    // Store token
                    localStorage.setItem('auth_token', data.token);
                    localStorage.setItem('user', JSON.stringify(data.user));

                    // Show success message
                    showMessage('Registrierung erfolgreich! Sie werden weitergeleitet...', 'success');

                    // Redirect after 1.5 seconds
                    setTimeout(() => {
                        window.location.href = '/';
                    }, 1500);
                } else {
                    // Handle validation errors
                    if (data.errors) {
                        Object.keys(data.errors).forEach(field => {
                            const input = document.getElementById(field);
                            if (input) {
                                const errorEl = input.parentElement.querySelector('.error-message');
                                if (errorEl) {
                                    errorEl.textContent = data.errors[field][0];
                                    errorEl.classList.remove('hidden');
                                }
                            }
                        });
                    } else {
                        showMessage(data.message || 'Registrierung fehlgeschlagen', 'error');
                    }
                }
            } catch (error) {
                showMessage('Fehler bei der Registrierung. Bitte versuchen Sie es später erneut.', 'error');
                console.error('Register error:', error);
            } finally {
                loadingSpan.classList.add('hidden');
                textSpan.textContent = 'Registrieren';
                btn.disabled = false;
            }
        });

        function showMessage(message, type) {
            const container = document.getElementById('messageContainer');
            const bgColor = type === 'success' ? 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800' : 'bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800';
            const textColor = type === 'success' ? 'text-green-800 dark:text-green-300' : 'text-red-800 dark:text-red-300';

            container.innerHTML = `
                <div class="p-4 ${bgColor} border rounded-lg">
                    <p class="${textColor} text-sm font-medium">${message}</p>
                </div>
            `;
        }
    </script>
</body>
</html>
