@extends('layouts.app')

@section('title', 'Associate — ' . config('gerg.name'))

@section('content')
    @include('partials.page-hero', ['title' => 'Associate Details', 'subtitle' => 'Join our network and earn attractive incentives.', 'breadcrumb' => 'Associate'])

    <section class="py-16 lg:py-24">
        <div class="mx-auto max-w-4xl px-4 lg:px-8">
            <div class="rounded-2xl border border-gerg-200 bg-gerg-50/50 p-8 lg:p-12">
                <h2 class="font-display text-2xl font-semibold text-gerg-900 text-center mb-8">Business Associate of Golden Era Royal Group</h2>

                <div class="space-y-6 text-slate-700 leading-relaxed">
                    <p>
                        We are delighted to choose you to join as an associate with Golden Era Royal Group. At Golden Era Royal Group, we are committed to the well being of society and all our stakeholders. Our goal is to provide value for investment for our customers by offering them a wide range of solutions by way of Property Sales, Property Investment, Software Investment, Digital Marketing, Construction/Interior, Recruitment, Solar/ Solar Products/Others, Uthhan Sales/CSR/Branding/Part-Timers. As a Business Associate of Golden Era Royal Group, you have the opportunity and the prospect to earn through our multiple segments.
                    </p>

                    <p>
                        As a Business Associate of Golden Era Royal Group you have the freedom to work and earn attractive additional income to better your life by referring potential clients. You will be required to contact your friends and family and help them fulfill their needs through Golden Era Royal Group's diverse range of products and services. Of course, you will be eligible for attractive incentives and rewards. We are looking forward for a long and fruitful association.
                    </p>

                    <p class="text-lg font-semibold text-gerg-700">
                        Attractive benefits are waiting for you. You can earn unlimited income by referring business.
                    </p>
                </div>
            </div>

            <div class="mt-12 grid gap-6 md:grid-cols-3">
                <div class="card text-center">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gerg-100 text-3xl">💰</div>
                    <h3 class="mt-4 font-semibold text-gerg-900">Unlimited Income</h3>
                    <p class="mt-2 text-sm text-slate-500">Earn attractive incentives by referring business</p>
                </div>
                <div class="card text-center">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gerg-100 text-3xl">🏢</div>
                    <h3 class="mt-4 font-semibold text-gerg-900">Multiple Segments</h3>
                    <p class="mt-2 text-sm text-slate-500">Refer across property, software, solar, and more</p>
                </div>
                <div class="card text-center">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gerg-100 text-3xl">🤝</div>
                    <h3 class="mt-4 font-semibold text-gerg-900">Flexible Work</h3>
                    <p class="mt-2 text-sm text-slate-500">Work on your own schedule and terms</p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-16 lg:py-24 bg-slate-50">
        <div class="mx-auto max-w-5xl px-4 lg:px-8">
            <div class="text-center mb-12">
                <div class="inline-flex items-center gap-2 rounded-full bg-gerg-100 px-4 py-2 text-sm text-gerg-700 mb-4">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    Quick Registration
                </div>
                <h2 class="font-display text-3xl font-semibold text-gerg-900">Join As an Associate</h2>
                <p class="mt-3 text-slate-600">Start your journey with us in just a few simple steps</p>
            </div>

            <div class="grid gap-8 lg:grid-cols-12">
                <div class="hidden lg:block lg:col-span-4 space-y-4">
                    <div class="sticky top-24">
                        <div class="bg-white rounded-2xl border border-gerg-200 shadow-sm p-6">
                            <h3 class="font-display text-lg font-semibold text-gerg-900 mb-4">Registration Steps</h3>
                            <div class="space-y-4">
                                <div class="flex items-start gap-4" data-step-item="1">
                                    <div data-step-circle class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gerg-500 text-white font-semibold">1</div>
                                    <div>
                                        <p data-step-title class="text-sm font-medium text-gerg-900">Personal Details</p>
                                        <p data-step-subtitle class="text-xs text-slate-500 mt-1">Your basic information</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4" data-step-item="2">
                                    <div data-step-circle class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-500 font-semibold">2</div>
                                    <div>
                                        <p data-step-title class="text-sm font-medium text-slate-500">Contact & Address</p>
                                        <p data-step-subtitle class="text-xs text-slate-400 mt-1">How to reach you</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4" data-step-item="3">
                                    <div data-step-circle class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-500 font-semibold">3</div>
                                    <div>
                                        <p data-step-title class="text-sm font-medium text-slate-500">Work Preferences</p>
                                        <p data-step-subtitle class="text-xs text-slate-400 mt-1">Your interests</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4" data-step-item="4">
                                    <div data-step-circle class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-500 font-semibold">4</div>
                                    <div>
                                        <p data-step-title class="text-sm font-medium text-slate-500">Documents</p>
                                        <p data-step-subtitle class="text-xs text-slate-400 mt-1">Upload required files</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-6 bg-gerg-50 border border-gerg-200 rounded-2xl p-6 shadow-sm">
                            <div class="text-4xl mb-3">🚀</div>
                            <h4 class="font-display text-lg font-semibold text-gerg-900">Ready to Start?</h4>
                            <p class="text-sm text-slate-600 mt-2">Join thousands of successful associates earning with Golden Era Royal Group.</p>
                        </div>
                    </div>
                </div>

                <div class="lg:col-span-8">
                    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                        <div class="bg-gerg-50 px-8 py-6 border-b border-gerg-100">
                            <div class="text-center">
                                <h3 class="font-display text-xl font-semibold text-gerg-900">Registration Form</h3>
                                <p class="text-sm text-slate-500 mt-1">Fill in all the details below</p>
                            </div>
                        </div>

                        <div id="form-success" class="hidden mx-8 mt-6 p-4 bg-green-500/20 border border-green-400/30 rounded-lg text-green-700">
                        </div>
                        <div id="form-errors" class="hidden mx-8 mt-6 p-4 bg-red-500/20 border border-red-400/30 rounded-lg text-red-700">
                        </div>

                        <form id="associate-form" action="{{ route('associate.store') }}" method="POST" enctype="multipart/form-data" class="p-8 space-y-8">
                            @csrf

                            <div class="space-y-6" data-form-step="1">
                                <div class="flex items-center gap-3 pb-4 border-b border-gerg-100">
                                    <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gerg-100 text-gerg-700 font-semibold text-sm">1</div>
                                    <h4 class="font-semibold text-gerg-900">Personal Information</h4>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gerg-800 mb-2">Name of the Individual/Company/Business concern<span class="text-gerg-600">*</span></label>
                                    <input type="text" name="name" id="name" value="{{ old('name') }}" required class="w-full rounded-xl border @error('name') border-red-500 @else border-gerg-200 @enderror px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">
                                    <p id="name-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                </div>

                                <div class="grid gap-6 sm:grid-cols-2">
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Date of Birth<span class="text-gerg-600">*</span></label>
                                        <input type="date" name="dob" id="dob" value="{{ old('dob') }}" required class="w-full rounded-xl border @error('dob') border-red-500 @else border-gerg-200 @enderror px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all" max="{{ date('Y-m-d', strtotime('-18 years')) }}">
                                        <p id="dob-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Mobile No.<span class="text-gerg-600">*</span></label>
                                        <input type="tel" name="mobile" id="mobile" value="{{ old('mobile') }}" required class="w-full rounded-xl border @error('mobile') border-red-500 @else border-gerg-200 @enderror px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all" placeholder="10 digit phone number" oninput="this.value = this.value.replace(/[^0-9]/g, '')" maxlength="10">
                                        <p id="mobile-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                </div>

                                <div class="grid gap-6 sm:grid-cols-2">
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Your Email<span class="text-gerg-600">*</span></label>
                                        <input type="email" name="email" id="email" value="{{ old('email') }}" required class="w-full rounded-xl border @error('email') border-red-500 @else border-gerg-200 @enderror px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">
                                        <p id="email-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Name of the Nominee<span class="text-gerg-600">*</span></label>
                                        <input type="text" name="nominee" id="nominee" value="{{ old('nominee') }}" required class="w-full rounded-xl border @error('nominee') border-red-500 @else border-gerg-200 @enderror px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">
                                        <p id="nominee-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-6" data-form-step="2">
                                <div class="flex items-center gap-3 pb-4 border-b border-gerg-100">
                                    <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gerg-100 text-gerg-700 font-semibold text-sm">2</div>
                                    <h4 class="font-semibold text-gerg-900">Contact Details</h4>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gerg-800 mb-2">Correspondence Address<span class="text-gerg-600">*</span></label>
                                    <textarea name="correspondence_address" id="correspondence_address" rows="3" required class="w-full rounded-xl border @error('correspondence_address') border-red-500 @else border-gerg-200 @enderror px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">{{ old('correspondence_address') }}</textarea>
                                    <p id="correspondence_address-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gerg-800 mb-2">Permanent Address</label>
                                    <textarea name="permanent_address" id="permanent_address" rows="3" class="w-full rounded-xl border border-gerg-200 px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">{{ old('permanent_address') }}</textarea>
                                </div>
                            </div>

                            <div class="space-y-6" data-form-step="3">
                                <div class="flex items-center gap-3 pb-4 border-b border-gerg-100">
                                    <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gerg-100 text-gerg-700 font-semibold text-sm">3</div>
                                    <h4 class="font-semibold text-gerg-900">Work & Preferences</h4>
                                </div>

                                <div class="grid gap-6 sm:grid-cols-2">
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Work Nature</label>
                                        <input type="text" name="work_nature" id="work_nature" value="{{ old('work_nature') }}" class="w-full rounded-xl border border-gerg-200 px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Branch Interest</label>
                                        <input type="text" name="branch_interest" id="branch_interest" value="{{ old('branch_interest') }}" class="w-full rounded-xl border border-gerg-200 px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">
                                    </div>
                                </div>

                                <div class="grid gap-6 sm:grid-cols-2">
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Account Number</label>
                                        <input type="text" name="account_number" id="account_number" value="{{ old('account_number') }}" class="w-full rounded-xl border @error('account_number') border-red-500 @else border-gerg-200 @enderror px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                        <p id="account_number-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Referred by</label>
                                        <input type="text" name="referred_by" id="referred_by" value="{{ old('referred_by') }}" class="w-full rounded-xl border border-gerg-200 px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">
                                    </div>
                                </div>

                                <div class="grid gap-6 sm:grid-cols-2">
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Place of Joining</label>
                                        <input type="text" name="joining_place" id="joining_place" value="{{ old('joining_place') }}" class="w-full rounded-xl border border-gerg-200 px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gerg-800 mb-2">Date of Joining</label>
                                        <input type="date" name="joining_date" id="joining_date" value="{{ old('joining_date') }}" class="w-full rounded-xl border @error('joining_date') border-red-500 @else border-gerg-200 @enderror px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all">
                                        <p id="joining_date-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gerg-800 mb-3">Select the type of Projects</label>
                                    <div class="grid gap-3 sm:grid-cols-2">
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Property Sales" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Property Sales', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">Property Sales</span>
                                        </label>
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Property Investment" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Property Investment', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">Property Investment</span>
                                        </label>
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Software Investment" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Software Investment', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">Software Investment</span>
                                        </label>
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Software Projects" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Software Projects', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">SOFTWARE PROJECTS (WEBSITE/MOBILE APP/WEB APP/STAND ALONE/CRM/ERP/OTHERS)</span>
                                        </label>
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Digital Marketing" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Digital Marketing', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">Digital Marketing</span>
                                        </label>
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Construction/Interior" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Construction/Interior', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">Construction/Interior</span>
                                        </label>
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Loan" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Loan', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">Loan</span>
                                        </label>
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Recruitment" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Recruitment', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">Recruitment</span>
                                        </label>
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Solar Products" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Solar Products', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">Solar/ Solar Products/Others</span>
                                        </label>
                                        <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 hover:border-gerg-400 hover:bg-gerg-50 transition-all cursor-pointer">
                                            <input type="checkbox" name="projects[]" value="Uthhan" class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ in_array('Uthhan', old('projects', [])) ? 'checked' : '' }}>
                                            <span class="text-slate-700">Uthhan Sales/CSR/Branding/Part-Timers</span>
                                        </label>
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gerg-800 mb-2">Do you have any Other Projects?</label>
                                    <input type="text" name="other_projects" id="other_projects" value="{{ old('other_projects') }}" class="w-full rounded-xl border border-gerg-200 px-4 py-3.5 focus:border-gerg-500 focus:outline-none focus:ring-2 focus:ring-gerg-500/20 transition-all" placeholder="Enter your other projects">
                                </div>
                            </div>

                            <div class="space-y-6" data-form-step="4">
                                <div class="flex items-center gap-3 pb-4 border-b border-gerg-100">
                                    <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gerg-100 text-gerg-700 font-semibold text-sm">4</div>
                                    <h4 class="font-semibold text-gerg-900">Document Uploads</h4>
                                </div>

                                <div class="grid gap-6 sm:grid-cols-2">
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-gerg-800">Upload Signature</label>
                                        <div class="relative">
                                            <input type="file" name="photo" id="photo-upload" accept="image/*" class="hidden">
                                            <label for="photo-upload" id="photo-preview-container" class="flex flex-col items-center justify-center w-full h-32 rounded-xl border-2 border-dashed @error('photo') border-red-500 @else border-gerg-300 @enderror bg-gerg-50 hover:bg-gerg-100 cursor-pointer transition-all">
                                                <svg class="h-10 w-10 text-gerg-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                                                <span class="text-sm text-gerg-600">Click to upload</span>
                                            </label>
                                        </div>
                                        <img id="photo-preview" class="mt-2 w-full h-32 object-contain rounded-xl border border-gerg-200 hidden">
                                        <p id="photo-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-gerg-800">Upload Aadhar Card</label>
                                        <div class="relative">
                                            <input type="file" name="aadhar_card" id="aadhar-upload" accept="image/*" class="hidden">
                                            <label for="aadhar-upload" id="aadhar-preview-container" class="flex flex-col items-center justify-center w-full h-32 rounded-xl border-2 border-dashed @error('aadhar_card') border-red-500 @else border-gerg-300 @enderror bg-gerg-50 hover:bg-gerg-100 cursor-pointer transition-all">
                                                <svg class="h-10 w-10 text-gerg-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                                <span class="text-sm text-gerg-600">Click to upload</span>
                                            </label>
                                        </div>
                                        <img id="aadhar-preview" class="mt-2 w-full h-32 object-contain rounded-xl border border-gerg-200 hidden">
                                        <p id="aadhar_card-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-gerg-800">Upload Pan Card</label>
                                        <div class="relative">
                                            <input type="file" name="pan_card" id="pan-upload" accept="image/*" class="hidden">
                                            <label for="pan-upload" id="pan-preview-container" class="flex flex-col items-center justify-center w-full h-32 rounded-xl border-2 border-dashed @error('pan_card') border-red-500 @else border-gerg-300 @enderror bg-gerg-50 hover:bg-gerg-100 cursor-pointer transition-all">
                                                <svg class="h-10 w-10 text-gerg-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                                <span class="text-sm text-gerg-600">Click to upload</span>
                                            </label>
                                        </div>
                                        <img id="pan-preview" class="mt-2 w-full h-32 object-contain rounded-xl border border-gerg-200 hidden">
                                        <p id="pan_card-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-gerg-800">Upload Passport Size Photo</label>
                                        <div class="relative">
                                            <input type="file" name="passport_photo" id="passport-upload" accept="image/*" class="hidden">
                                            <label for="passport-upload" id="passport-preview-container" class="flex flex-col items-center justify-center w-full h-32 rounded-xl border-2 border-dashed @error('passport_photo') border-red-500 @else border-gerg-300 @enderror bg-gerg-50 hover:bg-gerg-100 cursor-pointer transition-all">
                                                <svg class="h-10 w-10 text-gerg-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                                                <span class="text-sm text-gerg-600">Click to upload</span>
                                            </label>
                                        </div>
                                        <img id="passport-preview" class="mt-2 w-full h-32 object-contain rounded-xl border border-gerg-200 hidden">
                                        <p id="passport_photo-error" class="text-xs text-red-600 mt-1 hidden"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="pt-4 border-t border-gerg-100">
                                <label class="flex items-start gap-3 p-4 rounded-xl border border-gerg-200 cursor-pointer">
                                    <input type="checkbox" name="terms_agreed" id="terms_agreed" value="1" required class="flex-shrink-0 h-5 w-5 mt-0.5 rounded border-gerg-300 text-gerg-600 focus:ring-gerg-500" {{ old('terms_agreed') ? 'checked' : '' }}>
                                    <span class="text-slate-700">I agree to the terms and conditions</span>
                                </label>
                                <p id="terms_agreed-error" class="text-xs text-red-600 mt-1 hidden"></p>
                            </div>

                            <div class="pt-4">
                                <button type="submit" id="submit-btn" class="btn-primary w-full py-4.5 text-lg font-semibold shadow-lg shadow-gerg-500/25 hover:shadow-gerg-500/40 transition-all">
                                    Submit Registration
                                    <svg class="h-5 w-5 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                                </button>
                            </div>
                        </form>

                        <script>
                            function fieldHasValue(field) {
                                if (field.type === 'checkbox' || field.type === 'radio') {
                                    return field.checked;
                                }

                                if (field.type === 'file') {
                                    return field.files && field.files.length > 0;
                                }

                                return field.value.trim() !== '';
                            }

                            function isRegistrationStepComplete(section) {
                                const requiredFields = Array.from(section.querySelectorAll('input[required], textarea[required], select[required]'));

                                if (requiredFields.length > 0) {
                                    return requiredFields.every(fieldHasValue);
                                }

                                const allFields = Array.from(section.querySelectorAll('input, textarea, select'));
                                return allFields.some(fieldHasValue);
                            }

                            function updateRegistrationSteps(currentStepNumber = '1') {
                                document.querySelectorAll('[data-step-item]').forEach((stepItem) => {
                                    const stepNumber = stepItem.dataset.stepItem;
                                    const section = document.querySelector(`[data-form-step="${stepNumber}"]`);
                                    const isActive = stepNumber === String(currentStepNumber);
                                    const isComplete = section ? isRegistrationStepComplete(section) : false;
                                    const shouldHighlight = isActive || isComplete;
                                    const circle = stepItem.querySelector('[data-step-circle]');
                                    const title = stepItem.querySelector('[data-step-title]');
                                    const subtitle = stepItem.querySelector('[data-step-subtitle]');

                                    if (circle) {
                                        circle.classList.toggle('bg-gerg-500', shouldHighlight);
                                        circle.classList.toggle('text-white', shouldHighlight);
                                        circle.classList.toggle('bg-slate-100', !shouldHighlight);
                                        circle.classList.toggle('text-slate-500', !shouldHighlight);
                                    }

                                    if (title) {
                                        title.classList.toggle('text-gerg-900', shouldHighlight);
                                        title.classList.toggle('text-slate-500', !shouldHighlight);
                                    }

                                    if (subtitle) {
                                        subtitle.classList.toggle('text-slate-500', shouldHighlight);
                                        subtitle.classList.toggle('text-slate-400', !shouldHighlight);
                                    }
                                });
                            }

                            function setupRegistrationSteps() {
                                const formSections = document.querySelectorAll('[data-form-step]');
                                const activateStep = (stepNumber) => updateRegistrationSteps(stepNumber);

                                formSections.forEach((section) => {
                                    const stepNumber = section.dataset.formStep;

                                    section.querySelectorAll('input, textarea, select').forEach((field) => {
                                        field.addEventListener('focus', () => activateStep(stepNumber));
                                        field.addEventListener('input', () => activateStep(stepNumber));
                                        field.addEventListener('change', () => activateStep(stepNumber));
                                    });
                                });

                                updateRegistrationSteps('1');
                            }

                            function setupImagePreview(inputId, previewId, containerId) {
                                const input = document.getElementById(inputId);
                                const preview = document.getElementById(previewId);
                                const container = document.getElementById(containerId);

                                if (input && preview && container) {
                                    input.addEventListener('change', function(e) {
                                        const file = e.target.files[0];
                                        if (file) {
                                            const reader = new FileReader();
                                            reader.onload = function(e) {
                                                preview.src = e.target.result;
                                                preview.classList.remove('hidden');
                                            }
                                            reader.readAsDataURL(file);
                                        } else {
                                            preview.classList.add('hidden');
                                        }
                                    });
                                }
                            }

                            setupImagePreview('photo-upload', 'photo-preview', 'photo-preview-container');
                            setupImagePreview('aadhar-upload', 'aadhar-preview', 'aadhar-preview-container');
                            setupImagePreview('pan-upload', 'pan-preview', 'pan-preview-container');
                            setupImagePreview('passport-upload', 'passport-preview', 'passport-preview-container');
                            setupRegistrationSteps();

                            document.getElementById('associate-form').addEventListener('submit', async function(e) {
                                e.preventDefault();

                                const form = e.target;
                                const submitBtn = document.getElementById('submit-btn');
                                const formSuccess = document.getElementById('form-success');
                                const formErrors = document.getElementById('form-errors');

                                const errorElements = ['name', 'dob', 'mobile', 'email', 'nominee', 'correspondence_address', 'terms_agreed', 'photo', 'aadhar_card', 'pan_card', 'passport_photo', 'account_number', 'joining_date'];
                                errorElements.forEach(field => {
                                    const errorEl = document.getElementById(field + '-error');
                                    let inputEl = document.getElementById(field);
                                    let containerEl;

                                    if (['photo', 'aadhar_card', 'pan_card', 'passport_photo'].includes(field)) {
                                        containerEl = document.getElementById(field.replace('_', '-') + '-preview-container');
                                    }

                                    if (errorEl) errorEl.classList.add('hidden');
                                    if (inputEl) inputEl.classList.remove('border-red-500');
                                    if (containerEl) containerEl.classList.remove('border-red-500');
                                });

                                formSuccess.classList.add('hidden');
                                formErrors.classList.add('hidden');

                                submitBtn.disabled = true;
                                submitBtn.innerHTML = 'Submitting...';

                                const formData = new FormData(form);

                                try {
                                    const response = await fetch('{{ route("associate.store") }}', {
                                        method: 'POST',
                                        headers: {
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                            'Accept': 'application/json',
                                        },
                                        body: formData
                                    });

                                    const data = await response.json();

                                    if (!response.ok) {
                                        if (data.errors) {
                                            Object.keys(data.errors).forEach(field => {
                                                const errorEl = document.getElementById(field + '-error');
                                                let inputEl = document.getElementById(field);
                                                let containerEl;

                                                if (['photo', 'aadhar_card', 'pan_card', 'passport_photo'].includes(field)) {
                                                    containerEl = document.getElementById(field.replace('_', '-') + '-preview-container');
                                                }

                                                if (errorEl) {
                                                    errorEl.textContent = data.errors[field][0];
                                                    errorEl.classList.remove('hidden');
                                                }
                                                if (inputEl) inputEl.classList.add('border-red-500');
                                                if (containerEl) containerEl.classList.add('border-red-500');
                                            });
                                        } else {
                                            formErrors.textContent = data.message || 'Something went wrong. Please try again.';
                                            formErrors.classList.remove('hidden');
                                        }
                                    } else {
                                        if (data.success) {
                                            formSuccess.textContent = data.message;
                                            formSuccess.classList.remove('hidden');

                                            showSuccessAlert(data.message);

                                            form.reset();
                                            ['photo', 'aadhar', 'pan', 'passport'].forEach(prefix => {
                                                const preview = document.getElementById(prefix + '-preview');
                                                if (preview) preview.classList.add('hidden');
                                            });
                                            updateRegistrationSteps('1');
                                        }
                                    }
                                } catch (error) {
                                    console.error('Form submission error:', error);
                                    formErrors.textContent = 'Something went wrong. Please try again.';
                                    formErrors.classList.remove('hidden');
                                } finally {
                                    submitBtn.disabled = false;
                                    submitBtn.innerHTML = 'Submit Registration';
                                }
                            });

                            function showSuccessAlert(message) {
                                const alertDiv = document.createElement('div');
                                alertDiv.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
                                alertDiv.innerHTML = `
                                    <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full mx-4 text-center transform transition-all animate-bounce">
                                        <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-green-100 mb-6">
                                            <svg class="h-10 w-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                            </svg>
                                        </div>
                                        <h3 class="text-2xl font-bold text-gerg-900 mb-2">Success!</h3>
                                        <p class="text-slate-600 mb-6">${message}</p>
                                        <button onclick="this.closest('.fixed').remove()" class="btn-primary px-8 py-3 w-full">
                                            Okay
                                        </button>
                                    </div>
                                `;
                                document.body.appendChild(alertDiv);

                                setTimeout(() => {
                                    alertDiv.style.opacity = '0';
                                    setTimeout(() => alertDiv.remove(), 300);
                                }, 5000);
                            }
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection