<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/users" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Users
        </a>
        <h1>Invite Team Member</h1>
    </div>
</div>

<div class="card max-w-2xl mx-auto" style="max-width: 600px;">
    <form action="<?= APP_URL ?>/users/create" method="POST">
        <?= Security::csrfField() ?>
        
        <div class="form-group">
            <label class="form-label">Full Name <span class="required">*</span></label>
            <input type="text" name="name" class="form-control" required placeholder="Full Name">
        </div>

        <div class="form-group">
            <label class="form-label">Email Address <span class="required">*</span></label>
            <input type="email" name="email" class="form-control" required placeholder="email@example.com">
        </div>

        <div class="form-group">
            <label class="form-label">Role <span class="required">*</span></label>
            <?php if (!empty($roles)): ?>
                <select name="role_id" class="form-control" required>
                    <?php foreach ($roles as $role): ?>
                        <option value="<?= $role['id'] ?>" <?= $role['name'] === 'Teller' ? 'selected' : '' ?>>
                            <?= e($role['name']) ?><?= $role['is_system'] ? ' (System)' : '' ?>
                        </option>
                    <?php endforeach; ?>
                </select>
                <div class="form-hint">Select a role to define the user's permissions. <a href="<?= APP_URL ?>/roles" target="_blank">Manage Roles</a></div>
            <?php else: ?>
                <select name="role" class="form-control" required>
                    <option value="teller">Teller (POS Access Only)</option>
                    <option value="manager">Manager (Inventory + Sales)</option>
                    <option value="admin">Admin (Full Workspace Management)</option>
                </select>
                <div class="form-hint">Run the roles migration to enable custom role management.</div>
            <?php endif; ?>
        </div>

        <div class="form-group">
            <label class="form-label">Location Assignment Type</label>
            <div class="flex gap-4 mb-3" style="display: flex; gap: 1rem; margin-bottom: 0.75rem;">
                <label class="flex items-center gap-2 cursor-pointer" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="radio" name="assignment_type" value="shop" checked onchange="toggleLocationType('shop')">
                    <span>Shop / Outlet</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="radio" name="assignment_type" value="warehouse" onchange="toggleLocationType('warehouse')">
                    <span>Warehouse</span>
                </label>
            </div>
            
            <div id="shop_selection">
                <select name="location_id" id="shop_select" class="form-control">
                    <option value="">All Locations (Default)</option>
                    <?php foreach ($shopLocations as $loc): ?>
                        <option value="<?= $loc['id'] ?>"><?= e($loc['name']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div id="warehouse_selection" style="display:none;">
                <select id="warehouse_select" class="form-control">
                    <option value="">Select Warehouse...</option>
                    <?php foreach ($warehouseLocations as $loc): ?>
                        <option value="<?= $loc['id'] ?>"><?= e($loc['name']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-hint">Restrict user access to a specific shop or warehouse.</div>
        </div>

        <div class="form-group">
            <label class="form-label">Permanent Password <span class="required">*</span></label>
            <input type="password" name="password" class="form-control" required placeholder="Minimum 8 characters">
            <div class="form-hint">User will log in using this password.</div>
        </div>
        
        <div class="flex justify-end mt-6">
            <button type="submit" class="btn btn-primary">Invite Member</button>
        </div>
    </form>
</div>

<script>
function toggleLocationType(type) {
    const shopDiv = document.getElementById('shop_selection');
    const warehouseDiv = document.getElementById('warehouse_selection');
    const shopSelect = document.getElementById('shop_select');
    const warehouseSelect = document.getElementById('warehouse_select');

    if (type === 'shop') {
        shopDiv.style.display = 'block';
        warehouseDiv.style.display = 'none';
        shopSelect.name = 'location_id';
        warehouseSelect.name = '';
    } else {
        shopDiv.style.display = 'none';
        warehouseDiv.style.display = 'block';
        shopSelect.name = '';
        warehouseSelect.name = 'location_id';
    }
}
</script>
