{% extends "base.html" %}

{% block title %}填写日报 - 工厂工时效率管理系统{% endblock %}

{% block extra_css %}
<style>
.form-section {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: #f8f9fa;
}
.form-section-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dee2e6;
}
.metrics-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.metric-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.metric-item:last-child {
    border-bottom: none;
}
.metric-value {
    font-weight: bold;
    font-size: 1.1rem;
}
.model-row, .abnormal-row {
    background: white;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}
.input-group-text {
    background-color: #e9ecef;
    font-size: 0.875rem;
}
.efficiency-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.efficiency-item {
    background: rgba(255,255,255,0.1);
    padding: 0.75rem;
    border-radius: 0.375rem;
    text-align: center;
}
.efficiency-label {
    font-size: 0.875rem;
    opacity: 0.9;
}
.efficiency-value {
    font-size: 1.25rem;
    font-weight: bold;
}
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <h2 class="mb-4">
            <i class="bi bi-file-earmark-text"></i>
            {% if report %}编辑日报{% else %}填写日报{% endif %}
        </h2>

        <!-- Step 1: Selection -->
        <div class="form-section">
            <div class="form-section-title">Step 1: 选择日期和部门</div>
            <div class="row">
                <div class="col-md-4">
                    <label for="reportDate" class="form-label">日期 *</label>
                    <input type="date" class="form-control" id="reportDate"
                           {% if report %}value="{{ report.report_date.strftime('%Y-%m-%d') }}"{% endif %}
                           {% if report %}disabled{% endif %} required>
                </div>
                <div class="col-md-4">
                    <label for="department" class="form-label">部门 *</label>
                    <select class="form-select" id="department"
                            {% if report %}disabled{% endif %} required>
                        <option value="">请选择部门</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="line" class="form-label">线别 *</label>
                    <select class="form-select" id="line"
                            {% if report %}disabled{% endif %} required>
                        <option value="">请先选择部门</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Step 2: Input Section -->
        <div class="form-section">
            <div class="form-section-title">Step 2: 投入工时</div>
            <div class="row">
                <div class="col-md-6">
                    <h6 class="text-muted mb-2">直接人力</h6>
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <label class="form-label small">应出勤直接人力</label>
                            <input type="number" class="form-control form-control-sm" id="expectedDirect" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">实际出勤直接人力 *</label>
                            <input type="number" class="form-control form-control-sm" id="actualDirect" min="0"
                                   {% if report %}value="{{ report.actual_direct_attendance }}"{% endif %} required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label small">直接加班时数</label>
                            <input type="number" class="form-control form-control-sm" id="directOvertime" step="0.5" min="0" value="0"
                                   {% if report %}value="{{ report.direct_overtime_hours }}"{% endif %}>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">直接调整时数</label>
                            <input type="number" class="form-control form-control-sm" id="directAdjustment" step="0.5" min="0" value="0"
                                   {% if report %}value="{{ report.direct_adjustment_hours }}"{% endif %}>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h6 class="text-muted mb-2">间接人力</h6>
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <label class="form-label small">应出勤间接人力</label>
                            <input type="number" class="form-control form-control-sm" id="expectedIndirect" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">实际出勤间接人力 *</label>
                            <input type="number" class="form-control form-control-sm" id="actualIndirect" min="0"
                                   {% if report %}value="{{ report.actual_indirect_attendance }}"{% endif %} required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label small">间接加班时数</label>
                            <input type="number" class="form-control form-control-sm" id="indirectOvertime" step="0.5" min="0" value="0"
                                   {% if report %}value="{{ report.indirect_overtime_hours }}"{% endif %}>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">间接调整时数</label>
                            <input type="number" class="form-control form-control-sm" id="indirectAdjustment" step="0.5" min="0" value="0"
                                   {% if report %}value="{{ report.indirect_adjustment_hours }}"{% endif %}>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-4">
                    <label class="form-label small">正常工时</label>
                    <input type="number" class="form-control" id="normalHours" readonly>
                </div>
            </div>
        </div>

        <!-- Step 3: Output Section -->
        <div class="form-section">
            <div class="form-section-title">Step 3: 产出工时（按机型填写）</div>
            <div id="outputContainer">
                <!-- Dynamic model rows will be added here -->
            </div>
            <button type="button" class="btn btn-outline-primary btn-sm" id="addModelBtn">
                <i class="bi bi-plus-lg"></i> 添加机型
            </button>
        </div>

        <!-- Step 4: Abnormal Section -->
        <div class="form-section">
            <div class="form-section-title">Step 4: 异常工时</div>
            <div id="abnormalContainer">
                <!-- Dynamic abnormal rows will be added here -->
            </div>
            <button type="button" class="btn btn-outline-warning btn-sm" id="addAbnormalBtn">
                <i class="bi bi-plus-lg"></i> 添加异常
            </button>
        </div>

        <!-- Submit Button -->
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-primary" id="submitBtn">
                <i class="bi bi-check-lg"></i> 提交日报
            </button>
            <a href="{{ url_for('daily_report.list_reports') }}" class="btn btn-secondary">
                <i class="bi bi-x-lg"></i> 取消
            </a>
        </div>
    </div>

    <div class="col-lg-4">
        <!-- Real-time Metrics Display -->
        <div class="metrics-card">
            <h5 class="mb-3"><i class="bi bi-calculator"></i> 实时计算</h5>

            <div class="efficiency-display mb-3">
                <div class="efficiency-item">
                    <div class="efficiency-label">直接工时效率</div>
                    <div class="efficiency-value" id="displayDirectEfficiency">0.00%</div>
                </div>
                <div class="efficiency-item">
                    <div class="efficiency-label">间接工时效率</div>
                    <div class="efficiency-value" id="displayIndirectEfficiency">0.00%</div>
                </div>
                <div class="efficiency-item">
                    <div class="efficiency-label">总工时效率</div>
                    <div class="efficiency-value" id="displayOverallEfficiency">0.00%</div>
                </div>
            </div>

            <div class="metric-item">
                <span>直接投入工时</span>
                <span class="metric-value" id="displayDirectInput">0.00</span>
            </div>
            <div class="metric-item">
                <span>间接投入工时</span>
                <span class="metric-value" id="displayIndirectInput">0.00</span>
            </div>
            <div class="metric-item">
                <span>总投入工时</span>
                <span class="metric-value" id="displayTotalInput">0.00</span>
            </div>
            <div class="metric-item">
                <span>直接产出工时</span>
                <span class="metric-value" id="displayDirectOutput">0.00</span>
            </div>
            <div class="metric-item">
                <span>间接产出工时</span>
                <span class="metric-value" id="displayIndirectOutput">0.00</span>
            </div>
            <div class="metric-item">
                <span>总产出工时</span>
                <span class="metric-value" id="displayTotalOutput">0.00</span>
            </div>
            <div class="metric-item">
                <span>直接异常工时</span>
                <span class="metric-value" id="displayDirectAbnormal">0.00</span>
            </div>
            <div class="metric-item">
                <span>间接异常工时</span>
                <span class="metric-value" id="displayIndirectAbnormal">0.00</span>
            </div>
            <div class="metric-item">
                <span>总异常工时</span>
                <span class="metric-value" id="displayTotalAbnormal">0.00</span>
            </div>
            <div class="metric-item">
                <span>异常工时率</span>
                <span class="metric-value" id="displayAbnormalRate">0.00%</span>
            </div>
        </div>

        <!-- Tips -->
        <div class="card">
            <div class="card-body">
                <h6 class="card-title"><i class="bi bi-info-circle"></i> 计算公式</h6>
                <ul class="small text-muted mb-0">
                    <li><strong>直接产出工时</strong> = Σ(数量 × 直接ST)</li>
                    <li><strong>间接产出工时</strong> = Σ(数量 × 间接ST)</li>
                    <li><strong>直接投入工时</strong> = 直接出勤 × 正常工时 + 直接加班 - 直接调整</li>
                    <li><strong>间接投入工时</strong> = 间接出勤 × 正常工时 + 间接加班 - 间接调整</li>
                    <li><strong>直接效率</strong> = 直接产出 / 直接投入 × 100%</li>
                    <li><strong>间接效率</strong> = 间接产出 / 间接投入 × 100%</li>
                    <li><strong>总效率</strong> = 总产出 / 总投入 × 100%</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Global variables
let availableModels = {};
let abnormalTypes = [];

// Load existing data if editing
{% if report %}
const reportId = {{ report.id }};
const existingOutputDetails = [
    {% for od in output_details %}
    {
        product_series: '{{ od.product_series }}',
        model: '{{ od.model }}',
        output_quantity: {{ od.output_quantity }},
        direct_st: {{ od.direct_st }},
        indirect_st: {{ od.indirect_st }},
        direct_output_hours: {{ od.direct_output_hours }},
        indirect_output_hours: {{ od.indirect_output_hours }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
];
const existingAbnormalDetails = [
    {% for ad in abnormal_details %}
    {
        abnormal_type: '{{ ad.abnormal_type }}',
        direct_hours: {{ ad.direct_hours }},
        indirect_hours: {{ ad.indirect_hours }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
];
{% else %}
const reportId = null;
const existingOutputDetails = [];
const existingAbnormalDetails = [];
{% endif %}

// DOM elements
const reportDateEl = document.getElementById('reportDate');
const departmentEl = document.getElementById('department');
const lineEl = document.getElementById('line');

// Set default date
{% if not report %}
reportDateEl.valueAsDate = new Date();
{% endif %}

// Load departments
loadDepartments();

// Event listeners
departmentEl.addEventListener('change', loadLines);
lineEl.addEventListener('change', loadLineConfig);

// Add event listeners for real-time calculation
['actualDirect', 'actualIndirect', 'directOvertime', 'directAdjustment', 'indirectOvertime', 'indirectAdjustment'].forEach(id => {
    document.getElementById(id).addEventListener('input', calculateMetrics);
});

// Add model/abnormal buttons
document.getElementById('addModelBtn').addEventListener('click', function() {
    // Check if a line has been selected
    if (!lineEl.value || Object.keys(availableModels).length === 0) {
        alert('请先选择部门和线别');
        return;
    }
    addModelRow();
});
document.getElementById('addAbnormalBtn').addEventListener('click', function() {
    // Check if abnormal types have been loaded
    if (abnormalTypes.length === 0) {
        alert('请先选择部门和线别');
        return;
    }
    addAbnormalRow();
});

// Submit button
document.getElementById('submitBtn').addEventListener('click', submitReport);

// Functions
async function loadDepartments() {
    try {
        const response = await fetch('/api/departments');
        const result = await response.json();
        if (result.success) {
            result.data.forEach(dept => {
                const option = document.createElement('option');
                option.value = dept;
                option.textContent = dept;
                departmentEl.appendChild(option);
            });
            {% if report %}
            departmentEl.value = '{{ report.department }}';
            loadLines();
            {% endif %}
        }
    } catch (error) {
        console.error('Error loading departments:', error);
    }
}

async function loadLines() {
    const department = departmentEl.value;
    lineEl.innerHTML = '<option value="">请选择线别</option>';
    availableModels = {};

    if (!department) return;

    try {
        const response = await fetch(`/api/lines?department=${department}`);
        const result = await response.json();
        if (result.success) {
            result.data.forEach(line => {
                const option = document.createElement('option');
                option.value = line.line;
                option.textContent = line.line;
                lineEl.appendChild(option);
            });
            {% if report %}
            lineEl.value = '{{ report.line }}';
            loadLineConfig();
            {% endif %}
        }
    } catch (error) {
        console.error('Error loading lines:', error);
    }
}

async function loadLineConfig() {
    const department = departmentEl.value;
    const line = lineEl.value;

    if (!department || !line) return;

    // Load config
    try {
        const response = await fetch(`/api/config-for-line?dept=${department}&line=${line}`);
        const result = await response.json();

        if (result.success) {
            document.getElementById('expectedDirect').value = result.data.expected_direct_manpower;
            document.getElementById('expectedIndirect').value = result.data.expected_indirect_manpower;
            document.getElementById('normalHours').value = result.data.normal_working_hours;

            // Auto-fill actual with expected if empty
            if (!document.getElementById('actualDirect').value) {
                document.getElementById('actualDirect').value = result.data.expected_direct_manpower;
            }
            if (!document.getElementById('actualIndirect').value) {
                document.getElementById('actualIndirect').value = result.data.expected_indirect_manpower;
            }

            calculateMetrics();
        }
    } catch (error) {
        console.error('Error loading config:', error);
    }

    // Load models
    try {
        const response = await fetch(`/api/models-for-line?line=${line}`);
        const result = await response.json();
        console.log('Models API response:', result);
        if (result.success) {
            availableModels = result.data;
            console.log('Loaded models:', availableModels);
            console.log('Available series keys:', Object.keys(availableModels));
        } else {
            console.error('API returned error:', result.error);
        }
    } catch (error) {
        console.error('Error loading models:', error);
    }

    // Load abnormal types
    try {
        const response = await fetch('/api/abnormal-types');
        const result = await response.json();
        if (result.success) {
            abnormalTypes = result.data;
        }
    } catch (error) {
        console.error('Error loading abnormal types:', error);
    }

    // Clear existing rows and add new ones
    document.getElementById('outputContainer').innerHTML = '';
    document.getElementById('abnormalContainer').innerHTML = '';

    // Load existing data if editing
    if (existingOutputDetails.length > 0 || existingAbnormalDetails.length > 0) {
        loadExistingData();
    } else {
        addModelRow();
        addAbnormalRow();
    }
}

function loadExistingData() {
    document.getElementById('outputContainer').innerHTML = '';
    document.getElementById('abnormalContainer').innerHTML = '';

    existingOutputDetails.forEach(od => addModelRow(od));
    existingAbnormalDetails.forEach(ad => addAbnormalRow(ad));

    if (existingOutputDetails.length === 0) addModelRow();
    if (existingAbnormalDetails.length === 0) addAbnormalRow();

    calculateMetrics();
}

function addModelRow(existingData = null) {
    const container = document.getElementById('outputContainer');

    // Check if we've reached the 10-row limit (only when adding new rows, not loading existing data)
    if (!existingData) {
        const currentRows = container.querySelectorAll('.model-row').length;
        if (currentRows >= 10) {
            alert('最多只能添加10条机型记录');
            return;
        }
    }

    const rowId = `model-${Date.now()}`;

    const rowHtml = `
        <div class="model-row" id="${rowId}">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label small">产品系列</label>
                    <select class="form-select form-select-sm product-series" data-row-id="${rowId}">
                        <option value="">请选择系列</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small">机型</label>
                    <select class="form-select form-select-sm model-select" data-row-id="${rowId}">
                        <option value="">请先选择系列</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">数量</label>
                    <input type="number" class="form-control form-control-sm quantity-input" data-row-id="${rowId}"
                           min="0" value="${existingData ? existingData.output_quantity : ''}" required>
                </div>
                <div class="col-md-2 text-center">
                    <label class="form-label small">直接工时</label>
                    <input type="text" class="form-control form-control-sm direct-output-display" data-row-id="${rowId}"
                           readonly value="${existingData && existingData.direct_output_hours ? existingData.direct_output_hours.toFixed(2) : ''}">
                </div>
                <div class="col-md-2 text-center">
                    <label class="form-label small">间接工时</label>
                    <input type="text" class="form-control form-control-sm indirect-output-display" data-row-id="${rowId}"
                           readonly value="${existingData && existingData.indirect_output_hours ? existingData.indirect_output_hours.toFixed(2) : ''}">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-outline-danger btn-sm w-100 remove-model-btn" data-row-id="${rowId}">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', rowHtml);

    const row = document.getElementById(rowId);

    // Populate product series
    const seriesSelect = row.querySelector('.product-series');
    if (Object.keys(availableModels).length > 0) {
        Object.keys(availableModels).forEach(series => {
            const option = document.createElement('option');
            option.value = series;
            option.textContent = series;
            if (existingData && existingData.product_series === series) {
                option.selected = true;
            }
            seriesSelect.appendChild(option);
        });
    } else {
        // If no models available yet, show a message
        const option = document.createElement('option');
        option.value = '';
        option.textContent = '请先选择线别';
        option.disabled = true;
        option.selected = true;
        seriesSelect.appendChild(option);
    }

    // If existing data, populate models
    if (existingData) {
        populateModels(rowId, existingData.product_series, existingData.model);
    }

    // Event listeners
    seriesSelect.addEventListener('change', function() {
        const selectedSeries = this.value;
        console.log('Series changed to:', selectedSeries);
        console.log('Row ID:', rowId);
        populateModels(rowId, selectedSeries);
    });
    row.querySelector('.model-select').addEventListener('change', (e) => onModelSelect(rowId, e.target.value));
    row.querySelector('.quantity-input').addEventListener('input', () => calculateMetrics());
    row.querySelector('.remove-model-btn').addEventListener('click', () => {
        document.getElementById(rowId).remove();
        calculateMetrics();
    });
}

function populateModels(rowId, series, selectedModel = null) {
    const row = document.getElementById(rowId);
    const modelSelect = row.querySelector('.model-select');
    modelSelect.innerHTML = '<option value="">请选择机型</option>';

    console.log('populateModels called:', { rowId, series, selectedModel, availableModels });

    if (series && availableModels && availableModels[series]) {
        console.log('Found models for series:', series, availableModels[series]);
        availableModels[series].forEach(model => {
            const option = document.createElement('option');
            option.value = model.model;
            option.textContent = `${model.model} (直接ST: ${model.direct_st.toFixed(2)}, 间接ST: ${model.indirect_st.toFixed(2)})`;
            option.dataset.directSt = model.direct_st;
            option.dataset.indirectSt = model.indirect_st;
            if (selectedModel && model.model === selectedModel) {
                option.selected = true;
            }
            modelSelect.appendChild(option);
        });
    } else {
        console.log('No models found for series:', series);
        console.log('Available series:', Object.keys(availableModels || {}));
    }
}

function onModelSelect(rowId, modelValue) {
    const row = document.getElementById(rowId);
    const modelSelect = row.querySelector('.model-select');
    const selectedOption = modelSelect.selectedOptions[0];

    if (selectedOption && selectedOption.dataset.directSt) {
        const directSt = parseFloat(selectedOption.dataset.directSt);
        const indirectSt = parseFloat(selectedOption.dataset.indirectSt);

        // Store ST values on the correct display elements
        row.querySelector('.direct-output-display').dataset.directSt = directSt;
        row.querySelector('.indirect-output-display').dataset.indirectSt = indirectSt;

        console.log('Model selected:', { modelValue, directSt, indirectSt });

        // Trigger calculation if quantity has value
        calculateMetrics();
    }
}

function addAbnormalRow(existingData = null) {
    const container = document.getElementById('abnormalContainer');
    const rowId = `abnormal-${Date.now()}`;

    const rowHtml = `
        <div class="abnormal-row mb-2 p-2 border rounded" id="${rowId}">
            <div class="row g-2">
                <div class="col-md-3">
                    <label class="form-label small mb-1">异常类型</label>
                    <select class="form-select form-select-sm abnormal-type-select" data-row-id="${rowId}" required>
                        <option value="">请选择</option>
                        ${abnormalTypes.map(at => `
                            <option value="${at.name}">${at.name}</option>
                        `).join('')}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">直接工时</label>
                    <input type="number" class="form-control form-control-sm abnormal-direct-input" data-row-id="${rowId}"
                           min="0" step="0.5" value="${existingData ? existingData.direct_hours : ''}" placeholder="0">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">间接工时</label>
                    <input type="number" class="form-control form-control-sm abnormal-indirect-input" data-row-id="${rowId}"
                           min="0" step="0.5" value="${existingData ? existingData.indirect_hours : ''}" placeholder="0">
                </div>
                <div class="col-md-4">
                    <label class="form-label small mb-1">异常描述</label>
                    <input type="text" class="form-control form-control-sm abnormal-description-input" data-row-id="${rowId}"
                           placeholder="请描述具体异常情况" value="${existingData && existingData.description ? existingData.description : ''}">
                </div>
                <div class="col-md-1">
                    <label class="form-label small mb-1">&nbsp;</label>
                    <button type="button" class="btn btn-outline-danger btn-sm w-100 remove-abnormal-btn" data-row-id="${rowId}">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', rowHtml);

    const row = document.getElementById(rowId);
    row.querySelector('.abnormal-type-select').value = existingData ? existingData.abnormal_type : '';

    // Set existing values if editing
    if (existingData) {
        row.querySelector('.abnormal-direct-input').value = existingData.direct_hours || '';
        row.querySelector('.abnormal-indirect-input').value = existingData.indirect_hours || '';
        row.querySelector('.abnormal-description-input').value = existingData.description || '';
    }

    // Add event listeners
    row.querySelectorAll('input').forEach(input => {
        input.addEventListener('input', calculateMetrics);
    });
    row.querySelector('.remove-abnormal-btn').addEventListener('click', () => {
        document.getElementById(rowId).remove();
        calculateMetrics();
    });
}

function calculateMetrics() {
    // Get input values
    const directAttendance = parseFloat(document.getElementById('actualDirect').value) || 0;
    const indirectAttendance = parseFloat(document.getElementById('actualIndirect').value) || 0;
    const normalHours = parseFloat(document.getElementById('normalHours').value) || 0;
    const directOvertime = parseFloat(document.getElementById('directOvertime').value) || 0;
    const directAdjustment = parseFloat(document.getElementById('directAdjustment').value) || 0;
    const indirectOvertime = parseFloat(document.getElementById('indirectOvertime').value) || 0;
    const indirectAdjustment = parseFloat(document.getElementById('indirectAdjustment').value) || 0;

    // Calculate input hours
    const directInputHours = (directAttendance * normalHours) + directOvertime - directAdjustment;
    const indirectInputHours = (indirectAttendance * normalHours) + indirectOvertime - indirectAdjustment;
    const totalInputHours = directInputHours + indirectInputHours;

    // Calculate output hours
    let directOutputHours = 0;
    let indirectOutputHours = 0;
    document.querySelectorAll('.model-row').forEach(row => {
        const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;
        const directSt = parseFloat(row.querySelector('.direct-output-display').dataset.directSt) || 0;
        const indirectSt = parseFloat(row.querySelector('.indirect-output-display').dataset.indirectSt) || 0;

        const rowDirectOutput = quantity * directSt;
        const rowIndirectOutput = quantity * indirectSt;
        directOutputHours += rowDirectOutput;
        indirectOutputHours += rowIndirectOutput;

        // Update display
        row.querySelector('.direct-output-display').value = rowDirectOutput > 0 ? rowDirectOutput.toFixed(2) : '';
        row.querySelector('.indirect-output-display').value = rowIndirectOutput > 0 ? rowIndirectOutput.toFixed(2) : '';
    });

    const totalOutputHours = directOutputHours + indirectOutputHours;

    // Calculate abnormal hours
    let directAbnormalHours = 0;
    let indirectAbnormalHours = 0;
    document.querySelectorAll('.abnormal-row').forEach(row => {
        directAbnormalHours += parseFloat(row.querySelector('.abnormal-direct-input').value) || 0;
        indirectAbnormalHours += parseFloat(row.querySelector('.abnormal-indirect-input').value) || 0;
    });

    const totalAbnormalHours = directAbnormalHours + indirectAbnormalHours;

    // Calculate efficiencies
    const directEfficiency = directInputHours > 0 ? (directOutputHours / directInputHours * 100) : 0;
    const indirectEfficiency = indirectInputHours > 0 ? (indirectOutputHours / indirectInputHours * 100) : 0;
    const overallEfficiency = totalInputHours > 0 ? (totalOutputHours / totalInputHours * 100) : 0;
    const abnormalRate = totalInputHours > 0 ? (totalAbnormalHours / totalInputHours * 100) : 0;

    // Update display
    document.getElementById('displayDirectInput').textContent = directInputHours.toFixed(2);
    document.getElementById('displayIndirectInput').textContent = indirectInputHours.toFixed(2);
    document.getElementById('displayTotalInput').textContent = totalInputHours.toFixed(2);
    document.getElementById('displayDirectOutput').textContent = directOutputHours.toFixed(2);
    document.getElementById('displayIndirectOutput').textContent = indirectOutputHours.toFixed(2);
    document.getElementById('displayTotalOutput').textContent = totalOutputHours.toFixed(2);
    document.getElementById('displayDirectAbnormal').textContent = directAbnormalHours.toFixed(2);
    document.getElementById('displayIndirectAbnormal').textContent = indirectAbnormalHours.toFixed(2);
    document.getElementById('displayTotalAbnormal').textContent = totalAbnormalHours.toFixed(2);
    document.getElementById('displayDirectEfficiency').textContent = directEfficiency.toFixed(2) + '%';
    document.getElementById('displayIndirectEfficiency').textContent = indirectEfficiency.toFixed(2) + '%';
    document.getElementById('displayOverallEfficiency').textContent = overallEfficiency.toFixed(2) + '%';
    document.getElementById('displayAbnormalRate').textContent = abnormalRate.toFixed(2) + '%';

    return {
        directInputHours, indirectInputHours, totalInputHours,
        directOutputHours, indirectOutputHours, totalOutputHours,
        directAbnormalHours, indirectAbnormalHours, totalAbnormalHours,
        directEfficiency, indirectEfficiency, overallEfficiency, abnormalRate
    };
}

async function submitReport() {
    if (!reportDateEl.value || !departmentEl.value || !lineEl.value) {
        alert('请填写完整的日期、部门和线别');
        return;
    }

    const metrics = calculateMetrics();

    // Collect output details
    const outputDetails = [];
    document.querySelectorAll('.model-row').forEach(row => {
        const series = row.querySelector('.product-series').value;
        const model = row.querySelector('.model-select').value;
        const quantity = parseInt(row.querySelector('.quantity-input').value) || 0;
        const directSt = parseFloat(row.querySelector('.direct-output-display').dataset.directSt) || 0;
        const indirectSt = parseFloat(row.querySelector('.direct-output-display').dataset.indirectSt) || 0;
        const directOutputHours = parseFloat(row.querySelector('.direct-output-display').value) || 0;
        const indirectOutputHours = parseFloat(row.querySelector('.indirect-output-display').value) || 0;

        if (model && quantity > 0) {
            outputDetails.push({
                product_series: series,
                model: model,
                output_quantity: quantity,
                direct_st: directSt,
                indirect_st: indirectSt,
                direct_output_hours: directOutputHours,
                indirect_output_hours: indirectOutputHours
            });
        }
    });

    // Collect abnormal details
    const abnormalDetails = [];
    document.querySelectorAll('.abnormal-row').forEach(row => {
        const type = row.querySelector('.abnormal-type-select').value;
        const directHours = parseFloat(row.querySelector('.abnormal-direct-input').value) || 0;
        const indirectHours = parseFloat(row.querySelector('.abnormal-indirect-input').value) || 0;
        const description = row.querySelector('.abnormal-description-input').value || '';

        if (type && (directHours > 0 || indirectHours > 0)) {
            abnormalDetails.push({
                abnormal_type: type,
                direct_hours: directHours,
                indirect_hours: indirectHours,
                description: description
            });
        }
    });

    const data = {
        id: reportId,
        report_date: reportDateEl.value,
        department: departmentEl.value,
        line: lineEl.value,
        expected_direct_manpower: parseInt(document.getElementById('expectedDirect').value) || 0,
        expected_indirect_manpower: parseInt(document.getElementById('expectedIndirect').value) || 0,
        actual_direct_attendance: parseInt(document.getElementById('actualDirect').value) || 0,
        actual_indirect_attendance: parseInt(document.getElementById('actualIndirect').value) || 0,
        direct_overtime_hours: parseFloat(document.getElementById('directOvertime').value) || 0,
        indirect_overtime_hours: parseFloat(document.getElementById('indirectOvertime').value) || 0,
        direct_adjustment_hours: parseFloat(document.getElementById('directAdjustment').value) || 0,
        indirect_adjustment_hours: parseFloat(document.getElementById('indirectAdjustment').value) || 0,
        direct_input_hours: metrics.directInputHours,
        indirect_input_hours: metrics.indirectInputHours,
        total_input_hours: metrics.totalInputHours,
        direct_output_hours: metrics.directOutputHours,
        indirect_output_hours: metrics.indirectOutputHours,
        total_output_hours: metrics.totalOutputHours,
        direct_abnormal_hours: metrics.directAbnormalHours,
        indirect_abnormal_hours: metrics.indirectAbnormalHours,
        total_abnormal_hours: metrics.totalAbnormalHours,
        direct_efficiency: metrics.directEfficiency,
        indirect_efficiency: metrics.indirectEfficiency,
        overall_efficiency: metrics.overallEfficiency,
        abnormal_hours_rate: metrics.abnormalRate,
        created_by: 'current_user', // Will be set on backend
        output_details: outputDetails,
        abnormal_details: abnormalDetails
    };

    try {
        const response = await fetch('/report/api/save', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        const result = await response.json();

        if (result.success) {
            alert('日报保存成功！');
            window.location.href = "{{ url_for('daily_report.list_reports') }}";
        } else {
            alert('保存失败：' + (result.error || '未知错误'));
        }
    } catch (error) {
        console.error('Error submitting report:', error);
        alert('保存失败，请重试');
    }
}
</script>
{% endblock %}