<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pendaftaran Akun Baru | SIMKP ASN</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-blue: #2d62ed;
            --accent-hover: #1b4edb;
            --bg-light: #f8faff;
            --input-bg: #f3f6ff;
            --text-dark: #1e293b;
            --text-muted: #64748b;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: #f1f5f9;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem 0;
        }

        .signup-container {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.05);
            width: 100%;
            max-width: 800px;
            padding: 3rem;
            position: relative;
            overflow: hidden;
        }

        .header-section {
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .header-section h1 {
            font-weight: 700;
            color: var(--text-dark);
            font-size: 1.75rem;
            margin-bottom: 0.5rem;
        }

        .header-section p {
            color: var(--text-muted);
            font-size: 1rem;
        }

        .form-label {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .input-group-custom {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .input-group-custom i {
            position: absolute;
            left: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 1.1rem;
            z-index: 10;
        }

        .form-control-custom {
            background-color: var(--input-bg);
            border: 1px solid transparent;
            border-radius: 12px;
            padding: 0.8rem 3.25rem 0.8rem 3.25rem;
            width: 100%;
            font-weight: 400;
            transition: all 0.3s ease;
            color: var(--text-dark);
        }

        .form-control-custom:focus {
            background-color: #ffffff;
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 4px rgba(45, 98, 237, 0.1);
            outline: none;
        }

        .form-control-custom::placeholder {
            color: #94a3b8;
        }

        .password-toggle {
            position: absolute;
            right: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            cursor: pointer;
            z-index: 10;
        }

        .btn-signup {
            background-color: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 1rem;
            font-weight: 700;
            font-size: 1.1rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 1rem;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(45, 98, 237, 0.3);
        }

        .btn-signup:hover {
            background-color: var(--accent-hover);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(45, 98, 237, 0.4);
            color: white;
        }

        .footer-links {
            text-align: center;
            margin-top: 2rem;
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .footer-links a {
            color: var(--primary-blue);
            text-decoration: none;
            font-weight: 600;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        .alert-custom {
            border-radius: 12px;
            margin-bottom: 2rem;
            border: none;
        }
    </style>
</head>
<body>

    <div class="signup-container">
        <div class="header-section">
            <h1>Pendaftaran Akun Baru</h1>
            <p>Lengkapi data diri Anda untuk memulai</p>
        </div>

        <?php if (session()->getFlashdata('errors')): ?>
            <div class="alert alert-danger alert-custom" role="alert">
                <ul class="mb-0 small">
                <?php foreach (session()->getFlashdata('errors') as $error): ?>
                    <li><?= $error ?></li>
                <?php endforeach; ?>
                </ul>
            </div>
        <?php endif; ?>

        <?php if(session()->getFlashdata('msg')): ?>
            <div class="alert alert-danger alert-custom" role="alert">
                <?= session()->getFlashdata('msg') ?>
            </div>
        <?php endif; ?>

        <form action="<?= base_url('auth/registerProcess') ?>" method="POST">
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label">NIP</label>
                    <div class="input-group-custom">
                        <i class="bi bi-person-badge"></i>
                        <input type="text" class="form-control-custom" name="nip" placeholder="NIP 18 Digit" value="<?= old('nip') ?>" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Nama Lengkap</label>
                    <div class="input-group-custom">
                        <i class="bi bi-person"></i>
                        <input type="text" class="form-control-custom" name="name" placeholder="Nama sesuai SK" value="<?= old('name') ?>" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label class="form-label">Email</label>
                    <div class="input-group-custom">
                        <i class="bi bi-envelope"></i>
                        <input type="email" class="form-control-custom" name="email" placeholder="email@contoh.com" value="<?= old('email') ?>" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">WhatsApp</label>
                    <div class="input-group-custom">
                        <i class="bi bi-whatsapp"></i>
                        <input type="text" class="form-control-custom" name="no_hp" placeholder="08xxxxxxxxxx" value="<?= old('no_hp') ?>" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label class="form-label">Jabatan</label>
                    <div class="input-group-custom">
                        <i class="bi bi-briefcase"></i>
                        <input type="text" class="form-control-custom" name="jabatan" placeholder="Jabatan saat ini" value="<?= old('jabatan') ?>" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Golongan</label>
                    <div class="input-group-custom">
                        <i class="bi bi-layers"></i>
                        <input type="text" class="form-control-custom" name="gol_akhir" placeholder="Contoh: III/a" value="<?= old('gol_akhir') ?>" required>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Unit Kerja / Instansi</label>
                <div class="input-group-custom">
                    <i class="bi bi-building"></i>
                    <input type="text" class="form-control-custom" name="unor" placeholder="Nama Dinas / Badan / Kantor" value="<?= old('unor') ?>" required>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label class="form-label">Password</label>
                    <div class="input-group-custom">
                        <i class="bi bi-lock"></i>
                        <input type="password" class="form-control-custom" id="password" name="password" placeholder="••••••••" required>
                        <i class="bi bi-eye password-toggle" id="toggle-password" onclick="togglePassword('password')"></i>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Konfirmasi Password</label>
                    <div class="input-group-custom">
                        <i class="bi bi-lock"></i>
                        <input type="password" class="form-control-custom" id="confpassword" name="confpassword" placeholder="••••••••" required>
                        <i class="bi bi-eye password-toggle" id="toggle-confpassword" onclick="togglePassword('confpassword')"></i>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-signup">Daftar Sekarang <i class="bi bi-arrow-right"></i></button>
        </form>

        <div class="footer-links">
            Sudah punya akun? <a href="<?= base_url('auth/login') ?>">Masuk Aplikasi</a>
        </div>
    </div>

    <script>
        function togglePassword(id) {
            const input = document.getElementById(id);
            const icon = document.getElementById('toggle-' + id);
            if (input.type === "password") {
                input.type = "text";
                icon.classList.replace('bi-eye', 'bi-eye-slash');
            } else {
                input.type = "password";
                icon.classList.replace('bi-eye-slash', 'bi-eye');
            }
        }
    </script>
</body>
</html>