{% 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">
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.css" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.css" rel="stylesheet">
<style>
    .card-body .form-floating .form-control,
    .card-body .form-floating .ts-wrapper {
        height: calc(3.5rem + 2px);
        padding-top: 1.625rem;
        padding-bottom: 0.625rem;
    }

    .card-body .form-floating>label {
        padding: 0 5px;
    }

    .card-body .form-floating .ts-wrapper .ts-control {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 8px !important;

    }

    .sortable-header {
        cursor: pointer;
        user-select: none;
    }

    .sortable-header:hover {
        background-color: #e9ecef;
    }

    .sortable-header .header-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .sort-arrow {
        display: inline-block;
        width: 1em;
        opacity: 0.6;
        transition: opacity 0.2s;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center pb-3 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-1">歷史評核紀錄</h1>
            <p class="text-muted mb-0">
                目前顯示 {{ reviews.count }} 筆紀錄
            </p>
        </div>
        <a href="{% url 'create_review' %}" class="btn btn-primary d-flex align-items-center">
            <i class="bi bi-plus-lg me-1"></i> 新增評核
        </a>
    </div>

    <div class="card mb-4">
        <div class="card-header fw-bold">
            <i class="bi bi-funnel-fill"></i> Search
        </div>
        <div class="card-body">
            <form method="get" class="row g-3 align-items-center" autocomplete="off">
                <div class="form-floating col-md-2">{{ filter.form.year }}{{ filter.form.year.label_tag }}</div>
                <div class="form-floating col-md-2">{{ filter.form.department }}{{filter.form.department.label_tag}}
                </div>
                <div class="form-floating col-md-2">{{ filter.form.employee_id }}{{filter.form.employee_id.label_tag}}
                </div>
                <div class="form-floating col-md-2">{{ filter.form.employee }}{{ filter.form.employee.label_tag }}</div>
                <div class="form-floating col-md-2">{{ filter.form.period_type }}{{filter.form.period_type.label_tag}}
                </div>
                <div class="col-md-1">
                    <button type="submit"
                        class="btn btn-primary w-100 py-3 d-flex align-items-center justify-content-center" title="搜尋">
                        <i class="bi bi-search me-2"></i>
                        <span>搜尋</span>
                    </button>
                </div>

                <div class="col-md-1">
                    <a id="clear-filter-btn" href="{% url 'review_list' %}"
                        class="btn btn-outline-secondary w-100 py-3 d-flex align-items-center justify-content-center"
                        title="清空篩選">
                        <i class="bi bi-arrow-clockwise me-2"></i>
                        <span>清空</span>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle bg-white rounded-3 shadow-sm">
            <thead class="table-light" id="sortable-table-head">
                <tr>
                    <th scope="col" class="sortable-header" data-sort-by="employee">
                        <div class="header-content">
                            <span>評核對象</span>
                            <span class="sort-arrow"></span>
                        </div>
                    </th>
                    <th scope="col" class="sortable-header" data-sort-by="period">
                        <div class="header-content">
                            <span>評核期間</span>
                            <span class="sort-arrow"></span>
                        </div>
                    </th>
                    <th scope="col" class="sortable-header" data-sort-by="status">
                        <div class="header-content">
                            <span>狀態</span>
                            <span class="sort-arrow"></span>
                        </div>
                    </th>
                    <th scope="col" class="sortable-header" data-sort-by="updated">
                        <div class="header-content">
                            <span>最後更新</span>
                            <span class="sort-arrow"></span>
                        </div>
                    </th>
                    <th scope="col" class="text-end">操作</th>
                </tr>
            </thead>

            <tbody>
                {% for review in reviews %}
                <tr>
                    <td>{{ review.employee.username }}</td>
                    <td>{{ review.review_period }}</td>
                    <td class="text-center">
                        {# 根據狀態顯示不同顏色的徽章 #}
                        {% if review.status == 'completed' %}
                        <span class="badge bg-success">已完成</span>
                        {% elif review.status == 'returned' %}
                        <span class="badge bg-warning text-dark">已退回</span>
                        {% elif review.status == 'draft' %}
                        <span class="badge bg-light text-dark border">草稿</span>
                        {% else %}
                        <span class="badge bg-primary">簽核中</span>
                        {% endif %}
                    </td>
                    <td>{{ review.updated_at|date:"Y-m-d H:i" }}</td>
                    <td class="text-end">
                        <div class="d-flex justify-content-end align-items-center">
                            <a href="{% url 'edit_review' pk=review.pk %}?preview=1"
                                class="btn btn-outline-info btn-sm me-2" data-bs-toggle="tooltip" title="預覽">
                                <i class="bi bi-eye"></i>
                            </a>
                            {% if review.can_be_approved_by_user %}
                            <a href="{% url 'edit_review' pk=review.pk %}" class="btn btn-primary btn-sm me-2"
                                data-bs-toggle="tooltip" title="前往簽核">
                                <i class="bi bi-pencil-square"></i>
                            </a>
                            {% elif review.status == 'returned' and request.user == review.employee %}
                            <a href="{% url 'edit_review' pk=review.pk %}" class="btn btn-success btn-sm me-2"
                                data-bs-toggle="tooltip" title="修改評核">
                                <i class="bi bi-pencil-fill"></i>
                            </a>
                            {% elif review.status == 'draft' and request.user == review.employee %}
                            <a href="{% url 'edit_review' pk=review.pk %}" class="btn btn-outline-secondary btn-sm me-2"
                                data-bs-toggle="tooltip" title="編輯草稿">
                                <i class="bi bi-pencil"></i>
                            </a>
                            {% endif %}
                            {% if request.user.is_staff %}
                            <!-- <form action="{% url 'delete_review' pk=review.pk %}" method="post" class="delete-form">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-outline-danger btn-sm" data-bs-toggle="tooltip"
                                    title="刪除">
                                    <i class="bi bi-trash3"></i>
                                </button> -->
                            </form>
                            {% endif %}
                            <a href="{% url 'review_history' pk=review.pk %}" class="btn btn-outline-dark btn-sm ms-2"
                                data-bs-toggle="tooltip" title="歷程紀錄">
                                <i class="bi bi-clock-history"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" class="text-center text-muted py-5">沒有找到符合條件的評核紀錄。</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endblock %}

{% block scripts %}
{{ employee_data_map_json|json_script:"employee-data-map" }}

{% 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/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.js"></script>
<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
                });
            });
        }
        new TomSelect('#year-filter-select', {});
        new TomSelect('#empid-filter-select', {});
        new TomSelect('#employee-filter-select', {});
        new TomSelect('#period-filter-select', {});
        // --- 綁定「部門」篩選器的連動刷新功能 --- 
        const deptSelect = document.getElementById('dept-filter-select');
        if (deptSelect) {
            let tsDept = new TomSelect(deptSelect, {});
            tsDept.on('change', function () {
                deptSelect.closest('form').submit();
            });
        }

        // --- 初始化「刪除」按鈕的 SweetAlert2 確認視窗 ---
        document.querySelectorAll('.delete-form').forEach(form => {
            form.addEventListener('submit', function (event) {
                event.preventDefault();
                Swal.fire({
                    title: '您確定嗎？', text: "您將永久刪除這份評核紀錄！", icon: 'warning',
                    showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#6c757d',
                    confirmButtonText: '是的，刪除它！', cancelButtonText: '取消'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                })
            });
        });

        // --- 新增：啟用 Bootstrap Tooltips ---
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

        // --- 啟用前端表格排序 ---
        const table = document.querySelector('.table');
        if (!table) return;
        const tableHead = table.querySelector('thead');
        const tableBody = table.querySelector('tbody');
        const headers = table.querySelectorAll('th[data-sort-by]');
        let currentSort = { column: null, direction: 'asc' };

        headers.forEach(header => {
            header.addEventListener('click', () => {
                const sortBy = header.dataset.sortBy;
                const columnIndex = Array.from(header.parentNode.children).indexOf(header);

                let direction = (currentSort.column === sortBy && currentSort.direction === 'asc') ? 'desc' : 'asc';
                currentSort = { column: sortBy, direction: direction };

                const rows = Array.from(tableBody.querySelectorAll('tr'));

                rows.sort((rowA, rowB) => {
                    const cellA = rowA.children[columnIndex].textContent.trim();
                    const cellB = rowB.children[columnIndex].textContent.trim();

                    let valA, valB;
                    if (sortBy === 'updated') {
                        valA = new Date(cellA).getTime();
                        valB = new Date(cellB).getTime();
                    } else {
                        valA = cellA;
                        valB = cellB;
                    }

                    if (valA < valB) return direction === 'asc' ? -1 : 1;
                    if (valA > valB) return direction === 'asc' ? 1 : -1;
                    return 0;
                });

                rows.forEach(row => tableBody.appendChild(row));

                headers.forEach(h => {
                    const arrowEl = h.querySelector('.sort-arrow');
                    if (arrowEl) {
                        if (h === header) {
                            arrowEl.innerHTML = direction === 'asc' ? '<i class="bi bi-arrow-up-short"></i>' : '<i class="bi bi-arrow-down-short"></i>';
                        } else {
                            arrowEl.innerHTML = '';
                        }
                    }
                });
            });
        });
    });

</script>
{% endblock %}