@extends('layouts.app')

@section('title', 'Импорт объектов из Excel')

@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:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.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;
}

.data-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.data-table tr:hover {
    background-color: #f5f5f5;
}
</style>

<h1>Импорт объектов из Excel</h1>

<div id="uploadSection">
    <div class="upload-area" id="uploadArea">
        <h3>Перетащите файл Excel с объектами сюда</h3>
        <p>или нажмите для выбора файла</p>
        <p>Поддерживаемые форматы: .xls, .xlsx</p>
        <input type="file" id="fileInput" accept=".xls,.xlsx" 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 id="importForm" method="POST" action="{{ route('objects.import.process') }}">
            @csrf
            <input type="hidden" name="confirm_import" value="1">
            <input type="hidden" name="import_data" id="importData">
            <button type="submit" id="confirmBtn" class="btn btn-success">
                Подтвердить импорт
            </button>
            <button type="button" id="cancelBtn" 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 objectsData = [];

const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const fileInfo = document.getElementById('fileInfo');
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) {
    const validTypes = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
    
    if (!validTypes.includes(file.type) && !file.name.endsWith('.xls') && !file.name.endsWith('.xlsx')) {
        showStatus('Ошибка: выберите файл Excel (.xls или .xlsx)', 'error');
        return;
    }
    
    currentFile = file;
    fileInfo.innerHTML = `<strong>Выбран файл:</strong> ${file.name}<br><strong>Размер:</strong> ${(file.size / 1024).toFixed(2)} KB`;
    fileInfo.classList.remove('hidden');
    processBtn.disabled = false;
    showStatus('Файл успешно загружен. Нажмите "Обработать файл" для продолжения.', 'info');
}

function processFile() {
    if (!currentFile) {
        showStatus('Ошибка: файл не выбран', 'error');
        return;
    }
    
    showStatus('Обработка файла...', 'info');
    
    const reader = new FileReader();
    
    reader.onload = function(e) {
        try {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const firstSheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[firstSheetName];
            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
            
            if (jsonData.length < 2) {
                showStatus('Ошибка: файл не содержит данных', 'error');
                return;
            }
            
            objectsData = processExcelData(jsonData);
            
            if (objectsData.length === 0) {
                showStatus('Ошибка: не удалось извлечь данные объектов', 'error');
                return;
            }
            
            showPreview(objectsData);
            showStatus(`Успешно обработано ${objectsData.length} записей.`, 'success');
            
        } catch (error) {
            showStatus('Ошибка при обработке файла: ' + error.message, 'error');
        }
    };
    
    reader.onerror = function() {
        showStatus('Ошибка чтения файла', 'error');
    };
    
    reader.readAsArrayBuffer(currentFile);
}

function processExcelData(excelData) {
    const objects = [];
    const headers = excelData[0].map(h => h ? h.toString().toLowerCase().trim() : '');
    
    const accountIndex = findColumnIndex(headers, ['№ лицевого счета', 'лицевой счет', 'account_number', 'account', 'счет']);
    const addressIndex = findColumnIndex(headers, ['адрес объекта', 'адрес', 'object_address', 'address']);
    const descriptionIndex = findColumnIndex(headers, ['описание объекта', 'описание', 'object_description', 'description']);
    const consumerIndex = findColumnIndex(headers, ['собственник', 'consumer', 'инн', 'владелец']);
    
    for (let i = 1; i < excelData.length; i++) {
        const row = excelData[i];
        if (!row || row.length === 0) continue;
        
        const object = {
            account_number: accountIndex !== -1 ? (row[accountIndex]?.toString().trim() || '') : '',
            object_address: addressIndex !== -1 ? (row[addressIndex]?.toString().trim() || '') : '',
            object_description: descriptionIndex !== -1 ? (row[descriptionIndex]?.toString().trim() || '') : '',
            consumer: consumerIndex !== -1 ? (row[consumerIndex]?.toString().trim() || '') : '',
            created_by: '{{ auth()->user()->username ?? "system" }}'
        };
        
        if (object.account_number || object.object_address) {
            objects.push(object);
        }
    }
    
    return objects;
}

function findColumnIndex(headers, possibleNames) {
    for (const name of possibleNames) {
        const index = headers.indexOf(name);
        if (index !== -1) return index;
        for (let i = 0; i < headers.length; i++) {
            if (headers[i] && headers[i].includes(name)) return i;
        }
    }
    return -1;
}

function showPreview(objects) {
    let tableHTML = `
        <div class="table-responsive">
            <table class="data-table">
                <thead><tr>
                    <th>№ счета</th>
                    <th>Адрес объекта</th>
                    <th>Описание</th>
                    <th>Собственник (ИНН)</th>
                </tr></thead><tbody>`;
    
    objects.forEach(obj => {
        tableHTML += `<tr>
            <td>${escapeHtml(obj.account_number)}</td>
            <td>${escapeHtml(obj.object_address)}</td>
            <td>${escapeHtml(obj.object_description)}</td>
            <td>${escapeHtml(obj.consumer)}</td>
        </tr>`;
    });
    
    tableHTML += `</tbody></table></div><p><strong>Всего записей:</strong> ${objects.length}</p>`;
    
    previewTableContainer.innerHTML = tableHTML;
    uploadSection.classList.add('hidden');
    previewSection.classList.remove('hidden');
    importDataField.value = JSON.stringify(objects);
}

function cancelImport() {
    resetForm();
    showStatus('Импорт отменен', 'info');
}

function resetForm() {
    currentFile = null;
    objectsData = [];
    fileInput.value = '';
    fileInfo.classList.add('hidden');
    processBtn.disabled = true;
    previewSection.classList.add('hidden');
    uploadSection.classList.remove('hidden');
    statusMessage.classList.add('hidden');
}

function showStatus(message, type) {
    statusMessage.textContent = message;
    statusMessage.className = 'status-message';
    if (type === 'success') statusMessage.classList.add('status-success');
    else if (type === 'error') statusMessage.classList.add('status-error');
    else if (type === 'info') statusMessage.classList.add('status-info');
    statusMessage.classList.remove('hidden');
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>

{{-- Последние добавленные объекты --}}
<h2 class="mt-5">Последние добавленные объекты</h2>
<div class="table-responsive">
    <table class="table table-bordered table-striped">
        <thead class="table-light">
            <tr>
                <th>ID</th>
                <th>Адрес</th>
                <th>№ счета</th>
                <th>Описание</th>
            </tr>
        </thead>
        <tbody>
            @foreach($recentObjects as $object)
            <tr>
                <td>{{ $object->id }}</td>
                <td><a href="{{ route('objects.edit', $object->id) }}">{{ $object->object_address }}</a></td>
                <td>{{ $object->account_number ?? '-' }}</td>
                <td>{{ Str::limit($object->object_description, 50) ?? '-' }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection