{% extends "base.html" %}

{% block title %}{% if is_edit %}Edit Employee | PMS{% else %}Add Employee | PMS{% endif %}{% endblock %}

{% block extra_css %}
<style>
:root {
    --primary: #433185;
    --surface: rgba(255,255,255,0.98);
    --text: #1f2937;
    --muted: #6b7280;
    --line: #e5e7eb;
    --danger-soft: #fff1f2;
    --danger-text: #be123c;
}

.shell { max-width: 1240px; margin: 0 auto; }

.head, .panel {
    background: var(--surface);
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
    border: 1px solid var(--line);
}

.head {
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.head h1 { margin: 0; color: var(--primary); font-size: 1.35rem; font-weight: 700; }
.head p { margin: .2rem 0 0; color: var(--muted); font-size: .92rem; }

.back-btn {
    text-decoration: none; color: var(--primary); background: #ede9fe;
    border: 1px solid #ddd6fe; border-radius: .55rem;
    padding: .5rem .85rem; font-weight: 600; font-size: .88rem;
    display: inline-flex; align-items: center; gap: .4rem;
}
.back-btn:hover { background: #ddd6fe; }

/* Grid */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1rem; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.panel { padding: 1.25rem 1.4rem; }

.panel-title {
    margin: 0 0 1rem;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    padding-bottom: .6rem;
    border-bottom: 1px solid #ede9fe;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Fields */
.field { margin-bottom: .9rem; }
.field label {
    display: block; margin-bottom: .32rem;
    color: var(--text); font-size: .84rem; font-weight: 600;
}
.field input, .field select, .field textarea {
    width: 100%; min-height: 2.6rem;
    border: 1px solid #cdd5e0; border-radius: .55rem;
    padding: .55rem .75rem; font-size: .92rem;
    color: var(--text); background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: #7c6fcd;
    box-shadow: 0 0 0 2.5px rgba(67,49,133,.13);
}
.field select[multiple] {
    height: auto; min-height: 9rem; padding: .35rem .5rem;
}
.field textarea { min-height: 5rem; resize: vertical; }

.optional { color: var(--muted); font-size: .76rem; font-weight: 600; margin-left: .25rem; }

/* Error */
.error-msg {
    margin: .3rem 0 0; padding: .35rem .55rem;
    border-radius: .4rem; background: var(--danger-soft);
    color: var(--danger-text); font-size: .8rem;
}
.field-error { border-color: #f87171 !important; }

.alert-error {
    background: var(--danger-soft); border: 1px solid #fecaca;
    border-radius: .65rem; padding: .75rem 1rem;
    color: var(--danger-text); font-size: .88rem; margin-bottom: 1rem;
}

/* Technologies */
.tech-checkboxes {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    max-height: 19rem;
    overflow-y: auto;
    padding: .6rem;
    border: 1px solid #cdd5e0;
    border-radius: .65rem;
    background: #f8fafc;
}
.field .tech-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .55rem;
    padding: .52rem .62rem;
    cursor: pointer;
    margin-bottom: 0;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.field .tech-option input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    min-height: 1.05rem;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border: 1px solid #9ca3af;
    box-shadow: none;
    background: #fff;
    accent-color: var(--primary);
    flex-shrink: 0;
}
.field .tech-option span {
    display: inline-block;
    line-height: 1.2;
    word-break: break-word;
}
.field .tech-option:hover {
    border-color: #c7bdf2;
    background: #fcfbff;
}
.field .tech-option:has(input[type="checkbox"]:checked) {
    border-color: #7c6fcd;
    box-shadow: 0 0 0 2px rgba(67,49,133,.09);
    background: #f7f5ff;
}
.tech-checkboxes::-webkit-scrollbar {
    width: 8px;
}
.tech-checkboxes::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.tech-checkboxes::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Technologies tag display */
.tech-tags {
    display: flex; flex-wrap: wrap; gap: .4rem;
    margin-top: .65rem; min-height: 2rem;
}
.tech-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .65rem; border-radius: 999px;
    background: #f0eeff; border: 1px solid #ddd6fe;
    font-size: .82rem; color: var(--primary); font-weight: 600;
}
.tech-tag button {
    background: none; border: none; color: #a78bfa;
    cursor: pointer; padding: 0; font-size: .9rem; line-height: 1;
}
.tech-tag button:hover { color: #dc2626; }

/* Assignment Cards */
.assignments-wrap { display: flex; flex-direction: column; gap: .8rem; }

.assignment-card {
    border: 1px solid #d4d9e8;
    border-radius: .85rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    position: relative;
}
.assignment-card-head {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: .75rem;
}
.assignment-card-title {
    font-size: .88rem; font-weight: 700; color: var(--primary);
}
.btn-remove {
    border: 1px solid #fecaca; color: #dc2626; background: #fff1f2;
    border-radius: .42rem; padding: .32rem .55rem;
    cursor: pointer; font-size: .82rem; display: inline-flex; align-items: center; gap: .25rem;
}
.btn-remove:hover { background: #fee2e2; }

/* Buttons */
.btn-primary {
    background: var(--primary); color: #fff;
    border: 1px solid var(--primary); border-radius: .55rem;
    padding: .65rem 1.2rem; font-weight: 600; cursor: pointer;
    font-size: .92rem; display: inline-flex; align-items: center; gap: .4rem;
}
.btn-primary:hover { background: #5742aa; }

.btn-secondary {
    background: #fff; border: 1px solid var(--line);
    border-radius: .55rem; padding: .65rem 1.1rem;
    text-decoration: none; color: var(--text);
    font-size: .92rem; display: inline-flex; align-items: center; gap: .4rem;
}
.btn-secondary:hover { background: #f9fafb; }

.btn-soft {
    border: 1px solid #ddd6fe; background: #f5f3ff; color: var(--primary);
    border-radius: .5rem; padding: .48rem .85rem; font-size: .85rem;
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
.btn-soft:hover { background: #ede9fe; }

/* Project link note */
.proj-link-note {
    font-size: .78rem; color: var(--muted); margin-top: .2rem;
}
.disabled-hint {
    position: relative;
    display: block;
}
.disabled-hint.show-tip:hover::after {
    content: attr(data-hint);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 20;
    background: #111827;
    color: #fff;
    font-size: .74rem;
    line-height: 1.25;
    padding: .35rem .5rem;
    border-radius: .35rem;
    white-space: nowrap;
}
.disabled-hint.show-tip:hover::before {
    content: "";
    position: absolute;
    left: 12px;
    top: calc(100% + 1px);
    border: 5px solid transparent;
    border-bottom-color: #111827;
    z-index: 21;
}

@media (max-width: 992px) {
    .span-4, .span-6, .span-8 { grid-column: span 12; }
}
@media (max-width: 640px) {
    .grid { gap: .7rem; }
}
</style>
{% endblock %}

{% block content %}
<section class="shell">

<header class="head">
    <div>
        <h1>{% if is_edit %}Edit Employee{% else %}Add Employee{% endif %}</h1>
        <p>Capture employee details, technologies and project assignments.</p>
    </div>
    <a href="{% url 'teams:employee_list' %}" class="back-btn">
        <i class="bi bi-arrow-left"></i> Back to Team
    </a>
</header>

<div class="alert-error" id="form-general-error" {% if not errors.general %}style="display:none;"{% endif %}>
    <i class="bi bi-exclamation-triangle"></i>
    <span id="form-general-error-text">{{ errors.general }}</span>
</div>

<form method="post" id="employee-form" novalidate>
{% csrf_token %}

<div class="grid">

    <!-- Employee Details -->
    <section class="panel span-6">
        <h2 class="panel-title"><i class="bi bi-person-badge"></i> Employee Details</h2>

        <div class="grid" style="gap:.7rem;">
            <div class="field span-12">
                <label>Full Name</label>
                <input type="text" id="id_full_name" name="full_name" required
                       value="{% if is_edit %}{{ employee.full_name }}{% else %}{{ post.full_name }}{% endif %}"
                       placeholder="John Doe"
                       class="{% if errors.full_name %}field-error{% endif %}">
                <div class="error-msg" id="error-full_name" {% if not errors.full_name %}style="display:none;"{% endif %}>{{ errors.full_name }}</div>
            </div>
        </div>

        <div class="field">
            <label>Employee Code</label>
            <input type="text" id="id_employee_code" name="employee_code" required
                   value="{% if is_edit %}{{ employee.employee_code }}{% else %}{{ post.employee_code }}{% endif %}"
                   placeholder="EMP-001"
                   class="{% if errors.employee_code %}field-error{% endif %}">
            <div class="error-msg" id="error-employee_code" {% if not errors.employee_code %}style="display:none;"{% endif %}>{{ errors.employee_code }}</div>
        </div>

        <div class="field">
            <label>Official Email</label>
            <input type="email" id="id_official_email" name="official_email" required
                   value="{% if is_edit %}{{ employee.official_email }}{% else %}{{ post.official_email }}{% endif %}"
                   placeholder="employee@example.com"
                   class="{% if errors.official_email %}field-error{% endif %}">
            <div class="error-msg" id="error-official_email" {% if not errors.official_email %}style="display:none;"{% endif %}>{{ errors.official_email }}</div>
        </div>

        <div class="field">
            <label>Mobile Number</label>
            <input type="text" id="id_mobile_number" name="mobile_number" required
                   value="{% if is_edit %}{{ employee.mobile_number }}{% else %}{{ post.mobile_number }}{% endif %}"
                   placeholder="+91 9876543210"
                   class="{% if errors.mobile_number %}field-error{% endif %}">
            <div class="error-msg" id="error-mobile_number" {% if not errors.mobile_number %}style="display:none;"{% endif %}>{{ errors.mobile_number }}</div>
        </div>

        <div class="field">
            <label>Department</label>
            <select id="id_department" name="department" required class="{% if errors.department %}field-error{% endif %}">
                <option value="">- Select Department -</option>
                {% for dept in departments %}
                <option value="{{ dept.pk }}"
                    {% if is_edit and employee.department_id == dept.pk %}selected
                    {% elif not is_edit and post.department == dept.pk|stringformat:"s" %}selected{% endif %}>
                    {{ dept.name }}
                </option>
                {% endfor %}
            </select>
            <div class="error-msg" id="error-department" {% if not errors.department %}style="display:none;"{% endif %}>{{ errors.department }}</div>
        </div>

        <div class="field">
            <label>Designation</label>
            <select name="designation" id="id_designation" class="{% if errors.designation %}field-error{% endif %}">
                <option value="">Select Department First</option>
                {% for desig in designations %}
                <option value="{{ desig.pk }}"
                        data-dept="{{ desig.department_id }}"
                    {% if is_edit and employee.designation_id == desig.pk %}selected
                    {% elif not is_edit and post.designation == desig.pk|stringformat:"s" %}selected{% endif %}>
                    {{ desig.name }}
                </option>
                {% endfor %}
            </select>
            <div class="error-msg" id="error-designation" {% if not errors.designation %}style="display:none;"{% endif %}>{{ errors.designation }}</div>
        </div>

        <div class="field">
            <label>Experience <span class="optional">(years and months)</span></label>
            <div class="grid" style="gap:.6rem;">
                <div class="span-6">
                    <select id="id_experience_years" name="experience_years" class="{% if errors.total_experience %}field-error{% endif %}">
                        {% for y in experience_year_options %}
                        <option value="{{ y }}"
                            {% if post %}
                                {% if post.experience_years == y %}selected{% endif %}
                            {% elif is_edit %}
                                {% if employee.experience_is_15_plus and y == "15_plus" %}selected
                                {% elif not employee.experience_is_15_plus and employee.total_experience|stringformat:"s" == y %}selected{% endif %}
                            {% else %}
                                {% if y == "0" %}selected{% endif %}
                            {% endif %}
                        >
                            {% if y == "15_plus" %}15+ years{% else %}{{ y }} year{% if y != "1" %}s{% endif %}{% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="span-6">
                    <select id="id_experience_months" name="experience_months" class="{% if errors.total_experience %}field-error{% endif %}">
                        {% for m in experience_month_options %}
                        <option value="{{ m }}"
                            {% if post %}
                                {% if post.experience_months == m %}selected{% endif %}
                            {% elif is_edit %}
                                {% if employee.experience_months|stringformat:"s" == m %}selected{% endif %}
                            {% else %}
                                {% if m == "0" %}selected{% endif %}
                            {% endif %}
                        >
                            {{ m }} month{% if m != "1" %}s{% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="error-msg" id="error-total_experience" {% if not errors.total_experience %}style="display:none;"{% endif %}>{{ errors.total_experience }}</div>
        </div>
    </section>

    <!-- Technologies + Project Assignments (right column) -->
    <section class="panel span-6">
        <h2 class="panel-title"><i class="bi bi-cpu"></i> Technologies Known</h2>

        <div class="field">
            <label>Select Technologies</label>
            <div class="tech-checkboxes" id="id_technologies">
                {% for tech in technologies %}
                <label class="tech-option">
                    <input type="checkbox" name="technologies" value="{{ tech.pk }}"
                        {% if tech.pk in selected_tech_ids %}checked{% endif %}>
                    <span>{{ tech.name }}</span>
                </label>
                {% endfor %}
            </div>
            <div class="error-msg" id="error-technologies" {% if not errors.technologies %}style="display:none;"{% endif %}>{{ errors.technologies }}</div>
        </div>

        <div class="tech-tags" id="tech-tags-display">
            <!-- Filled by JS -->
        </div>

        <!-- Project Assignments (inside same panel) -->
        <h2 class="panel-title" style="margin-top:1.4rem;"><i class="bi bi-kanban"></i> Projects Worked On</h2>

        <div class="assignments-wrap" id="assignments-container">
            {% if is_edit %}
                {% for pa in assignments %}
                <div class="assignment-card" data-index="{{ forloop.counter0 }}">
                    <div class="assignment-card-head">
                        <span class="assignment-card-title">Project Assignment {{ forloop.counter }}</span>
                        <button type="button" class="btn-remove remove-assignment-btn">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                    <div class="field">
                        <label>Project</label>
                        <select name="assignment_project_{{ forloop.counter0 }}">
                            <option value="">- Select Project -</option>
                            {% for proj in projects %}
                            <option value="{{ proj.pk }}" {% if pa.project_id == proj.pk %}selected{% endif %}>
                                {{ proj.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="grid" style="gap:.6rem;">
                        <div class="field span-6">
                            <label>Role in Project</label>
                            <div class="disabled-hint {% if not pa.project_id %}show-tip{% endif %}" data-hint="Please select project first.">
                                <select name="assignment_role_{{ forloop.counter0 }}" {% if not pa.project_id %}disabled{% endif %}>
                                    <option value="">- Select Role -</option>
                                    {% for role in roles %}
                                    <option value="{{ role.pk }}" {% if pa.role_id == role.pk %}selected{% endif %}>
                                        {{ role.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="field span-6">
                            <label>Hours Worked</label>
                            <div class="disabled-hint {% if not pa.project_id %}show-tip{% endif %}" data-hint="Please select project first.">
                                <input type="number" min="0" name="assignment_hours_{{ forloop.counter0 }}"
                                       value="{{ pa.total_hours_worked }}" placeholder="120" {% if not pa.project_id %}disabled{% endif %}>
                            </div>
                        </div>
                    </div>
                    <p class="proj-link-note">
                        <i class="bi bi-info-circle"></i>
                        Clicking the project name on the employee detail page will open that project.
                    </p>
                </div>
                {% endfor %}
            {% else %}
                {# Default empty card for new employee #}
                <div class="assignment-card" data-index="0">
                    <div class="assignment-card-head">
                        <span class="assignment-card-title">Project Assignment 1</span>
                        <button type="button" class="btn-remove remove-assignment-btn">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                    <div class="field">
                        <label>Project</label>
                        <select name="assignment_project_0">
                            <option value="">- Select Project -</option>
                            {% for proj in projects %}
                            <option value="{{ proj.pk }}">{{ proj.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="grid" style="gap:.6rem;">
                        <div class="field span-6">
                            <label>Role in Project</label>
                            <div class="disabled-hint show-tip" data-hint="Please select project first.">
                                <select name="assignment_role_0" disabled>
                                    <option value="">- Select Role -</option>
                                    {% for role in roles %}
                                    <option value="{{ role.pk }}">{{ role.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="field span-6">
                            <label>Hours Worked</label>
                            <div class="disabled-hint show-tip" data-hint="Please select project first.">
                                <input type="number" min="0" name="assignment_hours_0" placeholder="120" disabled>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>

        <button type="button" class="btn-soft" id="add-assignment-btn" style="margin-top:.75rem;">
            <i class="bi bi-plus-lg"></i> Add Another Project
        </button>
    </section>

    <!-- Action Buttons -->
    <section class="panel span-12">
        <div style="display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;">
            <button type="submit" class="btn-primary">
                <i class="bi bi-check2-circle"></i>
                {% if is_edit %}Save Changes{% else %}Save Employee{% endif %}
            </button>
            <a href="{% url 'teams:employee_list' %}" class="btn-secondary">
                <i class="bi bi-x-circle"></i> Cancel
            </a>
        </div>
    </section>

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

{% block extra_js %}
<script>
(function () {
    /* Technology Multi-select Tag Display */
    const techWrapper = document.getElementById('id_technologies');
    const techCheckboxes = Array.from(
        techWrapper.querySelectorAll('input[name="technologies"]')
    );
    const tagsDisplay = document.getElementById('tech-tags-display');
    const form = document.getElementById('employee-form');
    const submitBtn = form ? form.querySelector('button[type="submit"]') : null;
    const generalError = document.getElementById('form-general-error');
    const generalErrorText = document.getElementById('form-general-error-text');
    const mobileRegex = /^\+?1?\d{9,15}$/;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const experienceYearsSelect = document.getElementById('id_experience_years');
    const experienceMonthsSelect = document.getElementById('id_experience_months');

    function renderTags() {
        tagsDisplay.innerHTML = '';
        techCheckboxes.filter(function (cb) { return cb.checked; }).forEach(function (cb) {
            const labelText = cb.closest('label').querySelector('span').textContent;
            const tag = document.createElement('span');
            tag.className = 'tech-tag';
            tag.innerHTML =
                labelText +
                '<button type="button" data-val="' + cb.value + '" title="Remove">' +
                '<i class="bi bi-x"></i></button>';
            tag.querySelector('button').addEventListener('click', function () {
                cb.checked = false;
                renderTags();
            });
            tagsDisplay.appendChild(tag);
        });
    }

    techCheckboxes.forEach(function (cb) {
        cb.addEventListener('change', renderTags);
    });
    renderTags(); // initial render (for edit mode)

    function showGeneralError(message) {
        if (!generalError || !generalErrorText) return;
        generalErrorText.textContent = message || 'Please fix the highlighted errors.';
        generalError.style.display = '';
    }

    function clearGeneralError() {
        if (!generalError || !generalErrorText) return;
        generalErrorText.textContent = '';
        generalError.style.display = 'none';
    }

    function setFieldError(field, message) {
        const errorEl = document.getElementById('error-' + field);
        if (field === 'total_experience') {
            const yearsEl = document.getElementById('id_experience_years');
            const monthsEl = document.getElementById('id_experience_months');
            if (errorEl) {
                errorEl.textContent = message || '';
                errorEl.style.display = message ? '' : 'none';
            }
            if (yearsEl) yearsEl.classList.toggle('field-error', !!message);
            if (monthsEl) monthsEl.classList.toggle('field-error', !!message);
            return;
        }
        const inputEl = document.getElementById('id_' + field) || document.querySelector('[name="' + field + '"]');
        if (errorEl) {
            errorEl.textContent = message || '';
            errorEl.style.display = message ? '' : 'none';
        }
        if (inputEl) {
            inputEl.classList.toggle('field-error', !!message);
        }
    }

    function clearAllErrors() {
        clearGeneralError();
        [
            'full_name',
            'employee_code',
            'official_email',
            'mobile_number',
            'department',
            'designation',
            'total_experience',
            'technologies'
        ].forEach(function (field) {
            setFieldError(field, '');
        });
    }

    function validateBeforeSubmit() {
        clearAllErrors();

        const fullName = (document.getElementById('id_full_name')?.value || '').trim();
        const employeeCode = (document.getElementById('id_employee_code')?.value || '').trim();
        const officialEmail = (document.getElementById('id_official_email')?.value || '').trim();
        const mobileNumber = (document.getElementById('id_mobile_number')?.value || '').trim();
        const department = (document.getElementById('id_department')?.value || '').trim();
        const experienceYears = (experienceYearsSelect?.value || '').trim();
        const experienceMonths = (experienceMonthsSelect?.value || '').trim();
        const hasTechnology = techCheckboxes.some(function (cb) { return cb.checked; });
        let isValid = true;

        if (!fullName) {
            setFieldError('full_name', 'Full name is required.');
            isValid = false;
        }
        if (!employeeCode) {
            setFieldError('employee_code', 'Employee code is required.');
            isValid = false;
        }
        if (!officialEmail) {
            setFieldError('official_email', 'Official email is required.');
            isValid = false;
        } else if (!emailRegex.test(officialEmail)) {
            setFieldError('official_email', 'Enter a valid email address.');
            isValid = false;
        }
        if (!mobileNumber) {
            setFieldError('mobile_number', 'Mobile number is required.');
            isValid = false;
        } else if (!mobileRegex.test(mobileNumber)) {
            setFieldError('mobile_number', 'Enter a valid mobile number.');
            isValid = false;
        }
        if (!department) {
            setFieldError('department', 'Department is required.');
            isValid = false;
        }
        if (!experienceYears) {
            setFieldError('total_experience', 'Select experience years.');
            isValid = false;
        } else if (experienceYears !== '15_plus') {
            if (!/^\d+$/.test(experienceYears) || Number(experienceYears) < 0 || Number(experienceYears) > 14) {
                setFieldError('total_experience', 'Select valid experience years.');
                isValid = false;
            } else if (!/^\d+$/.test(experienceMonths) || Number(experienceMonths) < 0 || Number(experienceMonths) > 12) {
                setFieldError('total_experience', 'Select valid experience months.');
                isValid = false;
            }
        }
        if (!hasTechnology) {
            setFieldError('technologies', 'At least 1 required.');
            isValid = false;
        }

        if (!isValid) {
            showGeneralError('Please fix the highlighted errors.');
        }
        return isValid;
    }

    /* Department -> Designation filter */
    const deptSelect = document.querySelector('select[name="department"]');
    const desigSelect = document.getElementById('id_designation');
    const desigPlaceholder = desigSelect.options[0];
    const desigOptions = Array.from(desigSelect.options).slice(1); // skip placeholder

    function filterDesignations() {
        const deptId = deptSelect.value;
        const currentVal = desigSelect.value;
        // Remove all except placeholder.
        while (desigSelect.options.length > 1) desigSelect.remove(1);

        if (!deptId) {
            desigSelect.disabled = true;
            desigPlaceholder.text = 'Select Department First';
            desigSelect.value = '';
            return;
        }

        desigSelect.disabled = false;
        desigPlaceholder.text = '- Select Designation -';
        desigOptions.forEach(function (opt) {
            if (opt.dataset.dept === deptId) {
                desigSelect.appendChild(opt.cloneNode(true));
            }
        });

        if (desigSelect.querySelector('option[value="' + currentVal + '"]')) {
            desigSelect.value = currentVal;
        } else {
            desigSelect.value = '';
        }
    }

    deptSelect.addEventListener('change', filterDesignations);
    filterDesignations();

    function toggleMonthsForFifteenPlus() {
        if (!experienceYearsSelect || !experienceMonthsSelect) return;
        const isFifteenPlus = experienceYearsSelect.value === '15_plus';
        experienceMonthsSelect.disabled = isFifteenPlus;
        if (isFifteenPlus) {
            experienceMonthsSelect.value = '0';
        }
    }

    if (experienceYearsSelect) {
        experienceYearsSelect.addEventListener('change', toggleMonthsForFifteenPlus);
        toggleMonthsForFifteenPlus();
    }

    /* Project Assignment Cards */
    const container = document.getElementById('assignments-container');
    const addBtn = document.getElementById('add-assignment-btn');

    // Projects & Roles JSON for dynamic cards
    const projects = [
        {% for proj in projects %}
        { id: "{{ proj.pk }}", name: "{{ proj.name|escapejs }}" },
        {% endfor %}
    ];
    const roles = [
        {% for role in roles %}
        { id: "{{ role.pk }}", name: "{{ role.name|escapejs }}" },
        {% endfor %}
    ];

    function getNextIndex() {
        const cards = container.querySelectorAll('.assignment-card');
        let max = cards.length;
        cards.forEach(function (c) {
            const idx = parseInt(c.dataset.index || 0, 10);
            if (idx >= max) max = idx + 1;
        });
        return max;
    }

    function buildProjectOptions(selectedId) {
        let html = '<option value="">- Select Project -</option>';
        projects.forEach(function (p) {
            html += '<option value="' + p.id + '"' + (p.id === selectedId ? ' selected' : '') + '>' + p.name + '</option>';
        });
        return html;
    }

    function buildRoleOptions(selectedId) {
        let html = '<option value="">- Select Role -</option>';
        roles.forEach(function (r) {
            html += '<option value="' + r.id + '"' + (r.id === selectedId ? ' selected' : '') + '>' + r.name + '</option>';
        });
        return html;
    }

    function refreshTitles() {
        container.querySelectorAll('.assignment-card-title').forEach(function (el, i) {
            el.textContent = 'Project Assignment ' + (i + 1);
        });
    }

    function wireRemove(card) {
        card.querySelector('.remove-assignment-btn').addEventListener('click', function () {
            const allCards = container.querySelectorAll('.assignment-card');
            if (allCards.length <= 1) {
                const projectSelect = getProjectSelect(card);
                const roleSelect = getRoleSelect(card);
                const hoursInput = getHoursInput(card);
                if (projectSelect) projectSelect.value = '';
                if (roleSelect) roleSelect.value = '';
                if (hoursInput) hoursInput.value = '';
                toggleDependentFields(card);
                refreshProjectOptions();
                return;
            }
            card.remove();
            refreshProjectOptions();
            refreshTitles();
        });
    }

    function createCard(index) {
        const card = document.createElement('div');
        card.className = 'assignment-card';
        card.dataset.index = index;
        card.innerHTML =
            '<div class="assignment-card-head">' +
            '  <span class="assignment-card-title">Project Assignment</span>' +
            '  <button type="button" class="btn-remove remove-assignment-btn"><i class="bi bi-trash"></i> Remove</button>' +
            '</div>' +
            '<div class="field">' +
            '  <label>Project</label>' +
            '  <select name="assignment_project_' + index + '">' + buildProjectOptions('') + '</select>' +
            '</div>' +
            '<div class="grid" style="gap:.6rem;">' +
            '  <div class="field span-6"><label>Role in Project</label>' +
            '    <div class="disabled-hint show-tip" data-hint="Please select project first.">' +
            '      <select name="assignment_role_' + index + '" disabled>' + buildRoleOptions('') + '</select>' +
            '    </div>' +
            '  </div>' +
            '  <div class="field span-6"><label>Hours Worked</label>' +
            '    <div class="disabled-hint show-tip" data-hint="Please select project first.">' +
            '      <input type="number" min="0" name="assignment_hours_' + index + '" placeholder="120" disabled>' +
            '    </div>' +
            '  </div>' +
            '</div>';
        return card;
    }

    function getAssignmentCards() {
        return Array.from(container.querySelectorAll('.assignment-card'));
    }

    function getProjectSelect(card) {
        return card.querySelector('select[name^="assignment_project_"]');
    }

    function getRoleSelect(card) {
        return card.querySelector('select[name^="assignment_role_"]');
    }

    function getHoursInput(card) {
        return card.querySelector('input[name^="assignment_hours_"]');
    }

    function getRoleHint(card) {
        const roleSelect = getRoleSelect(card);
        return roleSelect ? roleSelect.closest('.disabled-hint') : null;
    }

    function getHoursHint(card) {
        const hoursInput = getHoursInput(card);
        return hoursInput ? hoursInput.closest('.disabled-hint') : null;
    }

    function selectedProjectValues(excludeSelect) {
        const values = new Set();
        getAssignmentCards().forEach(function (card) {
            const select = getProjectSelect(card);
            if (!select || select === excludeSelect) return;
            if (select.value) values.add(select.value);
        });
        return values;
    }

    function refreshProjectOptions() {
        getAssignmentCards().forEach(function (card) {
            const projectSelect = getProjectSelect(card);
            if (!projectSelect) return;
            const usedElsewhere = selectedProjectValues(projectSelect);
            Array.from(projectSelect.options).forEach(function (opt) {
                if (!opt.value) {
                    opt.disabled = false;
                    return;
                }
                opt.disabled = usedElsewhere.has(opt.value);
            });
        });
    }

    function toggleDependentFields(card) {
        const projectSelect = getProjectSelect(card);
        const roleSelect = getRoleSelect(card);
        const hoursInput = getHoursInput(card);
        const hasProject = !!(projectSelect && projectSelect.value);

        if (roleSelect) {
            roleSelect.disabled = !hasProject;
            if (!hasProject) roleSelect.value = '';
        }
        if (hoursInput) {
            hoursInput.disabled = !hasProject;
            if (!hasProject) hoursInput.value = '';
        }
        const roleHint = getRoleHint(card);
        const hoursHint = getHoursHint(card);
        if (roleHint) roleHint.classList.toggle('show-tip', !hasProject);
        if (hoursHint) hoursHint.classList.toggle('show-tip', !hasProject);
    }

    function onProjectChange(event) {
        const changedSelect = event.target;
        if (!changedSelect || !changedSelect.name.startsWith('assignment_project_')) return;

        if (changedSelect.value && selectedProjectValues(changedSelect).has(changedSelect.value)) {
            changedSelect.value = '';
            window.alert('You can select each project only once.');
        }

        const card = changedSelect.closest('.assignment-card');
        if (card) toggleDependentFields(card);
        refreshProjectOptions();
    }

    // Wire existing cards on load
    container.querySelectorAll('.assignment-card').forEach(wireRemove);
    getAssignmentCards().forEach(function (card) {
        const projectSelect = getProjectSelect(card);
        if (projectSelect) projectSelect.addEventListener('change', onProjectChange);
        toggleDependentFields(card);
    });
    refreshProjectOptions();
    refreshTitles();

    addBtn.addEventListener('click', function () {
        const idx = getNextIndex();
        const card = createCard(idx);
        container.appendChild(card);
        wireRemove(card);
        const projectSelect = getProjectSelect(card);
        if (projectSelect) projectSelect.addEventListener('change', onProjectChange);
        toggleDependentFields(card);
        refreshProjectOptions();
        refreshTitles();
        card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    });

    if (form) {
        form.addEventListener('submit', function (event) {
            event.preventDefault();

            if (!validateBeforeSubmit()) return;

            if (submitBtn) submitBtn.disabled = true;
            clearGeneralError();

            fetch(form.action || window.location.href, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': form.querySelector('input[name="csrfmiddlewaretoken"]').value
                },
                body: new FormData(form)
            })
                .then(async function (response) {
                    let data = {};
                    try {
                        data = await response.json();
                    } catch (err) {
                        data = {};
                    }

                    if (response.ok && data.success) {
                        window.location.href = data.redirect_url || "{% url 'teams:employee_list' %}";
                        return;
                    }

                    clearAllErrors();
                    const errors = data.errors || {};
                    Object.keys(errors).forEach(function (field) {
                        setFieldError(field, errors[field]);
                    });
                    showGeneralError(data.message || 'Please fix the highlighted errors.');
                })
                .catch(function () {
                    showGeneralError('Something went wrong while saving employee.');
                })
                .finally(function () {
                    if (submitBtn) submitBtn.disabled = false;
                });
        });
    }
})();
</script>
{% endblock %}