@extends('layouts.public')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
        <!-- Form Header -->
        <div class="bg-gradient-to-r from-amber-700 to-orange-900 px-8 py-10 text-center relative overflow-hidden">
            <div class="absolute inset-0 opacity-10 pointer-events-none">
                <svg class="h-full w-full" fill="none" viewBox="0 0 100 100" preserveAspectRatio="none">
                    <path d="M0 100 C 20 0 50 0 100 100 Z" fill="white"/>
                </svg>
            </div>
            <div class="relative z-10">
                <h2 class="text-3xl font-black text-white mb-2 tracking-tight">Coffee Connections Registration</h2>
                <p class="text-amber-100 font-medium">Network. Connect. Grow.</p>
            </div>
        </div>

        <form action="{{ route('coffee_connections.process') }}" method="POST" class="p-8 md:p-12">
            @csrf
            @isset($chapter_id)
                <input type="hidden" name="chapter_id" value="{{ $chapter_id }}">
            @else
                @if(request()->has('chapter_id'))
                    <input type="hidden" name="chapter_id" value="{{ request('chapter_id') }}">
                @endif
            @endisset

            <div class="space-y-12">
                <!-- Section 1: Identity -->
                <div>
                    <div class="flex items-center mb-8">
                        <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 mr-4 shadow-inner font-black">1</div>
                        <h3 class="text-xl font-bold text-gray-900 tracking-tight">Personal & Professional Identity</h3>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
                        <div class="space-y-1">
                            <label class="block text-xs font-black text-gray-400 uppercase tracking-widest ml-1">First Name *</label>
                            <input type="text" name="first_name" value="{{ auth()->check() ? auth()->user()->first_name : old('first_name') }}" required class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white transition-all">
                        </div>
                        <div class="space-y-1">
                            <label class="block text-xs font-black text-gray-400 uppercase tracking-widest ml-1">Last Name *</label>
                            <input type="text" name="last_name" value="{{ auth()->check() ? auth()->user()->last_name : old('last_name') }}" required class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white transition-all">
                        </div>
                        <div class="space-y-1">
                            <label class="block text-xs font-black text-gray-400 uppercase tracking-widest ml-1">Business Name *</label>
                            <input type="text" name="business_name" required class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white transition-all">
                        </div>
                        <div class="space-y-1">
                            <label class="block text-xs font-black text-gray-400 uppercase tracking-widest ml-1">Position *</label>
                            <input type="text" name="position" required class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white transition-all">
                        </div>
                        <div class="space-y-1">
                            <label class="block text-xs font-black text-gray-400 uppercase tracking-widest ml-1">Email *</label>
                            <input type="email" name="email" value="{{ auth()->check() ? auth()->user()->email : old('email') }}" required class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white transition-all">
                        </div>
                        <div class="space-y-1">
                            <label class="block text-xs font-black text-gray-400 uppercase tracking-widest ml-1">Mobile Primary *</label>
                            <input type="text" name="mobile" value="{{ auth()->check() ? auth()->user()->mobile : old('mobile') }}" required class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white transition-all">
                        </div>
                    </div>
                </div>

                <!-- Section 2: Engagement -->
                <div>
                    <div class="flex items-center mb-8">
                        <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 mr-4 shadow-inner font-black">2</div>
                        <h3 class="text-xl font-bold text-gray-900 tracking-tight">Coffee Connection Profile</h3>
                    </div>
                    
                    <div class="space-y-6">
                        <div class="space-y-1">
                            <label class="block text-xs font-black text-gray-400 uppercase tracking-widest ml-1">Business Summary</label>
                            <textarea name="business_description" rows="3" placeholder="Tell us about what you do..." class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white transition-all"></textarea>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 font-black uppercase tracking-widest">
                            <div class="space-y-1">
                                <label class="block text-xs text-gray-400 ml-1">Seat Desired</label>
                                <input type="text" name="seat_desired" placeholder="e.g. Life Coach" class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white transition-all font-sans lowercase">
                            </div>
                            <div class="space-y-1">
                                <label class="block text-xs text-gray-400 ml-1">Years in Industry</label>
                                <input type="text" name="years_in_profession" class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white transition-all font-sans lowercase">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Section 3: Payment -->
                <div>
                    <div class="flex items-center mb-8">
                        <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 mr-4 shadow-inner font-black">3</div>
                        <h3 class="text-xl font-bold text-gray-900 tracking-tight">Secure Payment</h3>
                    </div>
                    
                    <div class="mb-10">
                        <label class="relative flex items-center p-6 border-2 rounded-2xl cursor-pointer transition-all bg-amber-600 group border-amber-600 shadow-xl shadow-amber-500/20 max-w-sm mx-auto">
                            <input type="radio" name="payment_selection" value="50" checked class="h-6 w-6 text-white focus:ring-white border-white">
                            <div class="ml-6">
                                <span class="block text-sm font-black text-white uppercase tracking-widest">Entry Fee</span>
                                <span class="block text-white font-black text-2xl truncate">$50 USD</span>
                            </div>
                        </label>
                    </div>

                    <div class="bg-gray-50 rounded-2xl p-6 md:p-8 border border-gray-100">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                            <div class="md:col-span-2 space-y-1">
                                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Card Number *</label>
                                <input type="text" name="card_number" required placeholder="0000 0000 0000 0000" class="block w-full px-4 py-3 bg-white border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 transition-all">
                            </div>
                            <div class="space-y-1">
                                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Expiry *</label>
                                <input type="text" name="expiry" required placeholder="MM/YY" class="block w-full px-4 py-3 bg-white border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 transition-all text-center">
                            </div>
                            <div class="space-y-1">
                                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">CVV *</label>
                                <input type="text" name="cvv" required placeholder="123" class="block w-full px-4 py-3 bg-white border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 transition-all text-center">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-12">
                <button type="submit" class="w-full bg-gradient-to-r from-amber-600 to-orange-800 hover:from-amber-700 hover:to-orange-900 text-white font-black py-5 px-8 rounded-2xl shadow-xl shadow-amber-500/30 transition-all transform hover:-translate-y-1 text-lg uppercase tracking-widest">
                    Claim Your Connection Spot
                </button>
                <div class="flex items-center justify-center mt-6 text-gray-400">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
                    <span class="text-xs font-medium">Encrypted SSL Transaction</span>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection