@extends('layouts.app')
@section('title','My Donation Requests - BloodFinder')
@section('content')
<div class="max-w-7xl mx-auto">
  <!-- Header with Stats -->
  <div class="mb-8">
    <div class="flex items-center justify-between mb-4">
      <div>
        <h1 class="text-4xl font-bold text-gray-900 mb-2">Donation Requests</h1>
        <p class="text-gray-600">Manage your donation requests and respond to requests from others</p>
      </div>
      <div class="hidden md:flex gap-4">
        <div class="bg-gradient-to-br from-red-50 to-red-100 border border-red-200 rounded-xl px-6 py-4 text-center">
          <div class="text-3xl font-bold text-red-600">{{ $requestsToMe->count() }}</div>
          <div class="text-sm text-red-700">Requests to Me</div>
        </div>
        <div class="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl px-6 py-4 text-center">
          <div class="text-3xl font-bold text-blue-600">{{ $myRequests->count() }}</div>
          <div class="text-sm text-blue-700">My Requests</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Tab Navigation -->
  <div class="mb-6">
    <div class="flex gap-2 border-b border-gray-200">
      <button 
        onclick="showTab('toMe')" 
        id="tabToMe"
        class="px-6 py-3 font-semibold text-gray-600 border-b-2 border-transparent hover:text-red-600 hover:border-red-300 transition-all"
      >
        <span class="flex items-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd"/>
          </svg>
          Requests for Me
          @if($requestsToMe->where('status', 'pending')->count() > 0)
            <span class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">{{ $requestsToMe->where('status', 'pending')->count() }}</span>
          @endif
        </span>
      </button>
      <button 
        onclick="showTab('myRequests')" 
        id="tabMyRequests"
        class="px-6 py-3 font-semibold text-gray-600 border-b-2 border-transparent hover:text-blue-600 hover:border-blue-300 transition-all"
      >
        <span class="flex items-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd"/>
          </svg>
          My Requests
          @if($myRequests->where('status', 'pending')->count() > 0)
            <span class="bg-blue-500 text-white text-xs px-2 py-0.5 rounded-full">{{ $myRequests->where('status', 'pending')->count() }}</span>
          @endif
        </span>
      </button>
    </div>
  </div>

  <!-- Requests TO ME Tab -->
  <div id="toMeTab" class="space-y-3">
    @forelse($requestsToMe as $req)
      <div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-all overflow-hidden border border-gray-100">
        <!-- Compact List Item -->
        <div class="px-6 py-4">
          <div class="flex items-center justify-between gap-4">
            <!-- Left: Blood Group & Basic Info -->
            <div class="flex items-center gap-4 flex-1 min-w-0">
              <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center text-white font-bold text-sm flex-shrink-0 shadow-sm">
                {{ $req->blood_group }}
              </div>
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2">
                  <h3 class="text-lg font-bold text-gray-900 truncate">{{ $req->patient_name }}</h3>
                  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold
                    @if($req->status === 'pending') bg-yellow-100 text-yellow-700
                    @elseif($req->status === 'accepted') bg-green-100 text-green-700
                    @else bg-red-100 text-red-700 @endif">
                    {{ ucfirst($req->status) }}
                  </span>
                </div>
                <div class="flex items-center gap-4 mt-1 text-sm text-gray-600">
                  <span class="flex items-center gap-1">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                    </svg>
                    {{ $req->requester->name }}
                  </span>
                  <span class="flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    {{ $req->needed_date->format('M d') }} at {{ date('g:i A', strtotime($req->needed_time)) }}
                  </span>
                  <span class="flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                    </svg>
                    {{ $req->location }}
                  </span>
                </div>
              </div>
            </div>

            <!-- Right: Actions -->
            <div class="flex items-center gap-2 flex-shrink-0">
              @if($req->status === 'pending')
                <button 
                  onclick="toggleDetails('toMe-{{ $req->id }}')"
                  class="px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-all"
                >
                  View Details
                </button>
                <button 
                  onclick="document.getElementById('acceptForm-toMe-{{ $req->id }}').submit()"
                  class="px-4 py-2 text-sm font-semibold text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 rounded-lg transition-all shadow-sm"
                >
                  Accept
                </button>
              @else
                <button 
                  onclick="toggleDetails('toMe-{{ $req->id }}')"
                  class="px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-all"
                >
                  View Details
                </button>
              @endif
            </div>
          </div>
        </div>

        <!-- Expandable Details Section -->
        <div id="details-toMe-{{ $req->id }}" class="hidden border-t border-gray-200 bg-gray-50">
          <div class="p-6 space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div class="bg-white rounded-lg p-3 shadow-sm">
                <div class="flex items-center gap-2 mb-2">
                  <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
                    <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                  </div>
                  <div class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Date & Time</div>
                </div>
                <div class="font-bold text-gray-900">{{ $req->needed_date->format('M d, Y') }}</div>
                <div class="text-sm text-gray-600">{{ date('g:i A', strtotime($req->needed_time)) }}</div>
              </div>
            </div>

            <div class="flex items-start gap-3">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
              </div>
              <div>
                <div class="text-xs text-gray-500 uppercase tracking-wide">Hospital</div>
                <div class="font-bold text-gray-900">{{ $req->hospital_name }}</div>
                <div class="text-sm text-gray-600 flex items-center gap-1">
                  <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                  </svg>
                  {{ $req->location }}
                </div>
              </div>
            </div>

            <div class="flex items-start gap-3">
              <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
              </div>
              <div>
                <div class="text-xs text-gray-500 uppercase tracking-wide">Blood Group</div>
                <div class="font-bold text-red-600 text-lg">{{ $req->blood_group }}</div>
                <div class="text-sm text-gray-600">Required</div>
              </div>
            </div>
          </div>

          <!-- Patient Condition -->
          <div class="bg-gray-50 rounded-lg p-4">
            <div class="flex items-start gap-2 mb-2">
              <svg class="w-5 h-5 text-gray-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
              </svg>
              <div>
                <div class="text-sm font-semibold text-gray-700 mb-1">Patient Condition</div>
                <div class="text-gray-800">{{ $req->patient_condition }}</div>
              </div>
            </div>
          </div>

          @if($req->additional_notes)
            <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
              <div class="flex items-start gap-2">
                <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" 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 class="text-sm font-semibold text-blue-900 mb-1">Additional Notes</div>
                  <div class="text-sm text-blue-800">{{ $req->additional_notes }}</div>
                </div>
              </div>
            </div>
          @endif

          @if($req->status === 'accepted')
            <div class="bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-lg p-4">
              <div class="flex items-start gap-3">
                <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                  <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
                  </svg>
                </div>
                <div class="flex-1">
                  <div class="font-bold text-green-900 text-lg mb-2">✓ Request Accepted - Contact Requester</div>
                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
                    <div>
                      <span class="text-green-700">Name:</span>
                      <span class="font-bold text-green-900 ml-2">{{ $req->requester->name }}</span>
                    </div>
                    <div>
                      <span class="text-green-700">Phone:</span>
                      <a href="tel:{{ $req->requester->phone }}" class="font-bold text-green-900 ml-2 hover:underline">{{ $req->requester->phone }}</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          @endif

          @if($req->status === 'pending')
            <div class="flex gap-3 pt-2">
              <form method="POST" action="{{ route('donation-requests.accept', $req) }}" class="flex-1">
                @csrf
                <button type="submit" class="w-full bg-gradient-to-r from-green-600 to-green-700 text-white px-6 py-3 rounded-lg font-bold hover:scale-[1.02] hover:shadow-lg transition-all flex items-center justify-center gap-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                  </svg>
                  Accept & Help
                </button>
              </form>
              <form method="POST" action="{{ route('donation-requests.reject', $req) }}" onsubmit="return confirm('Are you sure you want to reject this request?')">
                @csrf
                <button type="submit" class="px-6 py-3 bg-red-100 text-red-700 rounded-lg font-bold hover:bg-red-200 transition-all">
                  Reject
                </button>
              </form>
            </div>
          @endif
        </div>
      </div>
    @empty
      <div class="bg-white rounded-xl shadow-lg p-12 text-center">
        <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-gray-900 mb-2">No requests received yet</h3>
        <p class="text-gray-600">When someone requests blood from you, it will appear here</p>
      </div>
    @endforelse
  </div>

  <!-- My Requests Tab -->
  <div id="myRequestsTab" class="space-y-4 hidden">
    @forelse($myRequests as $req)
      <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all overflow-hidden">
        <!-- Header with Status -->
        <div class="px-6 py-4 @if($req->status === 'pending') bg-gradient-to-r from-blue-50 to-indigo-50 border-l-4 border-blue-500 @elseif($req->status === 'accepted') bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 @else bg-gradient-to-r from-red-50 to-pink-50 border-l-4 border-red-500 @endif">
          <div class="flex items-start justify-between">
            <div class="flex items-start gap-4">
              <div class="w-14 h-14 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center text-white font-bold text-lg flex-shrink-0 shadow-md">
                {{ $req->blood_group }}
              </div>
              <div>
                <h3 class="text-xl font-bold text-gray-900">{{ $req->patient_name }}</h3>
                <p class="text-sm text-gray-600 flex items-center gap-1 mt-1">
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                  </svg>
                  Donor: <span class="font-semibold">{{ $req->donor->name }}</span>
                </p>
                <p class="text-xs text-gray-500 mt-1">Requested {{ $req->created_at->diffForHumans() }}</p>
              </div>
            </div>
            <span class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-bold shadow-sm
              @if($req->status === 'pending') bg-blue-100 text-blue-800
              @elseif($req->status === 'accepted') bg-green-100 text-green-800
              @else bg-red-100 text-red-800 @endif">
              @if($req->status === 'pending')
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                </svg>
              @elseif($req->status === 'accepted')
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
              @else
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293z" clip-rule="evenodd"/>
                </svg>
              @endif
              {{ ucfirst($req->status) }}
            </span>
          </div>
        </div>

        <!-- Details Grid -->
        <div class="p-6 space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="flex items-start gap-3">
              <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
              </div>
              <div>
                <div class="text-xs text-gray-500 uppercase tracking-wide">Date & Time</div>
                <div class="font-bold text-gray-900">{{ $req->needed_date->format('M d, Y') }}</div>
                <div class="text-sm text-gray-600">{{ date('g:i A', strtotime($req->needed_time)) }}</div>
              </div>
            </div>

            <div class="flex items-start gap-3">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
              </div>
              <div>
                <div class="text-xs text-gray-500 uppercase tracking-wide">Hospital</div>
                <div class="font-bold text-gray-900">{{ $req->hospital_name }}</div>
                <div class="text-sm text-gray-600 flex items-center gap-1">
                  <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                  </svg>
                  {{ $req->location }}
                </div>
              </div>
            </div>

            <div class="flex items-start gap-3">
              <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
              </div>
              <div>
                <div class="text-xs text-gray-500 uppercase tracking-wide">Blood Group</div>
                <div class="font-bold text-red-600 text-lg">{{ $req->blood_group }}</div>
                <div class="text-sm text-gray-600">Required</div>
              </div>
            </div>
          </div>

          <!-- Patient Condition -->
          <div class="bg-gray-50 rounded-lg p-4">
            <div class="flex items-start gap-2 mb-2">
              <svg class="w-5 h-5 text-gray-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
              </svg>
              <div>
                <div class="text-sm font-semibold text-gray-700 mb-1">Patient Condition</div>
                <div class="text-gray-800">{{ $req->patient_condition }}</div>
              </div>
            </div>
          </div>

          @if($req->additional_notes)
            <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
              <div class="flex items-start gap-2">
                <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" 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 class="text-sm font-semibold text-blue-900 mb-1">Additional Notes</div>
                  <div class="text-sm text-blue-800">{{ $req->additional_notes }}</div>
                </div>
              </div>
            </div>
          @endif

          @if($req->status === 'accepted')
            <div class="bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-lg p-4">
              <div class="flex items-start gap-3">
                <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                  <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
                  </svg>
                </div>
                <div class="flex-1">
                  <div class="font-bold text-green-900 text-lg mb-2">✓ Request Accepted - Contact Donor</div>
                  <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 text-sm">
                    <div>
                      <span class="text-green-700">Name:</span>
                      <span class="font-bold text-green-900 ml-2">{{ $req->donor->name }}</span>
                    </div>
                    <div>
                      <span class="text-green-700">Phone:</span>
                      <a href="tel:{{ $req->donor->phone }}" class="font-bold text-green-900 ml-2 hover:underline">{{ $req->donor->phone }}</a>
                    </div>
                    <div>
                      <span class="text-green-700">Blood:</span>
                      <span class="font-bold text-red-600 ml-2">{{ $req->donor->blood_group }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          @elseif($req->status === 'rejected')
            <div class="bg-gradient-to-r from-red-50 to-pink-50 border border-red-200 rounded-lg p-4">
              <div class="flex items-start gap-3">
                <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
                  <svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293z" clip-rule="evenodd"/>
                  </svg>
                </div>
                <div>
                  <div class="font-bold text-red-900 mb-1">Request Declined</div>
                  <div class="text-sm text-red-800">Unfortunately, this donor was unable to help. Please try requesting from another donor.</div>
                </div>
              </div>
            </div>
          @elseif($req->status === 'pending')
            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4">
              <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                </svg>
                <div class="text-sm text-blue-800">
                  <span class="font-semibold">Waiting for response...</span> The donor will be notified about your request.
                </div>
              </div>
            </div>
          @endif
        </div>
      </div>
    @empty
      <div class="bg-white rounded-xl shadow-lg p-12 text-center">
        <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-gray-900 mb-2">No requests sent yet</h3>
        <p class="text-gray-600">Search for donors and send a donation request to get started</p>
      </div>
    @endforelse
  </div>
</div>

<script>
  // Tab switching functionality
  function showTab(tabName) {
    // Hide all tabs
    document.getElementById('toMeTab').classList.add('hidden');
    document.getElementById('myRequestsTab').classList.add('hidden');
    
    // Remove active state from all tab buttons
    document.getElementById('tabToMe').classList.remove('text-red-600', 'border-red-600');
    document.getElementById('tabMyRequests').classList.remove('text-blue-600', 'border-blue-600');
    document.getElementById('tabToMe').classList.add('text-gray-600', 'border-transparent');
    document.getElementById('tabMyRequests').classList.add('text-gray-600', 'border-transparent');
    
    // Show selected tab and activate button
    if (tabName === 'toMe') {
      document.getElementById('toMeTab').classList.remove('hidden');
      document.getElementById('tabToMe').classList.add('text-red-600', 'border-red-600');
      document.getElementById('tabToMe').classList.remove('text-gray-600', 'border-transparent');
    } else {
      document.getElementById('myRequestsTab').classList.remove('hidden');
      document.getElementById('tabMyRequests').classList.add('text-blue-600', 'border-blue-600');
      document.getElementById('tabMyRequests').classList.remove('text-gray-600', 'border-transparent');
    }
  }
  
  // Show first tab by default on page load
  document.addEventListener('DOMContentLoaded', function() {
    showTab('toMe');
  });
</script>
@endsection