@extends('layouts.guest')

@section('content')
<div class="max-w-md mx-auto mt-20 bg-white p-6 rounded shadow">

    <h2 class="text-2xl font-bold mb-6 text-center">Register</h2>

    <form method="POST" action="{{ route('register') }}">
        @csrf

        <div class="mb-4">
            <label class="block text-sm font-medium mb-1">Name</label>
            <input type="text" name="name" value="{{ old('name') }}"
                   class="w-full border rounded px-3 py-2" required>
            @error('name') <p class="text-red-500 text-sm">{{ $message }}</p> @enderror
        </div>

        <div class="mb-4">
            <label class="block text-sm font-medium mb-1">Email</label>
            <input type="email" name="email" value="{{ old('email') }}"
                   class="w-full border rounded px-3 py-2" required>
            @error('email') <p class="text-red-500 text-sm">{{ $message }}</p> @enderror
        </div>
        
        <div class="mb-4">
            <label class="block text-sm font-medium mb-1">Phone No.</label>
            <input type="number" name="phone" value="{{ old('phone') }}"
                   class="w-full border rounded px-3 py-2" required>
            @error('phone') <p class="text-red-500 text-sm">{{ $message }}</p> @enderror
        </div>

        <div class="mb-4">
    <label class="block text-sm font-medium mb-1">Password</label>
    <div class="relative">
        <input
            type="password"
            id="password"
            name="password"
            class="w-full border rounded px-3 py-2 pr-10"
            required
        >
        <button
            type="button"
            onclick="togglePassword('password')"
            class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500"
        >
            👁
        </button>
    </div>
    @error('password')
        <p class="text-red-500 text-sm">{{ $message }}</p>
    @enderror
</div>

<div class="mb-4">
    <label class="block text-sm font-medium mb-1">Confirm Password</label>
    <div class="relative">
        <input
            type="password"
            id="password_confirmation"
            name="password_confirmation"
            class="w-full border rounded px-3 py-2 pr-10"
            required
        >
        <button
            type="button"
            onclick="togglePassword('password_confirmation')"
            class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500"
        >
            👁
        </button>
    </div>
</div>

<script>
function togglePassword(fieldId) {
    const input = document.getElementById(fieldId);
    input.type = input.type === 'password' ? 'text' : 'password';
}
</script>


        <div class="mb-4">
            <label class="block text-sm font-medium mb-1">Register as</label>
            <select name="role" class="w-full border rounded px-3 py-2">
                <option value="user">User / Buyer</option>
                <option value="builder">Builder / Seller</option>
            </select>
            @error('role') <p class="text-red-500 text-sm">{{ $message }}</p> @enderror
        </div>

        <button type="submit"
                class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
            Register
        </button>

        <div class="text-center mt-4">
            <a href="{{ route('login') }}" class="text-sm text-blue-600 hover:underline">
                Already registered?
            </a>
        </div>
    </form>
</div>
@endsection