@extends('layouts.app')

@section('content')
<div class="min-h-screen flex flex-col items-center justify-center p-4 bg-muted/30">
    <div class="w-full max-w-4xl">
        <div class="text-center mb-8">
            <a href="{{ url('/') }}" class="inline-flex items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
                </svg>
                <span class="text-2xl font-semibold">Elderly Care Connect</span>
            </a>
        </div>
        
        <div class="bg-card border rounded-xl shadow-sm p-6 md:p-8" x-data="registrationForm()">
            <div class="mb-6 text-center">
                <h1 class="text-2xl font-bold">Create an Account</h1>
                <p class="text-muted-foreground mt-1">Join our community to support elderly individuals</p>
            </div>
            
            <!-- Progress Steps -->
            <div class="mb-8">
                <div class="flex items-center justify-between relative">
                    <div class="w-full absolute top-1/2 h-0.5 bg-gray-200 -z-10"></div>
                    <template x-for="(step, index) in steps" :key="index">
                        <div class="flex flex-col items-center">
                            <div 
                                class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-200"
                                :class="{
                                    'bg-primary text-white': currentStep >= index,
                                    'bg-gray-100 text-gray-400 border border-gray-300': currentStep < index
                                }"
                            >
                                <template x-if="currentStep > index">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                    </svg>
                                </template>
                                <template x-if="currentStep <= index">
                                    <span x-text="index + 1"></span>
                                </template>
                            </div>
                            <span 
                                class="text-xs mt-2 font-medium"
                                :class="{
                                    'text-primary': currentStep >= index,
                                    'text-gray-500': currentStep < index
                                }"
                                x-text="step"
                            ></span>
                        </div>
                    </template>
                </div>
            </div>
            
            <form method="POST" action="{{ route('register.submit') }}" enctype="multipart/form-data" id="registration-form" x-ref="form">
                @csrf
                
                <!-- Step 1: Account Type Selection -->
                <div x-show="currentStep === 0" class="space-y-6">
                    <h3 class="text-lg font-medium">Select Account Type</h3>
                    <p class="text-sm text-muted-foreground">Choose the type of account that best fits your needs</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        
                        <div 
                            class="border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:border-primary"
                            :class="{'border-primary bg-primary/5': accountType === 'organization', 'border-gray-200': accountType !== 'organization'}"
                            @click="accountType = 'organization'"
                        >
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <h4 class="text-base font-medium">Organization</h4>
                                    <p class="text-sm text-muted-foreground mt-1">Create and manage elderly profiles for your organization (requires KYC verification)</p>
                                </div>
                            </div>
                        </div>
                        
                        <div 
                            class="border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:border-primary"
                            :class="{'border-primary bg-primary/5': accountType === 'individual', 'border-gray-200': accountType !== 'individual'}"
                            @click="accountType = 'individual'"
                        >
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <h4 class="text-base font-medium">Individual Caregiver</h4>
                                    <p class="text-sm text-muted-foreground mt-1">Create profiles for elderly individuals you're caring for</p>
                                </div>
                            </div>
                        </div>
                        
                        <div 
                            class="border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:border-primary"
                            :class="{'border-primary bg-primary/5': accountType === 'donor', 'border-gray-200': accountType !== 'donor'}"
                            @click="accountType = 'donor'"
                        >
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <h4 class="text-base font-medium">Donor</h4>
                                    <p class="text-sm text-muted-foreground mt-1">Support elderly individuals through donations and track your impact</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-red-500 text-sm" x-show="errors.accountType" x-text="errors.accountType"></div>
                </div>
                
                <!-- Step 2: Personal Information -->
                <div x-show="currentStep === 1" class="space-y-6">
                    <h3 class="text-lg font-medium">Personal Information</h3>
                    <p class="text-sm text-muted-foreground">Tell us a bit about yourself</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <x-ui.label for="name">Full Name</x-ui.label>
                            <x-ui.input
                                type="text"
                                id="name"
                                name="name"
                                placeholder="John Doe"
                                x-model="formData.name"
                                class="@error('name') border-red-500 @enderror"
                                required
                            />
                            @error('name')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                            <div class="text-red-500 text-sm" x-show="errors.name" x-text="errors.name"></div>
                        </div>
                        
                        <div class="space-y-2">
                            <x-ui.label for="email">Email Address</x-ui.label>
                            <x-ui.input
                                type="email"
                                id="email"
                                name="email"
                                placeholder="you@example.com"
                                x-model="formData.email"
                                class="@error('email') border-red-500 @enderror"
                                required
                            />
                            @error('email')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                            <div class="text-red-500 text-sm" x-show="errors.email" x-text="errors.email"></div>
                        </div>
                        
                        <div class="space-y-2">
                            <x-ui.label for="password">Password</x-ui.label>
                            <div class="relative">
                                <x-ui.input
                                    type="password"
                                    id="password"
                                    name="password"
                                    placeholder="••••••••"
                                    x-model="formData.password"
                                    class="@error('password') border-red-500 @enderror"
                                    required
                                />
                                <button 
                                    type="button" 
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
                                    @click="togglePasswordVisibility()"
                                >
                                    <svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                                        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                                    </svg>
                                    <svg x-show="showPassword" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
                                        <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
                                    </svg>
                                </button>
                            </div>
                            <p class="text-xs text-muted-foreground">Password must be at least 8 characters with a number and a special character</p>
                            @error('password')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                            <div class="text-red-500 text-sm" x-show="errors.password" x-text="errors.password"></div>
                        </div>
                        
                        <div class="space-y-2">
                            <x-ui.label for="password_confirmation">Confirm Password</x-ui.label>
                            <x-ui.input
                                type="password"
                                id="password_confirmation"
                                name="password_confirmation"
                                placeholder="••••••••"
                                x-model="formData.password_confirmation"
                                class="@error('password_confirmation') border-red-500 @enderror"
                                required
                            />
                            @error('password_confirmation')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                            <div class="text-red-500 text-sm" x-show="errors.password_confirmation" x-text="errors.password_confirmation"></div>
                        </div>
                        
                        <div class="space-y-2">
                            <x-ui.label for="country">Country</x-ui.label>
                            <x-ui.select
                                id="country"
                                name="country"
                                x-model="formData.country"
                                class="@error('country') border-red-500 @enderror"
                                required
                            >
                                <option value="">Select your country</option>
                                <option value="KE">Kenya</option>
                                <option value="US">United States</option>
                                <option value="GB">United Kingdom</option>
                                <option value="CA">Canada</option>
                                <option value="AU">Australia</option>
                                <option value="DE">Germany</option>
                                <option value="FR">France</option>
                                <option value="IN">India</option>
                                <option value="NG">Nigeria</option>
                                <option value="ZA">South Africa</option>
                                <option value="TZ">Tanzania</option>
                                <option value="UG">Uganda</option>
                                <option value="RW">Rwanda</option>
                            </x-ui.select>
                            @error('country')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                            <div class="text-red-500 text-sm" x-show="errors.country" x-text="errors.country"></div>
                        </div>
                        
                        <div class="space-y-2">
                            <x-ui.label for="phone">Phone Number</x-ui.label>
                            <x-ui.phone-input
                                id="phone"
                                name="phone"
                                placeholder="Phone number"
                                x-model="formData.phone"
                                class="@error('phone') border-red-500 @enderror"
                            />
                            @error('phone')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <!-- Step 3: Organization Details (Only for Organizations) -->
                <div x-show="currentStep === 2 && accountType === 'organization'" class="space-y-6">
                    <h3 class="text-lg font-medium">Organization Details</h3>
                    <p class="text-sm text-muted-foreground">Tell us about your organization</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <x-ui.label for="organization_name">Organization Name</x-ui.label>
                            <x-ui.input
                                type="text"
                                id="organization_name"
                                name="organization_name"
                                placeholder="Organization Name"
                                x-model="formData.organization_name"
                                class="@error('organization_name') border-red-500 @enderror"
                                required
                            />
                            @error('organization_name')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                            <div class="text-red-500 text-sm" x-show="errors.organization_name" x-text="errors.organization_name"></div>
                        </div>
                        
                        <div class="space-y-2">
                            <x-ui.label for="organization_type">Organization Type</x-ui.label>
                            <x-ui.select
                                id="organization_type"
                                name="organization_type"
                                x-model="formData.organization_type"
                                class="@error('organization_type') border-red-500 @enderror"
                                required
                            >
                                <option value="">Select organization type</option>
                                <option value="ngo">Non-Governmental Organization (NGO)</option>
                                <option value="charity">Charity</option>
                                <option value="foundation">Foundation</option>
                                <option value="community_org">Community Organization</option>
                                <option value="religious_org">Religious Organization</option>
                                <option value="care_home">Care Home</option>
                                <option value="other">Other</option>
                            </x-ui.select>
                            @error('organization_type')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                            <div class="text-red-500 text-sm" x-show="errors.organization_type" x-text="errors.organization_type"></div>
                        </div>
                        
                        <div class="space-y-2 md:col-span-2">
                            <x-ui.label for="organization_description">Organization Description</x-ui.label>
                            <textarea
                                id="organization_description"
                                name="organization_description"
                                rows="4"
                                placeholder="Briefly describe your organization and its mission..."
                                x-model="formData.organization_description"
                                class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                                class="@error('organization_description') border-red-500 @enderror"
                                required
                            ></textarea>
                            @error('organization_description')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                            <div class="text-red-500 text-sm" x-show="errors.organization_description" x-text="errors.organization_description"></div>
                        </div>
                        
                        <div class="space-y-2">
                            <x-ui.label for="organization_website">Website (Optional)</x-ui.label>
                            <x-ui.input
                                type="url"
                                id="organization_website"
                                name="organization_website"
                                placeholder="https://example.org"
                                x-model="formData.organization_website"
                                class="@error('organization_website') border-red-500 @enderror"
                            />
                            @error('organization_website')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="space-y-2">
                            <x-ui.label for="organization_registration_number">Registration Number</x-ui.label>
                            <x-ui.input
                                type="text"
                                id="organization_registration_number"
                                name="organization_registration_number"
                                placeholder="Registration Number"
                                x-model="formData.organization_registration_number"
                                class="@error('organization_registration_number') border-red-500 @enderror"
                                required
                            />
                            @error('organization_registration_number')
                                <div class="text-red-500 text-sm">{{ $message }}</div>
                            @enderror
                            <div class="text-red-500 text-sm" x-show="errors.organization_registration_number" x-text="errors.organization_registration_number"></div>
                        </div>
                    </div>
                </div>
                
                <!-- Step 4: KYC Documents (Only for Organizations) -->
                <div x-show="currentStep === 3 && accountType === 'organization'" class="space-y-6">
                    <h3 class="text-lg font-medium">KYC Document Verification</h3>
                    <p class="text-sm text-muted-foreground">Please upload documents to verify your organization's identity</p>
                    
                    <div class="space-y-6">
                        <template x-for="(doc, index) in documents" :key="doc.id">
                            <div class="p-4 border rounded-lg space-y-4">
                                <div class="flex justify-between items-center">
                                    <h4 class="font-medium" x-text="'Document ' + (index + 1)" id="document-heading-${doc.id}"></h4>
                                    <button 
                                        type="button" 
                                        class="text-red-500 hover:text-red-700"
                                        @click="documents = documents.filter((_, i) => i !== index)"
                                        x-show="documents.length > 1"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                    </button>
                                </div>
                                
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-gray-700" x-bind:for="'document_type_' + doc.id">Document Type</label>
                                    <select 
                                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md"
                                        x-bind:id="'document_type_' + doc.id"
                                        x-bind:name="'documents[' + index + '][type]'"
                                        x-model="doc.type"
                                        required
                                    >
                                        <option value="">Select document type</option>
                                        <option value="registration_certificate">Registration Certificate</option>
                                        <option value="tax_certificate">Tax Compliance Certificate</option>
                                        <option value="director_id">Director's ID/Passport</option>
                                        <option value="business_license">Business License</option>
                                        <option value="utility_bill">Utility Bill</option>
                                        <option value="bank_statement">Bank Statement</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-gray-700" x-bind:for="'document_description_' + doc.id">Document Description (Optional)</label>
                                    <input
                                        type="text"
                                        class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                        x-bind:id="'document_description_' + doc.id"
                                        x-bind:name="'documents[' + index + '][description]'"
                                        placeholder="Provide additional details about this document"
                                        x-model="doc.description"
                                    />
                                </div>
                                
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-gray-700" x-bind:for="'document_file_' + doc.id">Upload Document</label>
                                    <div 
                                        class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md relative cursor-pointer"
                                        x-bind:class="{'border-primary bg-primary/5': doc.fileSelected, 'border-red-500 bg-red-50': errors['document_' + doc.id]}"
                                        onclick="document.getElementById('document_file_' + this.getAttribute('data-doc-id')).click()"
                                        x-bind:data-doc-id="doc.id"
                                        @dragover.prevent="$event.currentTarget.classList.add('border-primary', 'bg-primary/5')"
                                        @dragleave.prevent="$event.currentTarget.classList.remove('border-primary', 'bg-primary/5')"
                                        @drop.prevent="handleFileDrop($event, doc.id)"
                                    >
                                        <div class="space-y-1 text-center w-full">
                                            <template x-if="!doc.fileSelected">
                                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4h-12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                            </template>
                                            
                                            <template x-if="doc.fileSelected">
                                                <div class="flex items-center justify-center">
                                                    <template x-if="doc.fileType && doc.fileType.includes('image')">
                                                        <img x-bind:src="doc.filePreview" class="h-24 w-auto object-contain" x-bind:alt="'Preview of ' + doc.fileName" />
                                                    </template>
                                                    
                                                    <template x-if="doc.fileType && !doc.fileType.includes('image')">
                                                        <div class="flex items-center space-x-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <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 font-medium text-gray-900" x-text="doc.fileName"></span>
                                                        </div>
                                                    </template>
                                                </div>
                                            </template>
                                            
                                            <div class="flex text-sm text-gray-600 justify-center mt-2">
                                                <button 
                                                    type="button" 
                                                    class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary-dark focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary"
                                                    onclick="event.stopPropagation(); document.getElementById('document_file_' + this.getAttribute('data-doc-id')).click()"
                                                    x-bind:data-doc-id="doc.id"
                                                >
                                                    <span x-text="doc.fileSelected ? 'Change file' : 'Upload a file'"></span>
                                                </button>
                                                <input 
                                                    x-bind:id="'document_file_' + doc.id" 
                                                    x-bind:name="'documents[' + index + '][file]'" 
                                                    type="file" 
                                                    class="hidden" 
                                                    accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" 
                                                    required
                                                    @change="handleFileChange($event, doc)"
                                                >
                                                <template x-if="!doc.fileSelected">
                                                    <p class="pl-1">or drag and drop</p>
                                                </template>
                                                <template x-if="doc.fileSelected">
                                                    <button 
                                                        type="button" 
                                                        class="ml-2 text-red-600 hover:text-red-800" 
                                                        onclick="event.stopPropagation(); event.preventDefault(); Alpine.evaluate(this, 'removeFile(doc)')">
                                                        Remove
                                                    </button>
                                                </template>
                                            </div>
                                            <p class="text-xs text-gray-500">
                                                PDF, DOC, DOCX, JPG, JPEG, PNG up to 5MB
                                            </p>
                                            <div class="text-red-500 text-xs mt-1" x-show="doc.fileSizeError" x-text="doc.fileSizeError"></div>
                                        </div>
                                    </div>
                                    <div class="text-red-500 text-sm" x-show="errors['document_' + doc.id]" x-text="errors['document_' + doc.id]"></div>
                                </div>
                            </div>
                        </template>
                        
                        <div class="flex justify-center" x-show="documents.length < 10">
                            <button 
                                type="button" 
                                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                                @click="documents.push({ id: Date.now(), type: '', label: '', description: '', fileSelected: false, fileName: '', fileType: '', filePreview: '', fileSizeError: '' })"
                            >
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                                </svg>
                                Add Another Document
                            </button>
                        </div>
                        
                        <div class="text-sm text-muted-foreground text-center" x-show="documents.length >= 10">
                            Maximum number of documents reached (10)
                        </div>
                        
                        <div class="text-red-500 text-sm" x-show="errors.documents" x-text="errors.documents"></div>
                    </div>
                </div>
                
                <!-- Step 3/5: Terms and Conditions (Final step for all users) -->
                <div x-show="(currentStep === 2 && (accountType === 'donor' || accountType === 'individual' || accountType === 'admin')) || (currentStep === 4 && accountType === 'organization')" class="space-y-6">
                    <h3 class="text-lg font-medium">Terms and Conditions</h3>
                    <p class="text-sm text-muted-foreground">Please review and accept our terms and conditions</p>
                    
                    <div class="space-y-4">
                        <div class="border rounded-md p-4 max-h-60 overflow-y-auto bg-gray-50">
                            <h4 class="font-medium mb-2">Terms of Service</h4>
                            <p class="text-sm text-gray-600 mb-2">By creating an account, you agree to our Terms of Service and Privacy Policy.</p>
                            <p class="text-sm text-gray-600 mb-2">1. <strong>Account Responsibility:</strong> You are responsible for maintaining the security of your account and password. The platform cannot and will not be liable for any loss or damage from your failure to comply with this security obligation.</p>
                            <p class="text-sm text-gray-600 mb-2">2. <strong>Acceptable Use:</strong> You may not use the platform for any illegal or unauthorized purpose. You must not, in the use of the service, violate any laws in your jurisdiction.</p>
                            <p class="text-sm text-gray-600 mb-2">3. <strong>Data Privacy:</strong> We collect and process personal information as described in our Privacy Policy. By using our services, you consent to such processing and you warrant that all data provided by you is accurate.</p>
                            <p class="text-sm text-gray-600">4. <strong>Termination:</strong> We may terminate or suspend access to our service immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.</p>
                        </div>
                        
                        <div class="flex items-start space-x-2">
                            <input
                                type="checkbox"
                                id="terms_accepted"
                                name="terms_accepted"
                                class="h-4 w-4 mt-1 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary checked:text-primary-foreground"
                                x-model="termsAccepted"
                                @change="console.log('Terms checkbox changed:', termsAccepted)"
                                required
                            >
                            <x-ui.label for="terms_accepted" class="text-sm cursor-pointer">
                                I agree to the <a href="#" class="text-primary hover:underline">Terms of Service</a> and <a href="#" class="text-primary hover:underline">Privacy Policy</a>
                            </x-ui.label>
                        </div>
                        @error('terms_accepted')
                            <div class="text-red-500 text-sm">{{ $message }}</div>
                        @enderror
                        <div class="text-red-500 text-sm" x-show="errors.terms_accepted" x-text="errors.terms_accepted"></div>
                        
                        <div class="flex items-start space-x-2">
                            <input
                                type="checkbox"
                                id="marketing_consent"
                                name="marketing_consent"
                                class="h-4 w-4 mt-1 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary checked:text-primary-foreground"
                                x-model="marketingConsent"
                            >
                            <x-ui.label for="marketing_consent" class="text-sm cursor-pointer">
                                I would like to receive updates about new elderly profiles, donations, and platform news (optional)
                            </x-ui.label>
                        </div>
                    </div>
                </div>
                
                <!-- Navigation Buttons -->
                <div class="flex justify-between mt-8">
                    <button 
                        type="button" 
                        class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                        @click="prevStep()"
                        x-show="currentStep > 0"
                    >
                        Back
                    </button>
                    <div x-show="currentStep === 0"></div>
                    
                    <button 
                        type="button" 
                        class="px-4 py-2 bg-primary text-white rounded-md text-sm font-medium hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                        @click="nextStep()"
                        x-show="!isLastStep()"
                    >
                        Continue
                    </button>
                    
                    <button 
                        type="button" 
                        class="px-4 py-2 bg-primary text-white rounded-md text-sm font-medium hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                        x-show="isLastStep()"
                        @click="handleSubmit()"
                    >
                        Create Account
                    </button>
                </div>
            </form>
        </div>
        
        <div class="text-center mt-6">
            <p class="text-sm text-muted-foreground mb-2">Already have an account?</p>
            <a href="{{ route('login') }}" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
                Sign in to your account
            </a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function registrationForm() {
        return {
            handleFileChange(event, doc) {
                const file = event.target.files[0];
                if (file) {
                    doc.fileSelected = true;
                    doc.fileName = file.name;
                    doc.fileType = file.type;
                    
                    // Force Alpine to recognize the change
                    this.documents = [...this.documents];
                    
                    if (file.type.includes('image')) {
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            doc.filePreview = e.target.result;
                            // Force Alpine to recognize the change again after preview is loaded
                            this.documents = [...this.documents];
                        };
                        reader.readAsDataURL(file);
                    }
                    
                    // Validate file size
                    if (file.size > 5 * 1024 * 1024) {
                        doc.fileSizeError = 'File size exceeds 5MB';
                    } else {
                        doc.fileSizeError = '';
                    }
                }
            },
            
            handleFileDrop(event, docId) {
                const files = event.dataTransfer.files;
                if (files.length) {
                    const doc = this.documents.find(d => d.id === docId);
                    if (doc) {
                        const fileInput = document.getElementById('document_file_' + docId);
                        if (fileInput) {
                            // Create a DataTransfer object and add the file
                            const dataTransfer = new DataTransfer();
                            dataTransfer.items.add(files[0]);
                            fileInput.files = dataTransfer.files;
                            
                            // Trigger the change event manually
                            const changeEvent = new Event('change', { bubbles: true });
                            fileInput.dispatchEvent(changeEvent);
                        }
                    }
                }
            },
            
            removeFile(doc) {
                doc.fileSelected = false;
                doc.fileName = '';
                doc.fileType = '';
                doc.filePreview = '';
                doc.fileSizeError = '';
                
                const fileInput = document.getElementById('document_file_' + doc.id);
                if (fileInput) {
                    fileInput.value = '';
                }
            },
            currentStep: 0,
            showPassword: false,
            togglePasswordVisibility() {
                this.showPassword = !this.showPassword;
                const passwordField = document.getElementById('password');
                const confirmPasswordField = document.getElementById('password_confirmation');
                
                if (passwordField) {
                    passwordField.type = this.showPassword ? 'text' : 'password';
                }
                
                if (confirmPasswordField) {
                    confirmPasswordField.type = this.showPassword ? 'text' : 'password';
                }
            },
            getSteps() {
                const baseSteps = ['Account Type', 'Personal Information'];
                
                if (this.accountType === 'organization') {
                    return [
                        ...baseSteps,
                        'Organization Details',
                        'KYC Documents',
                        'Terms & Conditions'
                    ];
                } else {
                    return [
                        ...baseSteps,
                        'Terms & Conditions'
                    ];
                }
            },
            get steps() {
                return this.getSteps();
            },
            accountType: '',
            showPassword: false,
            termsAccepted: false,
            marketingConsent: false,
            formData: {
                name: '',
                email: '',
                password: '',
                password_confirmation: '',
                country: '',
                phone: '',
                organization_name: '',
                organization_type: '',
                organization_description: '',
                organization_website: '',
                organization_registration_number: '',
                terms_accepted: false,
                marketing_consent: false
            },
            errors: {},
            documents: [
                { id: 1, type: '', description: '', fileSelected: false, fileName: '', fileType: '', filePreview: '', fileSizeError: '' }
            ],
            
            nextStep() {
                if (this.validateCurrentStep()) {
                    this.currentStep++;
                }
            },
            
            prevStep() {
                this.currentStep--;
            },
            
            isLastStep() {
                return this.currentStep === this.steps.length - 1;
            },
            
            validateCurrentStep() {
                this.errors = {};
                let isValid = true;
                let errorMessage = '';
                
                if (this.currentStep === 0) {
                    // Validate account type
                    if (!this.accountType) {
                        this.errors.accountType = 'Please select an account type';
                        isValid = false;
                        errorMessage = 'Please select an account type';
                    }
                } else if (this.currentStep === 1) {
                    // Validate personal information
                    if (!this.formData.name) {
                        this.errors.name = 'Name is required';
                        isValid = false;
                        errorMessage = 'Please enter your name';
                    }
                    if (!this.formData.email) {
                        this.errors.email = 'Email is required';
                        isValid = false;
                        errorMessage = errorMessage || 'Please enter your email';
                    } else if (!this.isValidEmail(this.formData.email)) {
                        this.errors.email = 'Please enter a valid email address';
                        isValid = false;
                        errorMessage = errorMessage || 'Please enter a valid email address';
                    }
                    if (!this.formData.password) {
                        this.errors.password = 'Password is required';
                        isValid = false;
                        errorMessage = errorMessage || 'Please enter a password';
                    } else if (this.formData.password.length < 8) {
                        this.errors.password = 'Password must be at least 8 characters';
                        isValid = false;
                        errorMessage = errorMessage || 'Password must be at least 8 characters';
                    }
                    if (!this.formData.password_confirmation) {
                        this.errors.password_confirmation = 'Please confirm your password';
                        isValid = false;
                        errorMessage = errorMessage || 'Please confirm your password';
                    } else if (this.formData.password !== this.formData.password_confirmation) {
                        this.errors.password_confirmation = 'Passwords do not match';
                        isValid = false;
                        errorMessage = errorMessage || 'Passwords do not match';
                    }
                    if (!this.formData.country) {
                        this.errors.country = 'Please select your country';
                        isValid = false;
                        errorMessage = errorMessage || 'Please select your country';
                    }
                    
                    if (!isValid) {
                        this.showValidationError(errorMessage || 'Please fill in all required fields correctly');
                    }
                } else if (this.currentStep === 2 && this.accountType === 'organization') {
                    // Validate organization details
                    if (!this.formData.organization_name) {
                        this.errors.organization_name = 'Organization name is required';
                        isValid = false;
                    }
                    if (!this.formData.organization_type) {
                        this.errors.organization_type = 'Please select organization type';
                        isValid = false;
                    }
                    if (!this.formData.organization_description) {
                        this.errors.organization_description = 'Organization description is required';
                        isValid = false;
                    }
                    if (!this.formData.organization_registration_number) {
                        this.errors.organization_registration_number = 'Registration number is required';
                        isValid = false;
                    }
                    
                    if (!isValid) {
                        this.showValidationError('Please fill in all organization details');
                    }
                } else if (this.currentStep === 3 && this.accountType === 'organization') {
                    // Validate KYC documents
                    let hasValidDocument = false;
                    let hasFileWithoutType = false;
                    let hasTypeWithoutFile = false;
                    
                    for (let i = 0; i < this.documents.length; i++) {
                        const doc = this.documents[i];
                        const fileInput = document.getElementById('document_file_' + doc.id);
                        const hasFile = doc.fileSelected && fileInput && fileInput.files && fileInput.files.length > 0;
                        
                        // Check if both document type is selected and file is uploaded
                        if (doc.type && hasFile) {
                            hasValidDocument = true;
                            break;
                        }
                        
                        // Track if there's a file without type or type without file
                        if (hasFile && !doc.type) {
                            hasFileWithoutType = true;
                            this.errors['document_' + doc.id] = 'Please select a document type';
                        } else if (doc.type && !hasFile) {
                            hasTypeWithoutFile = true;
                            this.errors['document_' + doc.id] = 'Please upload a file';
                        }
                    }
                    
                    if (!hasValidDocument) {
                        if (hasFileWithoutType) {
                            this.errors.documents = 'Please select a document type for your uploaded file';
                            this.showValidationError('Please select a document type for your uploaded file');
                        } else if (hasTypeWithoutFile) {
                            this.errors.documents = 'Please upload a file for your selected document type';
                            this.showValidationError('Please upload a file for your selected document type');
                        } else {
                            this.errors.documents = 'At least one document with type and file is required';
                            this.showValidationError('Please upload at least one document with a selected document type');
                        }
                        isValid = false;
                    }
                } else if (this.steps[this.currentStep] === 'Terms & Conditions') {
                    // Validate terms acceptance
                    console.log('Validating terms acceptance, termsAccepted:', this.termsAccepted);
                    if (!this.termsAccepted) {
                        this.errors.terms_accepted = 'You must accept the terms and conditions';
                        isValid = false;
                        this.showValidationError('You must accept the terms and conditions to continue');
                    } else {
                        console.log('Terms accepted, validation passed');
                    }
                }
                
                return isValid;
            },
            
            showValidationError(message) {
                const alertDiv = document.createElement('div');
                alertDiv.className = 'fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50';
                alertDiv.setAttribute('role', 'alert');
                
                const strongEl = document.createElement('strong');
                strongEl.className = 'font-bold';
                strongEl.textContent = 'Error: ';
                
                const spanEl = document.createElement('span');
                spanEl.className = 'block sm:inline';
                spanEl.textContent = message;
                
                const closeButton = document.createElement('button');
                closeButton.className = 'absolute top-0 right-0 -mt-1 -mr-1 text-red-700 hover:text-red-900';
                closeButton.innerHTML = '&times;';
                closeButton.onclick = function() {
                    document.body.removeChild(alertDiv);
                };
                
                alertDiv.appendChild(strongEl);
                alertDiv.appendChild(spanEl);
                alertDiv.appendChild(closeButton);
                
                // Remove any existing alerts
                const existingAlerts = document.querySelectorAll('[role="alert"]');
                existingAlerts.forEach(alert => {
                    alert.parentNode.removeChild(alert);
                });
                
                document.body.appendChild(alertDiv);
                
                // Auto-remove after 5 seconds
                setTimeout(() => {
                    if (document.body.contains(alertDiv)) {
                        document.body.removeChild(alertDiv);
                    }
                }, 5000);
            },
            
            isValidEmail(email) {
                const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            },
            
            addDocument() {
                if (this.documents.length < 10) {
                    const newId = this.documents.length > 0 ? Math.max(...this.documents.map(d => d.id)) + 1 : 1;
                    this.documents.push({
                        id: newId,
                        type: '',
                        description: '',
                        fileSelected: false,
                        fileName: '',
                        fileType: '',
                        filePreview: '',
                        fileSizeError: ''
                    });
                }
            },
            
            removeDocument(id) {
                if (this.documents.length > 1) {
                    this.documents = this.documents.filter(d => d.id !== id);
                }
            },
            
            handleSubmit() {
                console.log('handleSubmit called');
                console.log('Current termsAccepted value:', this.termsAccepted);
                
                // Force validation to run
                if (this.validateCurrentStep()) {
                    console.log('Final step validation passed, preparing to submit');
                    try {
                        // Get the form reference
                        const form = this.$refs.form;
                        
                        // Add hidden input for account type
                        this.addHiddenInput(form, 'account_type', this.accountType);
                        
                        // Add terms_accepted field - IMPORTANT: This is the key field for submission
                        this.addHiddenInput(form, 'terms_accepted', this.termsAccepted ? 'on' : '');
                        console.log('Added terms_accepted hidden input:', this.termsAccepted ? 'on' : '');
                        
                        // Add marketing_consent field
                        this.addHiddenInput(form, 'marketing_consent', this.marketingConsent ? 'on' : '');
                        
                        // For organization accounts, add organization fields
                        if (this.accountType === 'organization') {
                            this.addHiddenInput(form, 'organization_name', this.formData.organization_name);
                            this.addHiddenInput(form, 'organization_type', this.formData.organization_type);
                            this.addHiddenInput(form, 'organization_description', this.formData.organization_description);
                            this.addHiddenInput(form, 'organization_registration_number', this.formData.organization_registration_number);
                            this.addHiddenInput(form, 'organization_website', this.formData.organization_website);
                            
                            // Add document data
                            if (this.documents && this.documents.length > 0) {
                                this.documents.forEach((doc, index) => {
                                    if (doc.type) {
                                        this.addHiddenInput(form, `documents[${index}][type]`, doc.type);
                                        if (doc.description) {
                                            this.addHiddenInput(form, `documents[${index}][description]`, doc.description);
                                        }
                                    }
                                });
                            }
                        }
                        
                        // Debug form data before submission
                        const formData = new FormData(form);
                        console.log('Form data to be submitted:');
                        for (let pair of formData.entries()) {
                            console.log(pair[0] + ': ' + pair[1]);
                        }
                        
                        console.log('Manually submitting form...');
                        // Use native form submission
                        form.submit();
                    } catch (error) {
                        console.error('Error during form submission:', error);
                        alert('There was an error submitting the form. Please try again.');
                    }
                } else {
                    console.log('Final step validation failed');
                }
            },
            
            submitForm() {
                console.log('submitForm called');
                if (this.validateCurrentStep()) {
                    console.log('Form validation passed, preparing to submit');
                    
                    try {
                        // Get the form reference
                        const form = this.$refs.form;
                        
                        // Add hidden input for account type
                        this.addHiddenInput(form, 'account_type', this.accountType);
                        
                        // Add terms_accepted field
                        this.addHiddenInput(form, 'terms_accepted', this.termsAccepted ? 'on' : '');
                        
                        // Add marketing_consent field
                        this.addHiddenInput(form, 'marketing_consent', this.marketingConsent ? 'on' : '');
                        
                        // For organization accounts, add organization fields
                        if (this.accountType === 'organization') {
                            this.addHiddenInput(form, 'organization_name', this.formData.organization_name);
                            this.addHiddenInput(form, 'organization_type', this.formData.organization_type);
                            this.addHiddenInput(form, 'organization_description', this.formData.organization_description);
                            this.addHiddenInput(form, 'organization_registration_number', this.formData.organization_registration_number);
                            this.addHiddenInput(form, 'organization_website', this.formData.organization_website);
                            
                            // Add document data
                            if (this.documents && this.documents.length > 0) {
                                this.documents.forEach((doc, index) => {
                                    if (doc.type) {
                                        this.addHiddenInput(form, `documents[${index}][type]`, doc.type);
                                        if (doc.description) {
                                            this.addHiddenInput(form, `documents[${index}][description]`, doc.description);
                                        }
                                    }
                                });
                            }
                        }
                        
                        // Debug form data before submission
                        const formData = new FormData(form);
                        console.log('Form data to be submitted:');
                        for (let pair of formData.entries()) {
                            console.log(pair[0] + ': ' + pair[1]);
                        }
                        
                        console.log('Form is ready to submit');
                        return true;
                    } catch (error) {
                        console.error('Error during form submission:', error);
                        alert('There was an error submitting the form. Please try again.');
                        return false;
                    }
                } else {
                    console.log('Form validation failed');
                    return false;
                }
            },
            
            // Helper function to add hidden input
            addHiddenInput(form, name, value) {
                // Check if input already exists
                let input = form.querySelector(`[name="${name}"]`);
                
                // If it doesn't exist, create it
                if (!input) {
                    input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = name;
                    form.appendChild(input);
                }
                
                // Set the value
                input.value = value || '';
            }
        };
    }
</script>
@endpush