{% extends 'base.html' %}
{% load static %}
{% block title %}BUSA | Register{% endblock %}

{% block content %}

<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">

                <div class="card shadow border-0 rounded-4">
                    <div class="card-body p-5">

                        <h3 class="fw-bold text-success text-center mb-4">
                            <i class="fas fa-user-plus me-2"></i>
                            Create BUSA Account
                        </h3>

                        {% if register_form.errors %}
                        <div class="alert alert-danger">
                            Please correct the errors below.
                        </div>
                        {% endif %}

                        <form method="post" enctype="multipart/form-data" action="{% url 'register' %}">
                            {% csrf_token %}

                            <!-- Personal Info -->
                            <h6 class="fw-bold text-success mt-3">Personal Details</h6>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <input type="text" name="first_name" class="form-control" placeholder="First Name" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="text" name="last_name" class="form-control" placeholder="Last Name" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="email" name="email" class="form-control" placeholder="Email" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="tel" name="phone" class="form-control" placeholder="Phone Number" required>
                                </div>
                            </div>

                            <!-- Residence Details -->
                            <h6 class="fw-bold text-success mt-4">Residence Details</h6>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">County</label>
                                    <select name="county" id="county" class="form-select" required>
                                        <option value="">Select County</option>
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Constituency</label>
                                    <select name="constituency" id="constituency" class="form-select" disabled required>
                                        <option value="">Select Constituency</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Education -->
                            <h6 class="fw-bold text-success mt-4">Education Details</h6>
                            <div class="mb-3">
                                <input type="text" name="institution" class="form-control" placeholder="Institution" required>
                            </div>
                            <div class="mb-3">
                                <input type="text" name="course" class="form-control" placeholder="Course" required>
                            </div>
                            <div class="mb-3">
                                <input type="text" name="registration_number" class="form-control" placeholder="Registration Number" required>
                            </div>

                            <!-- Password -->
                            <h6 class="fw-bold text-success mt-4">Account Security</h6>
                            <p>Create a strong password for your BUSA account</p>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <input type="password" name="password1" class="form-control" placeholder="Password" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="password" name="password2" class="form-control" placeholder="Confirm Password" required>
                                </div>
                            </div>

                            <!-- Uploads -->
                            <h6 class="fw-bold text-success mt-4">Document Upload</h6>
                            <div class="mb-3">
                                <label class="form-label">Student ID / Admission Letter</label>
                                <input type="file" name="student_id" class="form-control" accept="image/pdf" required>
                            </div>
                            
                            <p class="text-danger">Your registration will be reviewed and approved by BUSA admins</p>
                            
                            <button class="btn btn-success w-100 mt-3 shadow">
                                <i class="fas fa-user-check me-2"></i>
                                Create Account
                            </button>

                            <div class="text-center mt-3">
                                Already have an account?
                                <a href="{% url 'login' %}" class="text-success fw-semibold">
                                    Login here
                                </a>
                            </div>

                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<script src="{% static 'locations.js' %}"></script>
{% endblock %}