@extends('layouts.app')

@section('title', 'Create Elderly Profile')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-5xl mx-auto">
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h1 class="text-2xl font-bold text-gray-800">Create New Elderly Profile</h1>
                <p class="text-gray-600 mt-1">Please fill out all required information. Profiles will be reviewed by admins before being published.</p>
            </div>
            
            <form action="{{ route('elderly.store') }}" method="POST" enctype="multipart/form-data" class="p-6 space-y-8" id="elderlyForm">
                @csrf
                <!-- Hidden fields for validation -->
                <!-- Only add the hidden deadline field if no date is selected in the visible field -->
                <input type="hidden" name="deadline_default" id="deadline_default" value="">
                
                <!-- Personal Information Section -->
                <div class="space-y-4">
                    <h2 class="text-xl font-semibold text-gray-800 pb-2 border-b border-gray-200">Personal Information</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name <span class="text-red-500">*</span></label>
                            <input type="text" name="name" id="name" value="{{ old('name') }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('name') border-red-500 @enderror" required>
                            @error('name')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="age" class="block text-sm font-medium text-gray-700 mb-1">Age <span class="text-red-500">*</span></label>
                            <input type="number" name="age" id="age" value="{{ old('age') }}" min="60" max="120" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('age') border-red-500 @enderror" required>
                            <p class="mt-1 text-xs text-gray-500">Will be automatically calculated if date of birth is provided.</p>
                            @error('age')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">Gender <span class="text-red-500">*</span></label>
                            <select name="gender" id="gender" class="mt-1 block w-full py-2 px-3 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 @error('gender') border-red-500 @enderror" required>
                                <option value="">Select Gender</option>
                                <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                <option value="other" {{ old('other') == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('gender')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="date_of_birth" class="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label>
                            <input type="date" name="date_of_birth" id="date_of_birth" value="{{ old('date_of_birth') }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('date_of_birth') border-red-500 @enderror">
                            @error('date_of_birth')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <!-- Contact & Location Section -->
                <div class="space-y-4">
                    <h2 class="text-xl font-semibold text-gray-800 pb-2 border-b border-gray-200">Contact & Location</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                            <input type="tel" name="phone" id="phone" value="{{ old('phone') }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('phone') border-red-500 @enderror">
                            @error('phone')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                            <input type="email" name="email" id="email" value="{{ old('email') }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('email') border-red-500 @enderror">
                            @error('email')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address <span class="text-red-500">*</span></label>
                            <input type="text" name="address" id="address" value="{{ old('address') }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('address') border-red-500 @enderror" required>
                            @error('address')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City <span class="text-red-500">*</span></label>
                            <input type="text" name="city" id="city" value="{{ old('city') }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('city') border-red-500 @enderror" required>
                            @error('city')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="state" class="block text-sm font-medium text-gray-700 mb-1">State/Province <span class="text-red-500">*</span></label>
                            <input type="text" name="state" id="state" value="{{ old('state') }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('state') border-red-500 @enderror" required>
                            @error('state')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Country <span class="text-red-500">*</span></label>
                            <select name="country" id="country" class="mt-1 block w-full py-2 px-3 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 @error('country') border-red-500 @enderror" required>
                                <option value="">Select Country</option>
                                <option value="US" {{ old('country') == 'US' ? 'selected' : '' }}>United States</option>
                                <option value="CA" {{ old('country') == 'CA' ? 'selected' : '' }}>Canada</option>
                                <option value="UK" {{ old('country') == 'UK' ? 'selected' : '' }}>United Kingdom</option>
                                <option value="NG" {{ old('country') == 'NG' ? 'selected' : '' }}>Nigeria</option>
                                <option value="GH" {{ old('country') == 'GH' ? 'selected' : '' }}>Ghana</option>
                                <option value="KE" {{ old('country') == 'KE' ? 'selected' : '' }}>Kenya</option>
                                <!-- Add more countries as needed -->
                            </select>
                            @error('country')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <!-- Profile Details Section -->
                <div class="space-y-4">
                    <h2 class="text-xl font-semibold text-gray-800 pb-2 border-b border-gray-200">Profile Details</h2>
                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Profile Title <span class="text-red-500">*</span></label>
                            <input type="text" name="title" id="title" value="{{ old('title') }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('title') border-red-500 @enderror" required>
                            <p class="mt-1 text-xs text-gray-500">A short, descriptive title for the profile. Example: "Help John recover from surgery"</p>
                            @error('title')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="story" class="block text-sm font-medium text-gray-700 mb-1">Story <span class="text-red-500">*</span></label>
                            <textarea name="story" id="story" rows="5" minlength="100" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border rounded-md border-gray-300 @error('story') border-red-500 @enderror" required>{{ old('story') }}</textarea>
                            <div class="text-xs text-gray-500 mt-1">Minimum 100 characters. <span id="storyCharCount">0</span>/100 characters</div>
                            @error('story')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="needs" class="block text-sm font-medium text-gray-700 mb-1">Needs <span class="text-red-500">*</span></label>
                            <div class="needs-container space-y-3" id="needsContainer">
                                <div class="flex items-center space-x-2 needs-item">
                                    <input type="text" name="needs[]" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('needs.*') border-red-500 @enderror" placeholder="Enter a need" required>
                                    <button type="button" class="add-need-btn bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600">
                                        <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="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>
                                    </button>
                                </div>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">List specific needs of the elderly person (e.g., "Medical supplies", "Rent assistance", "Food support").</p>
                            @error('needs')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                            @error('needs.*')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <!-- Funding Information Section -->
                <div class="space-y-4">
                    <h2 class="text-xl font-semibold text-gray-800 pb-2 border-b border-gray-200">Funding Information</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="goal_amount" class="block text-sm font-medium text-gray-700 mb-1">Goal Amount <span class="text-red-500">*</span></label>
                            <div class="mt-1 relative rounded-md shadow-sm">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500 sm:text-sm">
                                        {{ \App\Services\CurrencyService::getCurrencySymbol() }}
                                    </span>
                                </div>
                                <input type="number" name="goal_amount" id="goal_amount" min="1" step="0.01" value="{{ old('goal_amount') }}" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 sm:text-sm rounded-md border-gray-300 @error('goal_amount') border-red-500 @enderror" placeholder="0.00" required>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">The total amount needed to meet all needs.</p>
                            @error('goal_amount')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="deadline" class="block text-sm font-medium text-gray-700 mb-1">Deadline</label>
                            <input type="date" name="deadline" id="deadline" value="{{ old('deadline') }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 @error('deadline') border-red-500 @enderror">
                            <p class="mt-1 text-xs text-gray-500">Optional deadline for when funds are needed by.</p>
                            @error('deadline')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <!-- Image Upload Section -->
                <div class="space-y-4">
                    <h2 class="text-xl font-semibold text-gray-800 pb-2 border-b border-gray-200">Images</h2>
                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <label for="profile_image" class="block text-sm font-medium text-gray-700 mb-1">Profile Image <span class="text-red-500">*</span></label>
                            <div class="mt-1 flex items-center">
                                <div class="profile-image-preview w-32 h-32 bg-gray-100 rounded-md flex items-center justify-center overflow-hidden">
                                    <img id="profileImagePreview" src="#" alt="Profile Preview" class="max-w-full max-h-full object-cover hidden">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" id="profileImagePlaceholder">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </div>
                                <div class="ml-5">
                                    <label for="profile_image" class="cursor-pointer bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none">
                                        Choose File
                                        <input type="file" name="profile_image" id="profile_image" class="sr-only" accept="image/*" required>
                                    </label>
                                    <p class="mt-1 text-xs text-gray-500">JPG, PNG, or GIF. Max 10MB.</p>
                                    @error('profile_image')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <label for="additional_images" class="block text-sm font-medium text-gray-700 mb-1">Additional Images</label>
                            <div class="mt-1 space-y-4">
                                <div id="additionalImagesContainer" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                                    <!-- Additional images will be added here dynamically -->
                                </div>
                                
                                <div class="flex justify-start">
                                    <button type="button" id="addImageBtn" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5" 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 Image
                                    </button>
                                </div>
                                <p class="text-xs text-gray-500">Add up to 5 additional images to showcase the elderly person's living conditions or specific needs.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Terms and Conditions -->
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="terms" name="terms" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" required>
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="terms" class="font-medium text-gray-700">I agree to the <a href="#" class="text-blue-600 hover:text-blue-500">Terms and Conditions</a> <span class="text-red-500">*</span></label>
                            <p class="text-gray-500">By submitting this form, you agree that all information provided is accurate and truthful.</p>
                            @error('terms')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <!-- Submit Button -->
                <div class="pt-5 border-t border-gray-200">
                    <div class="flex justify-end">
                        <a href="{{ route('dashboard') }}" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Cancel
                        </a>
                        <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Create Profile
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="{{ asset('js/elderly-profile.js') }}?v={{ time() }}"></script>
<script>
    // Immediate execution script for age and date of birth synchronization
    document.addEventListener('DOMContentLoaded', function() {
        const ageInput = document.getElementById('age');
        const dobInput = document.getElementById('date_of_birth');
        
        if (ageInput && dobInput) {
            console.log('Age and DOB fields found, setting up direct synchronization');
            
            // Calculate age from date of birth
            dobInput.addEventListener('input', updateAgeFromDob);
            dobInput.addEventListener('change', updateAgeFromDob);
            
            // Update date of birth based on age
            ageInput.addEventListener('input', updateDobFromAge);
            ageInput.addEventListener('change', updateDobFromAge);
            
            // Initial check
            if (dobInput.value) {
                updateAgeFromDob.call(dobInput);
            } else if (ageInput.value) {
                updateDobFromAge.call(ageInput);
            }
            
            function updateAgeFromDob() {
                if (this.value) {
                    const dob = new Date(this.value);
                    const today = new Date();
                    let age = today.getFullYear() - dob.getFullYear();
                    const monthDiff = today.getMonth() - dob.getMonth();
                    
                    // Adjust age if birthday hasn't occurred yet this year
                    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
                        age--;
                    }
                    
                    console.log('Calculated age:', age, 'from DOB:', this.value);
                    
                    // Only update if the calculated age is valid (60 or older)
                    if (age >= 60 && age <= 120) {
                        ageInput.value = age;
                    } else if (age < 60) {
                        alert('The elderly person must be at least 60 years old.');
                        this.value = ''; // Clear the invalid date
                    } else if (age > 120) {
                        alert('Please enter a valid date of birth. The calculated age exceeds 120 years.');
                        this.value = ''; // Clear the invalid date
                    }
                }
            }
            
            function updateDobFromAge() {
                if (this.value && (!dobInput.value || dobInput.value === '')) {
                    const age = parseInt(this.value);
                    if (age >= 60 && age <= 120) {
                        const today = new Date();
                        const birthYear = today.getFullYear() - age;
                        const approxDob = new Date(birthYear, today.getMonth(), today.getDate());
                        
                        // Format date as YYYY-MM-DD for the input
                        const formattedDate = approxDob.toISOString().split('T')[0];
                        console.log('Setting DOB to:', formattedDate, 'from age:', age);
                        dobInput.value = formattedDate;
                    }
                }
            }
        }
    });
</script>
@endpush
@endsection