<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Akun Auditor | E-Audit Systems</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="{{ asset('images/logo_psi.png') }}" type="image/png">
</head>

<body class="h-screen overflow-hidden bg-[#eef2f6] font-sans text-slate-800">

    <main class="relative flex h-screen items-center justify-center overflow-hidden px-4 py-4">

        <!-- Background Decoration -->
        <div class="absolute -top-32 -left-32 h-80 w-80 rounded-full bg-[#2F435B]/20 blur-3xl"></div>
        <div class="absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-[#2F435B]/25 blur-3xl"></div>
        <div class="absolute top-1/3 right-1/4 h-44 w-44 rounded-full bg-[#6f8499]/20 blur-3xl"></div>

        <!-- Register Wrapper -->
        <div class="relative w-full max-w-[360px]">

            <!-- Card Register -->
            <div class="overflow-hidden rounded-[24px] border border-white/70 bg-white/95 shadow-[0_22px_60px_rgba(47,67,91,0.22)] backdrop-blur-xl">

                <!-- Header -->
                <div class="relative overflow-hidden bg-gradient-to-br from-[#2F435B] via-[#354B65] to-[#223246] px-6 py-3 text-white">

                    <div class="absolute -right-10 -top-10 h-24 w-24 rounded-full bg-white/10"></div>
                    <div class="absolute -bottom-12 -left-10 h-28 w-28 rounded-full bg-white/10"></div>

                    <div class="relative flex flex-col items-center text-center">

                        <!-- Logo Icon -->
                        <div class="mb-1.5 flex h-10 w-10 items-center justify-center rounded-xl bg-white/15 shadow-lg ring-1 ring-white/25 backdrop-blur">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 class="h-5 w-5 text-white"
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke="currentColor"
                                 stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3M6.75 6.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM4.5 20.25a7.5 7.5 0 0 1 15 0" />
                            </svg>
                        </div>

                        <h1 class="text-lg font-extrabold tracking-tight">
                            EA Systems
                        </h1>

                        <p class="mt-0.5 text-[11px] font-semibold text-slate-200">
                            Daftar Akun Auditor
                        </p>
                    </div>
                </div>

                <!-- Form Area -->
                <div class="px-7 py-3">

                    <div class="mb-2 text-center">
                        <h2 class="text-base font-bold text-slate-800">
                            Registrasi Auditor
                        </h2>
                        <p class="mt-0.5 text-[11px] text-slate-500">
                            Lengkapi data akun auditor
                        </p>
                    </div>

                    @if ($errors->any())
                        <div class="mb-2 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600">
                            @foreach ($errors->all() as $error)
                                <div class="flex items-start gap-2">
                                    <span class="mt-0.5">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor"
                                             stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                  d="M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                                        </svg>
                                    </span>
                                    <span>{{ $error }}</span>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    <form method="POST" action="{{ route('register.post') }}" class="space-y-2">
                        @csrf

                        <!-- Nama -->
                        <div>
                            <label for="name" class="mb-1 block text-xs font-bold text-slate-700">
                                Nama Lengkap
                            </label>

                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="h-4 w-4 text-[#8FA4BB]"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         stroke="currentColor"
                                         stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.5 20.25a7.5 7.5 0 0 1 15 0" />
                                    </svg>
                                </div>

                                <input type="text"
                                       id="name"
                                       name="name"
                                       required
                                       placeholder="Nama lengkap"
                                       class="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2 pl-10 text-xs font-semibold text-slate-700 outline-none transition-all duration-300 placeholder:text-[#8FA4BB] focus:border-[#2F435B] focus:bg-white focus:ring-2 focus:ring-[#2F435B]/15">
                            </div>
                        </div>

                        <!-- Bagian -->
                        <div>
                            <label for="bagian_id" class="mb-1 block text-xs font-bold text-slate-700">
                                Bagian
                            </label>

                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="h-4 w-4 text-[#8FA4BB]"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         stroke="currentColor"
                                         stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5M9 10.5h1.5M9 14.25h1.5M13.5 6.75H15M13.5 10.5H15M13.5 14.25H15" />
                                    </svg>
                                </div>

                                <select id="bagian_id"
                                        name="bagian_id"
                                        required
                                        class="w-full appearance-none rounded-xl border border-slate-200 bg-slate-50 px-4 py-2 pl-10 pr-10 text-xs font-semibold text-slate-700 outline-none transition-all duration-300 focus:border-[#2F435B] focus:bg-white focus:ring-2 focus:ring-[#2F435B]/15">
                                    <option value="">-- Pilih Bagian --</option>
                                    @foreach ($bagians as $bagian)
                                        <option value="{{ $bagian->id }}">{{ $bagian->nama_bagian }}</option>
                                    @endforeach
                                </select>

                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="h-4 w-4 text-[#8FA4BB]"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         stroke="currentColor"
                                         stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <!-- Email -->
                        <div>
                            <label for="email" class="mb-1 block text-xs font-bold text-slate-700">
                                Email
                            </label>

                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="h-4 w-4 text-[#8FA4BB]"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         stroke="currentColor"
                                         stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M21.75 6.75v10.5A2.25 2.25 0 0 1 19.5 19.5h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.24a2.25 2.25 0 0 1-1.07 1.92l-7.5 4.5a2.25 2.25 0 0 1-2.36 0l-7.5-4.5a2.25 2.25 0 0 1-1.07-1.92v-.24" />
                                    </svg>
                                </div>

                                <input type="email"
                                       id="email"
                                       name="email"
                                       required
                                       placeholder="email@eas.co.id"
                                       class="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2 pl-10 text-xs font-semibold text-slate-700 outline-none transition-all duration-300 placeholder:text-[#8FA4BB] focus:border-[#2F435B] focus:bg-white focus:ring-2 focus:ring-[#2F435B]/15">
                            </div>
                        </div>

                        <!-- Password -->
                        <div>
                            <label for="password" class="mb-1 block text-xs font-bold text-slate-700">
                                Password
                            </label>

                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="h-4 w-4 text-[#8FA4BB]"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         stroke="currentColor"
                                         stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M16.5 10.5V6.75a4.5 4.5 0 0 0-9 0v3.75m-.75 0h10.5A2.25 2.25 0 0 1 19.5 12.75v6A2.25 2.25 0 0 1 17.25 21H6.75A2.25 2.25 0 0 1 4.5 18.75v-6A2.25 2.25 0 0 1 6.75 10.5z" />
                                    </svg>
                                </div>

                                <input type="password"
                                       id="password"
                                       name="password"
                                       required
                                       placeholder="Masukkan password"
                                       class="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2 pl-10 text-xs font-semibold text-slate-700 outline-none transition-all duration-300 placeholder:text-[#8FA4BB] focus:border-[#2F435B] focus:bg-white focus:ring-2 focus:ring-[#2F435B]/15">
                            </div>
                        </div>

                        <!-- Konfirmasi Password -->
                        <div>
                            <label for="password_confirmation" class="mb-1 block text-xs font-bold text-slate-700">
                                Konfirmasi Password
                            </label>

                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="h-4 w-4 text-[#8FA4BB]"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         stroke="currentColor"
                                         stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M9 12.75 11.25 15 15 9.75M6.75 21h10.5A2.25 2.25 0 0 0 19.5 18.75v-6A2.25 2.25 0 0 0 17.25 10.5H6.75A2.25 2.25 0 0 0 4.5 12.75v6A2.25 2.25 0 0 0 6.75 21ZM16.5 10.5V6.75a4.5 4.5 0 0 0-9 0v3.75" />
                                    </svg>
                                </div>

                                <input type="password"
                                       id="password_confirmation"
                                       name="password_confirmation"
                                       required
                                       placeholder="Ulangi password"
                                       class="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2 pl-10 text-xs font-semibold text-slate-700 outline-none transition-all duration-300 placeholder:text-[#8FA4BB] focus:border-[#2F435B] focus:bg-white focus:ring-2 focus:ring-[#2F435B]/15">
                            </div>
                        </div>

                        <!-- Tombol Submit -->
                        <button type="submit"
                                class="group relative w-full overflow-hidden rounded-xl bg-gradient-to-r from-[#2F435B] to-[#223246] px-4 py-2 text-sm font-bold text-white shadow-lg shadow-[#2F435B]/25 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-[#2F435B]/30 active:translate-y-0">
                            <span class="relative z-10 flex items-center justify-center gap-2">
                                Daftar Akun

                                <svg xmlns="http://www.w3.org/2000/svg"
                                     class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
                                     fill="none"
                                     viewBox="0 0 24 24"
                                     stroke="currentColor"
                                     stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                </svg>
                            </span>
                        </button>

                        <!-- Login Link -->
                        <div class="rounded-xl bg-slate-50 px-4 py-2 text-center">
                            <p class="text-xs text-slate-500">
                                Sudah punya akun?
                                <a href="{{ route('login') }}"
                                   class="font-bold text-[#2F435B] transition hover:text-[#223246] hover:underline">
                                    Login di sini
                                </a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>

        </div>

    </main>

</body>
</html>