<?php require APPROOT . '/app/Views/layouts/header.php'; ?>

<div class="max-w-2xl mx-auto mb-10">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex justify-between items-center">
            <h1 class="text-sm font-bold text-gray-900 dark:text-white flex items-center uppercase tracking-wider">
                <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                Create Staff Role
            </h1>
            <a href="<?php echo URLROOT; ?>/admin/roles" class="text-xs text-primary hover:underline font-bold">Back to Roles</a>
        </div>
        
        <div class="p-6 md:p-8">
            <form action="<?php echo URLROOT; ?>/admin/addRole" method="POST" class="space-y-6">
                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Role Name (Designation)</label>
                    <input type="text" name="role_name" value="<?php echo htmlspecialchars($data['role_name']); ?>" placeholder="e.g. Sales Manager" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['name_err'])) ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'; ?> bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors" autofocus>
                    <span class="text-xs text-red-500 mt-1 block"><?php echo $data['name_err']; ?></span>
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Internal Description</label>
                    <textarea name="description" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none resize-y transition-colors"><?php echo htmlspecialchars($data['description']); ?></textarea>
                </div>
                <button type="submit" class="w-full bg-primary hover:opacity-90 text-white font-bold py-3 rounded-lg shadow-sm transition-all focus:ring-4 focus:ring-primary/50">
                    Create Role
                </button>
            </form>
        </div>
    </div>
</div>

<?php require APPROOT . '/app/Views/layouts/footer.php'; ?>