@extends('layouts.website.app')

@section('title', 'Đăng Ký')
@section('content')

  <section class="min-h-screen bg-emerald-50 flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl p-8">

      <!-- Heading -->
      <h2 class="text-3xl font-bold text-gray-900 mb-2 text-center">Đăng Ký Tài Khoản</h2>
      <p class="text-center text-gray-600 mb-6">
        Tạo tài khoản để trải nghiệm <span class="text-emerald-600 font-semibold">dịch vụ của chúng tôi</span>
      </p>

      @if (session('success'))
        <div class="mb-4 p-3 bg-green-50 border border-green-300 text-green-700 rounded-lg">
          {{ session('success') }}
        </div>
      @endif

      <!-- Form -->
      <form method="POST" action="{{ route('register') }}" class="space-y-5">
        @csrf

        <!-- Name -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Họ và tên</label>
          <input type="text" name="name" value="{{ old('name') }}" required
            class="w-full px-4 py-3 rounded-full border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent focus:outline-none transition"
            placeholder="Nhập họ và tên">
          @error('name')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
          @enderror
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input type="email" name="email" value="{{ old('phone') }}" required
            class="w-full px-4 py-3 rounded-full border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent focus:outline-none transition"
            placeholder="Nhập số điện thoại">
          @error('email')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
          @enderror
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Số điện thoại</label>
          <input type="tel" name="phone" value="{{ old('phone') }}" required
            class="w-full px-4 py-3 rounded-full border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent focus:outline-none transition"
            placeholder="Nhập số điện thoại">
          @error('phone')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
          @enderror
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Mật khẩu</label>
          <input type="password" name="password" required
            class="w-full px-4 py-3 rounded-full border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent focus:outline-none transition"
            placeholder="Nhập mật khẩu">
          @error('password')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
          @enderror
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Xác nhận mật khẩu</label>
          <input type="password" name="password_confirmation" required
            class="w-full px-4 py-3 rounded-full border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent focus:outline-none transition"
            placeholder="Nhập lại mật khẩu">
        </div>

        <button type="submit"
          class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-full shadow-lg transition">
          Đăng Ký
        </button>

        <p class="mt-6 text-center text-sm text-gray-600">
          Đã có tài khoản?
          <a href="{{ route('login') }}" class="text-emerald-600 font-semibold hover:underline">Đăng nhập ngay</a>
        </p>
      </form>
    </div>
  </section>
@endsection