{% load i18n %}
{% comment %} # 875 {% endcomment %}
<button hidden id="previewHxButton"
        hx-post="{% url 'get-employee-mail-preview' %}?{% if employee %}emp_id={{ employee.id }}&{% endif %}"
        hx-target="#preview"
        hx-include="#ack-form-{{ employee.id }}"
        hx-on-htmx-before-request="if (!$('#template').val()) { event.preventDefault(); }">
</button>

<div id="ack-message-{{ employee.id }}"></div>

<form id="ack-form-{{ employee.id }}" class="oh-general__tab-target oh-profile-section"
      hx-post="{% url 'send-mail-to-employee' %}" hx-target="#ack-message-{{ employee.id }}"
      hx-encoding="multipart/form-data" onsubmit="return handleFormSubmit(event, {{ employee.id }})">
    <input type="hidden" name="id" value="{{ employee.id }}">

    <div class="modal-body">

        {% if employee %}
            <div class="oh-timeoff-modal__profile-content">
                <div class="oh-profile mb-2">
                    <div class="oh-profile__avatar">
                        <img src="{{ employee.get_avatar }}" class="oh-profile__image me-2" alt="Employee Avatar">
                    </div>
                    <div class="oh-timeoff-modal__profile-info">
                        <span class="oh-timeoff-modal__user fw-bold">{{ employee.get_full_name }}</span>
                        <span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
                            {{ employee.get_job_position }} / {{ employee.get_department }}
                        </span>
                    </div>
                </div>
            </div>
        {% endif %}

        <!-- Also Send To -->
        <div class="form-group mt-2">
            <label for="employees"><h6>{% trans "Also send to" %}</h6></label>
            <select class="oh-select oh-select-2" name="employees" id="employees" multiple {% if not employee %} required {% endif %}>
                {% for emp in employees %}
                    <option value="{{ emp.id }}">{{ emp }}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Subject -->
        <div class="form-group mt-2">
            <label for="subject"><h6>{% trans "Subject" %}</h6></label>
            <input required type="text" name="subject" class="oh-input w-100" id="subject" placeholder="Important Reminder">
        </div>

        <!-- Template -->
        <div class="form-group mt-2">
            <label for="template"><h6>{% trans "Template" %}</h6></label>
            <select name="template" class="w-100 oh-select" id="template" hx-on:change="loadTemplate(this)">
                <option value="">----</option>
                {% for template in templates %}
                    <option value="{{ template.id }}">{{ template.title }}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Message Body -->
        <div class="form-group mt-2">
            <label for="body"><h6>{% trans "Message Body" %}</h6></label>
            <div class="oh-input__group">
                <div class="oh-tabs__view-buttons mt-2">
                    <span class="tab-btn active" data-tab="write"><span>{% trans "Write" %}</span></span>
                    <span class="tab-btn" data-tab="preview" hx-on:click="$('#previewHxButton').click();"><span>{% trans "Preview" %}</span></span>
                </div>
                <div id="write" class="oh-tabs__view active">
                    <textarea id="writeField" data-summernote name="body" required
                              class="oh-input oh-input--textarea" placeholder="Type something here..."></textarea>
                </div>
                <div id="preview" class="oh-tabs__view">
                    <div id="previewField" class="oh-input oh-input--textarea" placeholder="preview..."></div>
                </div>
            </div>
        </div>

        <div class="form-hint" style="margin-top: 10px; font-size: 14px; color: #888;">
            {% trans "Hint: Type '{' to get sender or receiver data" %}
        </div>

        <!-- Template as Attachment -->
        <div class="form-group mt-2">
            <label for="template_attachments"><h6>{% trans "Template as Attachment" %}</h6></label>
            <select name="template_attachments" class="w-100 oh-select" id="template_attachments" multiple>
                {% for template in templates %}
                    <option value="{{ template.id }}">{{ template.title }}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Other Attachments -->
        <div class="form-group mt-2">
            <label for="other_attachments"><h6>{% trans "Other Attachments" %}</h6></label>
            <input type="file" name="other_attachments" id="other_attachments" multiple style="display: block;">
        </div>

        <div id="messages"></div>

        <div class="modal-footer d-flex flex-row-reverse mt-3">
            <button type="submit" class="oh-btn oh-btn--secondary submit-send">{% trans "Send Mail" %}</button>
        </div>
    </div>
</form>

<script>
    // ---------- UTILITIES ----------
    function showError(message) {
        $("#messages").html(`<div class="oh-alert oh-alert--animated oh-alert--danger" role="alert">${message}</div>`);
    }
    function clearErrors() { $("#messages").empty(); }

    // ---------- VALIDATION ----------
    function validateForm(formId, hasEmployee) {
        clearErrors();
        let valid = true;
        if (!$('#employees').val().length && !hasEmployee) {
            showError("Please select at least one employee.");
            valid = false;
        } else if (!$("#subject").val().trim()) {
            showError("The message subject is required.");
            valid = false;
        } else {
            let body = $(`#writeField`).summernote('code');
            if (!body || body === '<p><br></p>') {
                showError("The message body is required.");
                valid = false;
            }
        }
        return valid;
    }

    // ---------- FORM SUBMIT ----------
    function handleFormSubmit(event, empId) {
        event.preventDefault();
        const hasEmployee = "{{employee|default:'false'|safe}}" !== "false";
        if (!validateForm(empId, hasEmployee)) return false;

        Swal.fire({
            title: "Processing",
            text: "Mail will be sent in the background",
            icon: "info",
            timer: 1500,
            showConfirmButton: false
        });
        return true;
    }

    // ---------- TEMPLATE LOAD ----------
    function loadTemplate(select) {
        const id = $(select).val();
        if (!id) return;
        $.ajax({
            type: "get",
            url: `/employee/get-template/${id}/`,
            dataType: "json",
            beforeSend: () => { $('#writeField').summernote('disable'); },
            success: function(response) { $('#writeField').summernote('code', response.body); },
            complete: () => { $('#writeField').summernote('enable'); }
        });
    }

    // ---------- INIT ----------
    $(document).ready(function() {
        // Load preselected employees if any
        let selectedIds = JSON.parse($("#selectedInstances").attr("data-ids") || "[]");
        $("#employees").val(selectedIds).change();

        // Initialize Summernote conditionally
        {% if employee %}
            initializeSummernote({{ employee.id }}, {{ searchWords|safe }});
        {% else %}
            if (selectedIds.length > 0) {
                initializeSummernote(selectedIds[0], {{ searchWords|safe }});
            }
        {% endif %}

        // Tab switching
        document.querySelectorAll(".tab-btn").forEach((btn) => {
            btn.addEventListener("click", () => {
                document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
                btn.classList.add("active");
                document.querySelectorAll(".oh-tabs__view").forEach(c => c.classList.remove("active"));
                document.getElementById(btn.dataset.tab).classList.add("active");
            });
        });
    });
</script>