@extends('admin.layouts.app')

@section('title', 'Edit Campaign')
@section('page-title', 'Edit Campaign')
@section('page-subtitle', 'Update campaign details')

@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">Campaign Details</h3>
      </div>

      <form method="POST" action="{{ route('admin.campaigns.update', $campaign) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="p-6 space-y-4">
          <!-- Title -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Campaign Title *</label>
            <input type="text" name="title" value="{{ old('title', $campaign->title) }}" 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('title') border-red-500 @enderror">
            @error('title')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Description -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Description *</label>
            <textarea name="description" rows="4" 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('description') border-red-500 @enderror">{{ old('description', $campaign->description) }}</textarea>
            @error('description')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Goal Amount and Category -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Goal Amount *</label>
              <div class="relative">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500">$</span>
                <input type="number" name="goal_amount" value="{{ old('goal_amount', $campaign->goal_amount) }}" required min="1" step="0.01" class="w-full pl-8 pr-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('goal_amount') border-red-500 @enderror">
              </div>
              @error('goal_amount')
                <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">Category</label>
              <input type="text" name="category" value="{{ old('category', $campaign->category) }}" 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('category') border-red-500 @enderror">
              @error('category')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Start and End Dates -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Start Date *</label>
              <input type="date" name="start_date" value="{{ old('start_date', $campaign->start_date?->format('Y-m-d')) }}" 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('start_date') border-red-500 @enderror">
              @error('start_date')
                <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">End Date *</label>
              <input type="date" name="end_date" value="{{ old('end_date', $campaign->end_date?->format('Y-m-d')) }}" 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('end_date') border-red-500 @enderror">
              @error('end_date')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Current Cover Image -->
          @if($campaign->cover_image)
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Current Cover Image</label>
              <img src="{{ asset('storage/' . $campaign->cover_image) }}" alt="Current cover" class="w-48 h-32 object-cover rounded-lg border border-slate-200">
            </div>
          @endif

          <!-- Cover Image Upload -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">{{ $campaign->cover_image ? 'Change' : 'Upload' }} Cover Image</label>
            <input type="file" name="cover_image" accept="image/*" 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('cover_image') border-red-500 @enderror">
            <p class="mt-1 text-xs text-slate-500">Upload campaign banner (JPG, PNG, max 2MB)</p>
            @error('cover_image')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Status and Featured -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
              <select name="status" 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('status') border-red-500 @enderror">
                <option value="upcoming" {{ old('status', $campaign->status) == 'upcoming' ? 'selected' : '' }}>Upcoming</option>
                <option value="active" {{ old('status', $campaign->status) == 'active' ? 'selected' : '' }}>Active</option>
                <option value="completed" {{ old('status', $campaign->status) == 'completed' ? 'selected' : '' }}>Completed</option>
                <option value="paused" {{ old('status', $campaign->status) == 'paused' ? 'selected' : '' }}>Paused</option>
              </select>
              @error('status')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div class="flex items-center pt-8">
              <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $campaign->is_featured) ? 'checked' : '' }} class="w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
              <label class="ml-2 text-sm text-slate-700">Feature this campaign</label>
            </div>
          </div>

          <!-- Campaign Stats (Read-only) -->
          <div class="border-t border-slate-200 pt-4">
            <h4 class="font-semibold text-slate-800 mb-3">Campaign Progress</h4>
            <div class="grid grid-cols-3 gap-4">
              <div class="bg-slate-50 rounded-lg p-3">
                <p class="text-xs text-slate-500">Total Raised</p>
                <p class="text-lg font-bold text-slate-800">${{ number_format($campaign->total_raised, 2) }}</p>
              </div>
              <div class="bg-slate-50 rounded-lg p-3">
                <p class="text-xs text-slate-500">Donors</p>
                <p class="text-lg font-bold text-slate-800">{{ $campaign->donor_count }}</p>
              </div>
              <div class="bg-slate-50 rounded-lg p-3">
                <p class="text-xs text-slate-500">Progress</p>
                <p class="text-lg font-bold text-slate-800">{{ $campaign->progress_percentage }}%</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Form Actions -->
        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.campaigns.show', $campaign) }}" 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 Campaign
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection