@extends('layouts.admin')

@section('title', 'Excel 匯入中心')

@push('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Excel 匯入</li>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/import.css') }}">
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header">
    <div class="row align-items-center">
        <div class="col-md-6">
            <h1><i class="bi bi-file-earmark-excel me-3"></i>Excel 匯入中心</h1>
        </div>
        <div class="col-md-6 text-md-end">
            <a href="{{ route('import.template') }}" class="btn btn-success btn-lg">
                <i class="bi bi-download me-2"></i>下載匯入模板
            </a>
        </div>
    </div>
</div>

<div class="row">
    <!-- Left Column: Upload Form -->
    <div class="col-lg-7 mb-4">
        <div class="card" style="border-radius: 1rem; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
            <div class="card-header" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; border: none; font-weight: 600; font-size: 1.2rem;">
                <i class="bi bi-cloud-arrow-up me-2"></i>上傳 Excel 檔案
            </div>
            <div class="card-body p-4">
                <form action="{{ route('import.excel') }}" method="POST" enctype="multipart/form-data" id="importForm">
                    @csrf
                    
                    <div class="upload-zone" id="uploadZone">
                        <div class="upload-icon">
                            <i class="bi bi-file-earmark-spreadsheet"></i>
                        </div>
                        <div class="upload-text">
                            拖放 Excel 檔案到這裡
                        </div>
                        <div class="upload-hint">
                            或點擊選擇檔案（支援 .xlsx 或 .xls）
                        </div>
                        <div class="file-name" id="fileName" style="display: none;"></div>
                        <input type="file" 
                               class="file-input" 
                               name="excel_file" 
                               id="fileInput" 
                               accept=".xlsx,.xls"
                               required>
                    </div>
                    
                    <div class="text-center mt-4">
                        <button type="submit" class="btn submit-button" id="submitBtn" disabled>
                            <i class="bi bi-upload me-2"></i>開始匯入資料
                        </button>
                    </div>
                </form>
            </div>
        </div>

        @if(session('import_skipped'))
            <div class="alert alert-warning mt-3">
                <strong>已略過的行：</strong>
                <ul class="mb-0 mt-2 small">
                    @foreach(session('import_skipped') as $skipped)
                        <li>{{ $skipped }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if(session('import_errors'))
            <div class="alert alert-danger mt-3">
                <strong>匯入錯誤：</strong>
                <ul class="mb-0 mt-2">
                    @foreach(session('import_errors') as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- System Stats -->
        <div class="row mt-4">
            <div class="col-6">
                <div class="stat-mini-card">
                    <div class="stat-mini-value">{{ \App\Models\Worker::count() }}</div>
                    <div class="stat-mini-label">
                        <i class="bi bi-people-fill me-1"></i>總工人數
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="stat-mini-card">
                    <div class="stat-mini-value">{{ \App\Models\Company::count() }}</div>
                    <div class="stat-mini-label">
                        <i class="bi bi-building me-1"></i>合作公司
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column: Instructions & Warnings -->
    <div class="col-lg-5 mb-4">
        <!-- Instructions -->
        <div class="instruction-card mb-4">
            <div class="card-header">
                <i class="bi bi-info-circle-fill me-2"></i>匯入說明
            </div>
            <div class="card-body p-0">
                <ul class="instruction-list">
                    <li>
                        <i class="bi bi-download"></i>
                        <span>系統按<strong>表頭名稱</strong>對應欄位——你原本的「勞工總覽」Excel 可直接匯入，不需改欄位順序</span>
                    </li>
                    <li>
                        <i class="bi bi-check-circle-fill"></i>
                        <span>日期支援 2024/1/30、29/7/2024 混用；「12月6號下午4點」等文字時間會原樣保留</span>
                    </li>
                    <li>
                        <i class="bi bi-check-circle-fill"></i>
                        <span>身份證號碼相同會更新既有工人（續約行可合併，空白欄位不會清掉原資料）</span>
                    </li>
                    <li>
                        <i class="bi bi-x-circle-fill text-danger"></i>
                        <span>「待聘」行自動略過；其他錯誤會整批取消並列出錯誤行</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Required Fields -->
        <div class="card mb-4" style="border-radius: 1rem; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border-left: 5px solid #667eea;">
            <div class="card-header" style="background: #f8f9ff; color: #667eea; font-weight: 600; border: none;">
                <i class="bi bi-list-check me-2"></i>模板欄位說明
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6 mb-2"><span class="badge bg-danger">公司名稱（必填）</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-danger">中文名稱（必填）</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-secondary">身份證號碼（選填）</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-primary">勞工處檔案編號</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-primary">店鋪名稱 / 地址</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-primary">英文名稱</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-primary">性別（男/女）</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-primary">職位名稱</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-primary">出生日期</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-primary">入境處檔案編碼 / 配額序號 / 合約編號</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-primary">出證／抵港／合約到期日</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-primary">合約人工 / 續約人工</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-secondary">工人月租</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-secondary">宿舍地址</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-secondary">聯絡電話</span></div>
                    <div class="col-6 mb-2"><span class="badge bg-secondary">公司聯絡人</span></div>
                </div>
            </div>
        </div>

        <!-- Warnings -->
        <div class="warning-card">
            <div class="card-header">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>重要提醒
            </div>
            <div class="card-body p-0">
                <ul class="warning-list">
                    <li>
                        <i class="bi bi-shield-exclamation"></i>
                        請確保 Excel 檔案格式正確
                    </li>
                    <li>
                        <i class="bi bi-shield-exclamation"></i>
                        資料將會覆蓋現有重複記錄
                    </li>
                    <li>
                        <i class="bi bi-shield-exclamation"></i>
                        匯入前請先備份原始資料
                    </li>
                    <li>
                        <i class="bi bi-shield-exclamation"></i>
                        建議先使用測試資料進行測試
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// File upload handling
const uploadZone = document.getElementById('uploadZone');
const fileInput = document.getElementById('fileInput');
const fileName = document.getElementById('fileName');
const submitBtn = document.getElementById('submitBtn');

// Click to select file
uploadZone.addEventListener('click', () => {
    fileInput.click();
});

// Drag and drop
uploadZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadZone.classList.add('dragover');
});

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

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

// File selection
fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        handleFileSelect(e.target.files[0]);
    }
});

function handleFileSelect(file) {
    const validTypes = [
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'application/vnd.ms-excel'
    ];
    
    if (!validTypes.includes(file.type)) {
        alert('請選擇有效的 Excel 檔案（.xlsx 或 .xls）');
        return;
    }
    
    uploadZone.classList.add('file-selected');
    fileName.style.display = 'block';
    fileName.innerHTML = `<i class="bi bi-file-earmark-check me-2"></i>已選擇: ${file.name}`;
    submitBtn.disabled = false;
}
</script>
@endpush