{% extends "base.html" %}

{% block title %}Member Approvals - National Medlab Cooperative{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Member Approval Gateway</h2>
            <div>
                <span class="badge bg-warning">Pending: {{ users|length }}</span>
                <a href="{{ url_for('manage_registration_fees') }}" class="btn btn-outline-primary btn-sm ms-2">
                    <i class="fas fa-money-bill me-1"></i>Registration Fees
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Pending Member Approvals</h5>
                <small class="text-muted">Members who have verified email but await admin approval</small>
            </div>
            <div class="card-body">
                {% if users %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Registration No.</th>
                                    <th>Full Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>State/LGA</th>
                                    <th>Expected Contribution</th>
                                    <th>Registration Fee</th>
                                    <th>Photo</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for user in users %}
                                <tr>
                                    <td><strong>{{ user.registration_number }}</strong></td>
                                    <td>{{ user.full_name }}</td>
                                    <td>{{ user.email }}</td>
                                    <td>{{ user.phone }}</td>
                                    <td>{{ user.state_of_residence }}/{{ user.lga_of_residence }}</td>
                                    <td>₦{{ "%.2f"|format(user.expected_monthly_contribution or 0) }}</td>
                                    <td>
                                        {% set fee_status = 'pending' %}
                                        {% for fee in user.registration_fees %}
                                            {% if fee.status == 'paid' %}
                                                {% set fee_status = 'paid' %}
                                            {% endif %}
                                        {% endfor %}
                                        <span class="badge bg-{{ 'success' if fee_status == 'paid' else 'warning' }}">
                                            {{ fee_status.title() }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if user.photo_path %}
                                            <img src="{{ url_for('static', filename=user.photo_path) }}" 
                                                 alt="{{ user.full_name }}" 
                                                 class="img-thumbnail" 
                                                 style="width: 50px; height: 50px; object-fit: cover;">
                                        {% else %}
                                            <span class="text-muted">No photo</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button type="button" 
                                                    class="btn btn-sm btn-success" 
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#approveModal{{ user.id }}">
                                                <i class="fas fa-check"></i> Approve
                                            </button>
                                            <button type="button" 
                                                    class="btn btn-sm btn-danger" 
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#rejectModal{{ user.id }}">
                                                <i class="fas fa-times"></i> Reject
                                            </button>
                                            <a href="{{ url_for('view_user_details', user_id=user.id) }}" 
                                               class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i> View
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-user-check fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No pending approvals</h5>
                        <p class="text-muted">All members have been processed.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Approve Modals -->
{% for user in users %}
<div class="modal fade" id="approveModal{{ user.id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Approve Member</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>Member Details:</h6>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Name:</strong> {{ user.full_name }}</p>
                        <p><strong>Reg. No:</strong> {{ user.registration_number }}</p>
                        <p><strong>Email:</strong> {{ user.email }}</p>
                        <p><strong>Phone:</strong> {{ user.phone }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>State:</strong> {{ user.state_of_residence }}</p>
                        <p><strong>LGA:</strong> {{ user.lga_of_residence }}</p>
                        <p><strong>Monthly Contribution:</strong> ₦{{ "%.2f"|format(user.expected_monthly_contribution or 0) }}</p>
                        <p><strong>NIN:</strong> {{ user.nin or 'Not provided' }}</p>
                    </div>
                </div>
                
                <div class="alert alert-info mt-3">
                    <h6>Approval Actions:</h6>
                    <ul class="mb-0">
                        <li>Member will be activated immediately</li>
                        <li>ID card will be generated automatically</li>
                        <li>Full account access will be granted</li>
                        <li>Registration fee status will be checked</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <a href="{{ url_for('approve_member', user_id=user.id) }}" 
                   class="btn btn-success">
                    <i class="fas fa-check me-2"></i>Confirm Approval
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modals -->
<div class="modal fade" id="rejectModal{{ user.id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Member</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('reject_member', user_id=user.id) }}">
                <div class="modal-body">
                    <h6>Rejection Details:</h6>
                    <div class="mb-3">
                        <label class="form-label">Reason for Rejection</label>
                        <textarea class="form-control" name="rejection_reason" rows="4" 
                                  placeholder="Please provide reason for rejection..." required></textarea>
                    </div>
                    
                    <div class="alert alert-warning">
                        <h6>Rejection Consequences:</h6>
                        <ul class="mb-0">
                            <li>Member will not be activated</li>
                            <li>ID card will not be generated</li>
                            <li>Member may re-register with correct information</li>
                            <li>Registration fee will remain pending</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-times me-2"></i>Confirm Rejection
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}