{{-- resources/views/auth/register.blade.php --}}
<x-guest-layout>
    {{-- Jika ingin menampilkan semua error sekaligus, gunakan blok ini: --}}
    @if ($errors->any())
        <div class="mb-4 p-4 bg-red-100 text-red-700 rounded-lg">
            <ul class="list-disc list-inside text-sm">
                @foreach ($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

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

        {{-- Name --}}
        <div class="mt-4">
            <x-input-label for="name" :value="__('Nama')" class="text-gray-700 dark:text-gray-200" />
            <input
                id="name"
                type="text"
                name="name"
                value="{{ old('name') }}"
                required
                autofocus
                autocomplete="name"
                class="w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-600 rounded-lg
                       bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400
                       focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition"
                placeholder="Masukkan nama lengkap"
            />
            {{-- Pesan error untuk field name --}}
            @error('name')
                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        {{-- Username --}}
        <div class="mt-6">
            <x-input-label for="username" :value="__('Username')" class="text-gray-700 dark:text-gray-200" />
            <input
                id="username"
                type="text"
                name="username"
                value="{{ old('username') }}"
                required
                autocomplete="username"
                class="w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-600 rounded-lg
                       bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400
                       focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition"
                placeholder="Masukkan username"
            />
            {{-- Pesan error untuk field username --}}
            @error('username')
                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        {{-- WhatsApp Number --}}
        <div class="mt-6">
            <x-input-label for="whatsapp" :value="__('Nomor WhatsApp')" class="text-gray-700 dark:text-gray-200" />
            <input
                id="whatsapp"
                type="text"
                name="whatsapp"
                value="{{ old('whatsapp') }}"
                required
                autocomplete="whatsapp"
                class="w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-600 rounded-lg
                       bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400
                       focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition"
                placeholder="Contoh: 6281234567890"
            />
            {{-- Pesan error untuk field whatsapp --}}
            @error('whatsapp')
                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        {{-- Email --}}
        <div class="mt-6">
            <x-input-label for="email" :value="__('Email')" class="text-gray-700 dark:text-gray-200" />
            <input
                id="email"
                type="email"
                name="email"
                value="{{ old('email') }}"
                required
                autocomplete="email"
                class="w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-600 rounded-lg
                       bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400
                       focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition"
                placeholder="Masukkan email aktif"
            />
            {{-- Pesan error untuk field email --}}
            @error('email')
                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        {{-- Password --}}
        <div class="mt-6">
            <x-input-label for="password" :value="__('Kata Sandi')" class="text-gray-700 dark:text-gray-200" />
            <input
                id="password"
                type="password"
                name="password"
                required
                autocomplete="new-password"
                class="w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-600 rounded-lg
                       bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400
                       focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition"
                placeholder="Minimal 8 karakter"
            />
            {{-- Pesan error untuk field password --}}
            @error('password')
                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        {{-- Confirm Password --}}
        <div class="mt-6">
            <x-input-label for="password_confirmation" :value="__('Konfirmasi Kata Sandi')" class="text-gray-700 dark:text-gray-200" />
            <input
                id="password_confirmation"
                type="password"
                name="password_confirmation"
                required
                autocomplete="new-password"
                class="w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-600 rounded-lg
                       bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400
                       focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition"
                placeholder="Konfirmasi password"
            />
            {{-- Pesan error untuk field password_confirmation --}}
            @error('password_confirmation')
                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        {{-- Already Registered? & Register Button --}}
        <div class="flex items-center justify-between mt-8">
            <a
              href="{{ route('login') }}"
              class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 underline transition"
            >
              {{ __('Sudah punya akun?') }}
            </a>

            <button
              type="submit"
              class="px-6 py-2 bg-yellow-400 text-blue-800 font-semibold rounded-lg shadow-md
                     hover:bg-yellow-300 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition"
            >
              {{ __('Register') }}
            </button>
        </div>
    </form>
</x-guest-layout>