@extends('app')

@section('head')
<style>
  .settings__main { width: 100% !important; }
  .uploading-indicator { display: none; gap: 8px; align-items: center; color: #666; }
  .uploading-indicator.active { display: inline-flex; }
  .settings, .settings__inner, .settings__main, .imports-management {
    overflow: visible !important;
  }
  #imports-list{
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  #imports-list .table-responsive{
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100%;
  }
  #imports-list table{
    width: 100%;
    border-collapse: collapse;
  }
  #imports-list thead th{
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 1;
  }
  /* Минимальная ширина первого столбца таблицы импортов */
  #imports-list table thead th:first-child,
  #imports-list table tbody td:first-child {
    min-width: 200px;
  }
  /* Стили для модального окна загрузки прайс-листа */
  #uploadModal {
    display: none !important;
    visibility: hidden !important;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #uploadModal[style*="display: flex"],
  #uploadModal[style*="display:flex"] {
    display: flex !important;
    visibility: visible !important;
  }
  body.modal-open {
    overflow: hidden;
  }
  #uploadModal .modal-dialog {
    position: relative;
    margin: 5% auto;
    padding: 0;
    width: 90%;
    max-width: 500px;
    background: white;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: max-content;
    max-height: 90vh;
    overflow: hidden;
  }
  #uploadModal .modal-header {
    position: relative;
    padding: 20px 20px 15px 20px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }
  #uploadModal .close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s;
  }
  #uploadModal .close:hover {
    color: #000;
  }
  #uploadModal h3 {
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    flex: 1;
    word-wrap: break-word;
    min-width: 0;
  }
  #uploadModal .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  #uploadModal .modal-body form {
    width: 100%;
    margin: 0;
  }
  #uploadModal label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    word-wrap: break-word;
  }
  #uploadModal input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
  }
  #uploadModal .template-section {
    margin-bottom: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
  }
  #uploadModal .template-section p {
    margin: 0 0 10px 0;
    font-weight: bold;
    word-wrap: break-word;
  }
  #uploadModal .template-section .btn-main {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    height: max-content;
    white-space: nowrap;
  }
  #uploadModal .template-section small {
    display: block;
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #666;
    word-wrap: break-word;
  }
  #uploadModal .modal-footer {
    padding: 15px 20px 20px 20px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    flex-shrink: 0;
  }
  #uploadModal .form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 100%;
  }
  #uploadModal .form-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    min-width: 80px;
  }
  #uploadModal .form-actions button[type="button"] {
    background: #6c757d;
    color: white;
  }
  #uploadModal .form-actions button[type="submit"] {
    background: #217b00;
    color: white;
  }
  #uploadModal .form-actions button:hover {
    opacity: 0.9;
  }
  /* Мобильная версия модального окна */
  @media screen and (max-width: 768px){
    #imports-list{
      max-height: calc(100vh - 200px);
    }
    #uploadModal {
      padding: 0 !important;
      display: flex !important;
      align-items: flex-start;
      justify-content: center;
      width: 100% !important;
      max-width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
    #uploadModal .modal-dialog {
      margin: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      max-height: 100vh !important;
      border-radius: 0 !important;
      display: flex !important;
      flex-direction: column;
      position: relative !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
    }
    #uploadModal .modal-header {
      padding: 15px 15px 12px 15px;
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }
    #uploadModal .modal-header h3 {
      font-size: 18px;
      margin: 0;
      padding-right: 10px;
      flex: 1;
      min-width: 0;
    }
    #uploadModal .close {
      font-size: 24px;
      width: 28px;
      height: 28px;
      flex-shrink: 0;
    }
    #uploadModal .modal-body {
      padding: 15px;
      width: 100%;
      box-sizing: border-box;
    }
    #uploadModal label {
      font-size: 14px;
    }
    #uploadModal input[type="file"] {
      font-size: 14px;
      padding: 10px;
    }
    #uploadModal .template-section {
      padding: 12px;
    }
    #uploadModal .template-section p {
      font-size: 14px;
      margin-bottom: 8px;
    }
    #uploadModal .template-section .btn-main {
      width: 100%;
      text-align: center;
      padding: 10px 16px;
      font-size: 14px;
    }
    #uploadModal .template-section small {
      font-size: 11px;
      margin-top: 8px;
    }
    #uploadModal .modal-footer {
      padding: 12px 15px 15px 15px;
      width: 100%;
      box-sizing: border-box;
    }
    #uploadModal .form-actions {
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }
    #uploadModal .form-actions button {
      width: 100%;
      padding: 12px 20px;
      font-size: 16px;
    }
    #uploadModal .form-actions button[type="button"] {
      order: -1;
    }
    #uploadModal .form-actions button[type="submit"] {
      order: 0;
    }
    /* Исправление для заголовка на мобильных */
    .section-header {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 15px !important;
    }
    .section-header h2 {
      width: 100%;
    }
    .section-header > div {
      width: 100%;
      justify-content: flex-start !important;
    }
    #upload-price-btn {
      width: 100%;
      justify-content: center;
    }
  }
  @media (max-width: 480px){
    #uploadModal .modal-header {
      padding: 12px 12px 10px 12px;
    }
    #uploadModal .modal-header h3 {
      font-size: 16px;
    }
    #uploadModal .close {
      font-size: 22px;
      width: 26px;
      height: 26px;
    }
    #uploadModal .modal-body {
      padding: 12px;
    }
    #uploadModal .modal-footer {
      padding: 10px 12px 12px 12px;
    }
  }
  /* Стили для модального окна предварительного просмотра */
  #preview-modal {
    display: none !important;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
  }
  #preview-modal[style*="display: flex"],
  #preview-modal[style*="display:flex"],
  #preview-modal[style*="display: block"],
  #preview-modal[style*="display:block"] {
    display: flex !important;
    visibility: visible !important;
  }
  #preview-modal .preview-modal-dialog {
    position: relative;
    margin: 2% auto;
    padding: 20px;
    width: 95%;
    max-width: 1200px;
    background: white;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: max-content;
    max-height: 90vh;
    overflow: hidden;
  }
  #preview-modal .preview-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  #preview-modal .form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 100%;
  }
  #preview-modal .form-actions #cancel-preview {
    order: 1;
  }
  #preview-modal .form-actions #confirm-import {
    order: 2;
  }
  #preview-modal .form-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    min-width: 80px;
  }
  #preview-modal .form-actions button#cancel-preview {
    background: #6c757d;
    color: white;
  }
  #preview-modal .form-actions button#confirm-import {
    background: #217b00;
    color: white;
  }
  #preview-modal .form-actions button:hover {
    opacity: 0.9;
  }
  #preview-modal .close {
      font-size: 22px;
      width: 26px;
      height: 26px;
      background-color: transparent;
      margin-top: -17px;
    }
  /* Мобильная версия модального окна предварительного просмотра */
  @media screen and (max-width: 768px){
    #preview-modal {
      padding: 0 !important;
      display: flex !important;
      align-items: flex-start;
      justify-content: center;
      width: 100% !important;
      max-width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
    #preview-modal .preview-modal-dialog {
      margin: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      max-height: 100vh !important;
      border-radius: 0 !important;
      display: flex !important;
      flex-direction: column;
      position: relative !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
    }
    #preview-modal .modal-header {
      padding: 15px 15px 12px 15px;
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }
    #preview-modal .modal-header h3 {
      font-size: 18px;
      margin: 0;
      padding-right: 10px;
      flex: 1;
      min-width: 0;
    }
    #preview-modal .close {
      font-size: 24px;
      width: 28px;
      height: 28px;
      flex-shrink: 0;
    }
    #preview-modal .preview-modal-body {
      padding: 15px;
      width: 100%;
      box-sizing: border-box;
    }
    #preview-modal .modal-footer {
      padding: 12px 15px 15px 15px;
      width: 100%;
      box-sizing: border-box;
    }
    #preview-modal .form-actions {
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }
    #preview-modal .form-actions button {
      width: 100%;
      padding: 12px 20px;
      font-size: 16px;
    }
    #preview-modal .form-actions button#cancel-preview {
      order: -1;
    }
    #preview-modal .form-actions button#confirm-import {
      order: 0;
    }
  }
  @media screen and (max-width: 480px){
    #preview-modal .modal-header {
      padding: 12px 12px 10px 12px;
    }
    #preview-modal .modal-header h3 {
      font-size: 16px;
    }
    #preview-modal .close {
      font-size: 22px;
      width: 26px;
      height: 26px;
    }
    #preview-modal .preview-modal-body {
      padding: 12px;
    }
    #preview-modal .modal-footer {
      padding: 10px 12px 12px 12px;
    }
  }
</style>
@endsection

@section('content')
<main>
    <section class="profile">
        <div class="container">
            {{-- Используем единый компонент шапки профиля --}}
            <x-profile-header :user="$user" />
        </div>
    </section>

    <section class="settings">
        <div class="container">
            <div class="settings__inner">
                <button class="settings-menu__btn">Настройки</button>
                {{-- Используем единый компонент настроек профиля --}}
                <x-profile-settings :user="$user" />

                <div class="settings__main">
                    <div class="imports-management">
                        <div class="section-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
                            <h2 class="settings-title" style="margin: 0;">История импортов</h2>
                            <div style="display:flex; align-items:center; gap:12px;">
                                <button id="upload-price-btn" class="btn-main" type="button" style="height: max-content;">
                                    <i class="fa fa-upload"></i>
                                    Загрузить прайс-лист
                                </button>
                                <span id="uploading-indicator" class="uploading-indicator">
                                    <i class="fa fa-spinner fa-spin"></i>
                                    <span>Загрузка...</span>
                                </span>
                            </div>
                        </div>

                        <div id="imports-list" style="background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); min-height: 200px;">
                            <div style="text-align: center; padding: 50px;">
                                <i class="fa fa-spinner fa-spin" style="font-size: 24px; color: #666;"></i>
                                <p style="margin-top: 10px; color: #666;">Загружаем историю импортов...</p>
                            </div>
                        </div>

                        <div id="imports-pagination" style="margin-top: 20px; text-align: center;">
                            <!-- Pagination будет загружена через AJAX -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Upload Modal (как на странице профиля) -->
    <div class="modal" id="uploadModal" style="display: none !important; visibility: hidden !important;">
        <div class="modal-dialog">
            <div class="modal-header">
                <h3>Загрузить прайс-лист</h3>
                <button type="button" class="close" id="close-upload-modal" aria-label="Закрыть">&times;</button>
            </div>
            <div class="modal-body">
                <form id="upload-form" enctype="multipart/form-data">
                    @csrf
                    <div style="margin-bottom: 15px;">
                        <label>Выберите файл (Excel/CSV):</label>
                        <input type="file" name="import_file" accept=".xlsx,.xls,.csv,.txt" required>
                    </div>

                    <div class="template-section">
                        <p>📥 Нужен шаблон?</p>
                        <a href="{{ route('supplier.template.download') }}" class="btn-main">
                            <i class="fa fa-download"></i>
                            Скачать шаблон Excel
                        </a>
                        <small>
                            Скачайте шаблон с примерами данных и правильными заголовками колонок
                        </small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div class="form-actions">
                    <button type="button" id="cancel-upload">Отмена</button>
                    <button type="submit" form="upload-form">Далее</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Preview Modal (как на странице профиля) -->
    <div class="modal" id="preview-modal" style="display: none !important; visibility: hidden !important;">
        <div class="modal-dialog preview-modal-dialog">
            <div class="modal-header">
                <h3>Предварительный просмотр импорта</h3>
                <button type="button" class="close" id="close-preview" aria-label="Закрыть">&times;</button>
            </div>
            <div class="modal-body preview-modal-body">
                <div id="preview-content">
                    <!-- Контент будет загружен динамически при выборе файла -->
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-actions">
                    <button type="button" id="cancel-preview">Закрыть</button>
                    <button type="button" id="confirm-import" style="display: none;">Импортировать</button>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentPage = 1;

    // Elements
    const uploadBtn = document.getElementById('upload-price-btn');
    const uploadModal = document.getElementById('uploadModal');
    const uploadForm = document.getElementById('upload-form');
    const closeBtn = document.getElementById('close-upload-modal');
    const cancelBtn = document.getElementById('cancel-upload');

    // Убеждаемся, что модальное окно скрыто при загрузке
    if(uploadModal){
        uploadModal.style.setProperty('display', 'none', 'important');
        uploadModal.style.setProperty('visibility', 'hidden', 'important');
        // Дополнительная проверка через небольшую задержку
        setTimeout(function(){
            if(uploadModal && (!uploadModal.style.display || uploadModal.style.display === 'none' || uploadModal.style.display === 'flex') && !document.body.classList.contains('modal-open')){
                uploadModal.style.setProperty('display', 'none', 'important');
                uploadModal.style.setProperty('visibility', 'hidden', 'important');
            }
        }, 50);
        setTimeout(function(){
            if(uploadModal && !document.body.classList.contains('modal-open')){
                uploadModal.style.setProperty('display', 'none', 'important');
                uploadModal.style.setProperty('visibility', 'hidden', 'important');
            }
        }, 200);
    }

    // Preview modal controls - функция должна быть определена до использования
    function closePreviewModal(){
        const previewModal = document.getElementById('preview-modal');
        if(previewModal){
            previewModal.style.setProperty('display', 'none', 'important');
            previewModal.style.setProperty('visibility', 'hidden', 'important');
            document.body.classList.remove('modal-open');
        }
    }

    // Делаем функцию доступной глобально
    window.closePreviewModal = closePreviewModal;

    // Убеждаемся, что модальное окно предварительного просмотра скрыто при загрузке
    let previewModal = document.getElementById('preview-modal');
    if(previewModal){
        previewModal.style.setProperty('display', 'none', 'important');
        previewModal.style.setProperty('visibility', 'hidden', 'important');
        // Дополнительная проверка через небольшую задержку
        setTimeout(function(){
            if(previewModal && previewModal.style.display !== 'none' && !document.body.classList.contains('modal-open')){
                previewModal.style.setProperty('display', 'none', 'important');
                previewModal.style.setProperty('visibility', 'hidden', 'important');
            }
        }, 100);
    }

    // Load imports on page load
    loadImports();

    // Function to open modal
    function openUploadModal(){
        if(uploadModal){
            uploadModal.style.setProperty('display', 'flex', 'important');
            uploadModal.style.setProperty('visibility', 'visible', 'important');
            document.body.classList.add('modal-open');
        }
    }

    // Function to close modal
    function closeUploadModal(){
        if(uploadModal){
            uploadModal.style.setProperty('display', 'none', 'important');
            uploadModal.style.setProperty('visibility', 'hidden', 'important');
            document.body.classList.remove('modal-open');
        }
    }

    // Open modal
    if(uploadBtn){
        uploadBtn.addEventListener('click', function(e){
            e.preventDefault();
            e.stopPropagation();
            openUploadModal();
            return false;
        });
    }

    // Close button handler
    if(closeBtn){
        closeBtn.addEventListener('click', function(e){
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            closeUploadModal();
            return false;
        });
        // Для мобильных устройств добавляем touch события
        closeBtn.addEventListener('touchend', function(e){
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            closeUploadModal();
            return false;
        });
    }

    // Cancel button handler
    if(cancelBtn){
        cancelBtn.addEventListener('click', function(e){
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            closeUploadModal();
            return false;
        });
        // Для мобильных устройств добавляем touch события
        cancelBtn.addEventListener('touchend', function(e){
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            closeUploadModal();
            return false;
        });
    }

    // Close modal when clicking outside
    if(uploadModal){
        uploadModal.addEventListener('click', function(e){
            if(e.target === uploadModal){
                e.preventDefault();
                e.stopPropagation();
                closeUploadModal();
                return false;
            }
        });
    }

    // Prevent modal dialog from closing when clicking inside it
    if(uploadModal){
        const modalDialog = uploadModal.querySelector('.modal-dialog');
        if(modalDialog){
            modalDialog.addEventListener('click', function(e){
                // Разрешаем клики на кнопки закрытия
                if(e.target.classList.contains('close') ||
                   e.target.id === 'close-upload-modal' ||
                   e.target.id === 'cancel-upload' ||
                   e.target.closest('#close-upload-modal') ||
                   e.target.closest('#cancel-upload')){
                    return;
                }
                e.stopPropagation();
            });
        }
    }

    uploadForm.addEventListener('submit', function(e){
        e.preventDefault();
        const file = this.querySelector('input[type="file"]').files[0];
        if(!file){ alert('Выберите файл'); return; }
        showPreview(file);
    });

    function showToast(message, isSuccess = true) {
        try {
            if (window.createToast) {
                window.createToast({ message, type: isSuccess ? 'success' : 'error' });
            } else {
                alert(message);
            }
        } catch (e) { alert(message); }
    }

    function showPreview(file){
        previewModal = document.getElementById('preview-modal');
        const previewContent = document.getElementById('preview-content');
        const confirmBtn = document.getElementById('confirm-import');

        closeUploadModal();
        if(previewModal){
            previewModal.style.setProperty('display', 'flex', 'important');
            previewModal.style.setProperty('visibility', 'visible', 'important');
            document.body.classList.add('modal-open');
        }

        previewContent.innerHTML = `
            <div style="text-align: center; padding: 50px;">
                <i class="fa fa-spinner fa-spin" style="font-size: 24px; color: #666;"></i>
                <p style="margin-top: 10px; color: #666;">Анализируем файл "${file.name}"...</p>
            </div>
        `;

        const formData = new FormData();
        formData.append('import_file', file);
        formData.append('preview', 'true');

        fetch('{{ route("supplier.import") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(r=>r.json())
        .then(data=>{
            if(data.success){
                showPreviewData(data.preview);
                confirmBtn.style.display = 'inline-block';
                confirmBtn.onclick = function(){ performImport(file); };
            } else {
                previewContent.innerHTML = `<div style="text-align:center; padding:40px; color:#dc3545;"><i class=\"fa fa-exclamation-triangle\" style=\"font-size:48px; margin-bottom:10px;\"></i><h3>Ошибка анализа</h3><p>${data.message||'Не удалось проанализировать файл'}</p></div>`;
            }
        })
        .catch(err=>{
            console.error(err);
            previewContent.innerHTML = `<div style="text-align:center; padding:40px; color:#dc3545;"><i class=\"fa fa-exclamation-triangle\" style=\"font-size:48px; margin-bottom:10px;\"></i><h3>Ошибка запроса</h3><p>${err.message}</p></div>`;
        });
    }

    function showPreviewData(preview){
        const previewContent = document.getElementById('preview-content');
        previewContent.innerHTML = `
            <div style="margin-bottom: 20px;">
                <h4 style="margin-bottom: 10px;">📊 Статистика файла</h4>
                <div style=\"display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:15px; margin-bottom:20px;\">
                    <div style=\"background:#e3f2fd; padding:15px; border-radius:8px; text-align:center;\"><div style=\"font-size:24px; font-weight:bold; color:#1976d2;\">${preview.total_rows||0}</div><div style=\"color:#666;\">Всего строк</div></div>
                    <div style=\"background:#e8f5e8; padding:15px; border-radius:8px; text-align:center;\"><div style=\"font-size:24px; font-weight:bold; color:#2e7d32;\">${preview.valid_rows||0}</div><div style=\"color:#666;\">Валидных строк</div></div>
                    <div style=\"background:#fff3e0; padding:15px; border-radius:8px; text-align:center;\"><div style=\"font-size:24px; font-weight:bold; color:#f57c00;\">${preview.errors||0}</div><div style=\"color:#666;\">Ошибок</div></div>
                </div>
            </div>
            ${preview.sample_data ? `
                <div style=\"margin-bottom:20px;\">
                    <h4 style="margin-bottom: 10px;">📋 Примеры данных (первые 5 строк)</h4>
                    <div style=\"overflow-x:auto; border:1px solid #ddd; border-radius:4px;\">
                        <table style=\"width:100%; border-collapse:collapse; font-size:12px;\">
                            <thead style=\"background:#f8f9fa;\">
                                <tr>
                                    ${Object.keys(preview.sample_data[0] || {}).map(key => `<th style=\"padding:8px; border:1px solid #ddd; white-space:nowrap;\">${key}</th>`).join('')}
                                </tr>
                            </thead>
                            <tbody>
                                ${(preview.sample_data || []).slice(0,5).map(row => `
                                    <tr>
                                        ${Object.values(row).map(val => `<td style=\"padding:8px; border:1px solid #ddd; white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis;\">${val || '-'}</td>`).join('')}
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                </div>
            ` : ''}
            ${preview.errors_list && preview.errors_list.length ? `
                <div style=\"margin-bottom:20px;\">
                    <h4>⚠️ Найденные ошибки</h4>
                    <div style=\"background:#fff5f5; border:1px solid #fed7d7; border-radius:4px; padding:15px;\">
                        <ul style=\"margin:0; padding-left:20px;\">
                            ${preview.errors_list.slice(0,10).map(e => `<li style=\"margin-bottom:5px; color:#c53030;\">${e}</li>`).join('')}
                            ${preview.errors_list.length > 10 ? `<li style=\"color:#666;\">... и еще ${preview.errors_list.length - 10} ошибок</li>` : ''}
                        </ul>
                    </div>
                </div>
            ` : ''}
        `;
    }

    // Функция для отслеживания статуса импорта через polling
    function startImportStatusPolling(importId, loadingDiv, previewModal) {
        let pollCount = 0;
        const maxPolls = 1800; // Максимум 60 минут (1800 * 2 секунды = 3600 секунд)
        const pollInterval = 2000; // Проверяем каждые 2 секунды
        let isPollingStopped = false;
        const previewContent = document.getElementById('preview-content');

        const pollStatus = () => {
            // Если polling остановлен, не продолжаем
            if (isPollingStopped) {
                return;
            }

            pollCount++;

            // Если превышен лимит попыток, переходим на более редкие проверки, но не останавливаемся
            let currentInterval = pollInterval;
            if (pollCount > maxPolls) {
                // После 60 минут проверяем каждые 10 секунд, но продолжаем проверять
                currentInterval = 10000;
                if (pollCount === maxPolls + 1) {
                    // Показываем сообщение только один раз
                    const progressElement = document.getElementById('import-progress');
                    if (progressElement) {
                        progressElement.innerHTML = '<span style="color: #856404;">Импорт продолжается в фоне. Проверяем статус реже...</span>';
                    }
                }
            }

            const statusUrl = '{{ route("supplier.import.status", ["importId" => ":id"]) }}'.replace(':id', importId);
            fetch(statusUrl, {
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.import) {
                    const importData = data.import;
                    const progressElement = document.getElementById('import-progress');

                    // Обновляем прогресс
                    if (progressElement && importData.total_rows > 0) {
                        const percent = Math.round((importData.processed_rows / importData.total_rows) * 100);
                        progressElement.textContent = `Обработано: ${importData.processed_rows} из ${importData.total_rows} (${percent}%)`;
                    } else if (previewContent && importData.total_rows > 0 && importData.status !== 'completed' && importData.status !== 'failed') {
                        // Если progressElement не найден, обновляем preview-content
                        const percent = Math.round((importData.processed_rows / importData.total_rows) * 100);
                        previewContent.innerHTML = `
                            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; padding: 40px 20px; text-align: center;">
                                <i class="fa fa-spinner fa-spin" style="font-size: 32px; color: #666; margin-bottom: 15px;"></i>
                                <p style="margin: 0; color: #666; font-weight: 500; font-size: 16px;">Импортируем прайс-лист...</p>
                                <p id="import-progress" style="margin: 10px 0 0 0; color: #666; font-size: 13px;">Обработано: ${importData.processed_rows} из ${importData.total_rows} (${percent}%)</p>
                            </div>
                        `;
                    }

                    // Проверяем статус импорта
                    if (importData.status === 'completed') {
                        // Останавливаем polling
                        isPollingStopped = true;

                        // Проверяем, открыто ли модальное окно
                        const isModalOpen = previewModal &&
                            previewModal.style.display !== 'none' &&
                            previewModal.style.visibility !== 'hidden' &&
                            (previewModal.style.display === 'flex' || previewModal.style.display === 'block' ||
                             window.getComputedStyle(previewModal).display !== 'none');

                        if (isModalOpen && previewContent) {
                            // Импорт завершен успешно - показываем сообщение в модальном окне по центру
                            previewContent.innerHTML = `
                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; padding: 40px 20px; text-align: center;">
                                    <i class="fa fa-check-circle" style="font-size: 48px; color: #28a745; margin-bottom: 15px;"></i>
                                    <p style="margin: 0; color: #28a745; font-weight: 600; font-size: 18px;">Прайс успешно загружен!</p>
                                    <p style="margin: 10px 0 0 0; color: #666; font-size: 14px;">Обработано строк: ${importData.processed_rows}</p>
                                    <div style="margin-top: 15px; padding: 15px; background: #e8f5e8; border-radius: 8px; font-size: 13px; max-width: 400px;">
                                        <strong>Статистика:</strong><br>
                                        Обработано: ${importData.processed_rows}<br>
                                        Создано: ${importData.created_count || 0}<br>
                                        Обновлено: ${importData.updated_count || 0}
                                        ${importData.error_count > 0 ? `<br>Ошибок: ${importData.error_count}` : ''}
                                    </div>
                                </div>
                            `;

                            // Автоматически закрываем модальное окно через 3 секунды
                            setTimeout(() => {
                                closePreviewModal();
                                loadImports(1); // Обновить историю
                                // Показываем toast-уведомление о завершении
                                showToast('Прайс успешно загружен! Обработано строк: ' + importData.processed_rows, true);
                            }, 3000);
                        } else {
                            // Окно уже закрыто - показываем только toast-уведомление
                            showToast('Прайс успешно загружен! Обработано строк: ' + importData.processed_rows, true);
                            loadImports(1); // Обновить историю
                        }
                    } else if (importData.status === 'failed') {
                        // Останавливаем polling
                        isPollingStopped = true;

                        // Проверяем, открыто ли модальное окно
                        const isModalOpen = previewModal &&
                            previewModal.style.display !== 'none' &&
                            previewModal.style.visibility !== 'hidden' &&
                            (previewModal.style.display === 'flex' || previewModal.style.display === 'block' ||
                             window.getComputedStyle(previewModal).display !== 'none');

                        if (isModalOpen && previewContent) {
                            // Импорт завершился с ошибкой - показываем сообщение в модальном окне по центру
                            previewContent.innerHTML = `
                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; padding: 40px 20px; text-align: center;">
                                    <i class="fa fa-exclamation-triangle" style="font-size: 48px; color: #dc3545; margin-bottom: 15px;"></i>
                                    <p style="margin: 0; color: #dc3545; font-weight: 600; font-size: 18px;">Импорт завершился с ошибкой</p>
                                    <p style="margin: 10px 0 0 0; color: #666; font-size: 14px; max-width: 500px;">Проверьте детали в разделе "Импорты"</p>
                                </div>
                            `;
                        } else {
                            // Окно уже закрыто - показываем только toast-уведомление
                            showToast('Импорт завершился с ошибкой. Проверьте детали в разделе "Импорты"', false);
                            loadImports(1); // Обновить историю
                        }
                    } else {
                        // Импорт все еще выполняется - продолжаем polling
                        setTimeout(pollStatus, currentInterval);
                    }
                } else {
                    // Ошибка при получении статуса - продолжаем polling
                    setTimeout(pollStatus, currentInterval);
                }
            })
            .catch(error => {
                console.error('Ошибка при проверке статуса импорта:', error);
                // При ошибке продолжаем polling
                setTimeout(pollStatus, currentInterval);
            });
        };

        // Начинаем polling через небольшую задержку
        setTimeout(pollStatus, pollInterval);
    }

    function performImport(file){
        const formData = new FormData();
        formData.append('import_file', file);
        const confirmBtn = document.getElementById('confirm-import');
        previewModal = document.getElementById('preview-modal');
        const previewContent = document.getElementById('preview-content');

        // Скрываем кнопку импорта
        confirmBtn.style.display = 'none';

        // Очищаем содержимое preview-content и показываем прелоадер по центру
        previewContent.innerHTML = '';

        // Создаем прелоадер
        const loadingDiv = document.createElement('div');
        loadingDiv.id = 'import-loading';
        loadingDiv.style.cssText = 'display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; padding: 40px 20px; text-align: center;';
        loadingDiv.innerHTML = `
            <i class="fa fa-spinner fa-spin" style="font-size: 32px; color: #666; margin-bottom: 15px;"></i>
            <p style="margin: 0; color: #666; font-weight: 500; font-size: 16px;">Импортируем прайс-лист...</p>
            <p style="margin: 10px 0 0 0; color: #999; font-size: 14px;">Можно закрыть окно, импорт продолжится в фоне</p>
        `;

        // Вставляем прелоадер в modal-body по центру
        previewContent.appendChild(loadingDiv);

        fetch('{{ route("supplier.import") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(r=>r.json())
        .then(data=>{
            if(data.success){
                // Показываем успешное сообщение
                const isAsync = data.message.includes('фоне');

                // Если импорт запущен в фоне и есть import_id, начинаем отслеживание статуса
                if (isAsync && data.import_id) {
                    // Показываем сообщение о запуске
                    let countdown = 5;
                    loadingDiv.innerHTML = `
                        <i class="fa fa-check-circle" style="font-size: 48px; color: #28a745; margin-bottom: 15px;"></i>
                        <p style="margin: 0; color: #28a745; font-weight: 600; font-size: 18px;">Загрузка прайса началась!</p>
                        <p style="margin: 10px 0 0 0; color: #666; font-size: 14px; max-width: 500px;">Импорт запущен в фоновом режиме. Вы можете закрыть это окно вручную или оно закроется автоматически через <span id="countdown-timer" style="font-weight: 600; color: #28a745;">${countdown}</span> секунд.</p>
                        <p id="import-progress" style="margin: 15px 0 0 0; color: #666; font-size: 13px;"></p>
                    `;

                    // Запускаем таймер обратного отсчета
                    const countdownInterval = setInterval(() => {
                        countdown--;
                        const timerElement = document.getElementById('countdown-timer');
                        if (timerElement) {
                            timerElement.textContent = countdown;
                        }
                        if (countdown <= 0) {
                            clearInterval(countdownInterval);
                        }
                    }, 1000);

                    // Запускаем polling для отслеживания статуса
                    startImportStatusPolling(data.import_id, loadingDiv, previewModal);

                    // Автоматически закрываем окно через 5 секунд
                    setTimeout(() => {
                        clearInterval(countdownInterval);
                        closePreviewModal();
                        // Показываем toast-уведомление о том, что загрузка началась
                        showToast('Загрузка прайса началась. Импорт продолжается в фоновом режиме.', true);
                    }, 5000);
                } else {
                    // Синхронный импорт - показываем результат сразу
                    loadingDiv.innerHTML = `
                        <i class="fa fa-check-circle" style="font-size: 48px; color: #28a745; margin-bottom: 15px;"></i>
                        <p style="margin: 0; color: #28a745; font-weight: 600; font-size: 18px;">Импорт завершен успешно!</p>
                        <p style="margin: 10px 0 0 0; color: #666; font-size: 14px;">${data.message || 'Импорт завершен'}</p>
                        ${data.stats ? `
                            <div style="margin-top: 15px; padding: 15px; background: #e8f5e8; border-radius: 8px; font-size: 13px; max-width: 400px;">
                                <strong>Статистика:</strong><br>
                                Обработано: ${data.stats.processed_rows}<br>
                                Создано: ${data.stats.created_count}<br>
                                Обновлено: ${data.stats.updated_count}
                                ${data.stats.error_count > 0 ? `<br>Ошибок: ${data.stats.error_count}` : ''}
                            </div>
                        ` : ''}
                    `;

                    // Автоматически закрываем модальное окно через 3 секунды
                    setTimeout(() => {
                        closePreviewModal();
                        loadImports(1); // Обновить историю
                    }, 3000);
                }
            } else {
                // Показываем ошибку
                loadingDiv.innerHTML = `
                    <i class="fa fa-exclamation-triangle" style="font-size: 48px; color: #dc3545; margin-bottom: 15px;"></i>
                    <p style="margin: 0; color: #dc3545; font-weight: 600; font-size: 18px;">Ошибка импорта</p>
                    <p style="margin: 10px 0 0 0; color: #666; font-size: 14px; max-width: 500px;">${data.message || 'Импорт завершился с ошибками'}</p>
                `;
            }
        })
        .catch(err=>{
            console.error(err);
            // Показываем ошибку
            loadingDiv.innerHTML = `
                <i class="fa fa-exclamation-triangle" style="font-size: 48px; color: #dc3545; margin-bottom: 15px;"></i>
                <p style="margin: 0; color: #dc3545; font-weight: 600; font-size: 18px;">Ошибка импорта</p>
                <p style="margin: 10px 0 0 0; color: #666; font-size: 14px; max-width: 500px;">${err.message || 'Ошибка при импорте'}</p>
            `;
        });
    }

    const closePreviewBtn = document.getElementById('close-preview');
    const cancelPreviewBtn = document.getElementById('cancel-preview');

    if(closePreviewBtn){
        closePreviewBtn.addEventListener('click', function(e){
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            closePreviewModal();
            return false;
        });
        // Для мобильных устройств добавляем touch события
        closePreviewBtn.addEventListener('touchend', function(e){
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            closePreviewModal();
            return false;
        });
    }

    if(cancelPreviewBtn){
        cancelPreviewBtn.addEventListener('click', function(e){
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            closePreviewModal();
            return false;
        });
        // Для мобильных устройств добавляем touch события
        cancelPreviewBtn.addEventListener('touchend', function(e){
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            closePreviewModal();
            return false;
        });
    }

    // Close preview modal when clicking outside
    if(previewModal){
        previewModal.addEventListener('click', function(e){
            if(e.target === previewModal){
                e.preventDefault();
                e.stopPropagation();
                closePreviewModal();
                return false;
            }
        });

        // Prevent preview modal dialog from closing when clicking inside it
        const previewModalDialog = previewModal.querySelector('.preview-modal-dialog');
        if(previewModalDialog){
            previewModalDialog.addEventListener('click', function(e){
                // Разрешаем клики на кнопки закрытия
                if(e.target.classList.contains('close') ||
                   e.target.id === 'close-preview' ||
                   e.target.id === 'cancel-preview' ||
                   e.target.closest('#close-preview') ||
                   e.target.closest('#cancel-preview')){
                    return;
                }
                e.stopPropagation();
            });
        }
    }

    function loadImports(page = 1) {
        const params = new URLSearchParams({ page, per_page: 20 });
        fetch('{{ route("supplier.imports.api") }}?' + params, {
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('imports-list').innerHTML = data.html;
                updatePagination(data.pagination);
            } else {
                document.getElementById('imports-list').innerHTML = '<div style="text-align: center; padding: 50px; color: #dc3545;"><i class="fa fa-exclamation-triangle"></i><p>Ошибка при загрузке истории импортов: ' + data.message + '</p></div>';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('imports-list').innerHTML = '<div style="text-align: center; padding: 50px; color: #dc3545;"><i class="fa fa-exclamation-triangle"></i><p>Ошибка при загрузке истории импортов</p></div>';
        });
    }

    function updatePagination(pagination) {
        let paginationHtml = '';
        if (pagination.last_page > 1) {
            paginationHtml = '<div style="display: flex; justify-content: center; gap: 10px;">';
            for (let i = 1; i <= pagination.last_page; i++) {
                const isActive = i === pagination.current_page;
                paginationHtml += `<button onclick="loadImports(${i})" style="padding: 8px 12px; border: 1px solid #ddd; background: ${isActive ? '#217b00' : 'white'}; color: ${isActive ? 'white' : '#333'}; cursor: pointer; border-radius: 4px;">${i}</button>`;
            }
            paginationHtml += '</div>';
        }
        document.getElementById('imports-pagination').innerHTML = paginationHtml;
    }

    // Make loadImports global for pagination
    window.loadImports = loadImports;
});
</script>
@endsection