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

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

{% block extra_css %}
<style>
    .form-section {
        background: #fff;
        border-radius: 10px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .section-header {
        color: #2c3e50;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 1rem;
        border-radius: 8px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-left: 5px solid #007bff;
        font-weight: 600;
    }

    .section-icon {
        margin-right: 10px;
        color: #007bff;
    }

    .membership-type {
        display: block;
        padding: 1.5rem;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 1rem;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        background: white;
    }

    .membership-type:hover {
        border-color: #007bff;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
    }

    .membership-type.selected {
        border-color: #007bff;
        background-color: #f8f9ff;
    }

    .membership-type h4 {
        color: #2c3e50;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    .membership-fee {
        color: #007bff;
        font-weight: bold;
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }

    .file-upload {
        text-align: center;
        padding: 2rem;
        border: 2px dashed #e0e0e0;
        border-radius: 8px;
        background: #f8f9fa;
        transition: all 0.3s ease;
    }

    .file-upload:hover {
        border-color: #007bff;
        background: #f8f9ff;
    }

    .form-control {
        border-radius: 6px;
        border: 1px solid #dee2e6;
        padding: 0.75rem 1rem;
        transition: all 0.2s ease;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
    }

    .btn-submit {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        border: none;
        padding: 1rem 2rem;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .btn-submit:hover {
        background: linear-gradient(135deg, #0056b3 0%, #004094 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 86, 179, 0.2);
    }
</style>
{% endblock extra_css %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <h2 class="card-title text-center mb-4">Membership Application</h2>
                    <h5 class="alert-heading text-center"><em>Register to become recognized</em></h5>

                    {% if form.instance.membership_status == 'rejected' %}
                        <div class="alert alert-warning mb-4">
                            <h5 class="alert-heading">Previous Application Rejected</h5>
                            <p>{{ form.instance.rejection_reason }}</p>
                            <hr>
                            <p class="mb-0">Please update your application addressing the issues mentioned above. Your previous information has been pre-filled for convenience.</p>
                        </div>
                    {% endif %}

                    <form method="post" enctype="multipart/form-data" novalidate>
                        {% csrf_token %}

                        <!-- Membership Type Section -->
                        <div class="form-section">
                            <h3 class="section-header">
                                <i class="fas fa-id-card section-icon"></i>Membership Type
                            </h3>
                            <div class="membership-types">
                                {% for radio in form.membership_type %}
                                    <div class="membership-type">
                                        <label class="d-flex p-3 border rounded-3 {% if radio.data.selected %}border-primary{% endif %}">
                                            {{ radio.tag }}
                                            <div class="ms-3">
                                                <strong>{{ radio.choice_label }}</strong>
                                            </div>
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                            {% if form.membership_type.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.membership_type.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Personal Information Section -->
                        <div class="form-section">
                            <h3 class="section-header">
                                <i class="fas fa-user section-icon"></i>Personal Information
                            </h3>
                            <div class="row">
                                <div class="col-md-6">{{ form.first_name|as_crispy_field }}</div>
                                <div class="col-md-6">{{ form.last_name|as_crispy_field }}</div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">{{ form.email|as_crispy_field }}</div>
                                <div class="col-md-6">{{ form.phone_number|as_crispy_field }}</div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">{{ form.date_of_birth|as_crispy_field }}</div>
                                <div class="col-md-6">{{ form.nationality|as_crispy_field }}</div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">{{ form.nrc_number|as_crispy_field }}</div>
                                <div class="col-md-6">{{ form.residential_address|as_crispy_field }}</div>
                                <!-- <div class="col-md-6">{{ form.postal_address|as_crispy_field }}</div> -->
                            </div>
                        </div>

                        <!-- Professional Information Section -->
                        <div class="form-section">
                            <h3 class="section-header">
                                <i class="fas fa-briefcase section-icon"></i>Professional Information
                            </h3>
                            <div class="row">
                                <div class="col-md-6">{{ form.occupation|as_crispy_field }}</div>
                                <div class="col-md-6">{{ form.employer|as_crispy_field }}</div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">{{ form.highest_qualification|as_crispy_field }}</div>
                                <div class="col-md-6">{{ form.field_of_study|as_crispy_field }}</div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">{{ form.institution|as_crispy_field }}</div>
                                <div class="col-md-6">{{ form.graduation_year|as_crispy_field }}</div>
                            </div>
                        </div>

                        <!-- Required Documents Section -->
                        <div class="form-section">
                            <h3 class="section-header">
                                <i class="fas fa-file-alt section-icon"></i>Required Documents
                            </h3>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="file-upload mb-4">
                                        <div class="mb-3" style="font-size: 2rem;">🖼️</div>
                                        {{ form.profile_picture|as_crispy_field }}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="file-upload mb-4">
                                        <div class="mb-3" style="font-size: 2rem;">📄</div>
                                        {{ form.cv|as_crispy_field }}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="file-upload">
                                        <div class="mb-3" style="font-size: 2rem;">📋</div>
                                        {{ form.nrc_file|as_crispy_field }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-submit px-5">
                                {% if form.instance.membership_status == 'rejected' %}
                                    Update Application
                                {% else %}
                                    Submit Application
                                {% endif %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle membership type selection
    const membershipTypes = document.querySelectorAll('.membership-type');
    membershipTypes.forEach(type => {
        type.addEventListener('click', function() {
            membershipTypes.forEach(t => t.classList.remove('selected'));
            this.classList.add('selected');
        });
    });

    // File upload preview (if needed)
    const fileInputs = document.querySelectorAll('input[type="file"]');
    fileInputs.forEach(input => {
        input.addEventListener('change', function() {
            const fileName = this.files[0]?.name;
            if (fileName) {
                const label = this.parentElement.querySelector('label');
                if (label) {
                    label.textContent = fileName;
                }
            }
        });
    });
});
</script>
{% endblock extra_js %}