@extends('layouts.app')
@section('title', $user->name . ' - Donor Profile')
@section('content')
<div class="max-w-5xl mx-auto">
  <!-- Header with Back Button -->
  <div class="mb-6 flex items-center gap-4">
    <a href="{{ url()->previous() }}" class="w-10 h-10 rounded-xl flex items-center justify-center transition-all" style="background: rgba(0,0,0,0.05);" onmouseover="this.style.background='rgba(0,0,0,0.1)'" onmouseout="this.style.background='rgba(0,0,0,0.05)'">
      <svg class="w-5 h-5" style="color: #007AFF;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
      </svg>
    </a>
    <div>
      <h1 class="text-2xl sm:text-3xl font-black" style="color: #1C1C1E; letter-spacing: -0.03em;">Donor Profile</h1>
      <p style="color: #8E8E93; font-weight: 500;">Complete donor information and history</p>
    </div>
  </div>

  <!-- Hero Section with iOS Styling -->
  <div class="rounded-3xl p-6 sm:p-8 mb-6" style="background: linear-gradient(135deg, #FF3B30, #FF6B6B, #FF9500); box-shadow: 0 12px 40px rgba(255, 59, 48, 0.3);">
    <div class="flex flex-col md:flex-row items-center gap-6 sm:gap-8">
      <!-- Blood Group Badge -->
      <div class="relative w-28 h-28 sm:w-32 sm:h-32 shrink-0">
        <div class="absolute inset-0 rounded-3xl" style="background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,0.1);"></div>
        <div class="absolute inset-0 rounded-3xl flex items-center justify-center text-white font-black text-5xl sm:text-6xl" style="text-shadow: 0 2px 10px rgba(0,0,0,0.1);">
          {{ $user->blood_group }}
        </div>
      </div>
      
      <!-- Donor Info -->
      <div class="flex-1 text-center md:text-left">
        <h2 class="text-3xl sm:text-4xl font-black mb-3 text-white" style="letter-spacing: -0.02em; text-shadow: 0 2px 10px rgba(0,0,0,0.1);">{{ $user->name }}</h2>
        <div class="flex flex-wrap items-center justify-center md:justify-start gap-3 sm:gap-4 text-white/90">
          <div class="flex items-center gap-2 font-semibold">
            <div class="w-5 h-5 rounded-lg flex items-center justify-center" style="background: rgba(255,255,255,0.2);">
              <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="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>
            <span>{{ $user->city ?? 'Location not set' }}</span>
          </div>
          <span style="color: rgba(255,255,255,0.5);">•</span>
          <div class="flex items-center gap-2 font-semibold">
            <div class="w-5 h-5 rounded-lg flex items-center justify-center" style="background: rgba(255,255,255,0.2);">
              <svg class="w-3 h-3" 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>
            <span>{{ $user->blood_group }} Blood Type</span>
          </div>
        </div>
      </div>
      
      <!-- Donations Badge -->
      <div class="text-center rounded-2xl p-5 sm:p-6" style="background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);">
        <div class="text-4xl sm:text-5xl font-black mb-1 text-white" style="text-shadow: 0 2px 10px rgba(0,0,0,0.1);">{{ $user->donations_count ?? 0 }}</div>
        <div class="text-sm font-bold text-white/90">Total Donations</div>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Contact & Stats Card -->
    <div class="lg:col-span-1 space-y-6">
      <!-- Contact Card -->
      <div class="rounded-3xl p-6" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
        <h3 class="text-lg font-black mb-4 flex items-center gap-2" style="color: #1C1C1E; letter-spacing: -0.01em;">
          <div class="w-8 h-8 rounded-xl flex items-center justify-center" style="background: rgba(0, 122, 255, 0.1);">
            <svg class="w-4 h-4" 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>
          Contact Information
        </h3>
        <div>
          <label class="text-xs font-bold uppercase mb-2 block" style="color: #8E8E93; letter-spacing: 0.05em;">Phone Number</label>
          @if($user->phone_visible)
            <div class="flex items-center gap-2 rounded-2xl p-4" style="background: #F2F2F7;">
              <span class="phone-display font-mono text-base font-bold flex-1" style="color: #1C1C1E;" data-full="{{ $user->phone }}">
                {{ auth()->check() && auth()->user()->role==='admin' ? $user->phone : mask_phone($user->phone) }}
              </span>
              @if(! (auth()->check() && auth()->user()->role==='admin'))
                <button type="button" class="toggle-phone text-xs font-bold px-3 py-1.5 rounded-full transition-all" 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 rounded-2xl p-4" style="background: rgba(142, 142, 147, 0.08);">
              <div class="w-5 h-5 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(142, 142, 147, 0.15);">
                <svg class="w-3 h-3" style="color: #8E8E93;" 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="text-sm font-semibold italic" style="color: #8E8E93;">Phone number hidden by donor</span>
            </div>
          @endif
        </div>
      </div>

      <!-- Stats Card -->
      <div class="rounded-3xl p-6" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
        <h3 class="text-lg font-black mb-4" style="color: #1C1C1E; letter-spacing: -0.01em;">Donation Stats</h3>
        <div class="space-y-3">
          <!-- Blood Group -->
          <div class="flex items-center justify-between rounded-2xl p-4" style="background: rgba(255, 59, 48, 0.08); border: 1.5px solid rgba(255, 59, 48, 0.2);">
            <span class="text-sm font-bold" style="color: #8E8E93;">Blood Group</span>
            <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-sm font-black" style="background: linear-gradient(135deg, #FF3B30, #FF6B6B); color: white; box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);">
              {{ $user->blood_group }}
            </span>
          </div>
          
          <!-- Total Donations -->
          <div class="flex items-center justify-between rounded-2xl p-4" style="background: #F2F2F7;">
            <span class="text-sm font-bold" style="color: #8E8E93;">Total Donations</span>
            <span class="text-xl font-black" style="color: #1C1C1E;">{{ $user->donations_count ?? 0 }}</span>
          </div>
          
          <!-- Last Donation -->
          <div class="flex items-center justify-between rounded-2xl p-4" style="background: #F2F2F7;">
            <span class="text-sm font-bold" style="color: #8E8E93;">Last Donation</span>
            <span class="text-sm font-black" style="color: #1C1C1E;">
              {{ optional($user->last_donation_date)->format('M d, Y') ?? 'Never' }}
            </span>
          </div>
          
          <!-- Member Since -->
          <div class="flex items-center justify-between rounded-2xl p-4" style="background: #F2F2F7;">
            <span class="text-sm font-bold" style="color: #8E8E93;">Member Since</span>
            <span class="text-sm font-black" style="color: #1C1C1E;">{{ $user->created_at->format('M Y') }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Donation History -->
    <div class="lg:col-span-2">
      <div class="rounded-3xl p-6 sm:p-8" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
        <h3 class="text-2xl font-black mb-6 flex items-center gap-2" style="color: #1C1C1E; letter-spacing: -0.02em;">
          <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background: rgba(52, 199, 89, 0.1);">
            <svg class="w-5 h-5" style="color: #34C759;" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
            </svg>
          </div>
          Donation History
        </h3>
        
        @if($donations->isNotEmpty())
          <div class="space-y-3">
            @foreach($donations as $d)
              <div class="flex items-center gap-4 rounded-2xl p-5 transition-all hover:scale-[1.01]" style="background: linear-gradient(135deg, rgba(52, 199, 89, 0.08), rgba(52, 199, 89, 0.05)); border-left: 4px solid #34C759;">
                <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-white shrink-0" style="background: linear-gradient(135deg, #34C759, #30D158); box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);">
                  <svg class="w-7 h-7" 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>
                <div class="flex-1 min-w-0">
                  <div class="font-black mb-1" style="color: #1C1C1E;">Blood Donation</div>
                  <div class="text-sm font-semibold" style="color: #8E8E93;">Saved lives through donation</div>
                </div>
                <div class="text-right shrink-0">
                  <div class="font-black mb-1" style="color: #1C1C1E;">{{ $d->donated_at->format('M d, Y') }}</div>
                  <div class="text-xs font-semibold" style="color: #8E8E93;">{{ $d->donated_at->diffForHumans() }}</div>
                </div>
              </div>
            @endforeach
          </div>
        @else
          <div class="text-center py-12">
            <div class="w-20 h-20 mx-auto mb-4 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="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>
            <h4 class="text-xl font-black mb-2" style="color: #1C1C1E; letter-spacing: -0.02em;">No Donation History</h4>
            <p class="font-medium" style="color: #8E8E93;">This donor hasn't recorded any donations yet.</p>
          </div>
        @endif
      </div>
    </div>
  </div>
</div>
@endsection