{% extends "_base.html" %}

{% block title %}TMTT 印字腳型不良分析{% endblock %}

{% block head_extra %}
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<style>
:root {
    --bg: #f0f2f5;
    --card-bg: #ffffff;
    --primary: #667eea;
    --primary-light: #818cf8;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --text: #1f2937;
    --text-secondary: #6b7280;
    --border: #e5e7eb;
    --print-color: #ef4444;
    --lead-color: #f59e0b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text); }

.page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; padding: 20px 32px;
}
.page-header h1 { font-size: 22px; font-weight: 600; }
.page-header .subtitle { font-size: 13px; opacity: 0.8; margin-top: 4px; }

.container { max-width: 1600px; margin: 0 auto; padding: 20px 24px; }

/* Filter Bar */
.filter-bar {
    background: var(--card-bg); border-radius: 10px; padding: 16px 20px;
    display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.filter-bar label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.filter-bar input[type="date"] {
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 13px; color: var(--text);
}
.btn-query {
    padding: 8px 24px; background: var(--primary); color: white; border: none;
    border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.btn-query:hover { background: var(--primary-light); }
.btn-query:disabled { opacity: 0.5; cursor: not-allowed; }

/* KPI Cards */
.kpi-row {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px;
}
.kpi-card {
    background: var(--card-bg); border-radius: 10px; padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-left: 4px solid var(--primary);
}
.kpi-card.print { border-left-color: var(--print-color); }
.kpi-card.lead { border-left-color: var(--lead-color); }
.kpi-card .kpi-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.kpi-card .kpi-value { font-size: 22px; font-weight: 700; }
.kpi-card .kpi-unit { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }

/* Chart Grid */
.chart-grid {
    display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px;
}
.chart-card {
    background: var(--card-bg); border-radius: 10px; padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.chart-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.chart-container { height: 380px; }

/* Detail Section */
.detail-section {
    background: var(--card-bg); border-radius: 10px; padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.detail-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.detail-header h3 { font-size: 14px; font-weight: 600; }
.detail-actions { display: flex; gap: 8px; align-items: center; }

.filter-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #eff6ff; color: #2563eb; padding: 4px 10px;
    border-radius: 16px; font-size: 12px;
}
.filter-tag button {
    background: none; border: none; color: #2563eb; cursor: pointer;
    font-size: 14px; line-height: 1;
}

.btn-export {
    padding: 6px 14px; background: var(--success); color: white; border: none;
    border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.btn-export:hover { opacity: 0.9; }

.btn-clear {
    padding: 6px 14px; background: #f3f4f6; color: var(--text-secondary); border: none;
    border-radius: 6px; font-size: 12px; cursor: pointer;
}
.btn-clear:hover { background: #e5e7eb; }

/* Table */
.detail-table-wrap { overflow-x: auto; max-height: 500px; overflow-y: auto; }
.detail-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.detail-table th {
    background: #f8fafc; position: sticky; top: 0; z-index: 1;
    padding: 8px 10px; text-align: left; font-weight: 600;
    border-bottom: 2px solid var(--border); white-space: nowrap; cursor: pointer;
}
.detail-table th:hover { background: #f0f2f5; }
.detail-table td {
    padding: 6px 10px; border-bottom: 1px solid #f3f4f6; white-space: nowrap;
}
.detail-table tr:hover td { background: #f8fafc; }

.sort-indicator { font-size: 10px; margin-left: 4px; color: var(--text-secondary); }

/* Empty state */
.empty-state {
    text-align: center; padding: 60px 20px; color: var(--text-secondary);
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* Responsive */
@media (max-width: 1200px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .filter-bar { flex-wrap: wrap; }
}
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>TMTT 印字與腳型不良分析</h1>
    <div class="subtitle">分析 TMTT 站印字/腳型不良率，按 WORKFLOW、PACKAGE、TYPE、TMTT機台、MOLD機台 維度</div>
</div>

<div class="container">
    <!-- Filter Bar -->
    <div class="filter-bar">
        <label>起始日期</label>
        <input type="date" id="startDate">
        <label>結束日期</label>
        <input type="date" id="endDate">
        <button class="btn-query" id="btnQuery" onclick="executeQuery()">查詢</button>
    </div>

    <!-- KPI Cards -->
    <div class="kpi-row" id="kpiRow" style="display:none;">
        <div class="kpi-card">
            <div class="kpi-label">投入數</div>
            <div class="kpi-value" id="kpiInput">-</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-label">LOT 數</div>
            <div class="kpi-value" id="kpiLots">-</div>
        </div>
        <div class="kpi-card print">
            <div class="kpi-label">印字不良數</div>
            <div class="kpi-value" id="kpiPrintQty">-</div>
        </div>
        <div class="kpi-card print">
            <div class="kpi-label">印字不良率</div>
            <div class="kpi-value" id="kpiPrintRate">-<span class="kpi-unit">%</span></div>
        </div>
        <div class="kpi-card lead">
            <div class="kpi-label">腳型不良數</div>
            <div class="kpi-value" id="kpiLeadQty">-</div>
        </div>
        <div class="kpi-card lead">
            <div class="kpi-label">腳型不良率</div>
            <div class="kpi-value" id="kpiLeadRate">-<span class="kpi-unit">%</span></div>
        </div>
    </div>

    <!-- Charts -->
    <div class="chart-grid" id="chartGrid" style="display:none;">
        <div class="chart-card">
            <h3>依 WORKFLOW</h3>
            <div class="chart-container" id="chartWorkflow"></div>
        </div>
        <div class="chart-card">
            <h3>依 PACKAGE</h3>
            <div class="chart-container" id="chartPackage"></div>
        </div>
        <div class="chart-card">
            <h3>依 TYPE</h3>
            <div class="chart-container" id="chartType"></div>
        </div>
        <div class="chart-card">
            <h3>依 TMTT 機台</h3>
            <div class="chart-container" id="chartTmtt"></div>
        </div>
        <div class="chart-card">
            <h3>依 MOLD 機台</h3>
            <div class="chart-container" id="chartMold"></div>
        </div>
        <div class="chart-card">
            <h3>每日印字不良率趨勢</h3>
            <div class="chart-container" id="chartPrintTrend"></div>
        </div>
        <div class="chart-card">
            <h3>每日腳型不良率趨勢</h3>
            <div class="chart-container" id="chartLeadTrend"></div>
        </div>
    </div>

    <!-- Detail Table -->
    <div class="detail-section" id="detailSection" style="display:none;">
        <div class="detail-header">
            <h3>明細清單 <span id="detailCount" style="font-weight:400; color:var(--text-secondary);"></span></h3>
            <div class="detail-actions">
                <span id="filterTag" style="display:none;" class="filter-tag">
                    <span id="filterLabel"></span>
                    <button onclick="clearFilter()">&times;</button>
                </span>
                <button class="btn-clear" onclick="clearFilter()" id="btnClear" style="display:none;">清除篩選</button>
                <button class="btn-export" onclick="exportCsv()">匯出 CSV</button>
            </div>
        </div>
        <div class="detail-table-wrap">
            <table class="detail-table" id="detailTable">
                <thead>
                    <tr>
                        <th onclick="sortTable('CONTAINERNAME')">LOT ID <span class="sort-indicator" id="sort_CONTAINERNAME"></span></th>
                        <th onclick="sortTable('PJ_TYPE')">TYPE <span class="sort-indicator" id="sort_PJ_TYPE"></span></th>
                        <th onclick="sortTable('PRODUCTLINENAME')">PACKAGE <span class="sort-indicator" id="sort_PRODUCTLINENAME"></span></th>
                        <th onclick="sortTable('WORKFLOW')">WORKFLOW <span class="sort-indicator" id="sort_WORKFLOW"></span></th>
                        <th onclick="sortTable('FINISHEDRUNCARD')">完工流水碼 <span class="sort-indicator" id="sort_FINISHEDRUNCARD"></span></th>
                        <th onclick="sortTable('TMTT_EQUIPMENTNAME')">TMTT設備 <span class="sort-indicator" id="sort_TMTT_EQUIPMENTNAME"></span></th>
                        <th onclick="sortTable('MOLD_EQUIPMENTNAME')">MOLD設備 <span class="sort-indicator" id="sort_MOLD_EQUIPMENTNAME"></span></th>
                        <th onclick="sortTable('INPUT_QTY')">投入數 <span class="sort-indicator" id="sort_INPUT_QTY"></span></th>
                        <th onclick="sortTable('PRINT_DEFECT_QTY')">印字不良 <span class="sort-indicator" id="sort_PRINT_DEFECT_QTY"></span></th>
                        <th onclick="sortTable('PRINT_DEFECT_RATE')">印字不良率(%) <span class="sort-indicator" id="sort_PRINT_DEFECT_RATE"></span></th>
                        <th onclick="sortTable('LEAD_DEFECT_QTY')">腳型不良 <span class="sort-indicator" id="sort_LEAD_DEFECT_QTY"></span></th>
                        <th onclick="sortTable('LEAD_DEFECT_RATE')">腳型不良率(%) <span class="sort-indicator" id="sort_LEAD_DEFECT_RATE"></span></th>
                    </tr>
                </thead>
                <tbody id="detailBody"></tbody>
            </table>
        </div>
    </div>

    <!-- Empty State -->
    <div class="empty-state" id="emptyState">
        <div class="icon">&#128202;</div>
        <p>請選擇日期範圍後點擊「查詢」</p>
    </div>
</div>
{% endblock %}

{% block scripts %}
    {% set tmtt_defect_js = frontend_asset('tmtt-defect.js') %}
    <script type="module" src="{{ tmtt_defect_js }}"></script>
{% endblock %}

