@extends('website.layouts.app')

@section('content')
    <div class="min-h-screen bg-[#FAF7F2] flex flex-col lg:flex-row">
        <div class="hidden lg:flex lg:w-1/2 bg-[#0d4a4a] relative overflow-hidden flex-col justify-between p-12 text-white">
            <div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
                <div class="absolute right-0 top-0 w-96 h-96 bg-[#F5A623] rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2"></div>
                <div class="absolute left-0 bottom-0 w-96 h-96 bg-[#F5A623] rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
            </div>

            <div class="z-10">
                <h1 class="text-3xl font-bold mb-2">SaveSmart<span class="text-[#F5A623]">.lk</span></h1>
                <p class="text-white/70">Partner Portal</p>
            </div>

            <div class="z-10 max-w-md">
                <h2 class="text-4xl font-bold mb-6 leading-tight">Grow your business with Sri Lanka's smartest loyalty network.</h2>
                <ul class="space-y-4 text-lg text-white/80">
                    <li class="flex items-center gap-3"><div class="w-6 h-6 rounded-full bg-[#F5A623] flex items-center justify-center text-[#0d4a4a]"><i data-lucide="arrow-right" class="w-3 h-3"></i></div>Access over 50,000+ active members</li>
                    <li class="flex items-center gap-3"><div class="w-6 h-6 rounded-full bg-[#F5A623] flex items-center justify-center text-[#0d4a4a]"><i data-lucide="arrow-right" class="w-3 h-3"></i></div>Real-time analytics and insights</li>
                    <li class="flex items-center gap-3"><div class="w-6 h-6 rounded-full bg-[#F5A623] flex items-center justify-center text-[#0d4a4a]"><i data-lucide="arrow-right" class="w-3 h-3"></i></div>Zero setup fees for new partners</li>
                </ul>
            </div>

            <div class="z-10 text-sm text-white/50">© 2026 SaveSmart.lk. All rights reserved.</div>
        </div>

        <div class="flex-1 flex items-center justify-center p-6 lg:p-12">
            <div class="w-full max-w-md">
                <div class="text-center lg:text-left mb-8">
                    <div class="inline-flex lg:hidden items-center justify-center w-12 h-12 bg-[#F5A623]/10 rounded-xl mb-4"><i data-lucide="store" class="w-6 h-6 text-[#F5A623]"></i></div>
                    <h2 class="text-3xl font-bold text-gray-900 mb-2">Become a Partner</h2>
                    <p class="text-gray-600">Register your business to start accepting SaveSmart cards.</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.partners.store') }}" method="post" class="space-y-5" id="partner-register-form">
                    @csrf

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label>
                        <div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i data-lucide="building-2" class="h-5 w-5 text-gray-400"></i></div><input type="text" name="company_name" value="{{ old('company_name') }}" required class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#F5A623]" placeholder="Acme Traders Pvt Ltd"></div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Business Type</label>
                        <div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i data-lucide="briefcase" class="h-5 w-5 text-gray-400"></i></div><select name="business_type" class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-200 rounded-xl text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#F5A623] appearance-none"><option value="retail" {{ old('business_type') === 'retail' ? 'selected' : '' }}>Retail Store</option><option value="restaurant" {{ old('business_type') === 'restaurant' ? 'selected' : '' }}>Restaurant / Cafe</option><option value="service" {{ old('business_type') === 'service' ? 'selected' : '' }}>Service Provider</option><option value="hotel" {{ old('business_type') === 'hotel' ? 'selected' : '' }}>Hotel / Travel</option><option value="other" {{ old('business_type') === 'other' ? 'selected' : '' }}>Other</option></select></div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Contact Person</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="contact_person" value="{{ old('contact_person') }}" required class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#F5A623]" placeholder="Manager Name"></div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Business Email</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-2.5 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#F5A623]" placeholder="contact@business.com"></div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 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-2.5 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#F5A623]" placeholder="Create a strong password"></div>
                    </div>

                    <div class="pt-2">
                        <button type="submit" id="partner-register-submit" class="w-full flex items-center justify-center py-3 px-4 rounded-xl text-sm font-bold text-[#0d4a4a] bg-[#F5A623] hover:bg-[#e0961f] transition-all">Register Business</button>
                    </div>

                    <p class="text-center text-sm text-gray-600">Already a partner? <a href="{{ route('login.partners') }}" class="font-medium text-[#0d4a4a] hover:text-[#1a5c5c]">Sign in here</a></p>
                    <p class="text-center text-sm text-gray-600">Member signup? <a href="{{ route('register') }}" class="font-medium text-[#0d4a4a] hover:text-[#1a5c5c]">Create member account</a></p>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.getElementById('partner-register-form')?.addEventListener('submit', function () {
                const btn = document.getElementById('partner-register-submit');
                if (btn) {
                    btn.innerHTML = '<span class="w-5 h-5 border-2 border-[#0d4a4a]/30 border-t-[#0d4a4a] rounded-full animate-spin"></span>';
                    btn.setAttribute('disabled', 'disabled');
                    btn.classList.add('opacity-70', 'cursor-not-allowed');
                }
            });
        </script>
    @endpush
@endsection