@php
    use Illuminate\Support\Facades\Auth;
    use App\Models\SystemSetting;
@endphp

@props([
    'elderly' => null,
    'currency' => null,
    'suggestedAmounts' => [25, 50, 100, 250, 500],
    'paymentMethods' => []
])

<div class="bg-white rounded-lg p-6">
    <form id="donation-form" method="POST" class="space-y-6">
        @csrf
        
        @if($elderly)
            <input type="hidden" name="elderly_id" value="{{ $elderly->id }}">
        @endif
        
        <input type="hidden" name="payment_method" value="paystack">
        
        <!-- Donation Amount Section -->
        <div class="space-y-4">
            <h3 class="text-xl font-semibold text-gray-800">Donation Amount</h3>
            
            <div class="relative">
                <div class="flex items-center">
                    <!-- Currency Selector -->
                    <div class="w-1/4 mr-2">
                        <select id="currency-selector" name="currency_code" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50" data-currency-selector="true" {{ SystemSetting::isGlobalCurrencyOverrideEnabled() ? 'disabled' : '' }}>
                            @foreach(\App\Services\CurrencyService::getCurrencyOptions() as $code => $label)
                                <option value="{{ $code }}" {{ $code === $currency ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @if(SystemSetting::isGlobalCurrencyOverrideEnabled())
                            <input type="hidden" name="currency_code" value="{{ SystemSetting::getDefaultCurrency() }}">
                        @endif
                    </div>
                    
                    <!-- Custom Amount Input -->
                    <div class="w-3/4 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <span id="currency-symbol" class="currency-symbol text-gray-500">{{ \App\Services\CurrencyService::getCurrencySymbol($currency) }}</span>
                        </div>
                        <input type="text" id="custom-amount" class="block w-full pl-10 pr-12 py-2 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50" placeholder="0.00">
                        <div class="absolute inset-y-0 right-0 flex items-center">
                            <label for="custom-amount" class="sr-only">Amount</label>
                        </div>
                    </div>
                </div>
                
                <!-- Hidden amount input for form submission -->
                <input type="hidden" id="amount" name="amount" value="">
                
                <!-- Validation error message -->
                @error('amount')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- Suggested Amounts -->
            <div class="grid grid-cols-3 sm:grid-cols-5 gap-2 mt-2">
                @foreach($suggestedAmounts as $amount)
                    <button type="button" class="suggested-amount py-2 px-4 border border-gray-300 rounded-md text-center hover:bg-primary hover:text-white hover:border-primary transition-colors" data-amount="{{ $amount }}">
                        <span class="currency-symbol">{{ \App\Services\CurrencyService::getCurrencySymbol($currency) }}</span>{{ $amount }}
                    </button>
                @endforeach
            </div>
        </div>
        
        <!-- Recurring Donation Option -->
        <div class="space-y-4">
            <div class="flex items-center">
                <input type="checkbox" id="is_recurring" name="is_recurring" value="1" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
                <label for="is_recurring" class="ml-2 block text-sm text-gray-700">Make this a recurring donation</label>
            </div>
            
            <div id="recurring-options" class="hidden pl-6 space-y-3">
                <label for="recurring_frequency" class="block text-sm font-medium text-gray-700">Frequency</label>
                <select id="recurring_frequency" name="recurring_frequency" 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">
                    <option value="monthly">Monthly</option>
                    <option value="quarterly">Quarterly</option>
                    <option value="biannually">Biannually</option>
                    <option value="annually">Annually</option>
                </select>
            </div>
        </div>
        
        <!-- Personal Information -->
        <div class="space-y-4">
            <h3 class="text-xl font-semibold text-gray-800">Personal Information</h3>
            
            @if(Auth::check())
                <!-- User is logged in, pre-fill information -->
                <input type="hidden" name="donor_name" value="{{ Auth::user()->name }}">
                <input type="hidden" name="donor_email" value="{{ Auth::user()->email }}">
                
                <div class="bg-gray-50 p-4 rounded-md">
                    <p class="text-sm text-gray-600">You are donating as <strong>{{ Auth::user()->name }}</strong> ({{ Auth::user()->email }})</p>
                </div>
            @else
                <!-- User is not logged in, show input fields -->
                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <label for="donor_name" class="block text-sm font-medium text-gray-700">Full Name</label>
                        <input type="text" name="donor_name" id="donor_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" required>
                        @error('donor_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="donor_email" class="block text-sm font-medium text-gray-700">Email Address</label>
                        <input type="email" name="donor_email" id="donor_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" required>
                        @error('donor_email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            @endif
        </div>
        
        <!-- Additional Options -->
        <div class="space-y-4">
            <div class="flex items-center">
                <input type="checkbox" id="is_anonymous" name="is_anonymous" value="1" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
                <label for="is_anonymous" class="ml-2 block text-sm text-gray-700">Make this donation anonymous</label>
            </div>
        </div>
        
        <div class="space-y-2">
            <label for="message" class="text-base font-medium">
                Leave a Message (Optional)
            </label>
            <textarea
                id="message"
                name="message"
                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"
                placeholder="Add a message of support or encouragement..."
            ></textarea>
        </div>
        
        <div class="pt-4">
            <button type="button" id="paystack-button" class="w-full py-3 px-4 bg-primary text-white rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors">
                Complete Donation
            </button>
        </div>
        
        <!-- Payment processing indicator -->
        <div id="payment-processing" class="hidden text-center py-4">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            <p class="mt-2 text-gray-600">Processing your donation...</p>
        </div>
        
        <!-- Payment error message -->
        <div id="payment-error" class="hidden text-center py-4">
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                <strong class="font-bold">Error!</strong>
                <span class="block sm:inline" id="error-message">Something went wrong with your payment.</span>
            </div>
        </div>
    </form>
</div>