@extends('layouts.app')
@section('title','Admin Dashboard - BloodFinder')
@section('content')
<div class="max-w-7xl mx-auto">
  <!-- Header -->
  <div class="mb-8">
    <h1 class="text-4xl font-bold text-gray-900 mb-2">Admin Dashboard</h1>
    <p class="text-gray-600">Overview of your blood donor management system</p>
  </div>

  <!-- Stats Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-500">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-gray-500 text-sm font-medium mb-1">Total Users</p>
          <p class="text-3xl font-bold text-gray-900">{{ $stats['total_users'] }}</p>
        </div>
        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
          <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-red-500">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-gray-500 text-sm font-medium mb-1">Total Donors</p>
          <p class="text-3xl font-bold text-gray-900">{{ $stats['total_donors'] }}</p>
        </div>
        <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
          <svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-yellow-500">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-gray-500 text-sm font-medium mb-1">Pending Requests</p>
          <p class="text-3xl font-bold text-gray-900">{{ $stats['pending_requests'] }}</p>
        </div>
        <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
          <svg class="w-6 h-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-green-500">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-gray-500 text-sm font-medium mb-1">Active Announcements</p>
          <p class="text-3xl font-bold text-gray-900">{{ $stats['active_announcements'] }}</p>
        </div>
        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
          <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- Blood Group Distribution & Quick Actions -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
    <!-- Blood Group Distribution -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="text-xl font-bold text-gray-900 mb-4">Blood Group Distribution</h3>
      <div class="space-y-3">
        @foreach(['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'] as $group)
          <div>
            <div class="flex items-center justify-between mb-1">
              <span class="text-sm font-semibold text-gray-700">{{ $group }}</span>
              <span class="text-sm font-bold text-gray-900">{{ $blood_groups[$group] ?? 0 }}</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2">
              <div class="bg-gradient-to-r from-red-500 to-red-600 h-2 rounded-full" style="width: {{ $stats['total_donors'] > 0 ? (($blood_groups[$group] ?? 0) / $stats['total_donors'] * 100) : 0 }}%"></div>
            </div>
          </div>
        @endforeach
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="text-xl font-bold text-gray-900 mb-4">Quick Actions</h3>
      <div class="space-y-3">
        <a href="{{ route('admin.users.index') }}" class="block p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg hover:from-blue-100 hover:to-blue-200 transition-all">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
              </svg>
            </div>
            <div>
              <div class="font-semibold text-gray-900">Manage Users</div>
              <div class="text-sm text-gray-600">View, edit, and delete users</div>
            </div>
          </div>
        </a>

        <a href="{{ route('admin.announcements.index') }}" class="block p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-lg hover:from-green-100 hover:to-green-200 transition-all">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/>
              </svg>
            </div>
            <div>
              <div class="font-semibold text-gray-900">Manage Announcements</div>
              <div class="text-sm text-gray-600">Create and edit announcements</div>
            </div>
          </div>
        </a>

        <a href="{{ route('admin.users.create') }}" class="block p-4 bg-gradient-to-r from-purple-50 to-purple-100 rounded-lg hover:from-purple-100 hover:to-purple-200 transition-all">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
              </svg>
            </div>
            <div>
              <div class="font-semibold text-gray-900">Add New User</div>
              <div class="text-sm text-gray-600">Register a new donor or admin</div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

  <!-- Recent Activity -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Recent Requests -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="text-xl font-bold text-gray-900 mb-4">Recent Donation Requests</h3>
      @if($recent_requests->count() > 0)
        <div class="space-y-3">
          @foreach($recent_requests as $request)
            <div class="p-4 bg-gray-50 rounded-lg">
              <div class="flex items-center justify-between mb-2">
                <span class="font-semibold text-gray-900">{{ $request->patient_name }}</span>
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold 
                  @if($request->status === 'pending') bg-yellow-100 text-yellow-700
                  @elseif($request->status === 'accepted') bg-green-100 text-green-700
                  @elseif($request->status === 'rejected') bg-red-100 text-red-700
                  @else bg-blue-100 text-blue-700 @endif">
                  {{ ucfirst($request->status) }}
                </span>
              </div>
              <div class="text-sm text-gray-600">
                <span class="font-medium">{{ $request->blood_group }}</span> • 
                {{ $request->location }} • 
                {{ $request->needed_date->format('M d, Y') }}
              </div>
            </div>
          @endforeach
        </div>
      @else
        <p class="text-gray-500 text-center py-8">No recent requests</p>
      @endif
    </div>

    <!-- Recent Users -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="text-xl font-bold text-gray-900 mb-4">Recently Registered Donors</h3>
      @if($recent_users->count() > 0)
        <div class="space-y-3">
          @foreach($recent_users as $user)
            <div class="p-4 bg-gray-50 rounded-lg flex items-center gap-3">
              <div class="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
                {{ $user->blood_group }}
              </div>
              <div class="flex-1">
                <div class="font-semibold text-gray-900">{{ $user->name }}</div>
                <div class="text-sm text-gray-600">{{ $user->city ?? 'No city' }} • {{ $user->created_at->diffForHumans() }}</div>
              </div>
            </div>
          @endforeach
        </div>
      @else
        <p class="text-gray-500 text-center py-8">No recent registrations</p>
      @endif
    </div>
  </div>
</div>
@endsection