<!-- templates/students/student_form.html -->
{% extends 'base.html' %}
{% load static %}

{% block title %}{{ title|default:"Student Form" }} - Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
    .form-section {
        background: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .form-section h5 {
        color: #4CAF50;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #4CAF50;
    }
    .form-label {
        font-weight: 600;
        color: #333;
    }
    .required-field::after {
        content: " *";
        color: red;
    }
    .help-text {
        font-size: 0.8rem;
        color: #6c757d;
        margin-top: 5px;
    }
    .form-actions {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 20px;
        border-top: 1px solid #dee2e6;
        margin-top: 30px;
        z-index: 100;
    }
    .errorlist {
        color: #dc3545;
        list-style: none;
        padding: 0;
        margin: 5px 0;
        font-size: 0.9rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            {% if student %}
                Edit Student: {{ student.first_name }} {{ student.last_name }}
            {% else %}
                Add New Student
            {% endif %}
        </h1>
        <a href="{% url 'students:student_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Back to Student List
        </a>
    </div>

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        
        <!-- Personal Information Section -->
        <div class="form-section">
            <h5><i class="fas fa-user-circle me-2"></i> Personal Information</h5>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label required-field">First Name</label>
                    <input type="text" name="first_name" class="form-control" 
                           value="{{ form.first_name.value|default:'' }}" required>
                    {% if form.first_name.errors %}
                        <ul class="errorlist">{{ form.first_name.errors }}</ul>
                    {% endif %}
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label required-field">Last Name</label>
                    <input type="text" name="last_name" class="form-control" 
                           value="{{ form.last_name.value|default:'' }}" required>
                    {% if form.last_name.errors %}
                        <ul class="errorlist">{{ form.last_name.errors }}</ul>
                    {% endif %}
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Student ID</label>
                    <input type="text" name="student_id" class="form-control" 
                           value="{{ form.student_id.value|default:'' }}" readonly>
                    <small class="help-text">Auto-generated if left blank</small>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="form-label required-field">Date of Birth</label>
                    <input type="date" name="date_of_birth" class="form-control" 
                           value="{{ form.date_of_birth.value|date:'Y-m-d'|default:'' }}">
                    {% if form.date_of_birth.errors %}
                        <ul class="errorlist">{{ form.date_of_birth.errors }}</ul>
                    {% endif %}
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Place of Birth</label>
                    <input type="text" name="place_of_birth" class="form-control" 
                           value="{{ form.place_of_birth.value|default:'' }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Gender</label>
                    <select name="gender" class="form-select">
                        <option value="">Select Gender</option>
                        <option value="M" {% if form.gender.value == 'M' %}selected{% endif %}>Male</option>
                        <option value="F" {% if form.gender.value == 'F' %}selected{% endif %}>Female</option>
                        <option value="U" {% if form.gender.value == 'U' %}selected{% endif %}>Unknown</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Nationality</label>
                    <input type="text" name="nationality" class="form-control" 
                           value="{{ form.nationality.value|default:'Cameroonian' }}">
                </div>
            </div>
        </div>


<!-- Academic Information Section -->
        <div class="form-section">
            <h5><i class="fas fa-graduation-cap me-2"></i> Academic Information</h5>
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="form-label">Admission Date</label>
                    <input type="date" name="admission_date" class="form-control" 
                           value="{{ form.admission_date.value|date:'Y-m-d'|default:'' }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Admission Class</label>
                    <select name="admission_class" class="form-select">
                        <option value="">Select Class</option>
                        <option value="pre_nursery" {% if form.admission_class.value == 'pre_nursery' %}selected{% endif %}>Pre-Nursery</option>
                        <option value="nursery1" {% if form.admission_class.value == 'nursery1' %}selected{% endif %}>Nursery 1</option>
                        <option value="nursery2" {% if form.admission_class.value == 'nursery2' %}selected{% endif %}>Nursery 2</option>
                        <option value="sil" {% if form.admission_class.value == 'sil' %}selected{% endif %}>SIL</option>
                        <option value="cp" {% if form.admission_class.value == 'cp' %}selected{% endif %}>CP</option>
                        <option value="ce1" {% if form.admission_class.value == 'ce1' %}selected{% endif %}>CE1</option>
                        <option value="ce2" {% if form.admission_class.value == 'ce2' %}selected{% endif %}>CE2</option>
                        <option value="cm1" {% if form.admission_class.value == 'cm1' %}selected{% endif %}>CM1</option>
                        <option value="cm2" {% if form.admission_class.value == 'cm2' %}selected{% endif %}>CM2</option>
                        <option value="class1" {% if form.admission_class.value == 'class1' %}selected{% endif %}>Class 1</option>
                        <option value="class2" {% if form.admission_class.value == 'class2' %}selected{% endif %}>Class 2</option>
                        <option value="class3" {% if form.admission_class.value == 'class3' %}selected{% endif %}>Class 3</option>
                        <option value="class4" {% if form.admission_class.value == 'class4' %}selected{% endif %}>Class 4</option>
                        <option value="class5" {% if form.admission_class.value == 'class5' %}selected{% endif %}>Class 5</option>
                        <option value="class6" {% if form.admission_class.value == 'class6' %}selected{% endif %}>Class 6</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Current Class</label>
                    <select name="current_class" class="form-select">
                        <option value="">Select Class</option>
                        {% for class in classes %}
                        <option value="{{ class.id }}" {% if form.current_class.value|stringformat:"s" == class.id|stringformat:"s" %}selected{% endif %}>
                            {{ class.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        <option value="active" {% if form.status.value == 'active' %}selected{% endif %}>Active</option>
                        <option value="inactive" {% if form.status.value == 'inactive' %}selected{% endif %}>Inactive</option>
                        <option value="graduated" {% if form.status.value == 'graduated' %}selected{% endif %}>Graduated</option>
                        <option value="transferred" {% if form.status.value == 'transferred' %}selected{% endif %}>Transferred</option>
                    </select>
                </div>
            </div>
        </div>


<!-- Contact Information Section -->
        <div class="form-section">
            <h5><i class="fas fa-address-book me-2"></i> Contact Information</h5>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Home Address</label>
                    <textarea name="home_address" class="form-control" rows="2">{{ form.home_address.value|default:'' }}</textarea>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Quarter/Neighborhood</label>
                    <input type="text" name="quarter" class="form-control" 
                           value="{{ form.quarter.value|default:'' }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">City</label>
                    <input type="text" name="city" class="form-control" 
                           value="{{ form.city.value|default:'Douala' }}">
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Phone Number</label>
                    <input type="tel" name="phone_number" class="form-control" 
                           value="{{ form.phone_number.value|default:'' }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Email Address</label>
                    <input type="email" name="email" class="form-control" 
                           value="{{ form.email.value|default:'' }}">
                </div>
            </div>
        </div>


<!-- Emergency Contact Section -->
        <div class="form-section">
            <h5><i class="fas fa-phone-alt me-2"></i> Emergency Contact</h5>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Contact Name</label>
                    <input type="text" name="emergency_contact_name" class="form-control" 
                           value="{{ form.emergency_contact_name.value|default:'' }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Contact Phone</label>
                    <input type="tel" name="emergency_contact_phone" class="form-control" 
                           value="{{ form.emergency_contact_phone.value|default:'' }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Relationship</label>
                    <input type="text" name="emergency_contact_relationship" class="form-control" 
                           value="{{ form.emergency_contact_relationship.value|default:'' }}">
                </div>
            </div>
        </div>


<!-- Medical Information Section -->
        <div class="form-section">
            <h5><i class="fas fa-heartbeat me-2"></i> Medical Information</h5>
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="form-label">Blood Group</label>
                    <select name="blood_group" class="form-select">
                        <option value="">Select Blood Group</option>
                        <option value="A+" {% if form.blood_group.value == 'A+' %}selected{% endif %}>A+</option>
                        <option value="A-" {% if form.blood_group.value == 'A-' %}selected{% endif %}>A-</option>
                        <option value="B+" {% if form.blood_group.value == 'B+' %}selected{% endif %}>B+</option>
                        <option value="B-" {% if form.blood_group.value == 'B-' %}selected{% endif %}>B-</option>
                        <option value="AB+" {% if form.blood_group.value == 'AB+' %}selected{% endif %}>AB+</option>
                        <option value="AB-" {% if form.blood_group.value == 'AB-' %}selected{% endif %}>AB-</option>
                        <option value="O+" {% if form.blood_group.value == 'O+' %}selected{% endif %}>O+</option>
                        <option value="O-" {% if form.blood_group.value == 'O-' %}selected{% endif %}>O-</option>
                        <option value="unknown" {% if form.blood_group.value == 'unknown' %}selected{% endif %}>Unknown</option>
                    </select>
                </div>
                <div class="col-md-9 mb-3">
                    <label class="form-label">Allergies</label>
                    <input type="text" name="allergies" class="form-control" 
                           value="{{ form.allergies.value|default:'' }}">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Chronic Conditions</label>
                    <textarea name="chronic_conditions" class="form-control" rows="2">{{ form.chronic_conditions.value|default:'' }}</textarea>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Current Medications</label>
                    <textarea name="medications" class="form-control" rows="2">{{ form.medications.value|default:'' }}</textarea>
                </div>
            </div>
        </div>


<!-- Photo & Documents Section -->
        <div class="form-section">
            <h5><i class="fas fa-camera me-2"></i> Photo & Documents</h5>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Student Photo</label>
                    {% if student and student.photo %}
                        <div class="mb-2">
                            <img src="{{ student.photo.url }}" alt="{{ student.get_full_name }}" 
                                 style="max-height: 100px; border-radius: 5px;">
                        </div>
                    {% endif %}
                    <input type="file" name="photo" class="form-control" accept="image/*">
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Birth Certificate</label>
                    {% if student and student.birth_certificate %}
                        <div class="mb-2">
                            <a href="{{ student.birth_certificate.url }}" target="_blank" class="btn btn-sm btn-info">
                                <i class="fas fa-file-pdf"></i> View Current
                            </a>
                        </div>
                    {% endif %}
                    <input type="file" name="birth_certificate" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                </div>
            </div>
        </div>


<!-- Additional Notes Section -->
        <div class="form-section">
            <h5><i class="fas fa-sticky-note me-2"></i> Additional Notes</h5>
            <div class="row">
                <div class="col-12 mb-3">
                    <textarea name="notes" class="form-control" rows="3">{{ form.notes.value|default:'' }}</textarea>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="form-actions">
            <div class="d-flex justify-content-center gap-3">
                <button type="submit" class="btn btn-primary btn-lg px-5">
                    <i class="fas fa-save"></i> 
                    {% if student %}Update{% else %}Save{% endif %} Student
                </button>
                <a href="{% url 'students:student_list' %}" class="btn btn-secondary btn-lg px-5">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-format phone numbers (optional)
    document.querySelector('input[name="phone_number"]').addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '');
        if (value.length > 0) {
            if (value.length <= 3) {
                e.target.value = value;
            } else if (value.length <= 6) {
                e.target.value = value.slice(0, 3) + ' ' + value.slice(3);
            } else {
                e.target.value = value.slice(0, 3) + ' ' + value.slice(3, 6) + ' ' + value.slice(6, 9);
            }
        }
    });

    // Preview image before upload
    document.querySelector('input[name="photo"]').addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.querySelector('.photo-preview');
                if (!preview) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.maxHeight = '100px';
                    img.style.borderRadius = '5px';
                    img.classList.add('photo-preview', 'mt-2');
                    document.querySelector('input[name="photo"]').parentNode.appendChild(img);
                } else {
                    preview.src = e.target.result;
                }
            }
            reader.readAsDataURL(e.target.files[0]);
        }
    });
</script>
{% endblock %}