@extends('website.layouts.app')

@section('content')
    <div class="min-h-screen bg-white flex flex-col md:flex-row">
        <div class="w-full md:w-5/12 lg:w-1/3 bg-[#0d4a4a] p-8 flex flex-col justify-between relative overflow-hidden">
            <div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none">
                <div class="absolute -right-20 -top-20 w-80 h-80 bg-[#F5A623] rounded-full blur-3xl"></div>
                <div class="absolute -left-20 -bottom-20 w-80 h-80 bg-white rounded-full blur-3xl"></div>
            </div>

            <div class="relative z-10 mb-8 md:mb-0">
                <h1 class="text-2xl font-bold text-white mb-2">SaveSmart<span class="text-[#F5A623]">.lk</span></h1>
            </div>

            <div class="relative z-10 hidden md:block">
                <h2 class="text-3xl font-bold text-white mb-6">Join the club. <br>Start saving today.</h2>
                <div class="space-y-6">
                    <div class="flex items-start gap-4"><div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0"><i data-lucide="gift" class="w-5 h-5 text-[#F5A623]"></i></div><div><h3 class="font-bold text-white">Exclusive Rewards</h3><p class="text-sm text-white/70">Access members-only deals at 500+ locations.</p></div></div>
                    <div class="flex items-start gap-4"><div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0"><i data-lucide="tag" class="w-5 h-5 text-[#F5A623]"></i></div><div><h3 class="font-bold text-white">Instant Savings</h3><p class="text-sm text-white/70">Show your digital card and save instantly.</p></div></div>
                    <div class="flex items-start gap-4"><div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0"><i data-lucide="sparkles" class="w-5 h-5 text-[#F5A623]"></i></div><div><h3 class="font-bold text-white">Premium Perks</h3><p class="text-sm text-white/70">Get priority service and special event access.</p></div></div>
                </div>
            </div>

            <div class="relative z-10 hidden md:block text-xs text-white/40">By joining, you agree to our Terms & Conditions.</div>
        </div>

        <div class="flex-1 flex items-center justify-center p-6 md:p-12 bg-gray-50">
            <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
                    <p class="text-gray-500 mt-1">Start your savings journey in seconds</p>
                </div>

                @if (session('status'))
                    <div class="mb-4 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">{{ session('status') }}</div>
                @endif

                @if ($errors->any())
                    <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                        <ul class="list-disc pl-5 space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('register.store') }}" method="post" enctype="multipart/form-data" class="space-y-4" id="member-register-form">
                    @csrf

                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Full Name</label>
                        <div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i data-lucide="user" class="h-5 w-5 text-gray-400"></i></div><input type="text" name="name" value="{{ old('name') }}" required class="block w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#0d4a4a] focus:bg-white" placeholder="Kasun Perera"></div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Email Address</label>
                        <div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i data-lucide="mail" class="h-5 w-5 text-gray-400"></i></div><input type="email" name="email" value="{{ old('email') }}" required class="block w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#0d4a4a] focus:bg-white" placeholder="kasun@example.com"></div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Mobile Number</label>
                        <div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i data-lucide="phone" class="h-5 w-5 text-gray-400"></i></div><input type="tel" name="phone_number" value="{{ old('phone_number') }}" required class="block w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#0d4a4a] focus:bg-white" placeholder="077 123 4567"></div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">NIC Number</label>
                        <div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i data-lucide="id-card" class="h-5 w-5 text-gray-400"></i></div><input type="text" name="nic_number" value="{{ old('nic_number') }}" required class="block w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#0d4a4a] focus:bg-white" placeholder="200012345678"></div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Member Image</label>
                        <div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i data-lucide="image" class="h-5 w-5 text-gray-400"></i></div><input type="file" name="profile_image" accept="image/*" required class="block w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#0d4a4a] focus:bg-white"></div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Password</label>
                        <div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i data-lucide="lock" class="h-5 w-5 text-gray-400"></i></div><input type="password" name="password" required class="block w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#0d4a4a] focus:bg-white" placeholder="••••••••"></div>
                    </div>

                    <button type="submit" id="member-register-submit" class="w-full py-4 rounded-xl font-bold text-white bg-[#0d4a4a] hover:bg-[#1a5c5c] shadow-lg shadow-[#0d4a4a]/20 transition-all mt-4">Get Started Now</button>

                    <p class="text-center text-sm text-gray-500 mt-6">Already have an account? <a href="{{ route('login.members') }}" class="font-bold text-[#0d4a4a] hover:underline">Log In</a></p>
                    <p class="text-center text-sm text-gray-500">Business partner? <a href="{{ route('register.partners') }}" class="font-bold text-[#0d4a4a] hover:underline">Register as Partner</a></p>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.getElementById('member-register-form')?.addEventListener('submit', function () {
                const btn = document.getElementById('member-register-submit');
                if (btn) {
                    btn.textContent = 'Creating Account...';
                    btn.setAttribute('disabled', 'disabled');
                    btn.classList.add('opacity-70', 'cursor-not-allowed');
                }
            });
        </script>
    @endpush
@endsection