<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Daftar Akun - SIPIAN</title>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --register-blue-1: #4338ca;
            --register-blue-2: #2563eb;
            --register-blue-3: #38bdf8;
            --panel-line: rgba(255, 255, 255, 0.16);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
        }

        .register-scene {
            background:
                radial-gradient(circle at 14% 18%, rgba(56, 189, 248, 0.18), transparent 22%),
                radial-gradient(circle at 82% 16%, rgba(99, 102, 241, 0.24), transparent 26%),
                linear-gradient(135deg, #312e81 0%, var(--register-blue-1) 22%, var(--register-blue-2) 68%, #1d4ed8 100%);
            position: relative;
            overflow: hidden;
        }

        .register-scene::before,
        .register-scene::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .register-scene::before {
            background-image:
                linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.2));
        }

        .register-scene::after {
            background:
                radial-gradient(circle at 28% 72%, rgba(255,255,255,0.10), transparent 18%),
                radial-gradient(circle at 76% 54%, rgba(255,255,255,0.08), transparent 20%);
        }

        .glow-orb {
            position: absolute;
            border-radius: 999px;
            filter: blur(10px);
            opacity: 0.55;
            pointer-events: none;
        }

        .glow-orb.one {
            width: 180px;
            height: 180px;
            top: 10%;
            right: 12%;
            background: rgba(125, 211, 252, 0.24);
        }

        .glow-orb.two {
            width: 220px;
            height: 220px;
            bottom: -40px;
            left: -20px;
            background: rgba(129, 140, 248, 0.24);
        }

        .brand-shell {
            backdrop-filter: blur(18px);
            background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%);
            border: 1px solid var(--panel-line);
            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.20);
        }

        .brand-shell::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(135deg, rgba(255,255,255,0.08), transparent 30%),
                radial-gradient(circle at 82% 18%, rgba(255,255,255,0.14), transparent 18%);
            pointer-events: none;
        }

        .icon-shell {
            position: relative;
            background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%);
            border: 1px solid rgba(255,255,255,0.18);
            box-shadow:
                0 22px 40px rgba(30, 41, 59, 0.22),
                inset 0 1px 0 rgba(255,255,255,0.18);
        }

        .icon-shell::after {
            content: "";
            position: absolute;
            inset: 14px;
            border-radius: 24px;
            border: 1px solid rgba(255,255,255,0.10);
        }

        .register-card {
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.72);
            box-shadow: 0 30px 70px rgba(30, 41, 59, 0.14);
        }

        .register-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.30), transparent);
        }

        .status-card {
            background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.08) 100%);
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
        }

        .helper-strip {
            background: linear-gradient(135deg, #eef2ff 0%, #eff6ff 100%);
            border: 1px solid rgba(199, 210, 254, 0.65);
        }

        .helper-dot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, #4f46e5, #38bdf8);
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
        }

        .field-shell {
            position: relative;
        }

        .field-input,
        .field-select {
            transition: all 0.2s ease;
        }

        .field-input:focus,
        .field-select:focus {
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
        }

        .brand-copy {
            animation: fadeUp 0.65s ease-out;
        }

        .register-card-shell {
            animation: fadeUp 0.65s ease-out 0.08s both;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 1024px) {
            .register-scene::before {
                background-size: 32px 32px;
            }
        }
    </style>
</head>
<body class="min-h-screen bg-slate-950 text-gray-900 antialiased">
    <div class="register-scene min-h-screen w-full px-4 py-5 sm:px-6 sm:py-8 lg:px-8">
        <div class="glow-orb one"></div>
        <div class="glow-orb two"></div>

        <div class="mx-auto flex min-h-[calc(100vh-2.5rem)] w-full max-w-7xl items-center justify-center">
            <div class="grid w-full max-w-6xl items-stretch gap-6 lg:grid-cols-[1.02fr_minmax(460px,0.98fr)] xl:gap-8">
                <section class="brand-shell relative overflow-hidden rounded-[32px] p-6 text-white sm:p-8 lg:min-h-[760px] lg:p-10 xl:p-12">
                    <div class="relative flex h-full flex-col justify-between">
                        <div class="brand-copy flex flex-col items-center text-center">
                            <div class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/8 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.24em] text-blue-100">
                                Sistem Inventaris Digital
                            </div>

                            <div class="mt-8 flex flex-col items-center text-center sm:mt-12 lg:mt-14">
                                <div class="icon-shell flex h-28 w-28 items-center justify-center rounded-[30px] sm:h-32 sm:w-32 lg:h-40 lg:w-40 lg:rounded-[36px]">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-14 w-14 text-white sm:h-16 sm:w-16 lg:h-20 lg:w-20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.65">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                    </svg>
                                </div>

                                <h1 class="mt-8 text-4xl font-black tracking-[-0.05em] sm:text-5xl lg:text-6xl">SIPIAN</h1>
                                <p class="mt-3 text-xl font-medium text-blue-100 sm:text-2xl">DP3APPKB Surabaya</p>
                                <p class="mt-6 max-w-2xl text-base leading-8 text-blue-50/90 sm:text-lg lg:text-[22px] lg:leading-10">
                                    Monitoring Real-time Pinjam-Pakai Ruangan, Kendaraan dan Peralatan Operasional.
                                </p>
                            </div>
                        </div>

                        <div class="mt-8 grid gap-3 sm:grid-cols-2">
                            <div class="status-card rounded-[24px] px-5 py-5 backdrop-blur-md">
                                <div class="text-[11px] font-semibold uppercase tracking-[0.22em] text-blue-100/80">Registrasi</div>
                                <div class="mt-3 text-2xl font-black tracking-[-0.04em]">Cepat & rapi</div>
                                <p class="mt-2 text-sm leading-7 text-blue-50/80">Buat akun baru dengan alur yang jelas.</p>
                            </div>
                            <div class="status-card rounded-[24px] px-5 py-5 backdrop-blur-md">
                                <div class="text-[11px] font-semibold uppercase tracking-[0.22em] text-blue-100/80">Akses</div>
                                <div class="mt-3 text-2xl font-black tracking-[-0.04em]">Siap dipakai</div>
                                <p class="mt-2 text-sm leading-7 text-blue-50/80">Nyaman di laptop dan HP.</p>
                            </div>
                        </div>

                        <div class="mt-10 grid gap-3 sm:grid-cols-3">
                            <div class="rounded-2xl border border-white/12 bg-white/10 px-4 py-4 backdrop-blur-md">
                                <div class="text-[11px] font-semibold uppercase tracking-[0.22em] text-blue-100/80">Portal</div>
                                <div class="mt-2 text-lg font-bold">Modern</div>
                            </div>
                            <div class="rounded-2xl border border-white/12 bg-white/10 px-4 py-4 backdrop-blur-md">
                                <div class="text-[11px] font-semibold uppercase tracking-[0.22em] text-blue-100/80">Form</div>
                                <div class="mt-2 text-lg font-bold">Terstruktur</div>
                            </div>
                            <div class="rounded-2xl border border-white/12 bg-white/10 px-4 py-4 backdrop-blur-md">
                                <div class="text-[11px] font-semibold uppercase tracking-[0.22em] text-blue-100/80">Tampilan</div>
                                <div class="mt-2 text-lg font-bold">Responsif</div>
                            </div>
                        </div>
                    </div>
                </section>

                <section id="authFormPanel" class="register-card-shell flex items-center">
                    <div class="register-card w-full rounded-[32px] p-5 sm:p-8 lg:p-10">
                        <div class="mb-8">
                            <div class="inline-flex items-center gap-2 rounded-full border border-indigo-100 bg-indigo-50 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.22em] text-indigo-700">
                                Registrasi Akun
                            </div>
                            <h2 class="mt-5 text-3xl font-black tracking-[-0.04em] text-slate-900 sm:text-4xl">Buat akun baru</h2>
                            <p class="mt-3 max-w-lg text-sm leading-7 text-slate-500 sm:text-base">
                                Lengkapi data di bawah ini untuk mendapatkan akses ke portal SIPIAN dan mulai menggunakan sistem.
                            </p>
                        </div>

                        <div class="helper-strip mb-6 flex items-start gap-3 rounded-[22px] px-4 py-4">
                            <div class="helper-dot mt-1 flex-shrink-0"></div>
                            <div>
                                <p class="text-sm font-semibold text-slate-800">Pastikan data sesuai instansi</p>
                                <p class="mt-1 text-sm leading-6 text-slate-500">
                                    Gunakan email aktif dan pilih divisi yang benar agar akun dapat diproses dengan lancar.
                                </p>
                            </div>
                        </div>

                        @if ($errors->any())
                            <div class="mb-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700 shadow-sm" role="alert">
                                <div class="flex items-start gap-3">
                                    <div class="mt-0.5 rounded-xl bg-red-100 p-2 text-red-600">
                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="font-bold">Validasi Gagal</p>
                                        <ul class="mt-1 list-disc list-inside space-y-1">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endif

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

                            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                                <div class="space-y-2">
                                    <label for="name" class="text-sm font-semibold text-slate-700">Nama Lengkap</label>
                                    <div class="field-shell">
                                        <input
                                            type="text"
                                            id="name"
                                            name="name"
                                            value="{{ old('name') }}"
                                            required
                                            class="field-input block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-500 sm:text-[15px]"
                                            placeholder="Nama Anda"
                                        >
                                    </div>
                                </div>

                                <div class="space-y-2">
                                    <label for="email" class="text-sm font-semibold text-slate-700">Email Instansi</label>
                                    <div class="field-shell">
                                        <input
                                            type="email"
                                            id="email"
                                            name="email"
                                            value="{{ old('email') }}"
                                            required
                                            class="field-input block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-500 sm:text-[15px]"
                                            placeholder="nama@instansi.go.id"
                                        >
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-2">
                                <label for="divisi_id" class="text-sm font-semibold text-slate-700">Divisi / Bidang</label>
                                <div class="field-shell">
                                    <select
                                        id="divisi_id"
                                        name="divisi_id"
                                        required
                                        class="field-select block w-full appearance-none rounded-2xl border border-slate-200 bg-white px-4 py-3.5 pr-11 text-sm text-slate-900 outline-none focus:border-indigo-500 sm:text-[15px]"
                                    >
                                        <option value="" disabled {{ old('divisi_id') ? '' : 'selected' }}>-- Pilih Divisi Anda --</option>
                                        @isset($divisis)
                                            @foreach($divisis as $divisi)
                                                <option value="{{ $divisi->id }}" {{ old('divisi_id') == $divisi->id ? 'selected' : '' }}>
                                                    {{ $divisi->nama }}
                                                </option>
                                            @endforeach
                                        @endisset
                                    </select>
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4 text-slate-400">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                                <div class="space-y-2">
                                    <label for="password" class="text-sm font-semibold text-slate-700">Password</label>
                                    <div class="field-shell">
                                        <input
                                            type="password"
                                            id="password"
                                            name="password"
                                            required
                                            class="field-input block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-500 sm:text-[15px]"
                                            placeholder="Min. 8 karakter"
                                        >
                                    </div>
                                </div>

                                <div class="space-y-2">
                                    <label for="password_confirmation" class="text-sm font-semibold text-slate-700">Konfirmasi Password</label>
                                    <div class="field-shell">
                                        <input
                                            type="password"
                                            id="password_confirmation"
                                            name="password_confirmation"
                                            required
                                            class="field-input block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-500 sm:text-[15px]"
                                            placeholder="Ulangi password"
                                        >
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-4 pt-2">
                                <button
                                    type="submit"
                                    class="w-full rounded-2xl bg-gradient-to-r from-indigo-600 via-blue-600 to-blue-700 px-4 py-3.5 text-sm font-bold uppercase tracking-[0.18em] text-white shadow-[0_18px_30px_rgba(37,99,235,0.28)] transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_20px_34px_rgba(37,99,235,0.32)] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                                >
                                    Daftar Sekarang
                                </button>

                                <p class="text-center text-sm text-slate-500">
                                    Sudah memiliki akun?
                                    <a href="{{ route('login') }}" class="font-semibold text-indigo-600 transition hover:text-indigo-500">
                                        Masuk di sini
                                    </a>
                                </p>
                            </div>
                        </form>

                        <div class="mt-8 border-t border-slate-200 pt-5 text-center text-xs leading-6 text-slate-400">
                            &copy; {{ date('Y') }} DP3APPKB Surabaya. <span class="hidden sm:inline">All rights reserved.</span>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const formPanel = document.getElementById('authFormPanel');
            const shouldAutoScroll = window.matchMedia('(max-width: 767px)').matches;

            if (!formPanel || !shouldAutoScroll) {
                return;
            }

            window.setTimeout(() => {
                formPanel.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start',
                });
            }, 350);
        });
    </script>
</body>
</html>
