@extends('layouts.app')
@section('title','Request Donation - BloodFinder')
@section('content')
<div class="max-w-3xl 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;">Request Blood Donation</h1>
      <p style="color: #8E8E93; font-weight: 500;">Send a donation request to <span class="font-bold" style="color: #FF3B30;">{{ $user->name }}</span></p>
    </div>
  </div>

  <!-- Donor Info Card -->
  <div class="rounded-3xl p-6 mb-6" 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="flex items-center gap-4">
      <div class="relative w-16 h-16 sm:w-20 sm:h-20 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-2xl sm:text-3xl">
          {{ $user->blood_group }}
        </div>
      </div>
      <div class="flex-1 min-w-0">
        <h3 class="text-xl sm:text-2xl font-black truncate" style="color: #1C1C1E; letter-spacing: -0.02em;">{{ $user->name }}</h3>
        <div class="flex items-center gap-2 mt-1 font-semibold" style="color: #8E8E93;">
          <div class="w-4 h-4 rounded-lg flex items-center justify-center" style="background: rgba(175, 82, 222, 0.15);">
            <svg class="w-2.5 h-2.5" style="color: #AF52DE;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
              <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>
          {{ $user->city }} • {{ $user->blood_group }}
        </div>
      </div>
    </div>
  </div>

  <!-- Request Form -->
  <div class="rounded-3xl p-6 sm:p-8" style="background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
    <form method="POST" action="{{ route('donation-requests.store') }}" class="space-y-5">
      @csrf
      <input type="hidden" name="donor_id" value="{{ $user->id }}">
      <input type="hidden" name="blood_group" value="{{ $user->blood_group }}">

      <!-- Patient Name & Hospital Name -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <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(52, 199, 89, 0.1);">
              <svg class="w-3.5 h-3.5" style="color: #34C759;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
              </svg>
            </div>
            Patient Name *
          </label>
          <input 
            type="text"
            name="patient_name" 
            value="{{ old('patient_name') }}" 
            class="w-full px-4 py-3.5 rounded-xl transition-all text-base font-medium" 
            style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7;"
            onfocus="this.style.borderColor='#007AFF'; this.style.background='white'; 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'; this.style.boxShadow='none'"
            placeholder="Enter patient's full name"
            required 
          />
          @error('patient_name')
            <p class="text-xs font-semibold mt-1.5" style="color: #FF3B30;">{{ $message }}</p>
          @enderror
        </div>

        <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(0, 122, 255, 0.1);">
              <svg class="w-3.5 h-3.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="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>
            Hospital Name *
          </label>
          <input 
            type="text"
            name="hospital_name" 
            value="{{ old('hospital_name') }}" 
            class="w-full px-4 py-3.5 rounded-xl transition-all text-base font-medium" 
            style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7;"
            onfocus="this.style.borderColor='#007AFF'; this.style.background='white'; 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'; this.style.boxShadow='none'"
            placeholder="Enter hospital name"
            required 
          />
          @error('hospital_name')
            <p class="text-xs font-semibold mt-1.5" style="color: #FF3B30;">{{ $message }}</p>
          @enderror
        </div>
      </div>

      <!-- Location -->
      <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>
          Location (Hospital Address) *
        </label>
        <input 
          type="text"
          name="location" 
          value="{{ old('location') }}" 
          class="w-full px-4 py-3.5 rounded-xl transition-all text-base font-medium" 
          style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7;"
          onfocus="this.style.borderColor='#007AFF'; this.style.background='white'; 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'; this.style.boxShadow='none'"
          placeholder="e.g., Dhanmondi, Dhaka"
          required 
        />
        @error('location')
          <p class="text-xs font-semibold mt-1.5" style="color: #FF3B30;">{{ $message }}</p>
        @enderror
      </div>

      <!-- Needed Date & Time -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <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, 149, 0, 0.1);">
              <svg class="w-3.5 h-3.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>
            Needed Date *
          </label>
          <input 
            type="date"
            name="needed_date" 
            value="{{ old('needed_date') }}" 
            min="{{ date('Y-m-d') }}"
            class="w-full px-4 py-3.5 rounded-xl transition-all text-base font-medium" 
            style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7;"
            onfocus="this.style.borderColor='#007AFF'; this.style.background='white'; 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'; this.style.boxShadow='none'"
            required 
          />
          @error('needed_date')
            <p class="text-xs font-semibold mt-1.5" style="color: #FF3B30;">{{ $message }}</p>
          @enderror
        </div>

        <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, 149, 0, 0.1);">
              <svg class="w-3.5 h-3.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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            Needed Time *
          </label>
          <input 
            type="time"
            name="needed_time" 
            value="{{ old('needed_time') }}" 
            class="w-full px-4 py-3.5 rounded-xl transition-all text-base font-medium" 
            style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7;"
            onfocus="this.style.borderColor='#007AFF'; this.style.background='white'; 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'; this.style.boxShadow='none'"
            required 
          />
          @error('needed_time')
            <p class="text-xs font-semibold mt-1.5" style="color: #FF3B30;">{{ $message }}</p>
          @enderror
        </div>
      </div>

      <!-- Patient Condition -->
      <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="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.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>
          Patient Condition *
        </label>
        <textarea 
          name="patient_condition" 
          rows="4"
          class="w-full px-4 py-3.5 rounded-xl transition-all text-base font-medium resize-none" 
          style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7;"
          onfocus="this.style.borderColor='#007AFF'; this.style.background='white'; 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'; this.style.boxShadow='none'"
          placeholder="Please describe the patient's condition and why blood is needed"
          required>{{ old('patient_condition') }}</textarea>
        @error('patient_condition')
          <p class="text-xs font-semibold mt-1.5" style="color: #FF3B30;">{{ $message }}</p>
        @enderror
      </div>

      <!-- Additional Notes -->
      <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(142, 142, 147, 0.1);">
            <svg class="w-3.5 h-3.5" style="color: #8E8E93;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
            </svg>
          </div>
          Additional Notes <span style="color: #8E8E93;">(Optional)</span>
        </label>
        <textarea 
          name="additional_notes" 
          rows="3"
          class="w-full px-4 py-3.5 rounded-xl transition-all text-base font-medium resize-none" 
          style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7;"
          onfocus="this.style.borderColor='#007AFF'; this.style.background='white'; 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'; this.style.boxShadow='none'"
          placeholder="Any additional information or special requirements">{{ old('additional_notes') }}</textarea>
        @error('additional_notes')
          <p class="text-xs font-semibold mt-1.5" style="color: #FF3B30;">{{ $message }}</p>
        @enderror
      </div>

      <!-- Buttons -->
      <div class="flex flex-col sm:flex-row gap-3 pt-4">
        <button 
          type="submit" 
          class="flex-1 px-6 py-4 rounded-xl font-bold text-base transition-all text-white"
          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)'"
        >
          <span class="flex items-center justify-center gap-2">
            <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>
            Send Donation Request
          </span>
        </button>
        
        <a 
          href="{{ url()->previous() }}" 
          class="px-6 py-4 rounded-xl font-bold text-base transition-all text-center"
          style="border: 1.5px solid rgba(0,0,0,0.08); color: #1C1C1E; background: #F2F2F7;"
          onmouseover="this.style.background='rgba(0,0,0,0.05)'"
          onmouseout="this.style.background='#F2F2F7'"
        >
          Cancel
        </a>
      </div>
    </form>
  </div>
</div>
@endsection