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

{% block title %}週會排程 - 1218 Lab{% endblock %}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
    <h1 class="h2 text-primary mb-0">
        <i class="fas fa-calendar-alt me-2"></i>{% trans "週會排程" %}
    </h1>
    <div class="d-flex align-items-center gap-2">
        <span class="badge bg-success fs-6 px-3 py-2 shadow-sm">
            <i class="fas fa-database me-1"></i>{% trans "資料庫狀態: 已同步儲存" %}
        </span>
        <span class="badge bg-primary fs-6 px-3 py-2 shadow-sm">
            <i class="fas fa-clock me-1"></i>{{ m1_year }}年{{ m1_month }}月 & {{ m2_year }}年{{ m2_month }}月
        </span>
        {% if user.is_authenticated %}
        <form method="post" action="{% url 'verify_schedule_rules' %}" class="d-inline">
            {% csrf_token %}
            <button type="submit" class="btn btn-warning btn-sm shadow-sm text-dark fw-bold"
                onclick="return confirm('確定要校正並驗證排程規則嗎？（如為交換生將自動刪除其卡片，並清理重複或補齊缺漏排程）');">
                <i class="fas fa-check-double me-1"></i>{% trans "校正並驗證排程規則" %}
            </button>
        </form>
        {% endif %}
    </div>
</div>

<!-- 報告規則說明區塊 -->
<div class="card shadow-sm border-0 rounded-3 mb-4 bg-light">
    <div class="card-body p-4">
        <h5 class="fw-bold text-dark mb-3"><i class="fas fa-info-circle text-primary me-2"></i>{% trans "週會報告排程規則" %}</h5>
        <div class="row g-3">
            <div class="col-md-3 col-sm-6">
                <div class="p-3 bg-white rounded border border-start border-4 border-info shadow-sm h-100">
                    <div class="fw-bold text-dark mb-1"><i class="fas fa-graduation-cap text-info me-1"></i>{% trans "碩士生 (一般 & 在職)" %}</div>
                    <small class="text-muted">{% trans "排程頻率: 每月 1 次" %}</small>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="p-3 bg-white rounded border border-start border-4 border-danger shadow-sm h-100">
                    <div class="fw-bold text-dark mb-1"><i class="fas fa-user-graduate text-danger me-1"></i>{% trans "博士一般生" %}</div>
                    <small class="text-muted">{% trans "排程頻率: 每月 1 次" %}</small>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="p-3 bg-white rounded border border-start border-4 border-warning shadow-sm h-100">
                    <div class="fw-bold text-dark mb-1"><i class="fas fa-user-tie text-warning me-1"></i>{% trans "博士在職生" %}</div>
                    <small class="text-muted">{% trans "排程頻率: 每 2 個月 1 次" %}</small>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="p-3 bg-white rounded border border-start border-4 border-secondary shadow-sm h-100">
                    <div class="fw-bold text-dark mb-1"><i class="fas fa-exchange-alt text-secondary me-1"></i>{% trans "交換生 (交換中)" %}</div>
                    <small class="text-muted">{% trans "排程狀態: 免報告" %}</small>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-info small mb-4 shadow-sm rounded-3 border-start border-4 border-info">
    <i class="fas fa-hand-pointer text-primary me-2"></i>
    <strong>{% trans "經調整後但仍未能報告者，須準備一小時之進度簡報，當週向指導教授當面報告，次週週會補報。若連續兩次應報告而未報告，將視同解除指導關係。" %}</strong>
</div>

{% if user.is_authenticated %}
<div class="alert alert-info small mb-4 shadow-sm rounded-3 border-start border-4 border-info">
    <i class="fas fa-hand-pointer text-primary me-2"></i>
    <strong>{% trans "拖曳排程微調提示：" %}</strong>{% trans "您已登入系統，可將學生列直接拖曳 (Drag & Drop) 至其他週一日期卡片中調整報告時間。系統將會在寫入資料庫前自動驗證報告頻率規則，並詳細記錄您的變更日誌。" %}
</div>
{% else %}
<div class="alert alert-secondary small mb-4 rounded-3 border-start border-4 border-secondary">
    <i class="fas fa-lock me-2"></i>
    <strong>{% trans "檢視模式：" %}</strong>{% trans "登入系統後，可拖曳學生調整報告日期。" %}
</div>
{% endif %}

<!-- 當月週會排程 (Month 1) -->
<div class="mb-5">
    <h3 class="h4 text-primary border-bottom border-primary border-2 pb-2 mb-4">
        <i class="fas fa-calendar-day me-2"></i>{{ m1_year }} 年 {{ m1_month }} 月週會排程 (當月)
    </h3>
    <div class="row g-4">
        {% for item in schedule_m1 %}
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 rounded-3 h-100 monday-drop-target" data-date="{{ item.formatted }}"
                style="transition: all 0.2s ease-in-out;">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-3">
                    <h5 class="mb-0 fw-bold">
                        <i class="fas fa-calendar-check me-2"></i>{{ item.formatted }} (星期一)
                    </h5>
                    <span class="badge bg-light text-primary fs-6">{{ item.students|length }} 位報告者</span>
                </div>
                <div class="card-body p-0">
                    {% if item.students %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" style="width: 25%;">學號</th>
                                    <th scope="col" style="width: 25%;">姓名</th>
                                    <th scope="col" style="width: 25%;">學位類別</th>
                                    <th scope="col" style="width: 25%;">身分類別</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for student in item.students %}
                                {% if user.is_authenticated %}
                                <tr draggable="true" class="draggable-student" style="cursor: grab;"
                                    data-student-id="{{ student.student_id }}" data-student-name="{{ student.name }}"
                                    data-from-date="{{ item.formatted }}">
                                    {% else %}
                                <tr>
                                    {% endif %}
                                    <td class="fw-bold">
                                        {% if user.is_authenticated %}<i
                                            class="fas fa-grip-vertical text-muted me-2"></i>{% endif %}
                                        <code>{{ student.student_id }}</code>
                                    </td>
                                    <td>{{ student.name }}</td>
                                    <td>
                                        {% if student.degree_type == '博士生' %}
                                        <span class="badge bg-danger text-white"><i
                                                class="fas fa-user-graduate me-1"></i>博士生</span>
                                        {% else %}
                                        <span class="badge bg-info text-dark"><i
                                                class="fas fa-graduation-cap me-1"></i>碩士生</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if student.student_category == '在職生' %}
                                        <span class="badge bg-warning text-dark"><i
                                                class="fas fa-user-tie me-1"></i>在職生</span>
                                        {% elif student.student_category == '交換中' %}
                                        <span class="badge bg-secondary text-white"><i
                                                class="fas fa-exchange-alt me-1"></i>交換中</span>
                                        {% else %}
                                        <span class="badge bg-success text-white"><i
                                                class="fas fa-user me-1"></i>一般生</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-center text-muted py-4 mb-0">當日無排定報告者 (可拖曳學生至此)</p>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- 下月週會排程 (Month 2) -->
<div class="mb-5">
    <h3 class="h4 text-success border-bottom border-success border-2 pb-2 mb-4">
        <i class="fas fa-calendar-week me-2"></i>{{ m2_year }} 年 {{ m2_month }} 月週會排程 (下月)
    </h3>
    <div class="row g-4">
        {% for item in schedule_m2 %}
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 rounded-3 h-100 monday-drop-target" data-date="{{ item.formatted }}"
                style="transition: all 0.2s ease-in-out;">
                <div class="card-header bg-success text-white d-flex justify-content-between align-items-center py-3">
                    <h5 class="mb-0 fw-bold">
                        <i class="fas fa-calendar-check me-2"></i>{{ item.formatted }} (星期一)
                    </h5>
                    <span class="badge bg-light text-success fs-6">{{ item.students|length }} 位報告者</span>
                </div>
                <div class="card-body p-0">
                    {% if item.students %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" style="width: 25%;">學號</th>
                                    <th scope="col" style="width: 25%;">姓名</th>
                                    <th scope="col" style="width: 25%;">學位類別</th>
                                    <th scope="col" style="width: 25%;">身分類別</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for student in item.students %}
                                {% if user.is_authenticated %}
                                <tr draggable="true" class="draggable-student" style="cursor: grab;"
                                    data-student-id="{{ student.student_id }}" data-student-name="{{ student.name }}"
                                    data-from-date="{{ item.formatted }}">
                                    {% else %}
                                <tr>
                                    {% endif %}
                                    <td class="fw-bold">
                                        {% if user.is_authenticated %}<i
                                            class="fas fa-grip-vertical text-muted me-2"></i>{% endif %}
                                        <code>{{ student.student_id }}</code>
                                    </td>
                                    <td>{{ student.name }}</td>
                                    <td>
                                        {% if student.degree_type == '博士生' %}
                                        <span class="badge bg-danger text-white"><i
                                                class="fas fa-user-graduate me-1"></i>博士生</span>
                                        {% else %}
                                        <span class="badge bg-info text-dark"><i
                                                class="fas fa-graduation-cap me-1"></i>碩士生</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if student.student_category == '在職生' %}
                                        <span class="badge bg-warning text-dark"><i
                                                class="fas fa-user-tie me-1"></i>在職生</span>
                                        {% elif student.student_category == '交換中' %}
                                        <span class="badge bg-secondary text-white"><i
                                                class="fas fa-exchange-alt me-1"></i>交換中</span>
                                        {% else %}
                                        <span class="badge bg-success text-white"><i
                                                class="fas fa-user me-1"></i>一般生</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-center text-muted py-4 mb-0">當日無排定報告者 (可拖曳學生至此)</p>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- 學生個人報告總覽與統計 -->
<div class="card shadow-sm border-0 rounded-3 mt-5">
    <div class="card-header bg-dark text-white py-3">
        <h5 class="mb-0"><i class="fas fa-tasks me-2"></i>學生個人報告統計明細 (兩月排程核對)</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>學號</th>
                        <th>姓名</th>
                        <th>身份 / 規則</th>
                        <th>排定報告日期 (Mondays)</th>
                        <th>應報告次數</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in summary_data %}
                    <tr>
                        <td class="fw-bold"><code>{{ row.student.student_id }}</code></td>
                        <td>{{ row.student.name }}</td>
                        <td><small class="fw-semibold text-secondary">{{ row.rule_desc }}</small></td>
                        <td>
                            {% if row.assigned_dates %}
                            {% for d in row.assigned_dates %}
                            <span class="badge bg-primary me-1 mb-1"><i class="far fa-calendar-alt me-1"></i>{{ d
                                }}</span>
                            {% endfor %}
                            {% else %}
                            <span class="badge bg-secondary"><i class="fas fa-minus-circle me-1"></i>免報告</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if row.total_count > 0 %}
                            <span class="badge bg-success fs-6">{{ row.total_count }} 次</span>
                            {% else %}
                            <span class="badge bg-secondary fs-6">0 次</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center py-4 text-muted">無在學學生資料</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% if user.is_authenticated %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const draggables = document.querySelectorAll('.draggable-student');
        const dropTargets = document.querySelectorAll('.monday-drop-target');

        let draggedItem = null;

        draggables.forEach(item => {
            item.addEventListener('dragstart', function (e) {
                draggedItem = this;
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/plain', JSON.stringify({
                    student_id: this.dataset.studentId,
                    student_name: this.dataset.studentName,
                    from_date: this.dataset.fromDate
                }));
                this.classList.add('table-warning');
            });

            item.addEventListener('dragend', function () {
                this.classList.remove('table-warning');
            });
        });

        dropTargets.forEach(target => {
            target.addEventListener('dragover', function (e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
                this.classList.add('border', 'border-primary', 'border-3', 'shadow');
            });

            target.addEventListener('dragleave', function () {
                this.classList.remove('border', 'border-primary', 'border-3', 'shadow');
            });

            target.addEventListener('drop', function (e) {
                e.preventDefault();
                this.classList.remove('border', 'border-primary', 'border-3', 'shadow');
                const toDate = this.dataset.date;

                if (!draggedItem) return;
                const studentId = draggedItem.dataset.studentId;
                const studentName = draggedItem.dataset.studentName;
                const fromDate = draggedItem.dataset.fromDate;

                if (fromDate === toDate) return;

                fetch('{% url "move_schedule_item" %}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: JSON.stringify({
                        student_id: studentId,
                        from_date: fromDate,
                        to_date: toDate
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert('✅ ' + data.message);
                            window.location.reload();
                        } else {
                            alert('❌ 移轉失敗: ' + data.error);
                        }
                    })
                    .catch(err => {
                        alert('❌ 發生錯誤: ' + err);
                    });
            });
        });

        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    });
</script>
{% endif %}
{% endblock %}