@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">
            <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>

        <div class="bg-card border rounded-xl shadow-sm p-6 md:p-8">
            @if ($errors->any())
                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
                    <h3 class="text-lg font-medium text-red-800">Please fix the following errors:</h3>
                    <ul class="mt-2 list-disc list-inside text-sm text-red-700">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('register.submit') }}" enctype="multipart/form-data">
                @csrf
                
                <!-- Basic Information -->
                <div class="space-y-6 mb-6">
                    <h3 class="text-lg font-medium">Personal Information</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
                            <input 
                                type="text" 
                                id="name" 
                                name="name" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                value="{{ old('name') }}" 
                                required
                            >
                        </div>
                        
                        <div class="space-y-2">
                            <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
                            <input 
                                type="email" 
                                id="email" 
                                name="email" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                value="{{ old('email') }}" 
                                required
                            >
                        </div>
                        
                        <div class="space-y-2">
                            <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                            <input 
                                type="password" 
                                id="password" 
                                name="password" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                required
                            >
                        </div>
                        
                        <div class="space-y-2">
                            <label for="password_confirmation" class="block text-sm font-medium text-gray-700">Confirm Password</label>
                            <input 
                                type="password" 
                                id="password_confirmation" 
                                name="password_confirmation" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                required
                            >
                        </div>
                        
                        <div class="space-y-2">
                            <label for="country" class="block text-sm font-medium text-gray-700">Country</label>
                            <input 
                                type="text" 
                                id="country" 
                                name="country" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                value="{{ old('country') }}" 
                                required
                            >
                        </div>
                        
                        <div class="space-y-2">
                            <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number (with country code)</label>
                            <input 
                                type="tel" 
                                id="phone" 
                                name="phone" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                value="{{ old('phone') }}" 
                                placeholder="+1234567890"
                            >
                            <p class="text-xs text-gray-500">Include country code (e.g., +1 for US)</p>
                        </div>
                    </div>
                </div>
                
                <!-- Account Type -->
                <div class="space-y-6 mb-6">
                    <h3 class="text-lg font-medium">Account Type</h3>
                    
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <input 
                                type="radio" 
                                id="account_type_individual" 
                                name="account_type" 
                                value="individual" 
                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300"
                                {{ old('account_type') == 'individual' ? 'checked' : '' }}
                                required
                            >
                            <label for="account_type_individual" class="ml-2 block text-sm text-gray-700">
                                Individual Caregiver
                            </label>
                        </div>
                        
                        <div class="flex items-center">
                            <input 
                                type="radio" 
                                id="account_type_organization" 
                                name="account_type" 
                                value="organization" 
                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300"
                                {{ old('account_type') == 'organization' ? 'checked' : '' }}
                            >
                            <label for="account_type_organization" class="ml-2 block text-sm text-gray-700">
                                Organization
                            </label>
                        </div>
                        
                        <div class="flex items-center">
                            <input 
                                type="radio" 
                                id="account_type_donor" 
                                name="account_type" 
                                value="donor" 
                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300"
                                {{ old('account_type') == 'donor' ? 'checked' : '' }}
                            >
                            <label for="account_type_donor" class="ml-2 block text-sm text-gray-700">
                                Donor
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Organization Details (conditionally shown) -->
                <div id="organization-details" class="space-y-6 mb-6" style="display: none;">
                    <h3 class="text-lg font-medium">Organization Details</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label for="organization_name" class="block text-sm font-medium text-gray-700">Organization Name</label>
                            <input 
                                type="text" 
                                id="organization_name" 
                                name="organization_name" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                value="{{ old('organization_name') }}"
                            >
                        </div>
                        
                        <div class="space-y-2">
                            <label for="organization_type" class="block text-sm font-medium text-gray-700">Organization Type</label>
                            <input 
                                type="text" 
                                id="organization_type" 
                                name="organization_type" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                value="{{ old('organization_type') }}"
                            >
                        </div>
                        
                        <div class="space-y-2 md:col-span-2">
                            <label for="organization_description" class="block text-sm font-medium text-gray-700">Organization Description</label>
                            <textarea 
                                id="organization_description" 
                                name="organization_description" 
                                rows="3" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                            >{{ old('organization_description') }}</textarea>
                        </div>
                        
                        <div class="space-y-2">
                            <label for="organization_registration_number" class="block text-sm font-medium text-gray-700">Registration Number</label>
                            <input 
                                type="text" 
                                id="organization_registration_number" 
                                name="organization_registration_number" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                value="{{ old('organization_registration_number') }}"
                            >
                        </div>
                        
                        <div class="space-y-2">
                            <label for="organization_website" class="block text-sm font-medium text-gray-700">Website (optional)</label>
                            <input 
                                type="url" 
                                id="organization_website" 
                                name="organization_website" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
                                value="{{ old('organization_website') }}"
                            >
                        </div>
                    </div>
                </div>
                
                <!-- Terms and Consent -->
                <div class="space-y-6 mb-6">
                    <h3 class="text-lg font-medium">Terms and Consent</h3>
                    
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input 
                                    type="checkbox" 
                                    id="terms_accepted" 
                                    name="terms_accepted" 
                                    value="on"
                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
                                    required
                                >
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="terms_accepted" class="font-medium text-gray-700">I accept the Terms and Conditions</label>
                                <p class="text-gray-500">By creating an account, you agree to our Terms of Service and Privacy Policy.</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input 
                                    type="checkbox" 
                                    id="marketing_consent" 
                                    name="marketing_consent" 
                                    value="on"
                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
                                >
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="marketing_consent" class="font-medium text-gray-700">I would like to receive updates (optional)</label>
                                <p class="text-gray-500">Get updates about new elderly profiles, donations, and platform news.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="flex justify-end">
                    <button 
                        type="submit" 
                        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"
                    >
                        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
            </a>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const accountTypeRadios = document.querySelectorAll('input[name="account_type"]');
        const organizationDetails = document.getElementById('organization-details');
        
        // Initial check
        if (document.getElementById('account_type_organization').checked) {
            organizationDetails.style.display = 'block';
        }
        
        // Add event listeners
        accountTypeRadios.forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === 'organization') {
                    organizationDetails.style.display = 'block';
                } else {
                    organizationDetails.style.display = 'none';
                }
            });
        });
    });
</script>
@endsection