{% 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>

{% 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 %}
                                            <tr {% if user.is_authenticated %}draggable="true" class="draggable-student" style="cursor: grab;" data-student-id="{{ student.student_id }}" data-student-name="{{ student.name }}" data-from-date="{{ item.formatted }}"{% 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 %}
                                            <tr {% if user.is_authenticated %}draggable="true" class="draggable-student" style="cursor: grab;" data-student-id="{{ student.student_id }}" data-student-name="{{ student.name }}" data-from-date="{{ item.formatted }}"{% 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 %}