@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-blue-700 to-blue-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">NRG Membership Portal</h2>
                <p class="text-blue-100 font-medium">Elevate Your Professional Network</p>
            </div>
        </div>

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

            <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-blue-100 flex items-center justify-center text-blue-600 mr-4 shadow-inner font-black">1</div>
                        <h3 class="text-xl font-bold text-gray-900 tracking-tight">Personal & Business 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-blue-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-blue-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-blue-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-blue-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">Industry</label>
                            <input type="text" name="industry" class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-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-blue-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-blue-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">Website</label>
                            <input type="url" name="website" placeholder="https://" class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-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-blue-100 flex items-center justify-center text-blue-600 mr-4 shadow-inner font-black">2</div>
                        <h3 class="text-xl font-bold text-gray-900 tracking-tight">Professional 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 Description</label>
                            <textarea name="business_description" rows="3" class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-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">Years in Profession</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-blue-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">Membership Category</label>
                                <input type="text" name="category" placeholder="e.g. Residential Finance" class="block w-full px-4 py-3 bg-gray-50 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-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-blue-100 flex items-center justify-center text-blue-600 mr-4 shadow-inner font-black">3</div>
                        <h3 class="text-xl font-bold text-gray-900 tracking-tight">Investment Details</h3>
                    </div>
                    
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10">
                        <label class="relative flex items-center p-4 border-2 rounded-2xl cursor-pointer transition-all hover:bg-gray-50 group border-gray-100">
                            <input type="radio" name="payment_selection" value="100" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300">
                            <div class="ml-4">
                                <span class="block text-sm font-black text-gray-900">Registration</span>
                                <span class="block text-blue-600 font-black text-lg">$100</span>
                            </div>
                        </label>
                        <label class="relative flex items-center p-4 border-2 rounded-2xl cursor-pointer transition-all hover:bg-gray-50 group border-gray-100">
                            <input type="radio" name="payment_selection" value="275" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300">
                            <div class="ml-4">
                                <span class="block text-sm font-black text-gray-900">Membership</span>
                                <span class="block text-blue-600 font-black text-lg">$275</span>
                            </div>
                        </label>
                        <label class="relative flex items-center p-4 border-2 rounded-2xl cursor-pointer transition-all hover:bg-blue-600 group border-blue-600 shadow-xl shadow-blue-500/20">
                            <input type="radio" name="payment_selection" value="375" checked class="h-5 w-5 text-white focus:ring-white border-white">
                            <div class="ml-4">
                                <span class="block text-sm font-black text-white">Combo Plan</span>
                                <span class="block text-white font-black text-lg">$375</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-blue-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-blue-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-blue-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-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white font-black py-5 px-8 rounded-2xl shadow-xl shadow-blue-500/30 transition-all transform hover:-translate-y-1 text-lg uppercase tracking-widest">
                    Complete Secure Registration
                </button>
                <p class="text-center text-xs text-gray-400 mt-6 font-medium">Your payment is secured with industry-standard encryption.</p>
            </div>
        </form>
    </div>
</div>
@endsection