@extends('layouts.app')
@section('title','Register')
@section('content')
  <h1 class="text-3xl font-extrabold mb-6">Create an account</h1>

  <form method="POST" action="{{ route('register.post') }}" class="space-y-6 max-w-md bg-white p-6 rounded-lg shadow">
    @csrf
    <div>
      <label class="block text-sm font-medium text-gray-700">Name</label>
      <input name="name" value="{{ old('name') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500" required />
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700">Phone</label>
      <input name="phone" value="{{ old('phone') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500" required />
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700">City</label>
      <select name="city" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
        <option value="">Select city</option>
        @foreach($cities as $c)
          <option value="{{ $c }}" @selected(old('city')==$c)>{{ $c }}</option>
        @endforeach
      </select>
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700">Blood group</label>
      <select name="blood_group" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
        @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-medium text-gray-700">Password</label>
      <input type="password" name="password" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500" required />
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700">Confirm Password</label>
      <input type="password" name="password_confirmation" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500" required />
    </div>

    <div>
      <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-md">Create account</button>
    </div>
  </form>
@endsection