@extends('layouts.admin')
@section('title', 'Create Pledge')
@section('page-title', 'Create Pledge')
@section('page-subtitle', 'Create a new pledge')

@section('content')
<div class="card-royal p-6">
    <form action="{{ route('admin.finance.pledges.store') }}" 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 *</label>
                <select name="member_id" required
                    class="w-full px-4 py-2 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 }}
                        </option>
                    @endforeach
                </select>
                @error('member_id')
                    <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">Campaign *</label>
                <select name="campaign_id" required
                    class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">Select Campaign</option>
                    @foreach($campaigns as $campaign)
                        <option value="{{ $campaign->id }}" {{ old('campaign_id') == $campaign->id ? 'selected' : '' }}>
                            {{ $campaign->name }}
                        </option>
                    @endforeach
                </select>
                @error('campaign_id')
                    <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">Pledge Amount (GH₵) *</label>
                <input type="number" name="pledge_amount" value="{{ old('pledge_amount') }}" step="0.01" min="0.01" required
                    class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                @error('pledge_amount')
                    <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 Frequency *</label>
                <select name="frequency" required
                    class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">Select Frequency</option>
                    <option value="one_time" {{ old('frequency') === 'one_time' ? 'selected' : '' }}>One Time</option>
                    <option value="weekly" {{ old('frequency') === 'weekly' ? 'selected' : '' }}>Weekly</option>
                    <option value="biweekly" {{ old('frequency') === 'biweekly' ? 'selected' : '' }}>Bi-weekly</option>
                    <option value="monthly" {{ old('frequency') === 'monthly' ? 'selected' : '' }}>Monthly</option>
                    <option value="quarterly" {{ old('frequency') === 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                    <option value="annually" {{ old('frequency') === 'annually' ? 'selected' : '' }}>Annually</option>
                </select>
                @error('frequency')
                    <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">Start Date *</label>
                <input type="date" name="start_date" value="{{ old('start_date', now()->format('Y-m-d')) }}" required
                    class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                @error('start_date')
                    <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">End Date</label>
                <input type="date" name="end_date" value="{{ old('end_date') }}"
                    class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                @error('end_date')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <div class="md:col-span-2">
                <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-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">{{ old('notes') }}</textarea>
            </div>
        </div>
        
        <div class="flex justify-end gap-4">
            <a href="{{ route('admin.finance.pledges.index') }}" class="px-6 py-2 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-6 py-2 rounded-lg text-white">Create Pledge</button>
        </div>
    </form>
</div>
@endsection