@extends('admin.layouts.app')

@section('title', 'Add Donor')
@section('page-title', 'Add Donor')
@section('page-subtitle', 'Register new donor')

@section('content')
<div class="p-4 lg:p-6">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm">
      <div class="p-6 border-b border-slate-100">
        <h3 class="text-xl font-bold text-slate-800">Donor Information</h3>
      </div>

      <form method="POST" action="{{ route('admin.donors.store') }}">
        @csrf
        
        <div class="p-6 space-y-4">
          <!-- Name and Email -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Name *</label>
              <input type="text" name="name" value="{{ old('name') }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('name') border-red-500 @enderror" placeholder="John Doe">
              @error('name')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Email *</label>
              <input type="email" name="email" value="{{ old('email') }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('email') border-red-500 @enderror" placeholder="john@example.com">
              @error('email')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Phone and Donor Type -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Phone</label>
              <input type="tel" name="phone" value="{{ old('phone') }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('phone') border-red-500 @enderror" placeholder="+1234567890">
              @error('phone')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Donor Type *</label>
              <select name="donor_type" required onchange="toggleOrganization(this.value)" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('donor_type') border-red-500 @enderror">
                <option value="individual" {{ old('donor_type') == 'individual' ? 'selected' : '' }}>Individual</option>
                <option value="organization" {{ old('donor_type') == 'organization' ? 'selected' : '' }}>Organization</option>
              </select>
              @error('donor_type')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Organization Name (conditional) -->
          <div id="organizationField" style="display: {{ old('donor_type') == 'organization' ? 'block' : 'none' }}">
            <label class="block text-sm font-medium text-slate-700 mb-2">Organization Name *</label>
            <input type="text" name="organization_name" value="{{ old('organization_name') }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('organization_name') border-red-500 @enderror" placeholder="Company Inc.">
            @error('organization_name')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Address -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Address</label>
            <textarea name="address" rows="3" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('address') border-red-500 @enderror" placeholder="Street address, city, state, zip code">{{ old('address') }}</textarea>
            @error('address')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Optional Initial Donation -->
          <div class="border-t border-slate-200 pt-4">
            <h4 class="font-semibold text-slate-800 mb-3">Initial Donation (Optional)</h4>
            
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Campaign</label>
                <select name="campaign_id" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
                  <option value="">Select campaign</option>
                  @foreach($campaigns as $campaign)
                    <option value="{{ $campaign->id }}" {{ old('campaign_id') == $campaign->id ? 'selected' : '' }}>
                      {{ $campaign->title }}
                    </option>
                  @endforeach
                </select>
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Amount</label>
                <input type="number" name="amount" value="{{ old('amount') }}" min="1" step="0.01" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500" placeholder="0.00">
              </div>
            </div>

            <div class="grid grid-cols-2 gap-4 mt-4">
              <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Payment Method</label>
                <select name="payment_method" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
                  <option value="credit_card">Credit Card</option>
                  <option value="bank_transfer">Bank Transfer</option>
                  <option value="cash">Cash</option>
                  <option value="check">Check</option>
                </select>
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Frequency</label>
                <select name="frequency" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
                  <option value="one_time">One Time</option>
                  <option value="recurring">Recurring</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- Form Actions -->
        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.donors.index') }}" class="px-6 py-3 text-slate-600 font-medium rounded-xl hover:bg-slate-100">
            Cancel
          </a>
          <button type="submit" class="px-6 py-3 bg-primary-500 text-white font-medium rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-500/30">
            Add Donor
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
function toggleOrganization(type) {
  const field = document.getElementById('organizationField');
  field.style.display = type === 'organization' ? 'block' : 'none';
}
</script>
@endpush
@endsection