<div class="container mx-auto px-4 py-6">
    <div class="flex items-center mb-6">
        <a href="<?= base_url('admin/settings/users') ?>" class="text-blue-600 hover:text-blue-800 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
        </a>
        <h1 class="text-2xl font-bold text-[#333]">Tambah User Baru</h1>
    </div>

    <!-- Flash Messages -->
    <?php if ($this->session->flashdata('message')): ?>
        <div class="mb-4 alert flex items-center justify-between bg-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-100 border-l-4 border-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-800 px-4 py-3 rounded-lg shadow-lg transition transform duration-300">
            <div class="flex items-center">
                <i data-feather="<?php echo $this->session->flashdata('message_type') === 'success' ? 'check-circle' : 'x-circle'; ?>" class="h-6 w-6 mr-3"></i>
                <span class="font-large"><?php echo $this->session->flashdata('message'); ?></span>
            </div>
            <button class="ml-4 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 hover:text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-700 focus:outline-none" onclick="this.parentElement.style.display='none'">
                <i data-feather="x" class="h-5 w-5"></i>
            </button>
        </div>
    <?php endif; ?>

    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-6">
            <?= form_open_multipart('admin/settings/create_admin_user', 'class="space-y-4"') ?>
            <!-- Name -->
            <div>
                <label for="name" class="block text-sm font-medium text-[#333] mb-1">Nama<span class="text-red-600">*</span></label>
                <input type="text" name="name" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Namanya siapa" required></input>
            </div>

            <!-- Email -->
            <div>
                <label for="email" class="block text-sm font-medium text-[#333] mb-1">Email<span class="text-red-600">*</span></label>
                <input type="email" name="email" id="email" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Email yang digunain untuk masuk ke admin" required></input>
            </div>

            <!-- Role Selection -->
            <div>
                <label for="role" class="block text-sm font-medium text-[#333] mb-1">Role<span class="text-red-600">*</span></label>
                <select name="role" id="role" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
                    <option value="" disabled selected>-- Pilih Role --</option>
                    <option value="super_admin">Super Admin</option>
                    <option value="admin">Admin</option>
                    <option value="marketing">Marketing</option>
                    <option value="gsa">GSA</option>
                    <option value="gudang">Gudang</option>
                    <option value="finance">Finance</option>
                </select>
            </div>

            <!-- Password -->
            <div>
                <label for="password" class="block text-sm font-medium text-[#333] mb-1">Password<span class="text-red-600">*</span></label>
                <div class="flex space-x-2">
                    <div class="relative flex-grow">
                        <input type="text" name="password" id="password" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Password" required></input>
                        <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" id="eye-icon">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" id="eye-slash-icon">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                            </svg>
                        </button>
                    </div>
                    <button type="button" id="generate-password" class="px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-[#7A4397] bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#7A4397]">
                        Generate
                    </button>
                </div>
                <div class="mt-1">
                    <div class="flex items-center mt-1">
                        <div id="password-strength" class="w-full h-1 bg-gray-200 rounded-full overflow-hidden">
                            <div id="password-strength-bar" class="h-full bg-red-500 transition-all duration-300 w-0"></div>
                        </div>
                        <span id="password-strength-text" class="ml-2 text-xs text-gray-500">Lemah</span>
                    </div>
                </div>
            </div>

            <!-- Status -->
            <div class="flex items-center">
                <input type="checkbox" name="active" id="active" value="1" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                <label for="active" class="ml-2 block text-sm text-[#333]">Akun Aktif</label>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end space-x-3 pt-4">
                <a href="<?= base_url('admin/settings/users') ?>" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-[#333] bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    Batal
                </a>
                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#7A4397] hover:bg-white hover:border-[#7A4397] hover:text-[#7A4397] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#7A4397]">
                    Simpan User
                </button>
            </div>
            <?= form_close() ?>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle password visibility
        const passwordInput = document.getElementById('password');
        const togglePassword = document.getElementById('toggle-password');
        const eyeIcon = document.getElementById('eye-icon');
        const eyeSlashIcon = document.getElementById('eye-slash-icon');

        togglePassword.addEventListener('click', function() {
            if (passwordInput.type === 'text') {
                passwordInput.type = 'password';
                eyeIcon.classList.remove('hidden');
                eyeSlashIcon.classList.add('hidden');
            } else {
                passwordInput.type = 'text';
                eyeIcon.classList.add('hidden');
                eyeSlashIcon.classList.remove('hidden');
            }
        });

        // Generate password functionality
        const generatePasswordBtn = document.getElementById('generate-password');

        generatePasswordBtn.addEventListener('click', function() {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+';
            let password = '';

            // Generate a random password with at least 12 characters
            const length = Math.floor(Math.random() * 4) + 12; // Between 12-16 characters

            // Ensure at least one uppercase, one lowercase, one number, and one special character
            password += chars.charAt(Math.floor(Math.random() * 26)); // Uppercase
            password += chars.charAt(Math.floor(Math.random() * 26) + 26); // Lowercase
            password += chars.charAt(Math.floor(Math.random() * 10) + 52); // Number
            password += chars.charAt(Math.floor(Math.random() * 16) + 62); // Special

            // Fill the rest with random characters
            for (let i = 4; i < length; i++) {
                password += chars.charAt(Math.floor(Math.random() * chars.length));
            }

            // Shuffle the password
            password = password.split('').sort(() => 0.5 - Math.random()).join('');

            passwordInput.type = 'text'; // Show the password
            passwordInput.value = password;
            eyeIcon.classList.add('hidden');
            eyeSlashIcon.classList.remove('hidden');

            // Trigger strength check
            checkPasswordStrength(password);
        });

        // Password strength checker
        const passwordStrengthBar = document.getElementById('password-strength-bar');
        const passwordStrengthText = document.getElementById('password-strength-text');

        passwordInput.addEventListener('input', function() {
            checkPasswordStrength(this.value);
        });

        function checkPasswordStrength(password) {
            let strength = 0;

            // Check length
            if (password.length >= 8) strength += 1;
            if (password.length >= 12) strength += 1;

            // Check character types
            if (/[A-Z]/.test(password)) strength += 1;
            if (/[a-z]/.test(password)) strength += 1;
            if (/[0-9]/.test(password)) strength += 1;
            if (/[^A-Za-z0-9]/.test(password)) strength += 1;

            // Update UI based on strength
            let strengthPercentage = (strength / 6) * 100;
            passwordStrengthBar.style.width = strengthPercentage + '%';

            if (strength <= 2) {
                passwordStrengthBar.className = 'h-full bg-red-500 transition-all duration-300';
                passwordStrengthText.textContent = 'Password apaan nih';
                passwordStrengthText.className = 'ml-2 text-xs text-red-500';
            } else if (strength <= 4) {
                passwordStrengthBar.className = 'h-full bg-yellow-500 transition-all duration-300';
                passwordStrengthText.textContent = 'Okeelah';
                passwordStrengthText.className = 'ml-2 text-xs text-yellow-600';
            } else {
                passwordStrengthBar.className = 'h-full bg-green-500 transition-all duration-300';
                passwordStrengthText.textContent = 'Susah di hack';
                passwordStrengthText.className = 'ml-2 text-xs text-green-500';
            }
        }
    });
</script>