@if($imports->count() > 0)
    <div class="imports-table-wrapper">
        <div class="table-responsive">
            <table class="table imports-table">
                <thead>
                    <tr>
                        <th>Файл</th>
                        <th>Статус</th>
                        <th>Товаров создано</th>
                        <th>Товаров обновлено</th>
                        <th>Ошибки</th>
                        <th>Дата</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($imports as $import)
                        <tr>
                            <td>
                                <div class="import-filename">
                                    <i class="fa fa-file-excel"></i>
                                    {{ $import->filename }}
                                </div>
                                @if($import->file_size)
                                    <small class="text-muted">
                                        {{ number_format($import->file_size / 1024, 1) }} KB
                                    </small>
                                @endif
                            </td>
                            <td>
                                <span class="status-badge status-{{ $import->status }}">
                                    @switch($import->status)
                                        @case('completed')
                                            <i class="fa fa-check-circle"></i>
                                            Завершен
                                            @break
                                        @case('processing')
                                            <i class="fa fa-spinner fa-spin"></i>
                                            Обработка
                                            @break
                                        @case('failed')
                                            <i class="fa fa-times-circle"></i>
                                            Ошибка
                                            @break
                                        @case('pending')
                                            <i class="fa fa-clock"></i>
                                            Ожидание
                                            @break
                                        @default
                                            {{ ucfirst($import->status) }}
                                    @endswitch
                                </span>
                            </td>
                            <td>
                                @if($import->created_count > 0)
                                    <span class="count-badge created">
                                        <i class="fa fa-plus"></i>
                                        {{ $import->created_count }}
                                    </span>
                                @else
                                    <span class="text-muted">0</span>
                                @endif
                            </td>
                            <td>
                                @if($import->updated_count > 0)
                                    <span class="count-badge updated">
                                        <i class="fa fa-edit"></i>
                                        {{ $import->updated_count }}
                                    </span>
                                @else
                                    <span class="text-muted">0</span>
                                @endif
                            </td>
                            <td>
                                @if($import->error_count > 0)
                                    <span class="count-badge errors">
                                        <i class="fa fa-exclamation-triangle"></i>
                                        {{ $import->error_count }}
                                    </span>
                                @else
                                    <span class="text-muted">0</span>
                                @endif
                            </td>
                            <td>
                                <div class="import-date">
                                    {{ $import->created_at->format('d.m.Y H:i') }}
                                </div>
                                <small class="text-muted">
                                    {{ $import->created_at->diffForHumans() }}
                                </small>
                            </td>
                            <td>
                                <div class="action-buttons">
                                    @if($import->status === 'completed' && ($import->created_count > 0 || $import->updated_count > 0))
                                        <button class="btn btn-sm btn-info"
                                                onclick="viewImportDetails({{ $import->id }})"
                                                title="Подробности">
                                            <i class="fa fa-info-circle"></i>
                                        </button>
                                    @endif

                                    @if($import->error_count > 0)
                                        <button class="btn btn-sm btn-warning"
                                                onclick="viewImportErrors({{ $import->id }})"
                                                title="Показать ошибки">
                                            <i class="fa fa-exclamation-triangle"></i>
                                        </button>
                                    @endif

                                    @if($import->status === 'failed')
                                        <button class="btn btn-sm btn-danger"
                                                onclick="retryImport({{ $import->id }})"
                                                title="Повторить импорт">
                                            <i class="fa fa-redo"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>

                        @if($import->notes)
                            <tr class="import-notes-row">
                                <td colspan="7">
                                    <div class="import-notes">
                                        <strong>Примечания:</strong> {{ $import->notes }}
                                    </div>
                                </td>
                            </tr>
                        @endif

                        @if($import->errors && count($import->errors) > 0)
                            <tr class="import-errors-row" id="errors-{{ $import->id }}" style="display: none;">
                                <td colspan="7">
                                    <div class="import-errors">
                                        <h5>Ошибки импорта:</h5>
                                        <ul class="error-list">
                                            @foreach(array_slice($import->errors, 0, 5) as $error)
                                                <li>
                                                    @if(is_array($error))
                                                        {{ $error['message'] ?? 'Неизвестная ошибка' }}
                                                        @if(isset($error['row']))
                                                            (строка {{ $error['row'] }})
                                                        @endif
                                                    @else
                                                        {{ $error }}
                                                    @endif
                                                </li>
                                            @endforeach
                                            @if(count($import->errors) > 5)
                                                <li><em>... и еще {{ count($import->errors) - 5 }} ошибок</em></li>
                                            @endif
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    @if($imports->hasPages())
        <div class="pagination-wrapper">
            {{ $imports->appends(request()->query())->links('pagination::bootstrap-4') }}
        </div>
    @endif
@else
    <div class="empty-state">
        <div class="empty-state-icon">
            <i class="fa fa-upload"></i>
        </div>
        <h3 class="empty-state-title">История импортов пуста</h3>
        <p class="empty-state-description">
            Вы еще не загружали прайс-листы. Загрузите первый файл для начала работы с товарами.
        </p>

        <div class="empty-state-actions">
            {{-- <button class="btn btn-primary" id="upload-price-btn-imports">
                <i class="fa fa-upload"></i>
                Загрузить прайс-лист
            </button> --}}
        </div>
    </div>
@endif

<style>
.imports-table-wrapper {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.imports-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.imports-table th {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    padding: 15px 12px;
    border-bottom: 2px solid #e9ecef;
    white-space: nowrap;
}

.imports-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}

.imports-table tbody tr:hover {
    background: #f8f9fa;
}

.import-filename {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    margin-bottom: 2px;
}

.import-filename i {
    color: #28a745;
    font-size: 1.1rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge i {
    font-size: 0.9rem;
}

.status-completed {
    background: #d4edda;
    color: #155724;
}

.status-processing {
    background: #d1ecf1;
    color: #0c5460;
}

.status-failed {
    background: #f8d7da;
    color: #721c24;
}

.status-pending {
    background: #fff3cd;
    color: #856404;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.count-badge.created {
    background: #d4edda;
    color: #155724;
}

.count-badge.updated {
    background: #d1ecf1;
    color: #0c5460;
}

.count-badge.errors {
    background: #fff3cd;
    color: #856404;
}

.import-date {
    font-weight: 500;
    margin-bottom: 2px;
}

.action-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-info {
    background: #17a2b8;
    color: white;
}

.btn-warning {
    background: #ffc107;
    color: #212529;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.import-notes-row td,
.import-errors-row td {
    background: #f8f9fa;
    border-top: none;
}

.import-notes {
    padding: 10px;
    background: #e7f3ff;
    border-left: 4px solid #007bff;
    border-radius: 4px;
    font-size: 0.9rem;
}

.import-errors {
    padding: 10px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
}

.import-errors h5 {
    margin: 0 0 10px 0;
    color: #856404;
    font-size: 0.9rem;
}

.error-list {
    margin: 0;
    padding-left: 20px;
}

.error-list li {
    margin-bottom: 5px;
    font-size: 0.85rem;
    color: #721c24;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.empty-state-description {
    font-size: 1rem;
    color: #666;
    max-width: 500px;
    margin: 0 auto 30px;
    line-height: 1.5;
}

.empty-state-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.8rem;
    }

    .imports-table th,
    .imports-table td {
        padding: 10px 8px;
    }

    .action-buttons {
        flex-direction: column;
    }

    .empty-state {
        padding: 40px 15px;
    }
}
</style>

<script>
// Обработчики для действий с импортами
function viewImportDetails(importId) {
    // Здесь можно добавить модальное окно с подробностями импорта
    console.log('Viewing details for import:', importId);
    alert('Функция просмотра подробностей будет реализована в следующих версиях');
}

function viewImportErrors(importId) {
    const errorsRow = document.getElementById('errors-' + importId);
    if (errorsRow) {
        errorsRow.style.display = errorsRow.style.display === 'none' ? 'table-row' : 'none';
    }
}

function retryImport(importId) {
    if (confirm('Вы уверены, что хотите повторить импорт?')) {
        // Здесь будет логика повторного импорта
        console.log('Retrying import:', importId);
        alert('Функция повторного импорта будет реализована в следующих версиях');
    }
}

// Обработчик для кнопки загрузки в пустом состоянии
document.addEventListener('DOMContentLoaded', function() {
    const uploadBtnImports = document.getElementById('upload-price-btn-imports');
    if (uploadBtnImports) {
        uploadBtnImports.addEventListener('click', function() {
            // Вызываем тот же модал, что и основная кнопка
            const uploadModal = document.getElementById('uploadModal');
            if (uploadModal) {
                uploadModal.style.display = 'block';
            }
        });
    }
});
</script>