@extends('layouts.app')
@section('title','My Donation Requests - BloodFinder')
@section('content')
<div class="max-w-7xl mx-auto">
  <!-- Header with Stats -->
  <div class="mb-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
      <div>
        <h1 class="text-3xl sm:text-4xl font-black mb-2" style="color: #1C1C1E; letter-spacing: -0.03em;">Donation Requests</h1>
        <p class="text-base font-medium" style="color: #8E8E93;">Manage your donation requests and respond to requests from others</p>
      </div>
      <div class="flex gap-3">
        <div class="rounded-2xl px-5 py-4 text-center" style="background: linear-gradient(135deg, rgba(255, 59, 48, 0.1), rgba(255, 107, 107, 0.08)); border: 2px solid rgba(255, 59, 48, 0.2);">
          <div class="text-3xl font-black" style="color: #FF3B30; letter-spacing: -0.02em;">{{ $requestsToMe->count() }}</div>
          <div class="text-xs font-bold" style="color: #FF3B30;">Requests to Me</div>
        </div>
        <div class="rounded-2xl px-5 py-4 text-center" style="background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(52, 120, 246, 0.08)); border: 2px solid rgba(0, 122, 255, 0.2);">
          <div class="text-3xl font-black" style="color: #007AFF; letter-spacing: -0.02em;">{{ $myRequests->count() }}</div>
          <div class="text-xs font-bold" style="color: #007AFF;">My Requests</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Tab Navigation -->
  <div class="mb-6">
    <div class="rounded-2xl p-1.5 inline-flex gap-1" style="background: #F2F2F7;">
      <button 
        onclick="showTab('toMe')" 
        id="tabToMe"
        class="px-6 py-2.5 font-bold text-sm rounded-xl transition-all"
        style="color: #8E8E93;"
      >
        <span class="flex items-center gap-2">
          <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-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="text-xs font-black px-2 py-0.5 rounded-full" style="background: #FF3B30; color: white;">{{ $requestsToMe->where('status', 'pending')->count() }}</span>
          @endif
        </span>
      </button>
      <button 
        onclick="showTab('myRequests')" 
        id="tabMyRequests"
        class="px-6 py-2.5 font-bold text-sm rounded-xl transition-all"
        style="color: #8E8E93;"
      >
        <span class="flex items-center gap-2">
          <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-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="text-xs font-black px-2 py-0.5 rounded-full" style="background: #007AFF; color: white;">{{ $myRequests->where('status', 'pending')->count() }}</span>
          @endif
        </span>
      </button>
    </div>
  </div>

  <!-- Requests TO ME Tab -->
  <div id="toMeTab" class="space-y-4">
    @forelse($requestsToMe as $req)
      <div class="rounded-3xl transition-all overflow-hidden" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);" onmouseover="this.style.boxShadow='0 12px 40px rgba(0,0,0,0.12)'; this.style.transform='translateY(-2px)'" onmouseout="this.style.boxShadow='0 8px 30px rgba(0,0,0,0.08)'; this.style.transform='translateY(0)'">
        <!-- Compact List View -->
        <div class="p-6">
          <div class="flex flex-col sm:flex-row sm:items-center gap-4">
            <div class="flex items-center gap-4 flex-1 min-w-0">
              <div class="relative w-14 h-14 shrink-0">
                <div class="absolute inset-0 rounded-2xl" style="background: linear-gradient(135deg, #FF3B30, #FF6B6B); box-shadow: 0 6px 18px rgba(255, 59, 48, 0.35);"></div>
                <div class="absolute inset-0 rounded-2xl flex items-center justify-center text-white font-black text-lg">
                  {{ $req->blood_group }}
                </div>
              </div>
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 flex-wrap mb-1">
                  <h3 class="text-xl font-black truncate" style="color: #1C1C1E; letter-spacing: -0.02em;">{{ $req->patient_name }}</h3>
                  <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-black
                    @if($req->status === 'pending')" style="background: rgba(255, 204, 0, 0.15); color: #FFCC00;">
                    @elseif($req->status === 'accepted')" style="background: rgba(52, 199, 89, 0.15); color: #34C759;">
                    @else" style="background: rgba(255, 59, 48, 0.15); color: #FF3B30;">@endif
                    {{ ucfirst($req->status) }}
                  </span>
                </div>
                <div class="flex items-center gap-3 text-sm font-semibold flex-wrap" style="color: #8E8E93;">
                  <span class="flex items-center gap-1">
                    <div class="w-4 h-4 rounded-lg flex items-center justify-center" style="background: rgba(0, 122, 255, 0.1);">
                      <svg class="w-2.5 h-2.5" style="color: #007AFF;" 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>
                    </div>
                    {{ $req->requester->name }}
                  </span>
                  <span class="flex items-center gap-1">
                    <div class="w-4 h-4 rounded-lg flex items-center justify-center" style="background: rgba(255, 149, 0, 0.1);">
                      <svg class="w-2.5 h-2.5" style="color: #FF9500;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" 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>
                    {{ $req->needed_date->format('M d') }}
                  </span>
                  <span class="flex items-center gap-1">
                    <div class="w-4 h-4 rounded-lg flex items-center justify-center" style="background: rgba(175, 82, 222, 0.1);">
                      <svg class="w-2.5 h-2.5" style="color: #AF52DE;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" 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>
                    </div>
                    {{ $req->location }}
                  </span>
                </div>
              </div>
            </div>

            <div class="flex items-center gap-2">
              <button 
                onclick="toggleDetails('toMe-{{ $req->id }}')"
                class="px-4 py-2.5 text-sm font-bold rounded-xl transition-all"
                style="background: #F2F2F7; color: #1C1C1E;"
                onmouseover="this.style.background='rgba(0,0,0,0.08)'"
                onmouseout="this.style.background='#F2F2F7'"
              >
                <span class="hidden sm:inline">View </span>Details
              </button>
              @if($req->status === 'pending')
                <form method="POST" action="{{ route('donation-requests.accept', $req) }}" class="inline">
                  @csrf
                  <button type="submit" class="px-4 py-2.5 text-sm font-bold text-white rounded-xl transition-all" style="background: linear-gradient(135deg, #34C759, #30D158); box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);" onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 6px 18px rgba(52, 199, 89, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(52, 199, 89, 0.3)'">
                    Accept
                  </button>
                </form>
              @endif
            </div>
          </div>
        </div>

        <!-- Expandable Details -->
        <div id="details-toMe-{{ $req->id }}" class="hidden p-6 pt-0">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
            <div class="rounded-xl p-4" style="background: #F2F2F7;">
              <div class="text-xs font-bold mb-2" style="color: #8E8E93;">HOSPITAL</div>
              <div class="font-black text-base" style="color: #1C1C1E; letter-spacing: -0.01em;">{{ $req->hospital_name }}</div>
            </div>
            <div class="rounded-xl p-4" style="background: #F2F2F7;">
              <div class="text-xs font-bold mb-2" style="color: #8E8E93;">DATE & TIME</div>
              <div class="font-black text-base" style="color: #1C1C1E; letter-spacing: -0.01em;">{{ $req->needed_date->format('M d, Y') }}</div>
              <div class="text-sm font-semibold" style="color: #8E8E93;">{{ date('g:i A', strtotime($req->needed_time)) }}</div>
            </div>
            <div class="rounded-xl p-4" style="background: #F2F2F7;">
              <div class="text-xs font-bold mb-2" style="color: #8E8E93;">REQUESTER</div>
              <div class="font-black text-base" style="color: #1C1C1E; letter-spacing: -0.01em;">{{ $req->requester->name }}</div>
              <div class="text-sm font-semibold" style="color: #8E8E93;">{{ $req->created_at->diffForHumans() }}</div>
            </div>
          </div>

          <div class="rounded-xl p-4 mb-4" style="background: #F2F2F7;">
            <div class="font-black text-sm mb-2" style="color: #1C1C1E;">Patient Condition</div>
            <div class="font-medium" style="color: #8E8E93;">{{ $req->patient_condition }}</div>
          </div>

          @if($req->additional_notes)
            <div class="rounded-xl p-4 mb-4" style="background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(52, 120, 246, 0.08)); border: 2px solid rgba(0, 122, 255, 0.2);">
              <div class="font-black text-sm mb-2" style="color: #007AFF;">Additional Notes</div>
              <div class="font-medium" style="color: #007AFF;">{{ $req->additional_notes }}</div>
            </div>
          @endif

          @if($req->status === 'accepted')
            <div class="rounded-xl p-4" style="background: linear-gradient(135deg, rgba(52, 199, 89, 0.1), rgba(48, 209, 88, 0.08)); border: 2px solid rgba(52, 199, 89, 0.2);">
              <div class="font-black text-sm mb-3 flex items-center gap-2" style="color: #34C759;">
                <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>
                Request Accepted - Contact Info
              </div>
              <div class="space-y-1 font-semibold" style="color: #34C759;">
                <div><span class="font-black">Name:</span> {{ $req->requester->name }}</div>
                <div><span class="font-black">Phone:</span> <a href="tel:{{ $req->requester->phone }}" class="font-black hover:underline">{{ $req->requester->phone }}</a></div>
              </div>
            </div>
          @endif

          @if($req->status === 'pending')
            <div class="flex flex-col sm:flex-row gap-3">
              <form method="POST" action="{{ route('donation-requests.accept', $req) }}" class="flex-1">
                @csrf
                <button type="submit" class="w-full px-6 py-4 rounded-xl font-bold text-base text-white transition-all" style="background: linear-gradient(135deg, #34C759, #30D158); box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(52, 199, 89, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(52, 199, 89, 0.3)'">
                  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-4 rounded-xl font-bold text-base transition-all" style="background: rgba(255, 59, 48, 0.1); color: #FF3B30;" onmouseover="this.style.background='rgba(255, 59, 48, 0.2)'" onmouseout="this.style.background='rgba(255, 59, 48, 0.1)'">
                  Reject
                </button>
              </form>
            </div>
          @endif
        </div>
      </div>
    @empty
      <div class="rounded-3xl p-12 text-center" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
        <div class="w-20 h-20 rounded-3xl mx-auto mb-4 flex items-center justify-center" style="background: linear-gradient(135deg, rgba(255, 59, 48, 0.1), rgba(255, 107, 107, 0.08));">
          <svg class="w-10 h-10" style="color: #FF3B30;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" 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-black mb-2" style="color: #1C1C1E; letter-spacing: -0.02em;">No requests received yet</h3>
        <p class="font-medium" style="color: #8E8E93;">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="rounded-3xl transition-all overflow-hidden" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);" onmouseover="this.style.boxShadow='0 12px 40px rgba(0,0,0,0.12)'; this.style.transform='translateY(-2px)'" onmouseout="this.style.boxShadow='0 8px 30px rgba(0,0,0,0.08)'; this.style.transform='translateY(0)'">
        <!-- Compact List View -->
        <div class="p-6">
          <div class="flex flex-col sm:flex-row sm:items-center gap-4">
            <div class="flex items-center gap-4 flex-1 min-w-0">
              <div class="relative w-14 h-14 shrink-0">
                <div class="absolute inset-0 rounded-2xl" style="background: linear-gradient(135deg, #007AFF, #3478F6); box-shadow: 0 6px 18px rgba(0, 122, 255, 0.35);"></div>
                <div class="absolute inset-0 rounded-2xl flex items-center justify-center text-white font-black text-lg">
                  {{ $req->blood_group }}
                </div>
              </div>
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 flex-wrap mb-1">
                  <h3 class="text-xl font-black truncate" style="color: #1C1C1E; letter-spacing: -0.02em;">{{ $req->patient_name }}</h3>
                  <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-black
                    @if($req->status === 'pending')" style="background: rgba(0, 122, 255, 0.15); color: #007AFF;">
                    @elseif($req->status === 'accepted')" style="background: rgba(52, 199, 89, 0.15); color: #34C759;">
                    @else" style="background: rgba(255, 59, 48, 0.15); color: #FF3B30;">@endif
                    {{ ucfirst($req->status) }}
                  </span>
                </div>
                <div class="flex items-center gap-3 text-sm font-semibold flex-wrap" style="color: #8E8E93;">
                  <span class="flex items-center gap-1">
                    <div class="w-4 h-4 rounded-lg flex items-center justify-center" style="background: rgba(52, 199, 89, 0.1);">
                      <svg class="w-2.5 h-2.5" style="color: #34C759;" 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>
                    </div>
                    Donor: {{ $req->donor->name }}
                  </span>
                  <span class="flex items-center gap-1">
                    <div class="w-4 h-4 rounded-lg flex items-center justify-center" style="background: rgba(255, 149, 0, 0.1);">
                      <svg class="w-2.5 h-2.5" style="color: #FF9500;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" 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>
                    {{ $req->needed_date->format('M d') }}
                  </span>
                  <span class="flex items-center gap-1">
                    <div class="w-4 h-4 rounded-lg flex items-center justify-center" style="background: rgba(175, 82, 222, 0.1);">
                      <svg class="w-2.5 h-2.5" style="color: #AF52DE;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" 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>
                    </div>
                    {{ $req->location }}
                  </span>
                </div>
              </div>
            </div>

            <button 
              onclick="toggleDetails('myReq-{{ $req->id }}')"
              class="px-4 py-2.5 text-sm font-bold rounded-xl transition-all"
              style="background: #F2F2F7; color: #1C1C1E;"
              onmouseover="this.style.background='rgba(0,0,0,0.08)'"
              onmouseout="this.style.background='#F2F2F7'"
            >
              <span class="hidden sm:inline">View </span>Details
            </button>
          </div>
        </div>

        <!-- Expandable Details -->
        <div id="details-myReq-{{ $req->id }}" class="hidden p-6 pt-0">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
            <div class="rounded-xl p-4" style="background: #F2F2F7;">
              <div class="text-xs font-bold mb-2" style="color: #8E8E93;">HOSPITAL</div>
              <div class="font-black text-base" style="color: #1C1C1E; letter-spacing: -0.01em;">{{ $req->hospital_name }}</div>
            </div>
            <div class="rounded-xl p-4" style="background: #F2F2F7;">
              <div class="text-xs font-bold mb-2" style="color: #8E8E93;">DATE & TIME</div>
              <div class="font-black text-base" style="color: #1C1C1E; letter-spacing: -0.01em;">{{ $req->needed_date->format('M d, Y') }}</div>
              <div class="text-sm font-semibold" style="color: #8E8E93;">{{ date('g:i A', strtotime($req->needed_time)) }}</div>
            </div>
            <div class="rounded-xl p-4" style="background: #F2F2F7;">
              <div class="text-xs font-bold mb-2" style="color: #8E8E93;">DONOR</div>
              <div class="font-black text-base" style="color: #1C1C1E; letter-spacing: -0.01em;">{{ $req->donor->name }}</div>
              <div class="text-sm font-semibold" style="color: #8E8E93;">{{ $req->donor->blood_group }}</div>
            </div>
          </div>

          <div class="rounded-xl p-4 mb-4" style="background: #F2F2F7;">
            <div class="font-black text-sm mb-2" style="color: #1C1C1E;">Patient Condition</div>
            <div class="font-medium" style="color: #8E8E93;">{{ $req->patient_condition }}</div>
          </div>

          @if($req->additional_notes)
            <div class="rounded-xl p-4 mb-4" style="background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(52, 120, 246, 0.08)); border: 2px solid rgba(0, 122, 255, 0.2);">
              <div class="font-black text-sm mb-2" style="color: #007AFF;">Additional Notes</div>
              <div class="font-medium" style="color: #007AFF;">{{ $req->additional_notes }}</div>
            </div>
          @endif

          @if($req->status === 'accepted')
            <div class="rounded-xl p-4" style="background: linear-gradient(135deg, rgba(52, 199, 89, 0.1), rgba(48, 209, 88, 0.08)); border: 2px solid rgba(52, 199, 89, 0.2);">
              <div class="font-black text-sm mb-3 flex items-center gap-2" style="color: #34C759;">
                <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>
                Request Accepted - Contact Donor
              </div>
              <div class="space-y-1 font-semibold" style="color: #34C759;">
                <div><span class="font-black">Name:</span> {{ $req->donor->name }}</div>
                <div><span class="font-black">Phone:</span> <a href="tel:{{ $req->donor->phone }}" class="font-black hover:underline">{{ $req->donor->phone }}</a></div>
                <div><span class="font-black">Blood Group:</span> {{ $req->donor->blood_group }}</div>
              </div>
            </div>
          @elseif($req->status === 'rejected')
            <div class="rounded-xl p-4" style="background: linear-gradient(135deg, rgba(255, 59, 48, 0.1), rgba(255, 107, 107, 0.08)); border: 2px solid rgba(255, 59, 48, 0.2);">
              <div class="font-black text-sm mb-2 flex items-center gap-2" style="color: #FF3B30;">
                <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 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 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
                Request Declined
              </div>
              <div class="font-medium" style="color: #FF3B30;">Unfortunately, this donor was unable to help. Please try requesting from another donor.</div>
            </div>
          @elseif($req->status === 'pending')
            <div class="rounded-xl p-4" style="background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(52, 120, 246, 0.08)); border: 2px solid rgba(0, 122, 255, 0.2);">
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background: rgba(0, 122, 255, 0.15);">
                  <svg class="w-5 h-5" style="color: #007AFF;" 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>
                <div>
                  <div class="font-black text-sm mb-1" style="color: #007AFF;">Waiting for response...</div>
                  <div class="text-sm font-medium" style="color: #007AFF;">The donor will be notified about your request.</div>
                </div>
              </div>
            </div>
          @endif
        </div>
      </div>
    @empty
      <div class="rounded-3xl p-12 text-center" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
        <div class="w-20 h-20 rounded-3xl mx-auto mb-4 flex items-center justify-center" style="background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(52, 120, 246, 0.08));">
          <svg class="w-10 h-10" style="color: #007AFF;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" 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-black mb-2" style="color: #1C1C1E; letter-spacing: -0.02em;">No requests sent yet</h3>
        <p class="font-medium" style="color: #8E8E93;">Search for donors and send a donation request to get started</p>
      </div>
    @endforelse
  </div>
</div>

<script>
  // Tab switching
  function showTab(tabName) {
    document.getElementById('toMeTab').classList.add('hidden');
    document.getElementById('myRequestsTab').classList.add('hidden');
    
    const tabToMe = document.getElementById('tabToMe');
    const tabMyRequests = document.getElementById('tabMyRequests');
    
    // Reset both tabs
    tabToMe.style.background = 'transparent';
    tabToMe.style.color = '#8E8E93';
    tabMyRequests.style.background = 'transparent';
    tabMyRequests.style.color = '#8E8E93';
    
    if (tabName === 'toMe') {
      document.getElementById('toMeTab').classList.remove('hidden');
      tabToMe.style.background = 'white';
      tabToMe.style.color = '#FF3B30';
      tabToMe.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)';
    } else {
      document.getElementById('myRequestsTab').classList.remove('hidden');
      tabMyRequests.style.background = 'white';
      tabMyRequests.style.color = '#007AFF';
      tabMyRequests.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)';
    }
  }
  
  // Toggle details
  function toggleDetails(id) {
    const detailsDiv = document.getElementById('details-' + id);
    if (detailsDiv.classList.contains('hidden')) {
      detailsDiv.classList.remove('hidden');
    } else {
      detailsDiv.classList.add('hidden');
    }
  }
  
  // Show first tab by default
  document.addEventListener('DOMContentLoaded', function() {
    showTab('toMe');
  });
</script>
@endsection