@extends('layouts.app')
@section('title','Register - BloodFinder')
@section('content')

<style>
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
</style>

<div style="background: #F2F2F7; min-height: calc(100vh - 5rem);" class="flex items-center justify-center px-4 py-8 sm:py-12">
  <div class="w-full max-w-md">
    <!-- Hero Icon -->
    <div class="text-center mb-6 sm:mb-8" style="animation: fade-in-up 0.5s ease-out;">
      <div class="relative inline-block mb-4 sm:mb-6">
        <div class="w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 rounded-2xl sm:rounded-3xl flex items-center justify-center relative z-10" style="background: linear-gradient(135deg, #FF3B30 0%, #FF2D55 50%, #FF6B6B 100%); box-shadow: 0 10px 40px rgba(255, 59, 48, 0.35);">
          <svg class="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
          </svg>
        </div>
        <!-- Decorative circles -->
        <div class="absolute top-0 right-0 w-6 h-6 sm:w-8 sm:h-8 rounded-full" style="background: rgba(255, 255, 255, 0.2); transform: translate(25%, -25%);"></div>
        <div class="absolute bottom-0 left-0 w-5 h-5 sm:w-6 sm:h-6 rounded-full" style="background: rgba(255, 255, 255, 0.15); transform: translate(-35%, 35%);"></div>
      </div>
      <h1 class="text-4xl sm:text-5xl font-black mb-2" style="color: #1C1C1E; letter-spacing: -0.04em;">Join as a<br>Donor</h1>
      <p class="text-base sm:text-lg" style="color: #8E8E93;">Start saving lives today</p>
    </div>

    <!-- Card -->
    <div class="ios-card p-6 sm:p-8 md:p-10" style="animation: scale-in 0.6s ease-out; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.04);">
      <form method="POST" action="{{ route('register.post') }}" class="space-y-5">
        @csrf
        
        <!-- Full Name -->
        <div>
          <label class="block text-sm font-bold mb-2 flex items-center gap-2" style="color: #1C1C1E;">
            <svg class="w-4 h-4" 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>
            Full Name
          </label>
          <input 
            type="text" 
            name="name" 
            value="{{ old('name') }}" 
            class="w-full text-base border-2 border-transparent rounded-xl transition-all"
            style="height: 56px; font-size: 16px; padding: 0 16px; background: rgba(0, 0, 0, 0.03); color: #1C1C1E;"
            placeholder="Enter your full name"
            required
            onfocus="this.style.border='2px solid #34C759'; this.style.boxShadow='0 0 0 4px rgba(52, 199, 89, 0.1)';"
            onblur="this.style.border='2px solid transparent'; this.style.boxShadow='none';"
          />
        </div>

        <!-- Phone Number -->
        <div>
          <label class="block text-sm font-bold mb-2 flex items-center gap-2" style="color: #1C1C1E;">
            <svg class="w-4 h-4" style="color: #007AFF;" 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>
            Phone Number
          </label>
          <input 
            type="tel" 
            name="phone" 
            value="{{ old('phone') }}" 
            class="w-full text-base border-2 border-transparent rounded-xl transition-all"
            style="height: 56px; font-size: 16px; padding: 0 16px; background: rgba(0, 0, 0, 0.03); color: #1C1C1E;"
            placeholder="01XXXXXXXXX"
            required
            onfocus="this.style.border='2px solid #007AFF'; this.style.boxShadow='0 0 0 4px rgba(0, 122, 255, 0.1)';"
            onblur="this.style.border='2px solid transparent'; this.style.boxShadow='none';"
          />
          <p class="mt-2 text-xs" style="color: #8E8E93;">📱 Used for login and contact</p>
        </div>

        <!-- Email Address -->
        <div>
          <label class="block text-sm font-bold mb-2 flex items-center gap-2" style="color: #1C1C1E;">
            <svg class="w-4 h-4" style="color: #FF9500;" fill="currentColor" viewBox="0 0 20 20">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
            </svg>
            Email Address <span class="font-normal text-xs" style="color: #8E8E93;">(Optional)</span>
          </label>
          <input 
            type="email" 
            name="email" 
            value="{{ old('email') }}" 
            class="w-full text-base border-2 border-transparent rounded-xl transition-all"
            style="height: 56px; font-size: 16px; padding: 0 16px; background: rgba(0, 0, 0, 0.03); color: #1C1C1E;"
            placeholder="your@email.com"
            onfocus="this.style.border='2px solid #FF9500'; this.style.boxShadow='0 0 0 4px rgba(255, 149, 0, 0.1)';"
            onblur="this.style.border='2px solid transparent'; this.style.boxShadow='none';"
          />
          <div class="mt-2 text-xs flex items-start gap-2 p-3 rounded-xl" style="color: #007AFF; background: rgba(0, 122, 255, 0.08);">
            <svg class="w-4 h-4 mt-0.5 shrink-0" 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>
            <span>Get instant notifications when someone needs your blood</span>
          </div>
        </div>

        <!-- Blood Group & City -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-bold mb-2 flex items-center gap-2" style="color: #1C1C1E;">
              <svg class="w-4 h-4" style="color: #FF3B30;" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
              </svg>
              Blood Group
            </label>
            <select 
              name="blood_group" 
              class="w-full text-base border-2 border-transparent rounded-xl transition-all"
              style="height: 56px; font-size: 16px; padding: 0 16px; background: rgba(0, 0, 0, 0.03); color: #1C1C1E;"
              required
              onfocus="this.style.border='2px solid #FF3B30'; this.style.boxShadow='0 0 0 4px rgba(255, 59, 48, 0.1)';"
              onblur="this.style.border='2px solid transparent'; this.style.boxShadow='none';"
            >
              <option value="">Select</option>
              @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bg)
                <option value="{{ $bg }}" @selected(old('blood_group')==$bg)>{{ $bg }}</option>
              @endforeach
            </select>
          </div>

          <div>
            <label class="block text-sm font-bold mb-2 flex items-center gap-2" style="color: #1C1C1E;">
              <svg class="w-4 h-4" style="color: #5856D6;" 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>
              City
            </label>
            <select 
              name="city" 
              class="w-full text-base border-2 border-transparent rounded-xl transition-all"
              style="height: 56px; font-size: 16px; padding: 0 16px; background: rgba(0, 0, 0, 0.03); color: #1C1C1E;"
              onfocus="this.style.border='2px solid #5856D6'; this.style.boxShadow='0 0 0 4px rgba(88, 86, 214, 0.1)';"
              onblur="this.style.border='2px solid transparent'; this.style.boxShadow='none';"
            >
              <option value="">Select city</option>
              @foreach($cities as $c)
                <option value="{{ $c }}" @selected(old('city')==$c)>{{ $c }}</option>
              @endforeach
            </select>
          </div>
        </div>

        <!-- Password -->
        <div>
          <label class="block text-sm font-bold mb-2 flex items-center gap-2" style="color: #1C1C1E;">
            <svg class="w-4 h-4" style="color: #FF3B30;" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
            </svg>
            Password
          </label>
          <input 
            type="password" 
            name="password" 
            class="w-full text-base border-2 border-transparent rounded-xl transition-all"
            style="height: 56px; font-size: 16px; padding: 0 16px; background: rgba(0, 0, 0, 0.03); color: #1C1C1E;"
            placeholder="Minimum 6 characters"
            required
            onfocus="this.style.border='2px solid #FF3B30'; this.style.boxShadow='0 0 0 4px rgba(255, 59, 48, 0.1)';"
            onblur="this.style.border='2px solid transparent'; this.style.boxShadow='none';"
          />
        </div>

        <!-- Confirm Password -->
        <div>
          <label class="block text-sm font-bold mb-2 flex items-center gap-2" style="color: #1C1C1E;">
            <svg class="w-4 h-4" style="color: #FF3B30;" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 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>
            Confirm Password
          </label>
          <input 
            type="password" 
            name="password_confirmation" 
            class="w-full text-base border-2 border-transparent rounded-xl transition-all"
            style="height: 56px; font-size: 16px; padding: 0 16px; background: rgba(0, 0, 0, 0.03); color: #1C1C1E;"
            placeholder="Re-enter password"
            required
            onfocus="this.style.border='2px solid #FF3B30'; this.style.boxShadow='0 0 0 4px rgba(255, 59, 48, 0.1)';"
            onblur="this.style.border='2px solid transparent'; this.style.boxShadow='none';"
          />
        </div>

        <!-- Submit Button -->
        <button 
          type="submit"
          class="w-full text-base font-semibold rounded-xl transition-all"
          style="background: linear-gradient(135deg, #FF3B30 0%, #FF2D55 50%, #FF6B6B 100%); color: white; padding: 16px 20px; box-shadow: 0 8px 24px rgba(255, 59, 48, 0.35); margin-top: 24px;"
          onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='0 12px 32px rgba(255, 59, 48, 0.45)';"
          onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 8px 24px rgba(255, 59, 48, 0.35)';"
          onmousedown="this.style.transform='scale(0.98)';"
          onmouseup="this.style.transform='scale(1.02)';"
        >
          Create Account
        </button>

        <!-- Login Link -->
        <div class="text-center pt-4">
          <p class="text-sm" style="color: #8E8E93;">
            Already have an account?
          </p>
          <a 
            href="{{ route('login') }}" 
            class="inline-flex items-center gap-2 mt-2 px-6 py-3 rounded-xl font-semibold text-sm transition-all"
            style="background: rgba(0, 122, 255, 0.1); color: #007AFF;"
            onmouseover="this.style.transform='scale(1.05)';"
            onmouseout="this.style.transform='scale(1)';"
          >
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd"/>
            </svg>
            Login to Your Account
          </a>
        </div>
      </form>

      <!-- Security Footer -->
      <p class="text-center text-xs mt-6 pt-6 border-t" style="color: #8E8E93; border-color: rgba(0, 0, 0, 0.06);">
        🔒 Your data is secured with end-to-end encryption
      </p>
    </div>
  </div>
</div>
@endsection