@extends('layouts.app')
@section('title','Edit User - Admin Panel')
@section('content')
<div class="max-w-4xl mx-auto">
  <!-- Header Section -->
  <div class="mb-8">
    <div class="flex items-center gap-2 text-gray-600 text-sm mb-4">
      <a href="{{ route('admin.users.index') }}" class="hover:text-red-600 transition-colors">Users</a>
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
      </svg>
      <span class="text-gray-900 font-semibold">Edit User</span>
    </div>
    <h1 class="text-4xl font-bold text-gray-900 mb-2">Edit User</h1>
    <p class="text-gray-600">Update user information and permissions</p>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- User Summary Card -->
    <div class="lg:col-span-1">
      <div class="bg-white rounded-2xl shadow-xl p-6 sticky top-6">
        <div class="text-center">
          <div class="w-24 h-24 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center text-white font-bold text-3xl mx-auto mb-4">
            {{ $user->blood_group }}
          </div>
          <h3 class="text-xl font-bold text-gray-900 mb-1">{{ $user->name }}</h3>
          <p class="text-gray-600 mb-4 font-mono text-sm">{{ $user->phone }}</p>
          
          <div class="border-t border-gray-200 pt-4 space-y-3">
            <div class="flex items-center justify-between text-sm">
              <span class="text-gray-600">Current Role</span>
              @if($user->role === 'admin')
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-700">
                  Admin
                </span>
              @else
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-700">
                  User
                </span>
              @endif
            </div>
            <div class="flex items-center justify-between text-sm">
              <span class="text-gray-600">Member Since</span>
              <span class="font-semibold text-gray-900">{{ $user->created_at->format('M Y') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Form -->
    <div class="lg:col-span-2">
      <div class="bg-white rounded-2xl shadow-xl p-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6">Edit Information</h2>
        
        <form method="POST" action="{{ route('admin.users.update', $user) }}" class="space-y-6">
          @csrf
          @method('PUT')

          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">Full Name</label>
            <input 
              type="text"
              name="name" 
              value="{{ old('name', $user->name) }}" 
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-200 focus:border-red-500 transition-all" 
              required 
            />
          </div>

          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">Phone Number</label>
            <input 
              type="text"
              name="phone" 
              value="{{ old('phone', $user->phone) }}" 
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-200 focus:border-red-500 transition-all" 
              required 
            />
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-semibold text-gray-700 mb-2">Blood Group</label>
              <select 
                name="blood_group" 
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-200 focus:border-red-500 transition-all" 
                required
              >
                @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bg)
                  <option value="{{ $bg }}" @selected(old('blood_group', $user->blood_group)==$bg)>{{ $bg }}</option>
                @endforeach
              </select>
            </div>

            <div>
              <label class="block text-sm font-semibold text-gray-700 mb-2">City</label>
              <input 
                type="text"
                name="city" 
                value="{{ old('city', $user->city) }}" 
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-200 focus:border-red-500 transition-all"
              />
            </div>
          </div>

          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">User Role</label>
            <select 
              name="role" 
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-200 focus:border-red-500 transition-all"
            >
              <option value="user" @selected($user->role==='user')>User (Donor)</option>
              <option value="admin" @selected($user->role==='admin')>Admin (Full Access)</option>
            </select>
          </div>

          <div class="border-t border-gray-200 pt-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Change Password</h3>
            
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">New Password</label>
                <input 
                  type="password" 
                  name="password" 
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-200 focus:border-red-500 transition-all" 
                  placeholder="Leave blank to keep current password"
                />
              </div>

              <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Confirm New Password</label>
                <input 
                  type="password" 
                  name="password_confirmation" 
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-200 focus:border-red-500 transition-all" 
                  placeholder="Confirm your new password"
                />
              </div>
            </div>
          </div>

          <div class="flex gap-4 pt-4">
            <button 
              type="submit" 
              class="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:scale-[1.02] hover:shadow-lg transition-all"
            >
              <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              Save Changes
            </button>
            <a 
              href="{{ route('admin.users.index') }}" 
              class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-all"
            >
              Cancel
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection