{% extends 'base.html' %}
{% load static %}

{% block title %}My Membership - Graduate Women Zambia{% endblock %}

{% block content %}
<div class="container my-5">
    <!-- {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %} -->

    <div class="row">
        <!-- Profile Picture and Basic Info -->
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    {% if membership.profile_picture %}
                        <img src="{{ membership.profile_picture.url }}" alt="Profile Picture" class="rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
                    {% else %}
                        <div class="rounded-circle bg-light d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 150px; height: 150px;">
                            <i class="fas fa-user fa-4x text-muted"></i>
                        </div>
                    {% endif %}
                    <h4>{{ membership.first_name }} {{ membership.last_name }}</h4>
                    <p class="text-muted mb-1">{{ membership.occupation }}</p>

                    {% if membership.is_active and membership.membership_number %}
                        <div class="alert alert-success mb-2">
                            <strong>Membership #:</strong> {{ membership.membership_number }}
                            <div class="small mt-1">Valid until: {{ membership.membership_valid_until|date:"d F Y" }}</div>
                        </div>
                        <p class="text-muted mb-1">{{ membership.get_membership_type_display }}</p>
                    {% elif membership.membership_status == 'expired' or not membership.is_active %}
                        <div class="alert alert-warning mb-2">
                            <strong>Membership Expired</strong>
                            <div class="small mt-2">Your membership has expired. Please renew it to continue enjoying member benefits.</div>
                        </div>
                        <a href="{% url 'membership:payment_instructions' %}" class="btn btn-primary w-100">
                            <i class="fas fa-sync-alt me-2"></i>Renew Membership
                        </a>
                    {% endif %}
                    <p class="text-muted">{{ membership.employer }}</p>
                </div>
            </div>

            <!-- Documents Section -->
            <div class="card shadow-sm mt-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">📄 Documents</h5>
                    
                    <div class="d-grid gap-2">
                        {% if membership.nrc_file %}
                            <a href="{{ membership.nrc_file.url }}" class="btn btn-outline-primary" target="_blank">
                                <i class="fas fa-id-card me-2"></i>NRC/Passport
                            </a>
                        {% endif %}

                        {% if membership.cv %}
                            <a href="{{ membership.cv.url }}" class="btn btn-outline-primary" target="_blank">
                                <i class="fas fa-file-pdf me-2"></i>Curriculum Vitae
                            </a>
                        {% endif %}

                        {% if membership.payment_proof %}
                            <a href="{{ membership.payment_proof.url }}" class="btn btn-outline-primary" target="_blank">
                                <i class="fas fa-receipt me-2"></i>Payment Proof
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-md-8">
            <!-- Personal Information -->
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-4">👤 Personal Information</h5>
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Email:</p>
                            <p class="mb-0">{{ membership.email }}</p>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Phone Number:</p>
                            <p class="mb-0">{{ membership.phone_number }}</p>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Date of Birth:</p>
                            <p class="mb-0">{{ membership.date_of_birth|date:"F j, Y" }}</p>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Nationality:</p>
                            <p class="mb-0">{{ membership.nationality }}</p>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">NRC/Passport Number:</p>
                            <p class="mb-0">{{ membership.nrc_number }}</p>
                        </div>
                        <div class="col-sm-6">
                            <p class="text-muted mb-1">Residential Address:</p>
                            <p class="mb-0">{{ membership.residential_address }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Professional Information -->
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-4">💼 Professional Information</h5>
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Field of Study:</p>
                            <p class="mb-0">{{ membership.field_of_study }}</p>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Institution:</p>
                            <p class="mb-0">{{ membership.institution }}</p>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Highest Qualification:</p>
                            <p class="mb-0">{{ membership.get_highest_qualification_display }}</p>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Graduation Year:</p>
                            <p class="mb-0">{{ membership.graduation_year }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Membership Details -->
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-4">💳 Membership Details</h5>
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Membership Type:</p>
                            <p class="mb-0">{{ membership.get_membership_type_display }}</p>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Status:</p>
                            <span class="badge {% if membership.membership_status == 'approved' %}bg-success{% elif membership.membership_status == 'rejected' %}bg-danger{% else %}bg-warning{% endif %}">
                                {{ membership.status_display }}
                            </span>
                        </div>
                        
                        {% if not membership.payment_verified %}
                            <div class="col-sm-6 mb-3">
                                <p class="text-muted mb-1">Membership Fee:</p>
                                <h4 class="text-primary mb-0">K{{ membership.membership_fee }}</h4>
                            </div>
                        {% endif %}
                        
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted mb-1">Valid Until:</p>
                            <p class="mb-0">{% if membership.membership_valid_until %}{{ membership.membership_valid_until|date:"F j, Y" }}{% else %}Not yet active{% endif %}</p>
                        </div>

                        {% if membership.membership_status == 'rejected' %}
                            <div class="col-12 mb-3">
                                <div class="alert alert-danger">
                                    <h6 class="alert-heading">Application Rejected</h6>
                                    <p class="mb-0">{{ membership.rejection_reason }}</p>
                                </div>
                                <div class="text-center">
                                    <a href="{% url 'membership:application' %}" class="btn btn-primary">Update Application</a>
                                </div>
                            </div>
                        {% endif %}

                        {% if membership.membership_status == 'pending' and not membership.payment_proof %}
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <h6 class="alert-heading">Payment Required</h6>
                                    <p>Please complete your membership payment to activate your account.</p>
                                    <hr>
                                    <div class="text-center">
                                        <a href="{% url 'membership:payment_instructions' %}" class="btn btn-primary">View Payment Instructions</a>
                                    </div>
                                </div>
                            </div>
                        {% elif membership.membership_status == 'pending' and membership.payment_proof %}
                            <div class="col-12">
                                <div class="alert alert-warning">
                                    <h6 class="alert-heading">Payment Under Review</h6>
                                    <p class="mb-0">Your payment proof has been submitted and is pending verification.</p>
                                </div>
                            </div>
                        {% elif membership.membership_status == 'approved' %}
                            <div class="col-12">
                                <div class="alert alert-success">
                                    <h6 class="alert-heading">Payment Cleared</h6>
                                    <p class="mb-0">Your membership payment has been verified and your account is now active.</p>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}