<x-guest-layout>

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

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    <div>

        <!-- Nama User -->
        <div>
            <label class="text-sm font-medium text-gray-700">Nama Pengguna</label>
            <input type="text" name="name" value="{{ old('name') }}" required
                class="mt-1 w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#7ebc12] focus:border-[#7ebc12]">
            <x-input-error :messages="$errors->get('name')" class="mt-1 text-xs"/>
        </div>

        <!-- Nama Pangkalan -->
        <div class="mt-4">
            <label class="text-sm font-medium text-gray-700">Nama Pangkalan</label>
            <input type="text" name="nama_pangkalan" value="{{ old('nama_pangkalan') }}" required
                class="mt-1 w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#7ebc12] focus:border-[#7ebc12]">
            <x-input-error :messages="$errors->get('nama_pangkalan')" class="mt-1 text-xs"/>
        </div>

        <!-- Alamat -->
        <div class="mt-4">
            <label class="text-sm font-medium text-gray-700">Alamat</label>
            <textarea name="alamat" required
                class="mt-1 w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#7ebc12] focus:border-[#7ebc12]">{{ old('alamat') }}</textarea>
            <x-input-error :messages="$errors->get('alamat')" class="mt-1 text-xs"/>
        </div>

    </div>
    <div>

        <!-- Email -->
        <div>
            <label class="text-sm font-medium text-gray-700">Email</label>
            <input type="email" name="email" value="{{ old('email') }}" required
                class="mt-1 w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#7ebc12] focus:border-[#7ebc12]">
            <x-input-error :messages="$errors->get('email')" class="mt-1 text-xs"/>
        </div>

        <!-- Password -->
        <div class="mt-4">
            <label class="text-sm font-medium text-gray-700">Password</label>

            <div class="relative">
                <input id="password" type="password" name="password" required
                    class="mt-1 w-full px-3 py-2 pr-10 border rounded-lg focus:ring-2 focus:ring-[#7ebc12] focus:border-[#7ebc12]">

                <button type="button" onclick="toggleRegisterPassword()"
                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">
                    <i id="eyeIcon" class="fas fa-eye"></i>
                </button>
            </div>

            <x-input-error :messages="$errors->get('password')" class="mt-1 text-xs"/>

            <div class="mt-2 text-xs space-y-1">
                <p id="rule-length" class="text-red-500">✖ Minimal 8 karakter</p>
                <p id="rule-uppercase" class="text-red-500">✖ Minimal 1 huruf kapital</p>
                <p id="rule-number" class="text-red-500">✖ Minimal 1 angka</p>
                <p id="rule-symbol" class="text-red-500">✖ Minimal 1 karakter unik</p>
            </div>
        </div>

        <div class="mt-4">
            <label class="text-sm font-medium text-gray-700">Konfirmasi Password</label>
            <input id="password_confirmation" type="password" name="password_confirmation" required
                class="mt-1 w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#7ebc12] focus:border-[#7ebc12]">

            <div id="password-match" class="text-xs mt-2 text-red-500">
                ✖ Password tidak sama
            </div>

            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-1 text-xs"/>
        </div>

    </div>

</div>

<div class="flex items-center justify-between mt-6">

    <div>
        <span class="text-sm text-gray-600">Sudah punya akun?</span>
        <a href="{{ route('login') }}" class="text-sm text-[#7ebc12] font-semibold">
            Login
        </a>
    </div>

    <button id="registerBtn" type="submit"
        class="bg-[#7ebc12] hover:bg-[#6aa30f] text-white px-5 py-2 rounded-lg flex items-center gap-2">

        <span id="btnText">Daftar</span>

        <svg id="btnSpinner" class="hidden animate-spin h-4 w-4 text-white"
            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        </svg>

    </button>

</div>

</form>

</x-guest-layout>