@extends('admin.layouts.app')

@section('title', 'Edit Donor')
@section('page-title', 'Edit Donor')
@section('page-subtitle', 'Update donor information')

@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.update', $donor) }}">
        @csrf
        @method('PUT')
        
        <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', $donor->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">
              @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', $donor->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">
              @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', $donor->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">
              @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', $donor->donor_type) == 'individual' ? 'selected' : '' }}>Individual</option>
                <option value="organization" {{ old('donor_type', $donor->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', $donor->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', $donor->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">
            @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">{{ old('address', $donor->address) }}</textarea>
            @error('address')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <!-- Form Actions -->
        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.donors.show', $donor) }}" 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">
            Update 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