@extends('layouts.app')

@section('title', 'Register - TTEOTK Devotionals')

@section('content')
<div class="min-h-[80vh] flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md">
        {{-- Header --}}
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-white mb-2">Join TTEOTK Devotionals</h1>
            <p class="text-gray-400">Create your account and start watching</p>
        </div>

        {{-- Card --}}
        <div class="bg-gray-900 border border-gray-800 rounded-2xl shadow-xl p-8">
            {{-- Session Error --}}
            @if (session('error'))
                <div class="mb-4 p-4 rounded-lg bg-red-900/50 border border-red-700 text-red-300 text-sm">
                    {{ session('error') }}
                </div>
            @endif

            <form method="POST" action="{{ route('register') }}" class="space-y-6">
                @csrf

                {{-- Name --}}
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-300 mb-2">Name</label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        value="{{ old('name') }}"
                        required
                        autofocus
                        autocomplete="name"
                        class="w-full px-4 py-3 rounded-lg bg-gray-900 border border-gray-600 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition duration-200"
                        placeholder="Your name"
                    >
                    @error('name')
                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Email --}}
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        autocomplete="email"
                        class="w-full px-4 py-3 rounded-lg bg-gray-900 border border-gray-600 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition duration-200"
                        placeholder="you@example.com"
                    >
                    @error('email')
                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Password --}}
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-300 mb-2">Password</label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        required
                        autocomplete="new-password"
                        class="w-full px-4 py-3 rounded-lg bg-gray-900 border border-gray-600 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition duration-200"
                        placeholder="Minimum 8 characters"
                    >
                    @error('password')
                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Confirm Password --}}
                <div>
                    <label for="password_confirmation" class="block text-sm font-medium text-gray-300 mb-2">Confirm Password</label>
                    <input
                        type="password"
                        id="password_confirmation"
                        name="password_confirmation"
                        required
                        autocomplete="new-password"
                        class="w-full px-4 py-3 rounded-lg bg-gray-900 border border-gray-600 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition duration-200"
                        placeholder="Repeat your password"
                    >
                </div>

                {{-- CAPTCHA --}}
                <div>
                    <label for="captcha" class="block text-sm font-medium text-gray-300 mb-2">
                        Quick Math: What is <span class="text-yellow-400 font-bold">{{ $a }} + {{ $b }}</span>?
                    </label>
                    <input
                        type="number"
                        id="captcha"
                        name="captcha"
                        required
                        class="w-full px-4 py-3 rounded-lg bg-gray-900 border border-gray-600 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition duration-200"
                        placeholder="Your answer"
                    >
                    @error('captcha')
                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Honeypot (hidden from real users) --}}
                <div class="absolute opacity-0 -z-10" aria-hidden="true">
                    <input type="text" name="website" tabindex="-1" autocomplete="off">
                </div>

                {{-- Devotional subscription preferences --}}
                <div class="rounded-xl border border-gray-700/60 bg-gray-950/40 p-4">
                    <div class="flex items-start gap-3 mb-3">
                        <div class="w-9 h-9 rounded-lg bg-red-900/40 border border-red-700/40 flex items-center justify-center flex-shrink-0">
                            <i class="fa-solid fa-envelope-open-text text-red-300 text-sm"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-white">Email Devotionals</p>
                            <p class="text-xs text-gray-500">Choose what you'd like to receive. Unsubscribe anytime.</p>
                        </div>
                    </div>
                    @php
                        $tagOpts = [
                            ['slug'=>'daily-devotional','label'=>'Daily Devotional','desc'=>'A new devotional every morning.','default'=>true],
                            ['slug'=>'weekly-recap','label'=>'Weekly Recap','desc'=>'Top moments from the week.','default'=>true],
                            ['slug'=>'prayer-requests','label'=>'Prayer Requests','desc'=>'Community prayer updates.','default'=>false],
                            ['slug'=>'events','label'=>'Events','desc'=>'Live streams and gatherings.','default'=>false],
                        ];
                        $oldTags = old('subscribe_tags', collect($tagOpts)->where('default', true)->pluck('slug')->all());
                    @endphp
                    <div class="space-y-2">
                        @foreach($tagOpts as $opt)
                        <label class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-gray-800/40 cursor-pointer transition-colors">
                            <input type="checkbox" name="subscribe_tags[]" value="{{ $opt['slug'] }}"
                                   {{ in_array($opt['slug'], (array) $oldTags) ? 'checked' : '' }}
                                   class="mt-1 w-4 h-4 rounded border-gray-600 bg-gray-900 text-red-500 focus:ring-red-500 focus:ring-offset-gray-900">
                            <div class="flex-1 min-w-0">
                                <span class="text-sm text-white font-medium">{{ $opt['label'] }}</span>
                                <p class="text-xs text-gray-500">{{ $opt['desc'] }}</p>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>

                {{-- Submit --}}
                <button
                    type="submit"
                    class="w-full py-3 px-4 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-red-500/25 transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-900"
                >
                    Create Account
                </button>
            </form>

            {{-- Login Link --}}
            <div class="mt-6 text-center">
                <p class="text-gray-400 text-sm">
                    Already have an account?
                    <a href="{{ route('login') }}" class="text-yellow-400 hover:text-yellow-300 font-medium transition duration-200">
                        Sign in here
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>
@endsection