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

{% block title %}{% if is_new %}Add Worker{% else %}Edit {{ worker.name }}{% endif %} | FoxFitt{% endblock %}

{% block content %}
<div class="container py-4">

<!-- === HEADER === -->
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4">
    <div>
        <h1 class="page-title">
            <i class="fas fa-hard-hat me-2" style="color: var(--accent);"></i>
            {% if is_new %}Add Worker{% else %}Edit {{ worker.name }}{% endif %}
        </h1>
        <p class="mb-0" style="color: var(--text-secondary); font-size: 0.85rem;">
            {% if is_new %}Fill in the sections below. All fields except Name, ID Number, and Monthly Salary are optional.
            {% else %}Update any section. File uploads max 5 MB each.{% endif %}
        </p>
    </div>
    <div class="d-flex gap-2 mt-3 mt-md-0">
        {% if not is_new %}
        <a href="{% url 'worker_detail' worker.id %}" class="btn btn-outline-secondary">
            <i class="fas fa-times me-1"></i>Cancel
        </a>
        {% else %}
        <a href="{% url 'worker_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-times me-1"></i>Cancel
        </a>
        {% endif %}
    </div>
</div>

{% if form.errors or cert_formset.errors or warn_formset.errors %}
<div class="alert alert-danger">
    <strong>Please fix the errors below.</strong>
    {% if form.non_field_errors %}<div>{{ form.non_field_errors }}</div>{% endif %}
</div>
{% endif %}

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

    <!-- === SECTION 1: PERSONAL & PAY === -->
    <div class="card mb-3">
        <div class="card-header"><h6 class="m-0 fw-bold"><i class="fas fa-user me-2" style="color: var(--accent);"></i>Personal & Pay</h6></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Name *</label>
                    {{ form.name }}
                    {% if form.name.errors %}<div class="invalid-feedback d-block">{{ form.name.errors|first }}</div>{% endif %}
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">ID Number *</label>
                    {{ form.id_number }}
                    {% if form.id_number.errors %}<div class="invalid-feedback d-block">{{ form.id_number.errors|first }}</div>{% endif %}
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Phone</label>
                    {{ form.phone_number }}
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Monthly Salary (R) *</label>
                    {{ form.monthly_salary }}
                    {% if form.monthly_salary.errors %}<div class="invalid-feedback d-block">{{ form.monthly_salary.errors|first }}</div>{% endif %}
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Employment Date</label>
                    {{ form.employment_date }}
                </div>

                <!-- === BANKING & TAX === -->
                <!-- Each label carries a small info-icon with a Bootstrap tooltip
                     explaining what the field is for. Uses the global tooltip
                     init from base.html. -->
                <div class="col-md-3">
                    <label class="form-label fw-semibold">
                        Tax No
                        <i class="fas fa-info-circle text-muted ms-1" style="font-size: 0.8em;"
                           data-bs-toggle="tooltip" title="Registered Tax Number"></i>
                    </label>
                    {{ form.tax_number }}
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold">
                        UIF
                        <i class="fas fa-info-circle text-muted ms-1" style="font-size: 0.8em;"
                           data-bs-toggle="tooltip" title="Unemployment Insurance Fund number"></i>
                    </label>
                    {{ form.uif_number }}
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold">
                        Bank
                        <i class="fas fa-info-circle text-muted ms-1" style="font-size: 0.8em;"
                           data-bs-toggle="tooltip" title="Account at which Institution"></i>
                    </label>
                    {{ form.bank_name }}
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold">
                        Acc No.
                        <i class="fas fa-info-circle text-muted ms-1" style="font-size: 0.8em;"
                           data-bs-toggle="tooltip" title="Bank account number"></i>
                    </label>
                    {{ form.bank_account_number }}
                </div>

                <div class="col-12">
                    <label class="form-label fw-semibold">Notes</label>
                    {{ form.notes }}
                </div>
                <div class="col-12">
                    <div class="form-check form-switch">
                        {{ form.active }}
                        <label class="form-check-label fw-semibold" for="{{ form.active.id_for_label }}">Active (shown in forms and dropdowns)</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- === SECTION 2: PPE SIZING === -->
    <div class="card mb-3">
        <div class="card-header"><h6 class="m-0 fw-bold"><i class="fas fa-tshirt me-2" style="color: var(--accent);"></i>PPE Sizing</h6></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3"><label class="form-label fw-semibold">Shoe</label>      {{ form.shoe_size }}</div>
                <div class="col-md-3"><label class="form-label fw-semibold">Overall Top</label>{{ form.overall_top_size }}</div>
                <div class="col-md-3"><label class="form-label fw-semibold">Pants</label>     {{ form.pants_size }}</div>
                <div class="col-md-3"><label class="form-label fw-semibold">T-Shirt</label>   {{ form.tshirt_size }}</div>
            </div>
        </div>
    </div>

    <!-- === SECTION 3: DOCUMENTS === -->
    <div class="card mb-3">
        <div class="card-header"><h6 class="m-0 fw-bold"><i class="fas fa-file-alt me-2" style="color: var(--accent);"></i>Documents <span class="text-muted fw-normal small ms-2">5 MB max per file</span></h6></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Photo</label>
                    {{ form.photo }}
                    {% if form.photo.errors %}<div class="invalid-feedback d-block">{{ form.photo.errors|first }}</div>{% endif %}
                    {% if worker.photo %}<small class="d-block mt-1"><a href="{{ worker.photo.url }}" target="_blank">View current</a></small>{% endif %}
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">ID Document</label>
                    {{ form.id_document }}
                    {% if form.id_document.errors %}<div class="invalid-feedback d-block">{{ form.id_document.errors|first }}</div>{% endif %}
                    {% if worker.id_document %}<small class="d-block mt-1"><a href="{{ worker.id_document.url }}" target="_blank">View current</a></small>{% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- === SECTION 4: DRIVER'S LICENSE === -->
    <div class="card mb-3">
        <div class="card-header"><h6 class="m-0 fw-bold"><i class="fas fa-id-card me-2" style="color: var(--accent);"></i>Driver's License</h6></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="form-check form-switch pt-2">
                        {{ form.has_drivers_license }}
                        <label class="form-check-label fw-semibold" for="{{ form.has_drivers_license.id_for_label }}">Has driver's license</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        Code
                        <i class="fas fa-info-circle text-muted ms-1" style="font-size: 0.8em;"
                           data-bs-toggle="tooltip" title="Drivers License Code (e.g. A, B, C, EB, EC)"></i>
                    </label>
                    {{ form.drivers_license_code }}
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">License File</label>
                    {{ form.drivers_license }}
                    {% if form.drivers_license.errors %}<div class="invalid-feedback d-block">{{ form.drivers_license.errors|first }}</div>{% endif %}
                    {% if worker.drivers_license %}<small class="d-block mt-1"><a href="{{ worker.drivers_license.url }}" target="_blank">View current</a></small>{% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- === SECTION 5: CERTIFICATIONS === -->
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="m-0 fw-bold"><i class="fas fa-certificate me-2" style="color: var(--accent);"></i>Certifications</h6>
            <button type="button" class="btn btn-sm btn-accent" id="addCertBtn"><i class="fas fa-plus me-1"></i>Add Certification</button>
        </div>
        <div class="card-body">
            {{ cert_formset.management_form }}
            <div id="certRows">
                {% for cf in cert_formset %}
                <div class="cert-row formset-row border rounded p-3 mb-2 {% if cf.DELETE.value %}row-marked-delete{% endif %}" data-index="{{ forloop.counter0 }}">
                    {{ cf.id }}
                    <!-- Hidden DELETE flag — toggled by the trash button below -->
                    <input type="checkbox" class="row-delete-flag d-none" name="{{ cf.DELETE.html_name }}" {% if cf.DELETE.value %}checked{% endif %}>
                    <div class="row g-2 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label small mb-1 fw-semibold">Type</label>
                            {{ cf.cert_type }}
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small mb-1 fw-semibold">Issued</label>
                            {{ cf.issued_date }}
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small mb-1 fw-semibold">Valid Until</label>
                            {{ cf.valid_until }}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small mb-1 fw-semibold">Document</label>
                            {{ cf.document }}
                            {% if cf.instance.document %}<small class="d-block mt-1"><a href="{{ cf.instance.document.url }}" target="_blank">Current</a></small>{% endif %}
                        </div>
                        <div class="col-md-1 text-end">
                            <label class="form-label small mb-1 d-block" style="color: transparent;">.</label>
                            <button type="button" class="btn btn-sm btn-outline-danger row-remove-btn"
                                    data-bs-toggle="tooltip" title="Remove this certification when you save">
                                <i class="fas fa-trash"></i>
                            </button>
                            <a href="#" class="row-undo-btn small text-decoration-none d-none"
                               data-bs-toggle="tooltip" title="Keep this certification — undo removal">
                                <i class="fas fa-undo me-1"></i>Undo
                            </a>
                        </div>
                        <div class="col-12">
                            <label class="form-label small mb-1 fw-semibold">Notes</label>
                            {{ cf.notes }}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <p class="text-muted small mb-0 mt-2">Types: Skills, PDP (Professional Driving Permit), First Aid, Medical, Work at Height.</p>

            <!-- Hidden blank template. JS clones the <template>.content node (a
                 safe DocumentFragment — no innerHTML) and rewrites its name
                 attributes to replace __PREFIX__ with the new index. -->
            <template id="certBlankTemplate">
                <div class="cert-row formset-row border rounded p-3 mb-2" data-index="__PREFIX__">
                    <input type="checkbox" class="row-delete-flag d-none" name="certificates-__PREFIX__-DELETE">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label small mb-1 fw-semibold">Type</label>
                            <select name="certificates-__PREFIX__-cert_type" class="form-select form-select-sm">
                                <option value="skills">Skills Certificate</option>
                                <option value="pdp">PDP (Professional Driving Permit)</option>
                                <option value="first_aid">First Aid</option>
                                <option value="medical">Medical</option>
                                <option value="work_at_height">Work at Height</option>
                            </select>
                        </div>
                        <div class="col-md-2"><label class="form-label small mb-1 fw-semibold">Issued</label>
                            <input type="date" name="certificates-__PREFIX__-issued_date" class="form-control form-control-sm"></div>
                        <div class="col-md-2"><label class="form-label small mb-1 fw-semibold">Valid Until</label>
                            <input type="date" name="certificates-__PREFIX__-valid_until" class="form-control form-control-sm"></div>
                        <div class="col-md-4"><label class="form-label small mb-1 fw-semibold">Document</label>
                            <input type="file" name="certificates-__PREFIX__-document" class="form-control form-control-sm"></div>
                        <div class="col-md-1 text-end">
                            <label class="form-label small mb-1 d-block" style="color: transparent;">.</label>
                            <button type="button" class="btn btn-sm btn-outline-danger row-remove-btn"
                                    data-bs-toggle="tooltip" title="Remove this certification when you save">
                                <i class="fas fa-trash"></i>
                            </button>
                            <a href="#" class="row-undo-btn small text-decoration-none d-none"
                               data-bs-toggle="tooltip" title="Keep this certification — undo removal">
                                <i class="fas fa-undo me-1"></i>Undo
                            </a>
                        </div>
                        <div class="col-12"><label class="form-label small mb-1 fw-semibold">Notes</label>
                            <textarea name="certificates-__PREFIX__-notes" rows="2" class="form-control form-control-sm"></textarea></div>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- === SECTION 6: WARNINGS === -->
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="m-0 fw-bold"><i class="fas fa-exclamation-triangle me-2" style="color: var(--color-warning);"></i>Warnings & Disciplinary</h6>
            <button type="button" class="btn btn-sm btn-accent" id="addWarnBtn"><i class="fas fa-plus me-1"></i>Add Warning</button>
        </div>
        <div class="card-body">
            {{ warn_formset.management_form }}
            <div id="warnRows">
                {% for wf in warn_formset %}
                <div class="warn-row formset-row border rounded p-3 mb-2 {% if wf.DELETE.value %}row-marked-delete{% endif %}" data-index="{{ forloop.counter0 }}">
                    {{ wf.id }}
                    <input type="checkbox" class="row-delete-flag d-none" name="{{ wf.DELETE.html_name }}" {% if wf.DELETE.value %}checked{% endif %}>
                    <div class="row g-2 align-items-end">
                        <div class="col-md-2">
                            <label class="form-label small mb-1 fw-semibold">Date</label>
                            {{ wf.date }}
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small mb-1 fw-semibold">Severity</label>
                            {{ wf.severity }}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small mb-1 fw-semibold">Reason</label>
                            {{ wf.reason }}
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small mb-1 fw-semibold">Document</label>
                            {{ wf.document }}
                            {% if wf.instance.document %}<small class="d-block mt-1"><a href="{{ wf.instance.document.url }}" target="_blank">Current</a></small>{% endif %}
                        </div>
                        <div class="col-md-1 text-end">
                            <label class="form-label small mb-1 d-block" style="color: transparent;">.</label>
                            <button type="button" class="btn btn-sm btn-outline-danger row-remove-btn"
                                    data-bs-toggle="tooltip" title="Remove this warning when you save">
                                <i class="fas fa-trash"></i>
                            </button>
                            <a href="#" class="row-undo-btn small text-decoration-none d-none"
                               data-bs-toggle="tooltip" title="Keep this warning — undo removal">
                                <i class="fas fa-undo me-1"></i>Undo
                            </a>
                        </div>
                        <div class="col-12">
                            <label class="form-label small mb-1 fw-semibold">Description</label>
                            {{ wf.description }}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <template id="warnBlankTemplate">
                <div class="warn-row formset-row border rounded p-3 mb-2" data-index="__PREFIX__">
                    <input type="checkbox" class="row-delete-flag d-none" name="warnings-__PREFIX__-DELETE">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-2"><label class="form-label small mb-1 fw-semibold">Date</label>
                            <input type="date" name="warnings-__PREFIX__-date" class="form-control form-control-sm"></div>
                        <div class="col-md-2"><label class="form-label small mb-1 fw-semibold">Severity</label>
                            <select name="warnings-__PREFIX__-severity" class="form-select form-select-sm">
                                <option value="verbal">Verbal</option>
                                <option value="written">Written</option>
                                <option value="final">Final</option>
                            </select>
                        </div>
                        <div class="col-md-4"><label class="form-label small mb-1 fw-semibold">Reason</label>
                            <input type="text" name="warnings-__PREFIX__-reason" class="form-control form-control-sm" placeholder="Short summary"></div>
                        <div class="col-md-3"><label class="form-label small mb-1 fw-semibold">Document</label>
                            <input type="file" name="warnings-__PREFIX__-document" class="form-control form-control-sm"></div>
                        <div class="col-md-1 text-end">
                            <label class="form-label small mb-1 d-block" style="color: transparent;">.</label>
                            <button type="button" class="btn btn-sm btn-outline-danger row-remove-btn"
                                    data-bs-toggle="tooltip" title="Remove this warning when you save">
                                <i class="fas fa-trash"></i>
                            </button>
                            <a href="#" class="row-undo-btn small text-decoration-none d-none"
                               data-bs-toggle="tooltip" title="Keep this warning — undo removal">
                                <i class="fas fa-undo me-1"></i>Undo
                            </a>
                        </div>
                        <div class="col-12"><label class="form-label small mb-1 fw-semibold">Description</label>
                            <textarea name="warnings-__PREFIX__-description" rows="2" class="form-control form-control-sm" placeholder="Full context..."></textarea></div>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- === SUBMIT === -->
    <div class="d-flex justify-content-between align-items-center mb-5">
        {% if not is_new %}
        <a href="{% url 'worker_detail' worker.id %}" class="btn btn-outline-secondary">Cancel</a>
        {% else %}
        <a href="{% url 'worker_list' %}" class="btn btn-outline-secondary">Cancel</a>
        {% endif %}
        <button type="submit" class="btn btn-accent btn-lg">
            <i class="fas fa-save me-1"></i>
            {% if is_new %}Create Worker{% else %}Save Changes{% endif %}
        </button>
    </div>
</form>

</div>

<!-- === FORMSET INTERACTION JAVASCRIPT (DOM-safe) ===
     Handles three concerns:
       1. "+ Add Certification / Warning" — clones a <template> safely via
          content.cloneNode (no innerHTML), rewrites __PREFIX__ in name
          attributes to the new formset index, and re-inits tooltips on the
          newly-added row.
       2. Trash button — marks a row for deletion by ticking the hidden
          DELETE checkbox and adding .row-marked-delete. Swaps the trash
          button out for an Undo link.
       3. Undo link — reverses the above.
     Uses event delegation on the row containers so new rows work without
     extra wiring. -->
<script>
document.addEventListener('DOMContentLoaded', function() {

    // --- "+ Add" button: clone the blank template and append ---
    function wireAdd(formsetPrefix, containerId, templateId, btnId) {
        var btn = document.getElementById(btnId);
        var template = document.getElementById(templateId);
        var container = document.getElementById(containerId);
        var totalForms = document.querySelector('input[name="' + formsetPrefix + '-TOTAL_FORMS"]');
        if (!btn || !template || !container || !totalForms) return;

        btn.addEventListener('click', function() {
            var current = parseInt(totalForms.value, 10);
            var fragment = template.content.cloneNode(true);

            // Replace __PREFIX__ in every `name` attribute
            fragment.querySelectorAll('[name]').forEach(function(el) {
                if (el.name && el.name.indexOf('__PREFIX__') !== -1) {
                    el.name = el.name.split('__PREFIX__').join(current);
                }
            });
            var outer = fragment.querySelector('[data-index]');
            if (outer) outer.setAttribute('data-index', current);

            // Append, then init tooltips on the new row (so the trash button
            // tooltip works immediately without a page reload).
            container.appendChild(fragment);
            if (window.initTooltipsIn) {
                // Re-query the last added row for tooltip init
                var rows = container.querySelectorAll('.formset-row');
                var newRow = rows[rows.length - 1];
                if (newRow) window.initTooltipsIn(newRow);
            }

            totalForms.value = current + 1;
        });
    }

    wireAdd('certificates', 'certRows', 'certBlankTemplate', 'addCertBtn');
    wireAdd('warnings',     'warnRows', 'warnBlankTemplate', 'addWarnBtn');

    // --- Trash + Undo: mark/unmark a row for deletion ---
    // Event delegation on each container — works for both existing rows
    // (rendered server-side) and dynamically added rows.
    function markForDelete(row) {
        row.classList.add('row-marked-delete');
        var flag = row.querySelector('.row-delete-flag');
        if (flag) flag.checked = true;
        // Hide the remove button, show the undo link (Bootstrap utility)
        var removeBtn = row.querySelector('.row-remove-btn');
        var undoLink = row.querySelector('.row-undo-btn');
        if (removeBtn) removeBtn.classList.add('d-none');
        if (undoLink)  undoLink.classList.remove('d-none');
        // Close any hovered tooltip on the remove button to clean up the UI
        if (removeBtn && bootstrap.Tooltip.getInstance(removeBtn)) {
            bootstrap.Tooltip.getInstance(removeBtn).hide();
        }
    }

    function undoDelete(row) {
        row.classList.remove('row-marked-delete');
        var flag = row.querySelector('.row-delete-flag');
        if (flag) flag.checked = false;
        var removeBtn = row.querySelector('.row-remove-btn');
        var undoLink = row.querySelector('.row-undo-btn');
        if (removeBtn) removeBtn.classList.remove('d-none');
        if (undoLink)  undoLink.classList.add('d-none');
        if (undoLink && bootstrap.Tooltip.getInstance(undoLink)) {
            bootstrap.Tooltip.getInstance(undoLink).hide();
        }
    }

    // Delegate on both row containers
    ['certRows', 'warnRows'].forEach(function(containerId) {
        var container = document.getElementById(containerId);
        if (!container) return;
        container.addEventListener('click', function(ev) {
            var removeBtn = ev.target.closest('.row-remove-btn');
            var undoLink = ev.target.closest('.row-undo-btn');
            if (removeBtn) {
                ev.preventDefault();
                var row = removeBtn.closest('.formset-row');
                if (row) markForDelete(row);
            } else if (undoLink) {
                ev.preventDefault();
                var row = undoLink.closest('.formset-row');
                if (row) undoDelete(row);
            }
        });
    });
});
</script>

{% endblock %}