@extends('admin.layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-subtitle', 'Welcome back!')

@section('content')
<div class="p-4 lg:p-6">
  <!-- Stats Cards -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4 mb-6">
    <div class="stat-card bg-white rounded-xl p-4 border border-slate-100 shadow-sm transition-all">
      <div class="flex items-center justify-between mb-3">
        <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
          <i class="fas fa-donate text-white"></i>
        </div>
        <span class="text-[10px] font-medium text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full">{{ $stats['donations']['change'] }}</span>
      </div>
      <h3 class="text-xl lg:text-2xl font-bold text-slate-800">{{ $stats['donations']['total'] }}</h3>
      <p class="text-xs text-slate-500">Total Donations</p>
    </div>

    <div class="stat-card bg-white rounded-xl p-4 border border-slate-100 shadow-sm transition-all">
      <div class="flex items-center justify-between mb-3">
        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
          <i class="fas fa-calendar-check text-white"></i>
        </div>
        <span class="text-[10px] font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">{{ $stats['appointments']['change'] }}</span>
      </div>
      <h3 class="text-xl lg:text-2xl font-bold text-slate-800">{{ $stats['appointments']['total'] }}</h3>
      <p class="text-xs text-slate-500">Appointments</p>
    </div>

    <div class="stat-card bg-white rounded-xl p-4 border border-slate-100 shadow-sm transition-all">
      <div class="flex items-center justify-between mb-3">
        <div class="w-10 h-10 bg-gradient-to-br from-violet-500 to-violet-600 rounded-lg flex items-center justify-center">
          <i class="fas fa-users text-white"></i>
        </div>
        <span class="text-[10px] font-medium text-violet-600 bg-violet-50 px-2 py-0.5 rounded-full">{{ $stats['patients']['change'] }}</span>
      </div>
      <h3 class="text-xl lg:text-2xl font-bold text-slate-800">{{ $stats['patients']['total'] }}</h3>
      <p class="text-xs text-slate-500">Patients</p>
    </div>

    <div class="stat-card bg-white rounded-xl p-4 border border-slate-100 shadow-sm transition-all">
      <div class="flex items-center justify-between mb-3">
        <div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-500 rounded-lg flex items-center justify-center">
          <i class="fas fa-bullhorn text-white"></i>
        </div>
        <span class="text-[10px] font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full">{{ $stats['campaigns']['active'] }}</span>
      </div>
      <h3 class="text-xl lg:text-2xl font-bold text-slate-800">{{ $stats['campaigns']['total'] }}</h3>
      <p class="text-xs text-slate-500">Campaigns</p>
    </div>
  </div>

  <!-- Charts and Quick Actions -->
  <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-6">
    <!-- Donation Analytics Chart -->
    <div class="xl:col-span-2 bg-white rounded-xl p-4 border border-slate-100 shadow-sm">
      <div class="flex items-center justify-between mb-4">
        <h3 class="font-bold text-slate-800">Donation Analytics</h3>
        <div class="flex gap-1">
          <button class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 rounded-lg">Monthly</button>
          <button class="px-3 py-1.5 text-xs font-medium text-slate-600 hover:bg-slate-50 rounded-lg">Yearly</button>
        </div>
      </div>
      <div class="h-40 lg:h-52 flex items-end gap-1 lg:gap-2">
        @foreach($donationAnalytics as $month)
          @php
            $maxAmount = collect($donationAnalytics)->max('amount');
            $height = $maxAmount > 0 ? ($month['amount'] / $maxAmount) * 100 : 0;
          @endphp
          <div class="flex-1 flex flex-col items-center gap-1">
            <div class="w-full bg-gradient-to-t from-primary-500 to-primary-400 rounded-t" style="height:{{ $height }}%"></div>
            <span class="text-[9px] text-slate-500">{{ $month['month'] }}</span>
          </div>
        @endforeach
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-gradient-to-br from-dark-900 to-dark-800 rounded-xl p-4 text-white">
      <h3 class="font-bold mb-4">Quick Actions</h3>
      <div class="space-y-2">
        <a href="{{ route('admin.campaigns.create') }}" class="w-full flex items-center gap-3 p-3 bg-white/10 hover:bg-white/20 rounded-xl transition">
          <div class="w-8 h-8 bg-primary-500 rounded-lg flex items-center justify-center">
            <i class="fas fa-plus text-sm"></i>
          </div>
          <span class="font-medium text-sm">New Campaign</span>
        </a>
        <a href="{{ route('admin.appointments.create') }}" class="w-full flex items-center gap-3 p-3 bg-white/10 hover:bg-white/20 rounded-xl transition">
          <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
            <i class="fas fa-calendar-plus text-sm"></i>
          </div>
          <span class="font-medium text-sm">Add Appointment</span>
        </a>
        <a href="{{ route('admin.users.create') }}" class="w-full flex items-center gap-3 p-3 bg-white/10 hover:bg-white/20 rounded-xl transition">
          <div class="w-8 h-8 bg-amber-500 rounded-lg flex items-center justify-center">
            <i class="fas fa-user-plus text-sm"></i>
          </div>
          <span class="font-medium text-sm">Add Staff</span>
        </a>
      </div>
    </div>
  </div>

  <!-- Today's Appointments and Recent Donors -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <!-- Today's Appointments -->
    <div class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden">
      <div class="p-4 border-b border-slate-100 flex items-center justify-between">
        <h3 class="font-bold text-slate-800">Today's Appointments</h3>
        <a href="{{ route('admin.appointments.index') }}" class="text-xs text-primary-600 font-medium">View All</a>
      </div>
      <div class="divide-y divide-slate-100">
        @forelse($todayAppointments as $appointment)
          <div class="p-3 flex items-center gap-3 hover:bg-slate-50 cursor-pointer">
            <div class="w-10 h-10 bg-{{ $loop->index % 3 == 0 ? 'blue' : ($loop->index % 3 == 1 ? 'violet' : 'primary') }}-50 rounded-lg flex items-center justify-center">
              <span class="text-xs font-bold text-{{ $loop->index % 3 == 0 ? 'blue' : ($loop->index % 3 == 1 ? 'violet' : 'primary') }}-600">{{ $appointment['time'] }}</span>
            </div>
            <div class="flex-1 min-w-0">
              <h4 class="font-semibold text-slate-800 text-sm truncate">{{ $appointment['patient_name'] }}</h4>
              <p class="text-xs text-slate-500 truncate">{{ $appointment['type'] }}</p>
            </div>
            <span class="px-2 py-0.5 bg-{{ $appointment['status'] == 'Confirmed' ? 'primary' : 'amber' }}-50 text-{{ $appointment['status'] == 'Confirmed' ? 'primary' : 'amber' }}-600 text-[10px] font-medium rounded-full">{{ $appointment['status'] }}</span>
          </div>
        @empty
          <div class="p-8 text-center text-slate-500">
            <i class="fas fa-calendar-times text-3xl mb-2"></i>
            <p class="text-sm">No appointments scheduled for today</p>
          </div>
        @endforelse
      </div>
    </div>

    <!-- Recent Donors -->
    <div class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden">
      <div class="p-4 border-b border-slate-100 flex items-center justify-between">
        <h3 class="font-bold text-slate-800">Recent Donors</h3>
        <a href="{{ route('admin.donors.index') }}" class="text-xs text-primary-600 font-medium">View All</a>
      </div>
      <div class="divide-y divide-slate-100">
        @forelse($recentDonors as $donor)
          <div class="p-3 flex items-center gap-3 hover:bg-slate-50 cursor-pointer">
            <img src="https://ui-avatars.com/api/?name={{ urlencode($donor['donor_name']) }}&background={{ ['22c55e', '3b82f6', '8b5cf6'][$loop->index % 3] }}&color=fff" class="w-10 h-10 rounded-full">
            <div class="flex-1 min-w-0">
              <h4 class="font-semibold text-slate-800 text-sm truncate">{{ $donor['donor_name'] }}</h4>
              <p class="text-xs text-slate-500 truncate">{{ $donor['campaign'] }}</p>
            </div>
            <div class="text-right">
              <p class="font-bold text-primary-600 text-sm">{{ $donor['amount'] }}</p>
              <p class="text-[10px] text-slate-400">{{ $donor['time'] }}</p>
            </div>
          </div>
        @empty
          <div class="p-8 text-center text-slate-500">
            <i class="fas fa-hand-holding-usd text-3xl mb-2"></i>
            <p class="text-sm">No recent donations</p>
          </div>
        @endforelse
      </div>
    </div>
  </div>
</div>
@endsection