@extends('layouts.admin')
@section('title', 'Record Donation')
@section('page-title', 'Record Donation')
@section('page-subtitle', 'Add a contribution to ' . $fundraiser->title)

@section('content')
<div class="card-royal p-6">
    <div class="mb-6 p-4 bg-[var(--bg-secondary)] rounded-lg">
        <h3 class="font-cinzel font-semibold text-[var(--text-primary)]">{{ $fundraiser->title }}</h3>
        <p class="text-sm text-[var(--text-secondary)]">
            Target: {{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($fundraiser->target_amount, 2) }} | 
            Raised: {{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($fundraiser->raised_amount, 2) }}
        </p>
    </div>
    
    <form action="{{ route('admin.finance.fundraisers.donation.store', $fundraiser->id) }}" method="POST" class="space-y-6">
        @csrf
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Member (Optional)</label>
                <select name="member_id" id="member_select"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">-- Select Member --</option>
                    @foreach($members as $member)
                        <option value="{{ $member->id }}" {{ old('member_id') == $member->id ? 'selected' : '' }}>
                            {{ $member->full_name }} - {{ $member->phone ?? 'No phone' }}
                        </option>
                    @endforeach
                </select>
                <p class="text-xs text-[var(--text-secondary)] mt-1">Select a member or enter donor details below</p>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Amount (GH₵) *</label>
                <input type="number" name="amount" value="{{ old('amount') }}" required min="1" step="0.01"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="0.00">
                @error('amount')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Donor Name *</label>
                <input type="text" name="donor_name" id="donor_name" value="{{ old('donor_name') }}"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="Enter donor name">
                @error('donor_name')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Payment Method *</label>
                <select name="payment_method" required
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="bank_transfer" {{ old('payment_method') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                    <option value="mobile_money" {{ old('payment_method') == 'mobile_money' ? 'selected' : '' }}>Mobile Money</option>
                    <option value="card" {{ old('payment_method') == 'card' ? 'selected' : '' }}>Card</option>
                    <option value="other" {{ old('payment_method') == 'other' ? 'selected' : '' }}>Other</option>
                </select>
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Email</label>
                <input type="email" name="donor_email" value="{{ old('donor_email') }}"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="donor@email.com">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Phone</label>
                <input type="text" name="donor_phone" value="{{ old('donor_phone') }}"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="+233 XX XXX XXXX">
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Transaction Reference</label>
                <input type="text" name="transaction_ref" value="{{ old('transaction_ref') }}"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="Optional reference number">
            </div>
            
            <div class="flex items-center pt-6">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_anonymous" value="1" {{ old('is_anonymous') ? 'checked' : '' }}
                        class="w-5 h-5 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                    <span class="text-sm text-[var(--text-primary)]">Make this donation anonymous</span>
                </label>
            </div>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Notes</label>
            <textarea name="notes" rows="3"
                class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                placeholder="Additional notes...">{{ old('notes') }}</textarea>
        </div>
        
        <div class="flex justify-end gap-4">
            <a href="{{ route('admin.finance.fundraisers.show', $fundraiser->id) }}" class="px-6 py-3 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                Cancel
            </a>
            <button type="submit" class="btn-royal px-8 py-3 rounded-lg text-white font-semibold">
                <i class="fas fa-save mr-2"></i> Record Donation
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('member_select').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const name = selectedOption.text.split(' - ')[0];
        if (name && name !== '-- Select Member --') {
            document.getElementById('donor_name').value = name;
        }
    });
</script>
@endpush