@extends('layouts.app')
@section('title','Search Donors - BloodFinder')
@section('content')
<div class="max-w-6xl mx-auto">
  <!-- Header Section -->
  <div class="mb-6">
    <h1 class="text-3xl sm:text-4xl font-black mb-2" style="color: #1C1C1E; letter-spacing: -0.03em;">Find Blood Donors</h1>
    <p style="color: #8E8E93; font-weight: 500;">Search for donors by blood group and location</p>
  </div>

  <!-- Search Form -->
  <div class="rounded-3xl p-6 mb-6" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
    <form method="GET" action="{{ route('search.index') }}" class="grid grid-cols-1 md:grid-cols-3 gap-5">
      <!-- Blood Group -->
      <div>
        <label class="flex items-center gap-2 text-sm font-bold mb-2" style="color: #1C1C1E;">
          <div class="w-6 h-6 rounded-lg flex items-center justify-center" style="background: rgba(255, 59, 48, 0.1);">
            <svg class="w-3.5 h-3.5" style="color: #FF3B30;" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C10 2 8 4 8 6c0 4 4 8 4 12 0-4 4-8 4-12 0-2-2-4-4-4z"/>
            </svg>
          </div>
          Blood Group
        </label>
        <select 
          name="blood_group" 
          class="w-full px-4 py-3.5 rounded-xl transition-all text-base font-bold appearance-none cursor-pointer" 
          style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7 url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%238E8E93%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e') no-repeat right 12px center; background-size: 20px;"
          onfocus="this.style.borderColor='#007AFF'; this.style.background='white url(data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23007AFF%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e) no-repeat right 12px center'; this.style.backgroundSize='20px'; this.style.boxShadow='0 0 0 4px rgba(0, 122, 255, 0.1)'"
          onblur="this.style.borderColor='rgba(0,0,0,0.08)'; this.style.background='#F2F2F7 url(data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%238E8E93%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e) no-repeat right 12px center'; this.style.backgroundSize='20px'; this.style.boxShadow='none'"
        >
          <option value="">All blood groups</option>
          @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $b)
            <option value="{{ $b }}" @selected($bg==$b)>{{ $b }}</option>
          @endforeach
        </select>
      </div>

      <!-- City -->
      <div>
        <label class="flex items-center gap-2 text-sm font-bold mb-2" style="color: #1C1C1E;">
          <div class="w-6 h-6 rounded-lg flex items-center justify-center" style="background: rgba(175, 82, 222, 0.1);">
            <svg class="w-3.5 h-3.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>
          City
        </label>
        <select 
          name="city" 
          class="w-full px-4 py-3.5 rounded-xl transition-all text-base font-semibold appearance-none cursor-pointer" 
          style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7 url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%238E8E93%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e') no-repeat right 12px center; background-size: 20px;"
          onfocus="this.style.borderColor='#007AFF'; this.style.background='white url(data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23007AFF%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e) no-repeat right 12px center'; this.style.backgroundSize='20px'; this.style.boxShadow='0 0 0 4px rgba(0, 122, 255, 0.1)'"
          onblur="this.style.borderColor='rgba(0,0,0,0.08)'; this.style.background='#F2F2F7 url(data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%238E8E93%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e) no-repeat right 12px center'; this.style.backgroundSize='20px'; this.style.boxShadow='none'"
        >
          <option value="">Any city</option>
          @foreach($cities as $c)
            <option value="{{ $c }}" @selected($city==$c)>{{ $c }}</option>
          @endforeach
        </select>
      </div>

      <!-- Search Button -->
      <div class="flex items-end">
        <button 
          type="submit" 
          class="w-full px-6 py-4 rounded-2xl font-bold text-base transition-all text-white flex items-center justify-center gap-2"
          style="background: linear-gradient(135deg, #FF3B30, #FF6B6B); box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3);"
          onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(255, 59, 48, 0.4)'"
          onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(255, 59, 48, 0.3)'"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
          Search Donors
        </button>
      </div>
    </form>
  </div>

  <!-- Results -->
  <div class="space-y-4">
    @forelse($users as $u)
      <div class="rounded-3xl p-6 transition-all hover:scale-[1.01]" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
        <div class="flex flex-col lg:flex-row gap-5">
          <!-- Donor Info -->
          <div class="flex items-center gap-4 flex-1 min-w-0">
            <!-- Blood Group Badge -->
            <div class="relative w-16 h-16 shrink-0">
              <div class="absolute inset-0 rounded-2xl" style="background: linear-gradient(135deg, #FF3B30, #FF6B6B); box-shadow: 0 8px 20px rgba(255, 59, 48, 0.35);"></div>
              <div class="absolute inset-0 rounded-2xl flex items-center justify-center text-white font-black text-xl">
                {{ $u->blood_group }}
              </div>
            </div>
            
            <!-- Name & Location -->
            <div class="flex-1 min-w-0">
              <a href="{{ route('donors.show', $u) }}" class="block mb-1">
                <h3 class="text-xl font-black truncate transition-colors" style="color: #1C1C1E; letter-spacing: -0.02em;" onmouseover="this.style.color='#007AFF'" onmouseout="this.style.color='#1C1C1E'">
                  {{ $u->name }}
                </h3>
              </a>
              <div class="flex items-center gap-2 font-semibold" style="color: #8E8E93;">
                <div class="w-5 h-5 rounded-lg flex items-center justify-center" style="background: rgba(175, 82, 222, 0.1);">
                  <svg class="w-3 h-3" 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>
                {{ $u->city ?? 'Location not set' }}
              </div>
            </div>
          </div>

          <!-- Contact & Stats Section -->
          <div class="flex flex-col sm:flex-row gap-4">
            <!-- Contact Info -->
            <div class="rounded-2xl p-4 min-w-0 flex-1" style="background: #F2F2F7;">
              <div class="text-xs font-bold uppercase mb-2" style="color: #8E8E93; letter-spacing: 0.05em;">Contact</div>
              @if($u->phone_visible)
                <div class="flex items-center gap-2">
                  <div class="w-5 h-5 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(0, 122, 255, 0.1);">
                    <svg class="w-3 h-3" style="color: #007AFF;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                  </div>
                  <span class="phone-display font-mono text-sm font-bold flex-1 min-w-0 truncate" style="color: #1C1C1E;" data-full="{{ $u->phone }}">
                    {{ auth()->user()->role === 'admin' ? $u->phone : mask_phone($u->phone) }}
                  </span>
                  @if(auth()->user()->role !== 'admin')
                    <button type="button" class="toggle-phone text-xs font-bold px-3 py-1.5 rounded-full transition-all shrink-0" style="background: rgba(0, 122, 255, 0.1); color: #007AFF;" data-shown="0" onmouseover="this.style.background='rgba(0, 122, 255, 0.2)'" onmouseout="this.style.background='rgba(0, 122, 255, 0.1)'">
                      Show
                    </button>
                  @endif
                </div>
              @else
                <div class="flex items-center gap-2 font-semibold" style="color: #8E8E93;">
                  <div class="w-5 h-5 rounded-lg flex items-center justify-center" style="background: rgba(142, 142, 147, 0.1);">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                    </svg>
                  </div>
                  <span class="italic text-sm">Hidden</span>
                </div>
              @endif
            </div>

            <!-- Last Donation Stats -->
            <div class="rounded-2xl p-4 flex-1" style="background: rgba(52, 199, 89, 0.08); border: 1.5px solid rgba(52, 199, 89, 0.2);">
              <div class="text-xs font-bold uppercase mb-2" style="color: #34C759; letter-spacing: 0.05em;">Last Donation</div>
              <div class="text-base font-black mb-1" style="color: #1C1C1E;">
                {{ optional($u->last_donation_date)->format('M d, Y') ?? 'Never' }}
              </div>
              <div class="flex items-center gap-1.5 text-xs font-bold" style="color: #34C759;">
                <svg class="w-3.5 h-3.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>
                {{ $u->donations_count ?? 0 }} donations
              </div>
            </div>
          </div>

          <!-- Action Button - Always visible for other users -->
          @if($u->id !== auth()->id())
            <div class="flex items-center">
              <a 
                href="{{ route('donation-requests.create', $u) }}" 
                class="w-full sm:w-auto flex items-center justify-center gap-2 px-6 py-4 rounded-2xl font-bold text-base transition-all text-white whitespace-nowrap"
                style="background: linear-gradient(135deg, #FF3B30, #FF6B6B); box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3);"
                onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(255, 59, 48, 0.4)'"
                onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(255, 59, 48, 0.3)'"
              >
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                </svg>
                Request
              </a>
            </div>
          @else
            <div class="flex items-center">
              <div class="w-full sm:w-auto px-6 py-4 rounded-2xl font-bold text-base text-center" style="background: rgba(142, 142, 147, 0.1); color: #8E8E93;">
                Your Profile
              </div>
            </div>
          @endif
          </div>
        </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 mx-auto mb-6 rounded-3xl flex items-center justify-center" style="background: rgba(142, 142, 147, 0.1);">
          <svg class="w-10 h-10" style="color: #8E8E93;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
        </div>
        <h3 class="text-2xl font-black mb-2" style="color: #1C1C1E; letter-spacing: -0.02em;">No donors found</h3>
        <p class="font-medium" style="color: #8E8E93;">Try adjusting your search filters to find more donors.</p>
      </div>
    @endforelse
  </div>

  <!-- Pagination -->
  @if($users->hasPages())
    <div class="mt-6">
      {{ $users->links() }}
    </div>
  @endif
</div>
@endsection