@extends('layouts.app')

@section('title', 'Импорт платежей')

@section('content')
<style>
.upload-area {
    border: 3px dashed #ccc;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    margin: 20px 0;
    transition: all 0.3s;
    background-color: #fafafa;
    cursor: pointer;
}
.upload-area:hover, .upload-area.dragover {
    border-color: #28a745;
    background-color: #f0fff0;
}
.hidden { display: none; }
.status-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    text-align: center;
}
.status-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.status-info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.preview-section { margin-top: 30px; }
.actions { margin-top: 20px; text-align: center; }
.btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 5px; }
.btn-success { background-color: #28a745; color: white; }
.btn-danger { background-color: #dc3545; color: white; }
.btn-secondary { background-color: #6c757d; color: white; }
.table-responsive { overflow-x: auto; margin: 20px 0; max-height: 500px; overflow-y: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 8px 12px; border: 1px solid #ddd; text-align: left; font-size: 14px; }
.data-table th { background-color: #f2f2f2; font-weight: bold; position: sticky; top: 0; }
</style>

<h1>Импорт платежей из Excel/CSV</h1>

<div class="alert alert-info">
    <strong>📌 Инструкция:</strong>
    <ul class="mb-0 mt-2">
        <li>Поддерживаемые форматы: <strong>.xls, .xlsx, .csv</strong></li>
        <li><strong>Обязательные поля:</strong> account_number (№ счета), amount (сумма)</li>
        <li><strong>Типы платежей:</strong> cash (наличные), bank (банк), card (карта), online (онлайн)</li>
        <li><strong>Для банкротов:</strong> платежи могут иметь приоритетное распределение</li>
    </ul>
</div>

<div class="card mb-4">
    <div class="card-header bg-light">
        <h5 class="mb-0">Пример CSV файла</h5>
    </div>
    <div class="card-body">
        <pre style="background: #f8f9fa; padding: 10px; border-radius: 5px; font-size: 12px; overflow-x: auto;">
account_number;amount;payment_date;payment_type;payment_number;description
100001;15000.50;2024-01-15;cash;ПЛ-001;Оплата за январь
100002;8500.00;2024-01-16;bank;БН-002;Частичная оплата
100003;23000.00;2024-01-17;card;КАР-003;Полное погашение
        </pre>
    </div>
</div>

<div id="uploadSection">
    <div class="upload-area" id="uploadArea">
        <h3>Перетащите файл Excel/CSV сюда</h3>
        <p>или нажмите для выбора файла</p>
        <input type="file" id="fileInput" accept=".xls,.xlsx,.csv" class="hidden">
        <button class="btn btn-success" onclick="document.getElementById('fileInput').click()">Выбрать файл</button>
    </div>
    <div id="fileInfo" class="hidden"></div>
    <div class="actions">
        <button id="processBtn" class="btn btn-success" disabled onclick="processFile()">Обработать файл</button>
    </div>
</div>

<div id="previewSection" class="preview-section hidden">
    <h2>Предпросмотр данных</h2>
    <div id="previewTableContainer"></div>
    <div class="actions">
        <form method="POST" action="{{ route('payments.import.process') }}" id="importForm">
            @csrf
            <input type="hidden" name="import_data" id="importData">
            <button type="submit" class="btn btn-success">Подтвердить импорт</button>
            <button type="button" class="btn btn-danger" onclick="cancelImport()">Отменить</button>
        </form>
    </div>
</div>
<div id="statusMessage" class="status-message hidden"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
let currentFile = null;
let importData = [];

const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const processBtn = document.getElementById('processBtn');
const uploadSection = document.getElementById('uploadSection');
const previewSection = document.getElementById('previewSection');
const previewTableContainer = document.getElementById('previewTableContainer');
const statusMessage = document.getElementById('statusMessage');
const importDataField = document.getElementById('importData');

uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); });
uploadArea.addEventListener('dragleave', () => { uploadArea.classList.remove('dragover'); });
uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
    if (e.dataTransfer.files.length > 0) handleFileSelection(e.dataTransfer.files[0]);
});
fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) handleFileSelection(e.target.files[0]);
});

function handleFileSelection(file) {
    if (!file.name.endsWith('.xls') && !file.name.endsWith('.xlsx') && !file.name.endsWith('.csv')) {
        showStatus('Ошибка: выберите файл Excel или CSV', 'error');
        return;
    }
    currentFile = file;
    document.getElementById('fileInfo').innerHTML = `<strong>Выбран файл:</strong> ${file.name}`;
    document.getElementById('fileInfo').classList.remove('hidden');
    processBtn.disabled = false;
    showStatus('Файл загружен', 'info');
}

function cleanText(text) {
    if (!text) return '';
    if (text.charCodeAt(0) === 0xFEFF) text = text.slice(1);
    return text.toString().trim();
}

function parseCSV(text) {
    const lines = text.split(/\r\n|\n/);
    if (lines.length === 0) return [];
    const delimiter = lines[0].indexOf(';') !== -1 ? ';' : ',';
    
    function parseLine(line) {
        const result = [];
        let inQuotes = false;
        let current = '';
        for (let i = 0; i < line.length; i++) {
            if (line[i] === '"') { inQuotes = !inQuotes; }
            else if (line[i] === delimiter && !inQuotes) {
                result.push(cleanText(current));
                current = '';
            } else { current += line[i]; }
        }
        result.push(cleanText(current));
        return result;
    }
    
    const headers = parseLine(lines[0]).map(h => h.toLowerCase());
    const data = [];
    for (let i = 1; i < lines.length; i++) {
        if (!lines[i].trim()) continue;
        const values = parseLine(lines[i]);
        const row = {};
        headers.forEach((h, idx) => { row[h] = values[idx] || ''; });
        data.push(row);
    }
    return data;
}

function processFile() {
    if (!currentFile) return;
    showStatus('Обработка...', 'info');
    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            let jsonData = [];
            if (currentFile.name.endsWith('.csv')) {
                jsonData = parseCSV(e.target.result);
            } else {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, { type: 'array' });
                const sheet = workbook.Sheets[workbook.SheetNames[0]];
                jsonData = XLSX.utils.sheet_to_json(sheet);
            }
            
            importData = jsonData.map(row => {
                let amount = parseFloat(cleanText(row.amount || row['сумма'] || 0));
                amount = isNaN(amount) ? 0 : amount;
                
                return {
                    account_number: cleanText(row.account_number || row['№ лицевого счета'] || row['счет'] || ''),
                    amount: amount,
                    payment_date: cleanText(row.payment_date || row['дата платежа'] || new Date().toISOString().split('T')[0]),
                    payment_type: cleanText(row.payment_type || row['тип платежа'] || 'cash'),
                    payment_number: cleanText(row.payment_number || row['номер платежа'] || ''),
                    description: cleanText(row.description || row['описание'] || '')
                };
            }).filter(item => item.account_number && item.amount > 0);
            
            if (importData.length === 0) throw new Error('Нет данных');
            
            let html = '<table class="data-table"><thead><tr><th>№ счета</th><th>Сумма</th><th>Дата</th><th>Тип</th><tr></thead><tbody>';
            importData.forEach(item => {
                html += `<tr>
                    <td>${escapeHtml(item.account_number)}</td>
                    <td class="text-end">${item.amount.toFixed(2)} ₽</td>
                    <td>${escapeHtml(item.payment_date)}</td>
                    <td>${item.payment_type == 'cash' ? 'Наличные' : (item.payment_type == 'bank' ? 'Банк' : (item.payment_type == 'card' ? 'Карта' : 'Онлайн'))}</td>
                </tr>`;
            });
            html += '</tbody></table><p>Всего: ' + importData.length + '</p>';
            
            previewTableContainer.innerHTML = html;
            uploadSection.classList.add('hidden');
            previewSection.classList.remove('hidden');
            importDataField.value = JSON.stringify(importData);
            showStatus('Готово к импорту', 'success');
        } catch(e) { showStatus('Ошибка: ' + e.message, 'error'); }
    };
    currentFile.name.endsWith('.csv') ? reader.readAsText(currentFile, 'UTF-8') : reader.readAsArrayBuffer(currentFile);
}

function cancelImport() { location.reload(); }
function showStatus(msg, type) {
    statusMessage.textContent = msg;
    statusMessage.className = 'status-message status-' + type;
    statusMessage.classList.remove('hidden');
}
function escapeHtml(text) { if (!text) return ''; return String(text).replace(/[&<>]/g, function(m) { return m === '&' ? '&amp;' : (m === '<' ? '&lt;' : (m === '>' ? '&gt;' : m)); }); }
</script>
@endsection