@extends('layouts.app')
@section('title','Login - 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); }
}
html, body {
  overflow: hidden !important;
  height: 100vh !important;
}
</style>

<div style="background: #F2F2F7; height: calc(100vh - 5rem); overflow-y: auto; overflow-x: hidden;" class="flex items-center justify-center px-4">
  <div class="w-full max-w-md my-auto">
    <!-- Hero Icon -->
    <div class="text-center mb-4 sm:mb-6" style="animation: fade-in-up 0.5s ease-out;">
      <div class="relative inline-block mb-3 sm:mb-4">
        <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl 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-8 h-8 sm:w-10 sm:h-10 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-5 h-5 sm:w-6 sm:h-6 rounded-full" style="background: rgba(255, 255, 255, 0.2); transform: translate(25%, -25%);"></div>
        <div class="absolute bottom-0 left-0 w-4 h-4 sm:w-5 sm:h-5 rounded-full" style="background: rgba(255, 255, 255, 0.15); transform: translate(-35%, 35%);"></div>
      </div>
      <h1 class="text-3xl sm:text-4xl font-black mb-1" style="color: #1C1C1E; letter-spacing: -0.04em;">Welcome Back</h1>
      <p class="text-sm sm:text-base" style="color: #8E8E93;">Sign in to continue saving lives</p>
    </div>

    <!-- Card -->
    <div class="ios-card p-5 sm:p-6 md:p-8" 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('login.post') }}" class="space-y-4">
        @csrf
        
        <!-- 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: 50px; 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';"
          />
        </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>
          <div class="relative">
            <input 
              type="password" 
              id="password"
              name="password" 
              class="w-full text-base border-2 border-transparent rounded-xl transition-all"
              style="height: 50px; font-size: 16px; padding: 0 16px; padding-right: 50px; background: rgba(0, 0, 0, 0.03); color: #1C1C1E;"
              placeholder="Enter your password"
              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';"
            />
            <button
              type="button"
              onclick="togglePasswordVisibility()"
              class="absolute inset-y-0 right-0 pr-3 flex items-center transition-transform hover:scale-110"
            >
              <svg id="eyeIcon" class="w-5 h-5" style="color: #8E8E93;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
              </svg>
              <svg id="eyeOffIcon" class="w-5 h-5 hidden" style="color: #8E8E93;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
              </svg>
            </button>
          </div>
        </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: 14px 20px; box-shadow: 0 8px 24px rgba(255, 59, 48, 0.35); margin-top: 20px;"
          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)';"
        >
          Sign In
        </button>

        <!-- Register Link -->
        <div class="text-center pt-3">
          <p class="text-sm" style="color: #8E8E93;">
            Don't have an account?
          </p>
          <a 
            href="{{ route('register') }}" 
            class="inline-flex items-center gap-2 mt-2 px-5 py-2.5 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 d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"/>
            </svg>
            Register as a Donor
          </a>
        </div>
      </form>

      <!-- Security Footer -->
      <p class="text-center text-xs mt-5 pt-5 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>

<script>
function togglePasswordVisibility() {
  const passwordInput = document.getElementById('password');
  const eyeIcon = document.getElementById('eyeIcon');
  const eyeOffIcon = document.getElementById('eyeOffIcon');
  
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    eyeIcon.classList.add('hidden');
    eyeOffIcon.classList.remove('hidden');
  } else {
    passwordInput.type = 'password';
    eyeIcon.classList.remove('hidden');
    eyeOffIcon.classList.add('hidden');
  }
}
</script>
@endsection