{% extends 'base.html' %}
{% load static %}
{% block title %}績效管理與發展目標{% endblock %}

{% block style %}
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> -->

<style>
    .container {
        max-width: 1400px;
    }
    .kpi-table {
        border: 2px solid #333;
        margin-bottom: 1.5rem;
    }
    .kpi-table th,
    .kpi-table td {
        border: 1px solid #dee2e6;
        vertical-align: middle;
        text-align: center;
        padding: 0.5rem;
    }
    .kpi-table thead th {
        background-color: rgb(153, 195, 237);
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .section-title {
        background-color: #343a40;
        color: white;
    }
    .smart-header {
        font-size: 12px;
        font-weight: normal;
        background-color: #f8f9fa;
        text-align: center !important;
    }
    .weighted-score {
        background-color: #f0f0f0;
        font-weight: bold;
    }
    .form-control-sm,
    .form-select-sm {
        font-size: 14px;
    }
    #initial-prompt {
        border: 2px dashed #ccc;
        padding: 3rem;
        color: #6c757d;
    }
    .card-body .form-floating>label {
        background: white;
        padding: 0 5px;
    }
    .toastify-custom-loader {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.25rem;
        padding: 20px 30px;
        border-radius: 10px;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
        z-index: 9999;
    }
    .btn-medium-custom {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        padding-left: 1.6rem !important;
        padding-right: 1.6rem !important;
    }
    @keyframes swalspin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>
{% endblock %}

{% block content %}
    <div class="container my-4">
        <form method="post" autocomplete="off">
            {% csrf_token %}
            <div class="row align-items-center mb-3">
                <div class="col-4">
                    {% if form.errors or formset.errors or formset.non_form_errors or competency_formset.errors or competency_formset.non_form_errors %}
                    <div class="alert alert-danger p-2 mb-0" role="alert">
                        <h6 class="alert-heading fw-bold">提交失敗</h6>
                        {% if form.errors %}{% for field in form %}{% for error in field.errors %}<small>{{ field.label }}: {{ error }}</small><br>{% endfor %}{% endfor %}{% endif %}
                        {% if formset.non_form_errors %}{% for error in formset.non_form_errors %}<small>{{ error }}</small>{% endfor %}{% endif %}
                        {% if formset.errors %}{% for form_in_set in formset %}{% for field in form_in_set %}{% if field.errors %}<small><strong>第 {{ forloop.parentloop.counter }} 個目標的 [{{ field.label }}] 欄位:</strong> {{ field.errors|striptags }}</small><br>{% endif %}{% endfor %}{% endfor %}{% endif %}
                        {% if competency_formset.non_form_errors %}{% for error in competency_formset.non_form_errors %}<small>{{ error }}</small>{% endfor %}{% endif %}
                        {% if competency_formset.errors %}{% for form_in_set in competency_formset %}{% for field in form_in_set %}{% if field.errors %}<small><strong>第 {{ forloop.parentloop.counter }} 個職能的 [{{ field.label }}] 欄位:</strong> {{ field.errors|striptags }}</small><br>{% endif %}{% endfor %}{% endfor %}{% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="col-4 text-center">
                    <h4 class="fw-bold mb-0">個人績效管理與發展目標</h4>
                </div>
                <div class="col-4">
                    <div class="d-flex justify-content-end align-items-center">
                        <label for="{{ form.review_period.id_for_label }}" class="form-label fw-bold me-2 mb-0 text-nowrap">評核期間:</label>
                        {{ form.review_period }}
                    </div>
                </div>
            </div>

            <div id="initial-prompt" class="text-center rounded mt-5">
                <h5 class="mb-0">請先從右上角選擇評核期間以開始</h5>
            </div>

            <div id="review-content-wrapper" style="display: none;">
                <div class="mb-3">
                    <table class="table kpi-table table-bordered table-sm mb-4">
                        <tbody>
                        <tr>
                            <td class="table-light fw-bold" style="width: 15%;">姓名</td>
                            <td style="width: 35%;"><span>{{ hr_employee_data.emp_name|default:current_user.username }}</span></td>
                            <td class="table-light fw-bold" style="width: 15%;">職等</td>
                            <td style="width: 35%;"><span>{{ hr_employee_data.pay_grade|default:"(無資料)" }}</span></td>
                        </tr>
                        <tr>
                            <td class="table-light fw-bold">部門</td>
                            <td><span>{{ hr_employee_data.dept|default:"(無資料)" }}</span></td>
                            <td class="table-light fw-bold">職稱</td>
                            <td><span>{{ hr_employee_data.job_title|default:"(無資料)" }}</span></td>
                        </tr>
                        <tr>
                            <td class="table-light fw-bold">到職日</td>
                            <td><span>{{ hr_employee_data.hire_date|date:"Y-m-d"|default:"(無資料)" }}</span></td>
                            <td class="table-light fw-bold">年資</td>
                            <td><span>{{ hr_employee_data.seniority|default:"(無資料)" }}</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div>
                    <table class="table kpi-table table-sm" id="goals-table">
                        <thead>
                            <tr>
                                <th colspan="10" class="section-title">年度目標與成果 (70%)</th>
                            </tr>
                            <tr>
                                <th colspan="10" class="smart-header">
                                    掌握SMART原則：明確的（Specific）、可衡量（Measurable）、可實現的（Achievable）、有關聯的（Relevant）和有時間的（Time-bound）</th>
                            </tr>
                            <tr>
                                <th style="width: 6%;">項目</th>
                                <th style="width: 20%;">工作目標</th>
                                <th style="width: 5%;">權重%</th>
                                <th style="width: 15%;">工作成果 (員工自評)</th>
                                <th style="width: 5%;">自評<br>(1-10)</th>
                                <th style="width: 7%;">加權分數</th>
                                <th style="width: 5%;">直屬主管<br>評分</th>
                                <th style="width: 7%;">加權分數</th>
                                <th style="width: 5%;">上二層<br>主管評分</th>
                                <th style="width: 7%;">加權分數</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{ formset.management_form }}
                            {% for goal_form in formset %}
                            <tr class="goal-row">
                                <td>{{ goal_form.item }}</td>
                                <td>{{ goal_form.work_goal }}</td>
                                <td>{{ goal_form.weight }}</td>
                                <td>{{ goal_form.work_result_self }}</td>
                                <td>{{ goal_form.rating_self }}</td>
                                <td class="weighted-score self-score">0.00</td>
                                <td>{{ goal_form.rating_direct_manager }}</td>
                                <td class="weighted-score direct-manager-score">0.00</td>
                                <td>{{ goal_form.rating_second_manager }}</td>
                                <td class="weighted-score second-manager-score">0.00</td>
                                <td style="display: none;">{{ goal_form.id }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="2" class="text-end">工作目標權重小計 (共計70%)</th>
                                <th id="weight-total">0</th>
                                <th class="text-end">總分</th>
                                <th class="weighted-score" id="self-rating-total">0</th>
                                <th class="weighted-score" id="self-score-total">0.00</th>
                                <th class="weighted-score" id="direct-manager-rating-total">0</th>
                                <th class="weighted-score" id="direct-manager-score-total">0.00</th>
                                <th class="weighted-score" id="second-manager-rating-total">0</th>
                                <th class="weighted-score" id="second-manager-score-total">0.00</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <div class="d-flex justify-content-end mb-3">
                    {% if not is_preview %}
                    <button type="button" class="btn btn-outline-primary btn-sm" id="add-goal-button">
                        <i class="bi bi-plus-circle"></i> 新增年度目標欄位
                    </button>
                    {% endif %}
                </div>
                
                <div id="competency-section">
                    <table class="table kpi-table table-sm" id="competencies-table">
                        <thead>
                            <tr>
                                <th colspan="11" class="section-title">職能表現 (30%)</th>
                            </tr>
                            <tr>
                                <th style="width: 6%;">項目</th>
                                <th style="width: 31%;">職能行為展現</th>
                                <th style="width: 5%;">權重%</th>
                                <th style="width: 14%;">自我職能行為展現說明</th>
                                <th style="width: 6%;">自評</th>
                                <th style="width: 4%;">加權分數</th>
                                <th style="width: 14%;">同仁職能行為展現說明</th>
                                <th style="width: 6%;">直屬主管<br>評分</th>
                                <th style="width: 4%;">加權分數</th>
                                <th style="width: 6%;">上二層<br>主管評分</th>
                                <th style="width: 4%;">加權分數</th>

                            </tr>
                        </thead>
                        <tbody>
                            {{ competency_formset.management_form }}
                            {% for form in competency_formset %}
                            <tr class="competency-row">
                                <td class="fw-bold">{{ form.static_data.name }}</td>
                                <td class="text-start" style="white-space: pre-line;">{{ form.static_data.description }}</td>
                                <td class="competency-weight">{{ form.static_data.weight }}%</td>
                                <td>{{ form.self_assessment_text }}</td>
                                <td>{{ form.self_rating }}</td>
                                <td class="weighted-score comp-self-score">0.00</td>
                                <td>{{ form.peer_assessment_text }}</td>
                                <td>{{ form.direct_manager_rating }}</td>
                                <td class="weighted-score comp-direct-manager-score">0.00</td>
                                <td>{{ form.second_manager_rating }}</td>
                                <td class="weighted-score comp-second-manager-score">0.00</td>
                
                                <td style="display: none;">{{ form.id }}{{ form.competency_master }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="2" class="text-end">職能權重小計 (共計30%)</th>
                                <th id="competency-weight-total">0</th>
                                <th class="text-end">總分</th>
                                <th class="weighted-score" id="comp-self-rating-total">0</th>
                                <th class="weighted-score" id="comp-self-score-total">0.00</th>
                                <th></th>
                                <th class="weighted-score" id="comp-direct-manager-rating-total">0</th>
                                <th class="weighted-score" id="comp-direct-manager-score-total">0.00</th>
                                <th class="weighted-score" id="comp-second-manager-rating-total">0</th>
                                <th class="weighted-score" id="comp-second-manager-score-total">0.00</th>
                            </tr>
                            <tr>
                                <th colspan="3" class="text-end section-title">評核總計</th>
                                <th class="text-end"></th>
                                <th colspan="2" class="weighted-score" id="grand-total-self">0.00</th>
                                <th class="text-end"></th>
                                <th colspan="2" class="weighted-score" id="grand-total-direct">0.00</th>
                                <th class="text-end"></th>
                                <th class="weighted-score" id="grand-total-second">0.00</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                <div id="final-review-section" style="display: none;">
                    <table class="table kpi-table table-bordered table-sm">
                        <thead>
                            <tr>
                                <th class="section-title">其他事例 / 補充資訊</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="p-0">{{ form.supplementary_info }}</td>
                            </tr>
                        </tbody>
                    </table>
                
                    <table class="table kpi-table table-bordered table-sm">
                        <thead>
                            <tr>
                                <th colspan="2" class="section-title">自我評估與未來規劃</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="table-light fw-bold" style="width: 20%;">本年度自我學習/訓練成果</td>
                                <td class="p-0">{{ form.learning_achievements }}</td>
                            </tr>
                            <tr>
                                <td class="table-light fw-bold">優勢</td>
                                <td class="p-0">{{ form.strengths }}</td>
                            </tr>
                            <tr>
                                <td class="table-light fw-bold">待加強</td>
                                <td class="p-0">{{ form.weaknesses }}</td>
                            </tr>
                            <tr>
                                <td class="table-light fw-bold">未來發展方向</td>
                                <td class="p-0">{{ form.future_plans }}</td>
                            </tr>
                            <tr>
                                <td class="table-light fw-bold">自我整體評價</td>
                                <td class="p-0">{{ form.overall_self_evaluation }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <table class="table kpi-table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th class="section-title">直屬主管評語</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="p-0">{{ form.direct_manager_comment }}</td>
                        </tr>
                    </tbody>
                </table>
                <table class="table kpi-table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th class="section-title">上二層主管評語</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="p-0">{{ form.second_manager_comment }}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="text-center mt-4">
                    {% if not is_preview %}
                
                    {# 員工正在編輯「草稿」時的按鈕 #}
                    {% if review and review.status == 'draft' and request.user == review.employee %}
                    <button type="submit" name="action" value="submit_review"
                        class="btn btn-success me-2 action-btn btn-medium-custom">提交評核</button>
                    <button type="submit" name="action" value="save_draft"
                        class="btn btn-secondary action-btn btn-medium-custom">更新草稿</button>
                
                    {# 員工被退回時的按鈕 #}
                    {% elif review and review.status == 'returned' and request.user == review.employee %}
                    <button type="submit" name="action" value="resubmit" class="btn btn-primary action-btn btn-medium-custom"
                        id="submit-button">儲存修改並重新提交</button>
                
                    {# 建立全新評核時的按鈕 #}
                    {% elif not review %}
                    <button type="submit" name="action" value="submit_review" class="btn btn-success me-2 action-btn btn-medium-custom"
                        id="submit-button">提交評核</button>
                    <button type="submit" name="action" value="save_draft"
                        class="btn btn-secondary action-btn btn-medium-custom">暫存草稿</button>
                
                    {# 主管編輯時的按鈕 #}
                    {% elif request.user.is_staff and review.status != 'completed' %}
                    <button type="submit" class="btn btn-primary action-btn btn-medium-custom">儲存變更</button>
                    {% endif %}
                
                    {% endif %}
                </div>
               
            </div>
        </form>
        {% if review %}
        <hr>
        {% if review and review.status != 'draft' %}
        <div class="my-4">
            
            <h4 class="mb-3">簽核動作</h4>
            <form action="{% url 'process_review_action' pk=review.pk %}" method="post">
                {% csrf_token %}
                {% if review.status == 'pending_direct_manager' and is_direct_manager %}
                    <div class="text-end">
                        <div class="mb-3 text-start">
                            <label for="details" class="form-label fw-bold">退回理由（若要退回，請務必填寫）</label>
                            <textarea class="form-control" id="details" name="details" rows="3"></textarea>
                        </div>
                        <button type="submit" name="action" value="approve" class="btn btn-success px-4">直屬主管簽核</button>
                        <button type="submit" name="action" value="return" class="btn btn-warning px-4">退回給同仁</button>
                    </div>
                {% elif review.status == 'pending_second_manager' and is_second_level_manager %}
                     <div class="text-end">
                        <div class="mb-3 text-start">
                            <label for="details" class="form-label fw-bold">退回理由（若要退回，請務必填寫）</label>
                            <textarea class="form-control" id="details" name="details" rows="3"></textarea>
                        </div>
                        <button type="submit" name="action" value="approve" class="btn btn-success px-4">上二層主管簽核</button>
                        <button type="submit" name="action" value="return" class="btn btn-warning px-4">退回給同仁</button>
                    </div>
                {% else %}
                     <p class="text-muted">目前沒有可執行的簽核動作。</p>
            {% endif %}
            </form>
            
        </div>
        

        <table class="table kpi-table table-bordered table-sm">
            <thead><tr><th colspan="3" class="section-title">簽核</th></tr></thead>
            <tbody>
                <tr class="text-center fw-bold">
                    <td style="width: 33.3%;">上二層主管</td>
                    <td style="width: 33.3%;">直屬主管</td>
                    <td style="width: 33.3%;">同仁</td>
                </tr>
                <tr>
                    <td style="height: 100px; text-align: center; vertical-align: middle;">
                        {% if signatures.second_manager %}<span class="fw-bold fs-5">{{ signatures.second_manager.actor.username }}</span><br><small class="text-muted">{{ signatures.second_manager.timestamp|date:"Y-m-d H:i" }}</small>{% else %}<span class="text-muted">(尚未簽核)</span>{% endif %}
                    </td>
                    <td style="height: 100px; text-align: center; vertical-align: middle;">
                        {% if signatures.direct_manager %}<span class="fw-bold fs-5">{{ signatures.direct_manager.actor.username }}</span><br><small class="text-muted">{{ signatures.direct_manager.timestamp|date:"Y-m-d H:i" }}</small>{% else %}<span class="text-muted">(尚未簽核)</span>{% endif %}
                    </td>
                    <td style="height: 100px; text-align: center; vertical-align: middle;">
                        {% if signatures.employee %}<span class="fw-bold fs-5">{{ signatures.employee.actor.username }}</span><br><small class="text-muted">{{ signatures.employee.timestamp|date:"Y-m-d H:i" }}</small>{% else %}<span class="text-muted">(尚未提交)</span>{% endif %}
                    </td>
                </tr>
            </tbody>
        </table>
        {% endif %}
        {% endif %}
        </div>
    </div>
    <div class="text-center mt-5 mb-3">
        <a href="{% url 'review_list' %}" class="btn btn-outline-secondary d-inline-flex align-items-center">
            <i class="bi bi-arrow-left me-1"></i> 返回列表
        </a>
    </div>
    <br>
    <template id="goal-form-template">
        <tr class="goal-row">
            <td>{{ formset.empty_form.item }}</td>
            <td>{{ formset.empty_form.work_goal }}</td>
            <td>{{ formset.empty_form.weight }}</td>
            <td>{{ formset.empty_form.work_result_self }}</td>
            <td>{{ formset.empty_form.rating_self }}</td>
            <td class="weighted-score self-score">0.00</td>
            <td>{{ formset.empty_form.rating_direct_manager }}</td>
            <td class="weighted-score direct-manager-score">0.00</td>
            <td>{{ formset.empty_form.rating_second_manager }}</td>
            <td class="weighted-score second-manager-score">0.00</td>
            <td style="display: none;">{{ formset.empty_form.id }}</td>
        </tr>
    </template>
{% endblock %}

{% block scripts %}
    {{ js_context_data|json_script:"js-context-data" }}
    {% if messages %}
    <script id="django-messages" type="application/json">
                [
                    {% for message in messages %}
                        {
                            "message": "{{ message|escapejs }}",
                            "tags": "{{ message.tags }}"
                        }
                        {% if not forloop.last %},{% endif %}
                    {% endfor %}
                ]
    </script>
    {% endif %}
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const messagesDataElement = document.getElementById('django-messages');
            if (messagesDataElement) {
                const messages = JSON.parse(messagesDataElement.textContent);
                messages.forEach(message => {
                    Swal.fire({
                        toast: true, position: 'top-end', icon: message.tags,
                        title: message.message, showConfirmButton: false, timer: 3500,
                        timerProgressBar: true
                    });
                });
            }
            const jsDataElement = document.getElementById('js-context-data');
            const jsContext = JSON.parse(jsDataElement.textContent);
            const reviewStatus = jsContext.reviewStatus;
            const isEmployee = jsContext.isEmployee;
            const isDirectManager = jsContext.isDirectManager;
            const isSecondLevelManager = jsContext.isSecondLevelManager;
            const isPreview = jsContext.isPreview; 
            // =================================================================
            const reviewPeriodSelect = document.querySelector('[name="review_period"]');
            const reviewContentWrapper = document.getElementById('review-content-wrapper');
            const initialPrompt = document.getElementById('initial-prompt');
            const goalsTable = document.getElementById('goals-table');
            const competenciesTable = document.getElementById('competencies-table');
            const submitButton = document.getElementById('submit-button');
            const addGoalButton = document.getElementById('add-goal-button');
            const goalFormTemplate = document.getElementById('goal-form-template');
            const totalFormsInput = document.querySelector('input[name$="-TOTAL_FORMS"]');
            const finalReviewSection = document.getElementById('final-review-section');
            const formElement = document.querySelector('form[method="post"]');
            const actionForm = document.querySelector('form[action*="process_action"]');
            const actionButtons = document.querySelectorAll('.submit-action-btn');
            // =================================================================
            function handlePeriodChange() {
                const isVisible = toggleContentVisibility();
                if (!isVisible) return;
                if (!reviewStatus) {
                    const selectedPeriod = reviewPeriodSelect.value;
                    let periodToFetch = null;
                    if (selectedPeriod.includes('期中檢討')) periodToFetch = '期初目標訂定';
                    else if (selectedPeriod.includes('期末評核')) periodToFetch = '期中檢討';
                    if (periodToFetch) loadReviewDataForPeriod(periodToFetch);
                }
            }
            // =================================================================
            async function loadReviewDataForPeriod(periodToFetch) {
                const url = `{% url 'fetch_review_data' %}?period=${encodeURIComponent(periodToFetch)}`;
                try {
                    const response = await fetch(url);
                    const data = await response.json();
                    if (data.status === 'success') populateForm(data);
                    else console.warn(data.message);
                } catch (error) { console.error('獲取資料時發生錯誤:', error); }
            }
            // =================================================================
            function populateForm(data) {
                const numGoalsInData = data.goals.length;
                let goalRows = document.querySelectorAll('#goals-table .goal-row');
                if (numGoalsInData > goalRows.length) {
                    for (let i = 0; i < (numGoalsInData - goalRows.length); i++) {
                        if (addGoalButton) addGoalButton.click();
                    }
                }
                if (numGoalsInData < goalRows.length) {
                    for (let i = goalRows.length - 1; i >= numGoalsInData; i--) {
                        goalRows[i].remove();
                    }
                }
                const finalGoalRows = document.querySelectorAll('#goals-table .goal-row');
                data.goals.forEach((goalData, index) => {
                    if (index < finalGoalRows.length) {
                        const row = finalGoalRows[index];
                        Object.keys(goalData).forEach(key => {
                            const input = row.querySelector(`[name$="-${key}"]`);
                            if (input) input.value = goalData[key] || '';
                        });
                    }
                });
                data.competencies.forEach(compData => {
                    const hiddenInput = document.querySelector(`[name$="-competency_master"][value="${compData.competency_master_id}"]`);
                    if (hiddenInput) {
                        const row = hiddenInput.closest('.competency-row');
                        Object.keys(compData).forEach(key => {
                            const input = row.querySelector(`[name$="-${key}"]`);
                            if (input) input.value = compData[key] || '';
                        });
                    }
                });
                calculateAllScores();
            }
            // =================================================================
            function toggleContentVisibility() {
                if (reviewPeriodSelect && reviewPeriodSelect.value) {
                    reviewContentWrapper.style.display = 'block';
                    initialPrompt.style.display = 'none';
                    toggleFieldLocks();
                    calculateAllScores();
                    return true;
                } else {
                    reviewContentWrapper.style.display = 'none';
                    initialPrompt.style.display = 'block';
                    return false;
                }
            }
            // =================================================================
            function toggleFieldLocks() {
                if (!reviewPeriodSelect || !reviewPeriodSelect.value) return;
                const selectedPeriod = reviewPeriodSelect.value;
                const finalReviewSection = document.getElementById('final-review-section');
                if (finalReviewSection) {
                    finalReviewSection.style.display = selectedPeriod.includes('期末評核') ? 'block' : 'none';
                }

                if (isPreview) {
                    const allInputs = document.querySelectorAll('#review-content-wrapper input, #review-content-wrapper select, #review-content-wrapper textarea');
                    allInputs.forEach(field => { if (field) field.disabled = true; });
                    if (addGoalButton) addGoalButton.style.display = 'none';
                    return;
                }
                
                const isInitialSetting = selectedPeriod.includes('期初目標訂定');
                const canEmployeeEdit = (!reviewStatus || reviewStatus === 'draft' || reviewStatus === 'returned') && isEmployee;
                const canEditGoalDefinition = canEmployeeEdit && isInitialSetting;
                const canEditSelfAssessment = canEmployeeEdit && !isInitialSetting;
                const canDirectManagerEdit = reviewStatus === 'pending_direct_manager' && isDirectManager;
                const canSecondManagerEdit = reviewStatus === 'pending_second_manager' && isSecondLevelManager;

                document.querySelectorAll('.goal-row [name$="-item"], .goal-row [name$="-work_goal"], .goal-row [name$="-weight"]')
                    .forEach(field => field.disabled = !canEditGoalDefinition);
                document.querySelectorAll('.goal-row [name$="-work_result_self"], .goal-row [name$="-rating_self"], .competency-row [name$="-self_assessment_text"], .competency-row [name$="-self_rating"]')
                    .forEach(field => field.disabled = !canEditSelfAssessment);
                document.querySelectorAll('#final-review-section textarea')
                    .forEach(field => field.disabled = !canEditSelfAssessment);

                const directManagerComment = document.querySelector('[name="direct_manager_comment"]');
                if (directManagerComment) directManagerComment.disabled = !canDirectManagerEdit;
                document.querySelectorAll('.goal-row [name$="-rating_direct_manager"], .competency-row [name$="-peer_assessment_text"], .competency-row [name$="-direct_manager_rating"]')
                    .forEach(field => field.disabled = !(canDirectManagerEdit && !isInitialSetting));

                const secondManagerComment = document.querySelector('[name="second_manager_comment"]');
                if (secondManagerComment) secondManagerComment.disabled = !canSecondManagerEdit;
                document.querySelectorAll('.goal-row [name$="-rating_second_manager"], .competency-row [name$="-second_manager_rating"]')
                    .forEach(field => field.disabled = !(canSecondManagerEdit && !isInitialSetting));

                if (addGoalButton) addGoalButton.style.display = canEditGoalDefinition ? 'block' : 'none';
                if (finalReviewSection) finalReviewSection.style.display = selectedPeriod.includes('期末評核') ? 'block' : 'none';
            }
            // =================================================================
            function calculateAllScores() {
                if (!reviewPeriodSelect.value) return;
                const goalScores = calculateGoalScores();
                const competencyScores = calculateCompetencyScores();
                document.getElementById('grand-total-self').textContent = (goalScores.totalSelfScore + competencyScores.totalSelfScore).toFixed(2);
                document.getElementById('grand-total-direct').textContent = (goalScores.totalDirectManagerScore + competencyScores.totalDirectManagerScore).toFixed(2);
                document.getElementById('grand-total-second').textContent = (goalScores.totalSecondManagerScore + competencyScores.totalSecondManagerScore).toFixed(2);
                updateSubmitButtonStatus(goalScores.totalWeight, competencyScores.totalWeight);
            }
            // =================================================================
            function updateSubmitButtonStatus(goalWeight, competencyWeight) {
                const weightTotalElement = document.getElementById('weight-total');
                const isGoalWeightValid = goalWeight === 70;

                if (weightTotalElement) {
                    if (isGoalWeightValid) {
                        weightTotalElement.style.color = 'green';
                        weightTotalElement.style.fontWeight = 'bold';
                    } else {
                        weightTotalElement.style.color = 'red';
                        weightTotalElement.style.fontWeight = 'bold';
                    }
                }
                // 這裡我們永遠不鎖按鈕，讓點擊事件去檢查
                // (因為我們希望按下去才跳出警告，而不是按鈕不能按)
                const allSubmitButtons = document.querySelectorAll('.submit-action-btn');
                allSubmitButtons.forEach(btn => btn.disabled = false);
            }
            // =================================================================
            function calculateGoalScores() {
                let totalWeight = 0, totalSelfRating = 0, totalDirectManagerRating = 0, totalSecondManagerRating = 0;
                let totalSelfScore = 0, totalDirectManagerScore = 0, totalSecondManagerScore = 0;
                goalsTable.querySelectorAll('tbody .goal-row').forEach(row => {
                    if (row.querySelector('[name$="-item"]').value.trim() !== '') {
                        const weight = parseInt(row.querySelector('[name$="-weight"]').value) || 0;
                        totalWeight += weight;
                        const selfRating = parseInt(row.querySelector('[name$="-rating_self"]').value) || 0;
                        totalSelfRating += selfRating;
                        totalSelfScore += (selfRating / 10) * weight;
                        const directManagerRating = parseInt(row.querySelector('[name$="-rating_direct_manager"]').value) || 0;
                        totalDirectManagerRating += directManagerRating;
                        totalDirectManagerScore += (directManagerRating / 10) * weight;
                        const secondManagerRating = parseInt(row.querySelector('[name$="-rating_second_manager"]').value) || 0;
                        totalSecondManagerRating += secondManagerRating;
                        totalSecondManagerScore += (secondManagerRating / 10) * weight;
                    }
                });
                goalsTable.querySelectorAll('.self-score, .direct-manager-score, .second-manager-score').forEach(cell => {
                    const row = cell.closest('tr'); let score = 0;
                    if (row.querySelector('[name$="-item"]').value.trim() !== '') {
                        const weight = parseInt(row.querySelector('[name$="-weight"]').value) || 0;
                        if (cell.classList.contains('self-score')) score = (parseInt(row.querySelector('[name$="-rating_self"]').value) || 0) / 10 * weight;
                        if (cell.classList.contains('direct-manager-score')) score = (parseInt(row.querySelector('[name$="-rating_direct_manager"]').value) || 0) / 10 * weight;
                        if (cell.classList.contains('second-manager-score')) score = (parseInt(row.querySelector('[name$="-rating_second_manager"]').value) || 0) / 10 * weight;
                    }
                    cell.textContent = score.toFixed(2);
                });
                document.getElementById('weight-total').textContent = totalWeight;
                document.getElementById('self-rating-total').textContent = totalSelfRating;
                document.getElementById('self-score-total').textContent = totalSelfScore.toFixed(2);
                document.getElementById('direct-manager-rating-total').textContent = totalDirectManagerRating;
                document.getElementById('direct-manager-score-total').textContent = totalDirectManagerScore.toFixed(2);
                document.getElementById('second-manager-rating-total').textContent = totalSecondManagerRating;
                document.getElementById('second-manager-score-total').textContent = totalSecondManagerScore.toFixed(2);
                return { totalWeight, totalSelfScore, totalDirectManagerScore, totalSecondManagerScore };
            }
            // =================================================================
            function calculateCompetencyScores() {
                let totalWeight = 0, totalSelfRating = 0, totalDirectManagerRating = 0, totalSecondManagerRating = 0;
                let totalSelfScore = 0, totalDirectManagerScore = 0, totalSecondManagerScore = 0;
                competenciesTable.querySelectorAll('tbody .competency-row').forEach(row => {
                    const weight = parseInt(row.querySelector('.competency-weight').textContent.replace('%', '')) || 0;
                    totalWeight += weight;
                    const selfRating = parseInt(row.querySelector('[name$="-self_rating"]').value) || 0;
                    totalSelfRating += selfRating;
                    totalSelfScore += (selfRating / 10) * weight;
                    const directManagerRating = parseInt(row.querySelector('[name$="-direct_manager_rating"]').value) || 0;
                    totalDirectManagerRating += directManagerRating;
                    totalDirectManagerScore += (directManagerRating / 10) * weight;
                    const secondManagerRating = parseInt(row.querySelector('[name$="-second_manager_rating"]').value) || 0;
                    totalSecondManagerRating += secondManagerRating;
                    totalSecondManagerScore += (secondManagerRating / 10) * weight;
                });
                competenciesTable.querySelectorAll('.comp-self-score, .comp-direct-manager-score, .comp-second-manager-score').forEach(cell => {
                    const row = cell.closest('tr'); let score = 0;
                    const weight = parseInt(row.querySelector('.competency-weight').textContent.replace('%', '')) || 0;
                    if (cell.classList.contains('comp-self-score')) score = (parseInt(row.querySelector('[name$="-self_rating"]').value) || 0) / 10 * weight;
                    if (cell.classList.contains('comp-direct-manager-score')) score = (parseInt(row.querySelector('[name$="-direct_manager_rating"]').value) || 0) / 10 * weight;
                    if (cell.classList.contains('comp-second-manager-score')) score = (parseInt(row.querySelector('[name$="-second_manager_rating"]').value) || 0) / 10 * weight;
                    cell.textContent = score.toFixed(2);
                });
                document.getElementById('competency-weight-total').textContent = totalWeight + '%';
                document.getElementById('comp-self-rating-total').textContent = totalSelfRating;
                document.getElementById('comp-self-score-total').textContent = totalSelfScore.toFixed(2);
                document.getElementById('comp-direct-manager-rating-total').textContent = totalDirectManagerRating;
                document.getElementById('comp-direct-manager-score-total').textContent = totalDirectManagerScore.toFixed(2);
                document.getElementById('comp-second-manager-rating-total').textContent = totalSecondManagerRating;
                document.getElementById('comp-second-manager-score-total').textContent = totalSecondManagerScore.toFixed(2);
                return { totalWeight, totalSelfScore, totalDirectManagerScore, totalSecondManagerScore };
            }
            // =================================================================
            if (reviewPeriodSelect) {
                reviewPeriodSelect.addEventListener('change', handlePeriodChange);
            }
            if (formElement) {
                formElement.addEventListener('input', calculateAllScores);
            }
            if (addGoalButton) {
                addGoalButton.addEventListener('click', function () {
                    if (totalFormsInput && goalFormTemplate) {
                        let formIdx = parseInt(totalFormsInput.value);
                        const newRowHTML = goalFormTemplate.innerHTML.replace(/__prefix__/g, formIdx);
                        goalsTable.querySelector('tbody').insertAdjacentHTML('beforeend', newRowHTML);
                        totalFormsInput.value = formIdx + 1;
                        toggleFieldLocks();
                    }
                });
            }
            
            // =================================================================
            const allForms = document.querySelectorAll('form');

            allForms.forEach(form => {
                form.addEventListener('submit', function (event) {
                    // 1. 立刻阻止表單的預設提交行為
                    event.preventDefault();

                    // 2. 獲取被點擊的按鈕
                    const clickedButton = event.submitter || document.activeElement;

                    if (clickedButton) {
                        const action = clickedButton.getAttribute('name');
                        const value = clickedButton.getAttribute('value');

                        // --- 檢查 A：如果是「退回」，檢查退回理由 ---
                        if (action === 'action' && value === 'return') {
                            const detailsTextarea = form.querySelector('textarea[name="details"]');
                            if (detailsTextarea && detailsTextarea.value.trim() === '') {
                                Swal.fire({ icon: 'error', title: '退回失敗', text: '請務必填寫退回理由！' });
                                return; // 停止執行
                            }
                        }

                        // --- 檢查 B：如果是「期末提交」，檢查必填欄位 ---
                        // 取得當前評核期間的文字 (例如 "2025 期末評核")
                        let currentPeriodText = "";
                        if (reviewPeriodSelect) {
                            if (reviewPeriodSelect.options.length > 0 && reviewPeriodSelect.selectedIndex >= 0) {
                                currentPeriodText = reviewPeriodSelect.options[reviewPeriodSelect.selectedIndex].text;
                            } else {
                                currentPeriodText = reviewPeriodSelect.value; // fallback
                            }
                        }

                        if (currentPeriodText.includes('期末') && (value === 'submit_review' || value === 'resubmit')) {
                            const finalSection = document.getElementById('final-review-section');
                            // 只檢查該區塊內「沒被鎖住 (editable)」的欄位
                            const finalFields = finalSection.querySelectorAll('textarea:not([disabled])');
                            let isFinalEmpty = false;

                            finalFields.forEach(field => {
                                if (!field.value || field.value.trim() === '') {
                                    isFinalEmpty = true;
                                    field.classList.add('is-invalid'); // 亮紅框
                                    field.addEventListener('input', function () { this.classList.remove('is-invalid'); }, { once: true });
                                }
                            });

                            if (isFinalEmpty) {
                                Swal.fire({
                                    icon: 'warning',
                                    title: '資料未填寫完整',
                                    text: '期末評核時，「自我評估與未來規劃」及「補充資訊」區塊皆為必填！',
                                    confirmButtonText: '好的'
                                });
                                return; // 停止執行
                            }
                        }
                    }

                    // 4. 彈出「處理中」視窗
                    Swal.fire({
                        width: 'auto',
                        html: `
                        <div style="display:flex;align-items:center;gap:12px;overflow:hidden;">
                        <div style="width:28px;height:28px;border:3px solid #e5eaf0;
                        border-top:3px solid #1a73e8;border-radius:50%;
                        animation:swalspin 0.8s linear infinite;flex-shrink:0;"></div>
                        <span style="font-size:18px;color:#555;text-align:center;">請稍候，資料正在送出...</span>
                        </div>
                        <style>
                            @keyframes swalspin {
                                                 0% { transform: rotate(0deg); }
                                               100% { transform: rotate(360deg); }
                            }
                        </style>
                               `
                        ,
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        background: '#fff',
                        scrollbarPadding: false
                    });

                    // 5. ★ 將按鈕資訊變成「隱形的便條」塞進表單 ★
                    if (clickedButton && clickedButton.name && clickedButton.value) {
                        const oldActionInput = form.querySelector('input[name="' + clickedButton.name + '"]');
                        if (oldActionInput) oldActionInput.remove();

                        const actionInput = document.createElement('input');
                        actionInput.type = 'hidden';
                        actionInput.name = clickedButton.name;
                        actionInput.value = clickedButton.value;
                        form.appendChild(actionInput);
                    }

                    // 6. 解鎖所有欄位
                    const allDisabledFields = form.querySelectorAll('[disabled]');
                    allDisabledFields.forEach(field => {
                        field.disabled = false;
                    });

                    // 7. 手動提交表單
                    setTimeout(() => {
                        HTMLFormElement.prototype.submit.call(form);
                    }, 100);
                });
            });

            handlePeriodChange();
        });
    </script>
    
{% endblock %}