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

{% block title %}{{ title }} - Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
    /* Paired country-code + number layout */
    .phone-row {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .phone-row .phone-code-select {
        width: 190px;
        flex-shrink: 0;
    }
    .phone-row input[type="text"] {
        flex: 1;
    }

    /* Warning banner */
    .name-warning {
        background: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 6px;
        padding: 10px 14px;
        margin-bottom: 16px;
        font-size: 0.9rem;
    }
    .name-warning strong { color: #856404; }

    /* Section headings inside the card */
    .form-section-heading {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6c757d;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 6px;
        margin: 24px 0 16px;
    }
    .form-section-heading:first-of-type { margin-top: 0; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">{{ title }}</h1>
        <a href="{% url 'staff:staff_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Back to List
        </a>
    </div>

    <div class="row">
        <div class="col-lg-9 mx-auto">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}

                {% if user_form %}
                <!-- ══ USER ACCOUNT ══════════════════════════════════════ -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-user-circle me-2"></i>User Account (Login Details)
                        </h6>
                    </div>
                    <div class="card-body">

                        <div class="name-warning">
                            <strong>⚠️ Important — Name Format:</strong><br>
                            Enter the <strong>given name only</strong> in First Name (e.g. <em>Annie</em>, not <em>Mme Annie</em>).<br>
                            Set the honorific (Mr / Mme / Dr …) in the <strong>Title</strong> field in the Staff Profile below.
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">{{ user_form.first_name.label }}</label>
                                {{ user_form.first_name }}
                                {% if user_form.first_name.help_text %}
                                <div class="form-text text-warning">{{ user_form.first_name.help_text }}</div>
                                {% endif %}
                                {{ user_form.first_name.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ user_form.last_name.label }}</label>
                                {{ user_form.last_name }}
                                {{ user_form.last_name.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ user_form.username.label }}</label>
                                {{ user_form.username }}
                                <div class="form-text">{{ user_form.username.help_text }}</div>
                                {{ user_form.username.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ user_form.email.label }}</label>
                                {{ user_form.email }}
                                {{ user_form.email.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ user_form.password.label }}</label>
                                {{ user_form.password }}
                                <div class="form-text">{{ user_form.password.help_text }}</div>
                                {{ user_form.password.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ user_form.confirm_password.label }}</label>
                                {{ user_form.confirm_password }}
                                {{ user_form.confirm_password.errors }}
                            </div>
                        </div>

                    </div>
                </div>
                {% endif %}

                <!-- ══ STAFF PROFILE ═════════════════════════════════════ -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-id-card me-2"></i>Staff Profile
                        </h6>
                    </div>
                    <div class="card-body">

                        <!-- Personal -->
                        <p class="form-section-heading">Personal Information</p>
                        <div class="row g-3">
                            <div class="col-md-2">
                                <label class="form-label">{{ form.title.label }}</label>
                                {{ form.title }}
                                {{ form.title.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.gender.label }}</label>
                                {{ form.gender }}
                                {{ form.gender.errors }}
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">{{ form.date_of_birth.label }}</label>
                                {{ form.date_of_birth }}
                                {{ form.date_of_birth.errors }}
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">{{ form.marital_status.label }}</label>
                                {{ form.marital_status }}
                                {{ form.marital_status.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ form.nationality.label }}</label>
                                {{ form.nationality }}
                                {{ form.nationality.errors }}
                            </div>
                        </div>

                        <!-- Contact -->
                        <p class="form-section-heading">Contact Information</p>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Primary Phone</label>
                                <div class="phone-row">
                                    {{ form.phone_country_code }}
                                    {{ form.phone_number }}
                                </div>
                                {{ form.phone_number.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Alternate Phone</label>
                                <div class="phone-row">
                                    {{ form.alt_phone_country_code }}
                                    {{ form.alternate_phone }}
                                </div>
                                {{ form.alternate_phone.errors }}
                            </div>
                            <!--<div class="col-md-6">-->
                            <!--    <label class="form-label">{{ form.email.label }}</label>-->
                            <!--    {{ form.email }}-->
                            <!--    {{ form.email.errors }}-->
                            <!--</div>-->
                            <div class="col-md-6">
                                <label class="form-label">{{ form.city.label }}</label>
                                {{ form.city }}
                                {{ form.city.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ form.quarter.label }}</label>
                                {{ form.quarter }}
                                {{ form.quarter.errors }}
                            </div>
                            <div class="col-12">
                                <label class="form-label">{{ form.address.label }}</label>
                                {{ form.address }}
                                {{ form.address.errors }}
                            </div>
                        </div>

                        <!-- Emergency contact -->
                        <p class="form-section-heading">Emergency Contact</p>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">{{ form.emergency_contact_name.label }}</label>
                                {{ form.emergency_contact_name }}
                                {{ form.emergency_contact_name.errors }}
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Emergency Phone</label>
                                <div class="phone-row">
                                    {{ form.emergency_phone_country_code }}
                                    {{ form.emergency_contact_phone }}
                                </div>
                                {{ form.emergency_contact_phone.errors }}
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">{{ form.emergency_contact_relationship.label }}</label>
                                {{ form.emergency_contact_relationship }}
                                {{ form.emergency_contact_relationship.errors }}
                            </div>
                        </div>

                        <!-- Employment -->
                        <p class="form-section-heading">Employment Details</p>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">{{ form.role.label }}</label>
                                {{ form.role }}
                                {{ form.role.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.department.label }}</label>
                                {{ form.department }}
                                {{ form.department.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.employment_status.label }}</label>
                                {{ form.employment_status }}
                                {{ form.employment_status.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.hire_date.label }}</label>
                                {{ form.hire_date }}
                                {{ form.hire_date.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.contract_end_date.label }}</label>
                                {{ form.contract_end_date }}
                                {{ form.contract_end_date.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.years_of_experience.label }}</label>
                                {{ form.years_of_experience }}
                                {{ form.years_of_experience.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ form.specialization.label }}</label>
                                {{ form.specialization }}
                                {{ form.specialization.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ form.subjects_taught.label }}</label>
                                {{ form.subjects_taught }}
                                {{ form.subjects_taught.errors }}
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mt-3">
                                    {{ form.is_class_teacher }}
                                    <label class="form-check-label" for="{{ form.is_class_teacher.id_for_label }}">
                                        {{ form.is_class_teacher.label }}
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ form.homeroom_class.label }}</label>
                                {{ form.homeroom_class }}
                                {{ form.homeroom_class.errors }}
                            </div>
                            <div class="col-12">
                                <label class="form-label">{{ form.qualifications.label }}</label>
                                {{ form.qualifications }}
                                {{ form.qualifications.errors }}
                            </div>
                        </div>

                        <!-- Bank (non-sensitive) -->
                        <p class="form-section-heading">Bank Information</p>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">{{ form.bank_name.label }}</label>
                                {{ form.bank_name }}
                                {{ form.bank_name.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ form.bank_branch.label }}</label>
                                {{ form.bank_branch }}
                                {{ form.bank_branch.errors }}
                            </div>
                        </div>

                        <!-- Documents -->
                        <p class="form-section-heading">Documents &amp; Photo</p>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">{{ form.photo.label }}</label>
                                {{ form.photo }}
                                {{ form.photo.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.cv_file.label }}</label>
                                {{ form.cv_file }}
                                {{ form.cv_file.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.contract_file.label }}</label>
                                {{ form.contract_file }}
                                {{ form.contract_file.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.id_document.label }}</label>
                                {{ form.id_document }}
                                {{ form.id_document.errors }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ form.diplomas.label }}</label>
                                {{ form.diplomas }}
                                {{ form.diplomas.errors }}
                            </div>
                        </div>

                        <!-- Other -->
                        <p class="form-section-heading">Other</p>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">{{ form.notes.label }}</label>
                                {{ form.notes }}
                                {{ form.notes.errors }}
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    {{ form.is_active }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        {{ form.is_active.label }}
                                    </label>
                                </div>
                            </div>
                        </div>

                    </div><!-- /card-body -->
                </div><!-- /card -->

                <div class="mb-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Staff Member
                    </button>
                    <a href="{% url 'staff:staff_list' %}" class="btn btn-secondary ms-2">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                </div>

            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Auto-suggest username from first + last name
(function () {
    const first = document.getElementById('id_first_name');
    const last  = document.getElementById('id_last_name');
    const uname = document.getElementById('id_username');
    if (!first || !last || !uname) return;

    function suggest() {
        // Only fill if user hasn't manually typed a username
        if (uname.dataset.manual) return;
        const f = first.value.trim().toLowerCase().replace(/\s+/g, '');
        const l = last.value.trim().toLowerCase().replace(/[\s]+/g, '_');
        if (f && l) uname.value = f + '.' + l;
    }

    uname.addEventListener('input', () => { uname.dataset.manual = '1'; });
    first.addEventListener('input', suggest);
    last.addEventListener('input', suggest);
})();
</script>
{% endblock %}