<?php require_once __DIR__ . '/../layout.php'; ?>

<div style="margin-bottom: 2rem;">
    <a href="/superadmin/users" style="color: var(--superadmin-color); text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500; font-size: 0.9rem; margin-bottom: 1rem;">
        <i class="ph ph-arrow-left" style="font-weight: bold;"></i> Back to Users Directory
    </a>
    <h3 style="margin: 0; color: white;"><?php echo htmlspecialchars($title); ?></h3>
</div>

<div class="card" style="max-width: 650px;">
    <form action="<?php echo $actionUrl; ?>" method="POST">
        <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="input-group">
                <label for="tenant_id">Assign Tenant</label>
                <select id="tenant_id" name="tenant_id" required style="width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none;">
                    <?php foreach ($tenants as $t): ?>
                        <option value="<?php echo $t['id']; ?>" <?php echo (isset($record) && $record['tenant_id'] == $t['id']) ? 'selected' : ''; ?> style="background: var(--bg-dark); color: white;">
                            <?php echo htmlspecialchars($t['name']); ?> (ID: <?php echo $t['id']; ?>)
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="input-group">
                <label for="branch_id">Assign Branch (Optional)</label>
                <select id="branch_id" name="branch_id" style="width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none;">
                    <option value="" style="background: var(--bg-dark); color: white;">All Branches / Global Admin Access</option>
                    <?php foreach ($branches as $b): ?>
                        <option value="<?php echo $b['id']; ?>" data-tenant="<?php echo $b['tenant_id']; ?>" <?php echo (isset($record) && $record['branch_id'] == $b['id']) ? 'selected' : ''; ?> style="background: var(--bg-dark); color: white;">
                            <?php echo htmlspecialchars($b['name']); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>

        <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="input-group">
                <label for="name">Full Name</label>
                <input type="text" id="name" name="name" value="<?php echo htmlspecialchars($record['name'] ?? ''); ?>" placeholder="e.g. John Doe" required style="width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none;">
            </div>

            <div class="input-group">
                <label for="email">Email Address or Username</label>
                <input type="text" id="email" name="email" value="<?php echo htmlspecialchars($record['email'] ?? ''); ?>" placeholder="e.g. john@nexcore.com or john_admin" required style="width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none;">
            </div>
        </div>

        <div class="input-group">
            <label for="password">Password <?php echo isset($record) ? '(Leave empty to keep current)' : ''; ?></label>
            <input type="password" id="password" name="password" placeholder="••••••••" <?php echo isset($record) ? '' : 'required'; ?> style="width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none;">
        </div>

        <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="input-group">
                <label for="role">User Role</label>
                <select id="role" name="role" required style="width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none;">
                    <?php 
                    $roles = ['cashier' => 'Cashier', 'pharmacist' => 'Pharmacist', 'admin' => 'Administrator', 'superadmin' => 'Superadmin'];
                    foreach($roles as $val => $label): ?>
                        <option value="<?php echo $val; ?>" <?php echo (isset($record) && $record['role'] === $val) ? 'selected' : ''; ?> style="background: var(--bg-dark); color: white;"><?php echo $label; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="input-group">
                <label for="status">Account Status</label>
                <select id="status" name="status" required style="width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none;">
                    <option value="active" <?php echo (isset($record) && $record['status'] === 'active') ? 'selected' : ''; ?> style="background: var(--bg-dark); color: white;">Active</option>
                    <option value="inactive" <?php echo (isset($record) && $record['status'] === 'inactive') ? 'selected' : ''; ?> style="background: var(--bg-dark); color: white;">Inactive</option>
                </select>
            </div>
        </div>

        <div style="margin-top: 2rem; display: flex; gap: 1rem;">
            <button type="submit" class="btn-gold">Save User Account</button>
            <a href="/superadmin/users" class="btn-outline-gold" style="display: inline-flex; align-items: center; justify-content: center;">Cancel</a>
        </div>
    </form>
</div>

</div> <!-- main-content -->
</div> <!-- dashboard-layout -->

<script>
const tenantSelect = document.getElementById('tenant_id');
const branchSelect = document.getElementById('branch_id');
const branchOptions = Array.from(branchSelect.options);

function filterBranches() {
    const selectedTenant = tenantSelect.value;
    branchSelect.innerHTML = '';
    
    // Append the "All Branches" empty option
    branchSelect.appendChild(branchOptions[0]);
    
    branchOptions.forEach(opt => {
        if (opt.value !== "" && opt.getAttribute('data-tenant') == selectedTenant) {
            branchSelect.appendChild(opt);
        }
    });
}

tenantSelect.addEventListener('change', filterBranches);

// Initial filter alignment
if (tenantSelect.value) {
    const currentBranchId = "<?php echo $record['branch_id'] ?? ''; ?>";
    filterBranches();
    if (currentBranchId) {
        branchSelect.value = currentBranchId;
    }
}
</script>
</body>
</html>
