<?php $title = 'Manage Members - ' . htmlspecialchars($type->name); ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-white font-weight-bold"><i class="fas fa-users mr-2"></i><?= htmlspecialchars($type->name) ?> — Members</h1>
    <a href="<?= $baseUrl ?>/contribution-types" class="glass-btn"><i class="fas fa-arrow-left mr-1"></i>Back</a>
</div>

<div class="row">
    <div class="col-lg-7">
        <div class="glass-card mb-4">
            <h5 class="font-weight-bold mb-3">Assigned Members (<?= count($mapped) ?>)</h5>
            <?php if (!empty($mapped)): ?>
            <div class="glass-table">
                <table class="table">
                    <thead><tr><th>Member</th><th>Email</th><th>Phone</th><th>Assigned</th><th>Action</th></tr></thead>
                    <tbody>
                        <?php foreach ($mapped as $m): ?>
                        <tr>
                            <td><?= htmlspecialchars($m->first_name ? trim($m->first_name . ' ' . $m->last_name) : $m->name) ?></td>
                            <td><?= htmlspecialchars($m->email) ?></td>
                            <td><?= htmlspecialchars($m->mobile_phone ?: '-') ?></td>
                            <td><small style="color: rgba(255,255,255,0.4);"><?= date('M d, Y', strtotime($m->assigned_at)) ?></small></td>
                            <td>
                                <form method="POST" action="<?= $baseUrl ?>/contribution-types/<?= $type->id ?>/unassign-member" style="display:inline;" onsubmit="return confirm('Remove this member from this contribution type?');">
                                    <input type="hidden" name="user_id" value="<?= $m->user_id ?>">
                                    <button type="submit" class="glass-btn btn-sm" style="border-color: rgba(231,74,59,0.3); color: #e74a3b;"><i class="fas fa-user-minus"></i></button>
                                </form>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            <?php else: ?>
            <p style="color: rgba(255,255,255,0.5);">No members assigned yet.</p>
            <?php endif; ?>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="glass-card mb-4">
            <h5 class="font-weight-bold mb-3"><i class="fas fa-plus-circle mr-2"></i>Assign Members</h5>
            <p style="color: rgba(255,255,255,0.5); font-size: 0.9rem;">Assign this contribution type to members individually or in bulk.</p>

            <form method="POST" action="<?= $baseUrl ?>/contribution-types/<?= $type->id ?>/assign-member" class="mb-3">
                <div class="form-group">
                    <label style="color: rgba(255,255,255,0.7);">Individual Member</label>
                    <select name="user_id" class="form-control glass-input" required>
                        <option value="">Select member...</option>
                        <?php foreach ($unmapped as $um): ?>
                        <option value="<?= $um->id ?>"><?= htmlspecialchars($um->first_name ? trim($um->first_name . ' ' . $um->last_name) : $um->name) ?> (<?= htmlspecialchars($um->email) ?>)</option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <button type="submit" class="glass-btn glass-btn-primary btn-sm"><i class="fas fa-user-plus mr-1"></i>Assign Member</button>
            </form>

            <hr style="border-color: rgba(255,255,255,0.1);">

            <form method="POST" action="<?= $baseUrl ?>/contribution-types/<?= $type->id ?>/bulk-assign">
                <div class="form-group">
                    <label style="color: rgba(255,255,255,0.7);">Bulk Assign</label>
                    <div class="custom-control custom-radio mb-2">
                        <input type="radio" class="custom-control-input" id="target_all" name="target" value="all" checked>
                        <label class="custom-control-label" for="target_all" style="color: rgba(255,255,255,0.7);">Assign to all approved members</label>
                    </div>
                    <div class="custom-control custom-radio mb-2">
                        <input type="radio" class="custom-control-input" id="target_selected" name="target" value="selected">
                        <label class="custom-control-label" for="target_selected" style="color: rgba(255,255,255,0.7);">Assign to selected members</label>
                    </div>
                </div>
                <div class="form-group" id="selectedMembersGroup" style="display:none;">
                    <label style="color: rgba(255,255,255,0.7);">Select Members</label>
                    <select name="user_ids[]" class="form-control glass-input" multiple size="8">
                        <?php foreach ($allMembers as $m): ?>
                        <option value="<?= $m->id ?>"><?= htmlspecialchars($m->first_name ? trim($m->first_name . ' ' . $m->last_name) : $m->name) ?> (<?= htmlspecialchars($m->email) ?>)</option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <button type="submit" class="glass-btn glass-btn-primary btn-sm"><i class="fas fa-users-cog mr-1"></i>Assign</button>
            </form>
        </div>
    </div>
</div>

<script>
document.querySelectorAll('input[name="target"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        document.getElementById('selectedMembersGroup').style.display = this.value === 'selected' ? 'block' : 'none';
    });
});
</script>