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

<div class="max-w-4xl 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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
                Add New User
            </h1>
            <a href="<?php echo URLROOT; ?>/admin/users" class="text-xs text-primary hover:underline font-bold">Back to Matrix</a>
        </div>
        
        <div class="p-6 md:p-8">
            <form action="<?php echo URLROOT; ?>/admin/addUser" method="POST" class="space-y-8" onsubmit="confirmAction(event, this, 'Add User', 'Are you sure you want to create this new user?');">
                
                <!-- Core Account Details -->
                <div>
                    <h3 class="text-sm font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700/50 pb-2 mb-4">Core Account Details</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Name</label>
                            <input type="text" name="name" value="<?php echo htmlspecialchars($data['name']); ?>" 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">
                            <span class="text-xs text-red-500 mt-1 block"><?php echo $data['name_err']; ?></span>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Email</label>
                            <input type="email" name="email" value="<?php echo htmlspecialchars($data['email']); ?>" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['email_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">
                            <span class="text-xs text-red-500 mt-1 block"><?php echo $data['email_err']; ?></span>
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Initial Password</label>
                            <input type="password" name="password" value="<?php echo htmlspecialchars($data['password']); ?>" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['password_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">
                            <span class="text-xs text-red-500 mt-1 block"><?php echo $data['password_err']; ?></span>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">System Role</label>
                            <select name="role" id="system-role-select" class="w-full px-4 py-2.5 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 transition-colors">
                                <option value="client" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white" <?php echo ($data['role'] == 'client') ? 'selected' : ''; ?>>Client</option>
                                <option value="partner" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white" <?php echo ($data['role'] == 'partner') ? 'selected' : ''; ?>>Agency / Partner</option>
                                <option value="staff" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white" <?php echo ($data['role'] == 'staff') ? 'selected' : ''; ?>>Staff Member</option>
                                <option value="admin" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white" <?php echo ($data['role'] == 'admin') ? 'selected' : ''; ?>>Administrator</option>
                            </select>
                        </div>
                        
                        <!-- Dynamic Company Name Div -->
                        <div id="company-name-container" class="md:col-span-2 <?php echo ($data['role'] == 'client') ? '' : 'hidden'; ?>">
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Company Name (Optional)</label>
                            <input type="text" name="company_name" value="<?php echo htmlspecialchars($data['company_name'] ?? ''); ?>" placeholder="Business Name" class="w-full px-4 py-2.5 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 transition-colors">
                        </div>

                        <!-- Dynamic Custom Role Div -->
                        <div id="staff-role-container" class="md:col-span-2 <?php echo ($data['role'] == 'staff') ? '' : 'hidden'; ?>">
                            <label class="block text-[10px] font-bold text-primary uppercase tracking-wider mb-2">Assign Custom Staff Designation (Optional)</label>
                            <select name="staff_role_id" class="w-full px-4 py-2.5 rounded-lg border border-primary/30 bg-primary/5 dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                                <option value="" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">-- No Designation Assigned --</option>
                                <?php foreach($data['roles'] as $r): ?>
                                    <option value="<?php echo $r->id; ?>" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white" <?php echo ($data['staff_role_id'] == $r->id) ? 'selected' : ''; ?>><?php echo htmlspecialchars($r->role_name); ?></option>
                                <?php endforeach; ?>
                            </select>
                            <p class="text-[10px] text-gray-500 mt-1">This designation applies specific internal titles to the staff member's profile.</p>
                        </div>

                        <!-- Dynamic Partner Div -->
                        <div id="partner-container" class="md:col-span-2 <?php echo ($data['role'] == 'client' || $data['role'] == 'partner') ? '' : 'hidden'; ?>">
                            <label id="partner-label" class="block text-[10px] font-bold text-emerald-600 dark:text-emerald-500 uppercase tracking-wider mb-2">Link to Partner Agency</label>
                            <select name="partner_id" class="w-full px-4 py-2.5 rounded-lg border border-emerald-500/30 bg-emerald-50 dark:bg-emerald-900/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-emerald-500 outline-none transition-colors">
                                <option value="" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">-- My Direct Client (No Agency) --</option>
                                <?php foreach($data['partners'] as $p): ?>
                                    <option value="<?php echo $p->id; ?>" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white" <?php echo ($data['partner_id'] == $p->id) ? 'selected' : ''; ?>><?php echo htmlspecialchars($p->name); ?></option>
                                <?php endforeach; ?>
                            </select>
                            <p id="partner-helper" class="text-[10px] text-gray-500 mt-1">Select an existing agency to link this user to.</p>
                        </div>

                    </div>
                </div>

                <!-- Contact & Address Information -->
                <div>
                    <h3 class="text-sm font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700/50 pb-2 mb-4">Contact & Address Information</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="md:col-span-2">
                            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Contact Number</label>
                            <input type="text" name="contact_number" value="<?php echo htmlspecialchars($data['contact_number']); ?>" placeholder="+27 82 123 4567" class="w-full px-4 py-2.5 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 transition-colors">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Street Address</label>
                            <input type="text" name="address_street" value="<?php echo htmlspecialchars($data['address_street']); ?>" class="w-full px-4 py-2.5 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 transition-colors">
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Suburb</label>
                            <input type="text" name="address_suburb" value="<?php echo htmlspecialchars($data['address_suburb']); ?>" class="w-full px-4 py-2.5 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 transition-colors">
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">City</label>
                            <input type="text" name="address_city" value="<?php echo htmlspecialchars($data['address_city']); ?>" class="w-full px-4 py-2.5 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 transition-colors">
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">State / Province</label>
                            <input type="text" name="address_state" value="<?php echo htmlspecialchars($data['address_state']); ?>" class="w-full px-4 py-2.5 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 transition-colors">
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Postal / Zip Code</label>
                            <input type="text" name="address_zip" value="<?php echo htmlspecialchars($data['address_zip']); ?>" class="w-full px-4 py-2.5 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 transition-colors">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Country</label>
                            <input type="text" name="address_country" value="<?php echo htmlspecialchars($data['address_country']); ?>" class="w-full px-4 py-2.5 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 transition-colors">
                        </div>
                    </div>
                </div>

                <div class="flex items-center p-4 border border-gray-200 dark:border-gray-700/50 rounded-lg bg-gray-50 dark:bg-gray-900/30">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" class="sr-only peer" <?php echo ($data['is_active'] == 1) ? 'checked' : ''; ?>>
                        <div class="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                        <span class="ml-3 text-sm font-bold text-gray-700 dark:text-gray-300">Account Active Status</span>
                    </label>
                </div>

                <div class="pt-2">
                    <button type="submit" class="w-full md:w-auto bg-primary hover:opacity-90 text-white font-bold py-3 px-10 rounded-lg shadow-sm transition-all focus:ring-4 focus:ring-primary/50">
                        Create User
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    document.getElementById('system-role-select').addEventListener('change', function() {
        const staffRoleDiv = document.getElementById('staff-role-container');
        const partnerDiv = document.getElementById('partner-container');
        const companyDiv = document.getElementById('company-name-container');
        
        const partnerLabel = document.getElementById('partner-label');
        const partnerHelper = document.getElementById('partner-helper');
        
        if (this.value === 'staff') {
            staffRoleDiv.classList.remove('hidden');
            partnerDiv.classList.add('hidden');
            companyDiv.classList.add('hidden');
            document.querySelector('select[name="partner_id"]').value = '';
            document.querySelector('input[name="company_name"]').value = '';
        } else if (this.value === 'client') {
            partnerDiv.classList.remove('hidden');
            companyDiv.classList.remove('hidden');
            staffRoleDiv.classList.add('hidden');
            
            if(partnerLabel) partnerLabel.innerText = 'Link to Partner Agency (Optional)';
            if(partnerHelper) partnerHelper.innerText = 'Select an existing agency if this client is subcontracted.';
            
            document.querySelector('select[name="staff_role_id"]').value = '';
        } else if (this.value === 'partner') {
            partnerDiv.classList.remove('hidden');
            companyDiv.classList.add('hidden');
            staffRoleDiv.classList.add('hidden');
            
            if(partnerLabel) partnerLabel.innerText = 'Select Partner Agency *';
            if(partnerHelper) partnerHelper.innerText = 'You must link this user to their respective agency.';
            
            document.querySelector('select[name="staff_role_id"]').value = '';
            document.querySelector('input[name="company_name"]').value = '';
        } else {
            staffRoleDiv.classList.add('hidden');
            partnerDiv.classList.add('hidden');
            companyDiv.classList.add('hidden');
            document.querySelector('select[name="staff_role_id"]').value = '';
            document.querySelector('select[name="partner_id"]').value = '';
            document.querySelector('input[name="company_name"]').value = '';
        }
    });

    // Fire immediately to ensure pre-selected fields via ?role= GET parameter show correctly
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('system-role-select').dispatchEvent(new Event('change'));
    });
</script>

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