@extends('admin.layouts.app')

@section('title', 'Campaigns')
@section('page-title', 'Campaigns')
@section('page-subtitle', 'Manage fundraising')

@section('content')
<div class="p-4 lg:p-6">
  <!-- Filter and Actions -->
  <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('admin.campaigns.index') }}" class="px-3 py-2 {{ !request('status') ? 'bg-primary-500 text-white' : 'bg-white text-slate-600 border border-slate-200' }} text-xs font-medium rounded-lg">All</a>
      <a href="{{ route('admin.campaigns.filter.status', 'active') }}" class="px-3 py-2 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">Active</a>
      <a href="{{ route('admin.campaigns.filter.status', 'completed') }}" class="px-3 py-2 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">Completed</a>
    </div>
    <a href="{{ route('admin.campaigns.create') }}" class="px-4 py-2 bg-primary-500 text-white text-xs font-medium rounded-lg shadow-lg shadow-primary-500/30">
      <i class="fas fa-plus mr-2"></i>New Campaign
    </a>
  </div>

  <!-- Campaigns Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    @forelse($campaigns as $campaign)
      <div class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden hover:shadow-md transition">
        @if($campaign->cover_image)
          <img src="{{ asset('storage/' . $campaign->cover_image) }}" class="w-full h-40 object-cover">
        @else
          <div class="w-full h-40 bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center">
            <i class="fas fa-bullhorn text-4xl text-white"></i>
          </div>
        @endif
        
        <div class="p-4">
          <div class="flex items-center justify-between mb-2">
            <span class="px-2 py-0.5 bg-{{ $campaign->status == 'active' ? 'primary' : ($campaign->status == 'upcoming' ? 'blue' : 'slate') }}-50 text-{{ $campaign->status == 'active' ? 'primary' : ($campaign->status == 'upcoming' ? 'blue' : 'slate') }}-600 text-[10px] font-medium rounded-full">
              {{ ucfirst($campaign->status) }}
            </span>
            @if($campaign->is_featured)
              <span class="px-2 py-0.5 bg-amber-50 text-amber-600 text-[10px] font-medium rounded-full">
                <i class="fas fa-star mr-1"></i>Featured
              </span>
            @endif
          </div>
          
          <h3 class="font-bold text-slate-800 text-sm mb-1 line-clamp-1">{{ $campaign->title }}</h3>
          <p class="text-xs text-slate-500 mb-3 line-clamp-2">{{ $campaign->description }}</p>
          
          <!-- Progress Bar -->
          <div class="mb-3">
            <div class="flex items-center justify-between text-xs mb-1">
              <span class="text-slate-600 font-medium">${{ number_format($campaign->total_raised, 0) }}</span>
              <span class="text-slate-400">of ${{ number_format($campaign->goal_amount, 0) }}</span>
            </div>
            <div class="h-2 bg-slate-100 rounded-full overflow-hidden">
              <div class="h-full bg-gradient-to-r from-primary-500 to-primary-600" style="width: {{ min($campaign->progress_percentage, 100) }}%"></div>
            </div>
            <p class="text-[10px] text-slate-500 mt-1">{{ $campaign->progress_percentage }}% funded • {{ $campaign->donor_count }} donors</p>
          </div>
          
          <div class="flex items-center justify-between">
            <span class="text-xs text-slate-500">
              <i class="fas fa-clock mr-1"></i>{{ $campaign->days_left }} days left
            </span>
            <div class="flex gap-1">
              <a href="{{ route('admin.campaigns.show', $campaign) }}" class="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded">
                <i class="fas fa-eye text-xs"></i>
              </a>
              <a href="{{ route('admin.campaigns.edit', $campaign) }}" class="p-1.5 text-slate-400 hover:text-primary-600 hover:bg-primary-50 rounded">
                <i class="fas fa-edit text-xs"></i>
              </a>
              <form method="POST" action="{{ route('admin.campaigns.destroy', $campaign) }}" class="inline" onsubmit="return confirm('Are you sure?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded">
                  <i class="fas fa-trash text-xs"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    @empty
      <div class="col-span-full bg-white rounded-xl border border-slate-100 p-8 text-center">
        <i class="fas fa-bullhorn text-4xl text-slate-300 mb-3"></i>
        <p class="text-slate-500">No campaigns found</p>
        <a href="{{ route('admin.campaigns.create') }}" class="inline-block mt-3 px-4 py-2 bg-primary-500 text-white text-xs font-medium rounded-lg">
          Create Your First Campaign
        </a>
      </div>
    @endforelse
  </div>
  
  <!-- Pagination -->
  @if($campaigns->hasPages())
    <div class="mt-6">
      {{ $campaigns->links() }}
    </div>
  @endif
</div>
@endsection