@extends('layouts.app')
@section('title','Create User - Admin Panel')
@section('content')
<div class="max-w-2xl 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">Create New User</span>
    </div>
    <h1 class="text-4xl font-bold text-gray-900 mb-2">Create New User</h1>
    <p class="text-gray-600">Add a new donor or admin to the system</p>
  </div>

  <!-- Form Card -->
  <div class="bg-white rounded-2xl shadow-xl p-8">
    <form method="POST" action="{{ route('admin.users.store') }}" class="space-y-6">
      @csrf

      <div>
        <label class="block text-sm font-semibold text-gray-700 mb-2">Full Name</label>
        <input 
          type="text"
          name="name" 
          value="{{ old('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') }}" 
          placeholder="01XXXXXXXXX"
          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 
        />
        <p class="text-xs text-gray-500 mt-1">Phone number will be used for login</p>
      </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
          >
            <option value="">Select blood group</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-semibold text-gray-700 mb-2">City</label>
          <input 
            type="text"
            name="city" 
            value="{{ old('city') }}" 
            placeholder="Enter city 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"
          />
        </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">User (Donor)</option>
          <option value="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">Set Password</h3>
        
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">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" 
              required 
            />
          </div>

          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">Confirm 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" 
              required 
            />
          </div>
        </div>
      </div>

      <div class="flex gap-4 pt-4">
        <button 
          type="submit" 
          class="flex-1 bg-gradient-to-r from-green-600 to-green-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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
          </svg>
          Create User
        </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>
@endsection