@extends('layouts.app')

@section('title', 'Edit Elderly Profile - ' . $elderly->name)

@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">Edit Elderly Profile</h1>
                <p class="text-gray-600 mt-1">Update information for {{ $elderly->name }}. Changes will be reviewed by admins before being published.</p>
            </div>
            
            <form action="{{ route('elderly.update', $elderly->id) }}" method="POST" enctype="multipart/form-data" class="p-6 space-y-8" id="elderlyForm">
                @csrf
                @method('PUT')
                <input type="hidden" name="debug_form_submission" value="1">
                
                @if ($errors->any())
                <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">There were errors with your submission</h3>
                            <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                @endif
                
                <!-- 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', $elderly->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', $elderly->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>
                            @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', $elderly->gender) == 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ old('gender', $elderly->gender) == 'female' ? 'selected' : '' }}>Female</option>
                                <option value="other" {{ old('gender', $elderly->gender) == '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', $elderly->date_of_birth ? $elderly->date_of_birth->format('Y-m-d') : '') }}" 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', $elderly->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', $elderly->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', $elderly->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', $elderly->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', $elderly->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', $elderly->country) == 'US' ? 'selected' : '' }}>United States</option>
                                <option value="CA" {{ old('country', $elderly->country) == 'CA' ? 'selected' : '' }}>Canada</option>
                                <option value="UK" {{ old('country', $elderly->country) == 'UK' ? 'selected' : '' }}>United Kingdom</option>
                                <option value="NG" {{ old('country', $elderly->country) == 'NG' ? 'selected' : '' }}>Nigeria</option>
                                <option value="GH" {{ old('country', $elderly->country) == 'GH' ? 'selected' : '' }}>Ghana</option>
                                <option value="KE" {{ old('country', $elderly->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', $elderly->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', $elderly->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">
                                @if($elderly->needs && !is_string($elderly->needs) && $elderly->needs->count() > 0)
                                    @foreach($elderly->needs as $need)
                                        <div class="flex items-center space-x-2 needs-item">
                                            <input type="text" name="needs[]" value="{{ $need->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('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>
                                    @endforeach
                                @else
                                    <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>
                                @endif
                            </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">
                                        {{ auth()->user()->currency ?? '$' }}
                                    </span>
                                </div>
                                <input type="number" name="goal_amount" id="goal_amount" min="1" step="0.01" value="{{ old('goal_amount', $elderly->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', $elderly->deadline ? $elderly->deadline->format('Y-m-d') : '') }}" 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</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="{{ $elderly->profile_image_url }}" alt="Profile" class="max-w-full max-h-full object-cover">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400 hidden" 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 New Image
                                        <input type="file" name="profile_image" id="profile_image" class="sr-only" accept="image/*">
                                    </label>
                                    <!-- Store the existing profile image path -->
                                    <input type="hidden" name="existing_profile_image" value="{{ $elderly->profile_image }}">
                                    <p class="mt-1 text-xs text-gray-500">Optional. JPG, PNG, or GIF. Max 10MB. Leave empty to keep current image.</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">
                                    @if($elderly->additionalImages && !is_string($elderly->additionalImages) && $elderly->additionalImages->count() > 0)
                                        @foreach($elderly->additionalImages as $image)
                                            <div class="relative bg-gray-100 rounded-md overflow-hidden h-32 flex items-center justify-center additional-image-container">
                                                <img src="{{ Storage::url($image->image_path) }}" alt="Additional" class="max-w-full max-h-full object-cover">
                                                <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                                    <button type="button" class="text-white bg-red-600 hover:bg-red-700 rounded-full p-1 delete-image" data-image-id="{{ $image->id }}">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <input type="hidden" name="existing_additional_images[]" value="{{ $image->id }}">
                                            </div>
                                        @endforeach
                                    @endif
                                    <!-- 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>
                
                <!-- Submit Button -->
                <div class="pt-5 border-t border-gray-200">
                    <div class="flex justify-end">
                        <a href="{{ route('dashboard', ['tab' => 'profiles']) }}" 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">
                            Update Profile
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="{{ asset('js/elderly-profile.js') }}"></script>
<script>
    // Additional JavaScript for handling existing images
    document.addEventListener('DOMContentLoaded', function() {
        // Handle removal of existing images
        const removeExistingImageButtons = document.querySelectorAll('.remove-existing-image-btn');
        removeExistingImageButtons.forEach(button => {
            button.addEventListener('click', function() {
                const imageDiv = this.closest('.existing-image');
                const imageId = imageDiv.dataset.imageId;
                
                // Create a hidden input to mark this image for deletion
                const deleteInput = document.createElement('input');
                deleteInput.type = 'hidden';
                deleteInput.name = 'delete_images[]';
                deleteInput.value = imageId;
                document.getElementById('elderlyForm').appendChild(deleteInput);
                
                // Remove the image div from the display
                imageDiv.remove();
                
                // Update the add image button state
                if (typeof updateAddImageButtonState === 'function') {
                    updateAddImageButtonState();
                }
            });
        });
    });
</script>
@endpush

@endsection