@extends('layouts.app')

@section('title', '导入数据 - 病例回访提醒系统')

@section('content')
<div class="page-header">
    <h1 class="page-title">导入患者数据</h1>
    <p class="page-subtitle">支持 Excel (.xlsx) 和 CSV 格式的文件导入</p>
</div>

<!-- .xls 格式提示 -->
<div class="card" style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: #f59e0b;">
    <div style="display: flex; gap: 14px; align-items: flex-start;">
        <span style="font-size: 28px;">⚠️</span>
        <div>
            <div style="font-weight: 600; color: #b45309; margin-bottom: 8px;">关于 .xls 格式（Excel 97-2003）</div>
            <div style="color: #92400e; font-size: 14px; line-height: 1.8;">
                如果你的文件是 <strong>.xls 格式</strong>，请先转换为新格式：<br>
                1. 在 Excel 中打开 .xls 文件<br>
                2. 点击 <strong>文件 → 另存为</strong><br>
                3. 选择 <strong>"Excel 工作簿 (*.xlsx)"</strong> 或 <strong>"CSV UTF-8"</strong><br>
                4. 保存后重新上传
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <span class="card-title">上传文件</span>
        <a href="{{ route('patients.template') }}" class="btn btn-outline btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7 10 12 15 17 10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
            下载导入模板 (Excel)
        </a>
    </div>

    <form action="{{ route('patients.import.store') }}" method="POST" enctype="multipart/form-data" id="importForm">
        @csrf
        
        <div class="file-upload" id="dropZone">
            <svg class="file-upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="17 8 12 3 7 8"/>
                <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
            <div class="file-upload-text">点击或拖拽文件到此处上传</div>
            <div class="file-upload-hint">支持 .xlsx 和 .csv 格式，最大 10MB</div>
            <input type="file" name="file" id="fileInput" accept=".xlsx,.csv" required>
        </div>

        <div id="fileInfo" style="display: none; margin-top: 20px; padding: 16px; background: var(--color-bg-secondary); border-radius: var(--radius-sm); border: 1px solid var(--color-border);">
            <div style="display: flex; align-items: center; gap: 12px;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24" style="color: var(--color-success);">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                    <polyline points="14 2 14 8 20 8"/>
                    <line x1="16" y1="13" x2="8" y2="13"/>
                    <line x1="16" y1="17" x2="8" y2="17"/>
                    <polyline points="10 9 9 9 8 9"/>
                </svg>
                <div>
                    <div id="fileName" style="font-weight: 500;"></div>
                    <div id="fileSize" style="font-size: 13px; color: var(--color-text-muted);"></div>
                </div>
                <button type="button" id="removeFile" style="margin-left: auto; background: none; border: none; cursor: pointer; color: var(--color-text-muted);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
        </div>

        <div style="margin-top: 24px;">
            <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                    <polyline points="17 8 12 3 7 8"/>
                    <line x1="12" y1="3" x2="12" y2="15"/>
                </svg>
                开始导入
            </button>
        </div>
    </form>
</div>

<!-- 导入说明 -->
<div class="card">
    <div class="card-header">
        <span class="card-title">📋 导入说明</span>
    </div>
    
    <div style="line-height: 1.8;">
        <h4 style="margin-bottom: 12px; color: var(--color-text);">文件格式要求</h4>
        <p style="color: var(--color-text-secondary); margin-bottom: 16px;">
            Excel 或 CSV 文件需按以下列顺序排列：
        </p>
        
        <div class="table-container" style="margin-bottom: 24px;">
            <table>
                <thead>
                    <tr>
                        <th>列序号</th>
                        <th>字段名称</th>
                        <th>说明</th>
                        <th>必填</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>姓名</td>
                        <td>患者姓名</td>
                        <td><span class="badge badge-danger">是</span></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>性别</td>
                        <td>男/女</td>
                        <td><span class="badge badge-danger">是</span></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>年龄</td>
                        <td>数字</td>
                        <td><span class="badge badge-danger">是</span></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>出院诊断</td>
                        <td>脑卒中、心肌梗塞、慢性肾脏病 等</td>
                        <td><span class="badge badge-danger">是</span></td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>转诊时间</td>
                        <td>支持格式：2025.12.01、2025-12-01、2025/12/01</td>
                        <td><span class="badge badge-danger">是</span></td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>户籍地址</td>
                        <td>详细地址</td>
                        <td><span class="badge badge-info">否</span></td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>联系方式</td>
                        <td>电话号码</td>
                        <td><span class="badge badge-info">否</span></td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>备注</td>
                        <td>其他备注信息</td>
                        <td><span class="badge badge-info">否</span></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h4 style="margin-bottom: 12px; color: var(--color-text);">随访时间规则</h4>
        <div style="display: grid; gap: 12px; margin-bottom: 24px;">
            <div style="padding: 16px; background: var(--color-bg-secondary); border-radius: var(--radius-sm); border-left: 4px solid var(--color-primary);">
                <div style="font-weight: 600; margin-bottom: 4px;">🧠 脑卒中 / 心肌梗塞</div>
                <div style="color: var(--color-text-secondary);">
                    第1次: 起病后 <strong>1个月</strong> · 
                    第2次: 起病后 <strong>3个月</strong> · 
                    第3次: 起病后 <strong>6个月</strong> · 
                    第4次: 起病后 <strong>12个月</strong>
                </div>
            </div>
            <div style="padding: 16px; background: var(--color-bg-secondary); border-radius: var(--radius-sm); border-left: 4px solid var(--color-warning);">
                <div style="font-weight: 600; margin-bottom: 4px;">🫘 慢性肾脏病</div>
                <div style="color: var(--color-text-secondary);">
                    第1次: 起病后 <strong>1个月</strong> · 
                    第2次: 起病后 <strong>2个月</strong> · 
                    第3次: 起病后 <strong>3个月</strong> · 
                    第4次: 起病后 <strong>6个月</strong>
                </div>
            </div>
        </div>

        <div style="padding: 16px; background: rgba(29, 155, 240, 0.1); border-radius: var(--radius-sm);">
            <div style="display: flex; gap: 12px; align-items: flex-start;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" style="color: var(--color-primary); flex-shrink: 0; margin-top: 2px;">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="12" y1="16" x2="12" y2="12"/>
                    <line x1="12" y1="8" x2="12.01" y2="8"/>
                </svg>
                <div style="color: var(--color-text-secondary); font-size: 14px;">
                    <strong style="color: var(--color-text);">提示：</strong>系统会根据出院诊断自动判断随访时间规则。
                    如果诊断信息中包含"肾"字，将按慢性肾脏病规则处理；
                    否则按脑卒中/心肌梗塞规则处理。
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const removeFile = document.getElementById('removeFile');
    const submitBtn = document.getElementById('submitBtn');

    // 点击上传区域触发文件选择
    dropZone.addEventListener('click', () => fileInput.click());

    // 拖拽事件
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            updateFileInfo(files[0]);
        }
    });

    // 文件选择变化
    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            updateFileInfo(this.files[0]);
        }
    });

    // 更新文件信息显示
    function updateFileInfo(file) {
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        fileInfo.style.display = 'block';
        dropZone.style.display = 'none';
        submitBtn.disabled = false;
    }

    // 格式化文件大小
    function formatFileSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    }

    // 移除文件
    removeFile.addEventListener('click', () => {
        fileInput.value = '';
        fileInfo.style.display = 'none';
        dropZone.style.display = 'block';
        submitBtn.disabled = true;
    });
});
</script>
@endsection